/* TOPWIN I.A Dashboard - Tema Premium Futurista */

:root {
    /* Paleta TOPWIN I.A - Premium */
    --primary-gold: #FFD700;
    --royal-purple: #7B2CBF;
    --electric-blue: #00D4FF;
    --neon-pink: #FF006E;
    --cyber-green: #00F5FF;
    --deep-space: #0A0A0F;
    /* Aliases/Extras usados ao longo do CSS */
    --dark-space: #0A0A0F;
    --medium-dark: #0F1224;
    --primary-green: #00FF88;
    --secondary-gold: #E6C200;
    --accent-cyan: #00E5FF;
    --light-gray: #A5A5A5;
    --dark-royal: #1A0B2E;
    --midnight-blue: #16213E;
    --silver-gray: #C0C0C0;
    --pure-white: #FFFFFF;

    /* Cores de resultado */
    --success-color: #00F5FF;
    --fail-color: #FF006E;
    --warning-color: #FFD700;

    /* Gradientes Premium */
    --gradient-crown: linear-gradient(135deg, #FFD700 0%, #FFA500 50%, #FF8C00 100%);
    --gradient-royal: linear-gradient(145deg, #7B2CBF 0%, #5A189A 50%, #3C096C 100%);
    --gradient-cyber: linear-gradient(135deg, #00D4FF 0%, #00F5FF 50%, #00FF88 100%);
    --gradient-background: linear-gradient(145deg, #0A0A0F 0%, #1A0B2E 50%, #16213E 100%);
    --gradient-premium: linear-gradient(135deg, #FFD700 0%, #7B2CBF 50%, #00D4FF 100%);
    --gradient-primary: linear-gradient(135deg, #FFD700 0%, #7B2CBF 50%, #00D4FF 100%);
    --gradient-quantum: linear-gradient(135deg, #00FF88 0%, #00D4FF 100%);
    --gradient-card: linear-gradient(145deg, #1A0B2E 0%, #16213E 100%);

    /* Sombras Premium */
    --shadow-gold: 0 0 20px rgba(255, 215, 0, 0.25);
    --shadow-purple: 0 0 30px rgba(123, 44, 191, 0.5);
    --shadow-cyber: 0 0 20px rgba(0, 212, 255, 0.4);
    --shadow-premium: 0 20px 40px rgba(255, 215, 0, 0.15);
    --shadow-neural-light: 0 4px 15px rgba(255, 215, 0, 0.1);
    --shadow-neural-medium: 0 8px 25px rgba(255, 215, 0, 0.15);
    --shadow-neural-heavy: 0 15px 35px rgba(255, 215, 0, 0.2);

    /* Espacamentos */
    --space-xs: 8px;
    --space-sm: 16px;
    --space-md: 24px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Cores de Texto e Background */
    --text-primary: #FFFFFF;
    --text-secondary: #A5A5B5;
    --bg-primary: #0A0A0F;
    --bg-secondary: #1A0B2E;
    --bg-tertiary: #16213E;

    /* Outros */
    --radius: 15px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-fast: all 0.2s ease-out;
}

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

body {
    font-family: 'Exo 2', 'Rajdhani', 'Arial', sans-serif;
    background: var(--gradient-background);
    color: var(--pure-white);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Fundo Animado Premium */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(123, 44, 191, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
    z-index: -2;
    animation: backgroundShift 20s ease-in-out infinite;
}

/* Partículas de fundo */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, rgba(255, 215, 0, 0.3), transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(0, 212, 255, 0.2), transparent),
        radial-gradient(1px 1px at 90px 40px, rgba(123, 44, 191, 0.4), transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 215, 0, 0.2), transparent);
    background-repeat: repeat;
    background-size: 150px 100px;
    z-index: -1;
    animation: particleFloat 30s linear infinite;
    opacity: 0.6;
}

/* ==================== NEURAL COMMAND CENTER ==================== */
.neural-command-center {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 90px;
    background: var(--gradient-background);
    backdrop-filter: blur(25px);
    border-bottom: 2px solid rgba(255, 215, 0, 0.4);
    z-index: 1000;
    box-shadow: var(--shadow-premium);
    overflow: visible;
}

.command-grid {
    display: grid;
    grid-template-columns: minmax(280px, 350px) auto 1fr minmax(60px, 80px);
    align-items: center;
    height: 100%;
    padding: 0 var(--space-md);
    gap: var(--space-lg);
    max-width: 100%;
    overflow: hidden;
}

/* Nyrion Matrix Section */
.nyrion-matrix-section {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    overflow: hidden;
    min-width: 0;
}

/* Binary AI Core - Logo Único */
.binary-core {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.hex-ring {
    position: absolute;
    width: 60px;
    height: 60px;
    border: 2px solid;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: hexRotate 6s linear infinite;
}

.hex-ring.outer {
    width: 45px;
    height: 45px;
    border-color: var(--primary-gold);
    opacity: 0.8;
    animation-duration: 6s;
}

.hex-ring.middle {
    width: 32px;
    height: 32px;
    border-color: var(--electric-blue);
    opacity: 0.9;
    animation-direction: reverse;
    animation-duration: 4s;
}

.hex-ring.inner {
    width: 20px;
    height: 20px;
    border-color: var(--primary-gold);
    animation-duration: 3s;
}

.binary-center {
    position: relative;
    width: 12px;
    height: 12px;
    background: var(--gradient-primary);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    box-shadow: 0 0 15px var(--primary-green);
}

.binary-pulse {
    position: absolute;
    width: 12px;
    height: 12px;
    background: var(--pure-white);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: binaryPulse 2s ease-in-out infinite;
}

.binary-particles {
    position: absolute;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary-gold);
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat 3s ease-in-out infinite;
}

.particle.p-1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.particle.p-2 {
    top: 10%;
    right: 10%;
    animation-delay: 0.5s;
}

.particle.p-3 {
    bottom: 10%;
    left: 10%;
    animation-delay: 1s;
}

.particle.p-4 {
    bottom: 10%;
    right: 10%;
    animation-delay: 1.5s;
}

.data-stream {
    position: absolute;
    width: 1px;
    height: 15px;
    background: linear-gradient(to bottom, var(--primary-green), transparent);
    animation: streamPulse 2s ease-in-out infinite;
}

.stream-1 {
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.stream-2 {
    right: -8px;
    top: 50%;
    transform: translateY(-50%) rotate(90deg);
    animation-delay: 0.5s;
}

.stream-3 {
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    animation-delay: 1s;
}

.stream-4 {
    left: -8px;
    top: 50%;
    transform: translateY(-50%) rotate(270deg);
    animation-delay: 1.5s;
}

.logo-binary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
    justify-content: center;
    height: 100%;
}

.brand-title {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.2rem;
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
}

.brand-title .accent {
    color: var(--secondary-gold);
    -webkit-text-fill-color: var(--secondary-gold);
    background: none;
}

.brand-subtitle {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.9rem;
    color: var(--light-gray);
    font-weight: 300;
    letter-spacing: 3px;
}


/* Status HUD Minimalista */
.status-hud {
    justify-self: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hud-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.connection-status {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 16px;
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.status-pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success-color);
    box-shadow: 0 0 8px var(--success-color);
    animation: statusPulse 2s ease-in-out infinite;
}

.connection-status span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--success-color);
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Quantum Controls */
.quantum-controls {
    justify-self: end;
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.user-quantum-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.quantum-avatar {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-card);
    border-radius: 50%;
    border: 2px solid var(--primary-green);
}

.avatar-ring {
    position: absolute;
    width: 50px;
    height: 50px;
    border: 1px solid var(--accent-cyan);
    border-radius: 50%;
    border-top: 1px solid transparent;
    animation: neuralRotate 3s linear infinite;
}

.quantum-avatar i {
    font-size: 1.2rem;
    color: var(--primary-gold);
}

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

.user-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--pure-white);
}

.user-role {
    font-size: 0.7rem;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.quantum-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 10px 16px;
    background: var(--gradient-card);
    color: var(--pure-white);
    border: 2px solid var(--primary-green);
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    font-size: 0.8rem;
}

.quantum-btn:hover {
    background: var(--gradient-primary);
    color: var(--dark-space);
    box-shadow: var(--shadow-quantum);
    transform: translateY(-2px);
}

.quantum-btn.logout {
    border-color: var(--fail-color);
}

.quantum-btn.logout:hover {
    background: var(--fail-color);
    border-color: var(--fail-color);
}

/* ==================== NEURAL INTERFACE ==================== */
.neural-interface {
    margin-top: 110px;
    padding: var(--space-lg) var(--space-md);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

/* Neural Stats Grid */
.neural-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

/* Control Center Card */
.control-card {
    max-width: 1200px;
    margin: 0 auto var(--space-xl);
}

.control-center-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.control-section {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.control-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pure-white);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Rajdhani', sans-serif;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3);
    padding-bottom: 8px;
}

/* Status do Bot - Versão Grande */
.bot-status-display {
    display: flex;
    justify-content: center;
    margin: var(--space-lg) 0;
}

.status-indicator-large {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(0, 255, 136, 0.05);
    border: 2px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(10px);
}

.status-dot-large {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--fail-color);
    box-shadow: 0 0 12px currentColor;
    animation: statusPulse 2s ease-in-out infinite;
}

.status-dot-large.active {
    background: var(--success-color);
}

.status-text-large {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--pure-white);
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.bot-controls-large {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
}

.control-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border: 2px solid;
    border-radius: var(--radius);
    background: var(--gradient-card);
    cursor: pointer;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
    font-size: 0.9rem;
    min-width: 140px;
    justify-content: center;
}

.control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.control-btn.start-btn {
    color: var(--success-color);
    border-color: var(--success-color);
}

.control-btn.start-btn:hover:not(:disabled) {
    background: var(--success-color);
    color: var(--dark-space);
    box-shadow: 0 0 20px rgba(0, 255, 136, 0.4);
    transform: translateY(-2px);
}

.control-btn.stop-btn {
    color: var(--fail-color);
    border-color: var(--fail-color);
}

.control-btn.stop-btn:hover:not(:disabled) {
    background: var(--fail-color);
    color: var(--pure-white);
    box-shadow: 0 0 20px rgba(255, 68, 68, 0.4);
    transform: translateY(-2px);
}

/* Menu Options */
.menu-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.menu-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--radius);
    color: var(--pure-white);
    cursor: pointer;
    transition: var(--transition);
    font-weight: 500;
    text-align: left;
}

.menu-btn:hover {
    background: rgba(0, 255, 136, 0.1);
    border-color: rgba(0, 255, 136, 0.4);
    transform: translateX(4px);
}

.menu-btn i {
    color: var(--primary-gold);
    font-size: 1rem;
}

.card-neural-icon.control {
    background: rgba(0, 255, 136, 0.2);
    color: var(--primary-gold);
}

.neural-card {
    background: var(--gradient-card);
    border: 2px solid rgba(255, 215, 0, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--shadow-premium);
}

.neural-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--gradient-quantum);
    opacity: 0.35;
}

.neural-card:hover {
    border-color: rgba(255, 215, 0, 0.6);
    box-shadow: var(--shadow-premium), 0 0 20px rgba(255, 215, 0, 0.25);
    transform: translateY(-5px);
}

.card-neural-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.card-neural-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    font-size: 1.5rem;
    position: relative;
}

.card-neural-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    opacity: 0.1;
    z-index: -1;
}

.card-neural-icon.accounts {
    background: rgba(0, 255, 136, 0.1);
    color: var(--primary-gold);
}

.card-neural-icon.balance {
    background: rgba(255, 215, 0, 0.06);
    color: #1a1a1a;
}

.card-neural-icon.performance-day {
    background: rgba(0, 255, 221, 0.1);
    color: var(--accent-cyan);
}

.card-neural-icon.results {
    background: rgba(0, 255, 136, 0.1);
    color: var(--primary-gold);
}

.card-neural-title h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pure-white);
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-subtitle {
    font-size: 0.8rem;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-neural-content {
    color: var(--pure-white);
}

/* Networks Metrics */
.networks-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--space-sm);
    background: rgba(0, 255, 136, 0.05);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.metric-label {
    font-size: 0.7rem;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.metric-value {
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
}

.active-color {
    color: var(--success-color);
}

.idle-color {
    color: var(--warning-color);
}

/* Balance Section */
.balance-main {
    text-align: center;
    margin-bottom: var(--space-sm);
}

.balance-amount {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
    margin-bottom: 8px;
    animation: none;
}

.balance-change {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    animation: none;
}

.balance-change.positive {
    color: var(--success-color);
}

.balance-change.negative {
    color: var(--fail-color);
}

.balance-neural-info {
    text-align: center;
    margin-top: var(--space-sm);
    color: var(--light-gray);
    font-size: 0.8rem;
}

/* Performance Section */
.performance-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.performance-amount {
    font-size: 2rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
}

.performance-amount.profit {
    color: var(--success-color);
}

.performance-percentage {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.9rem;
    font-weight: 600;
}

.performance-percentage.positive {
    color: var(--success-color);
}

.performance-details {
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(0, 255, 136, 0.2);
}

.performance-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
}

.target-status.pending {
    color: var(--warning-color);
}

.target-status.completed {
    color: var(--success-color);
}

/* Results Neural Metrics */
.results-neural-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    margin-bottom: var(--space-md);
}

.result-neural-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem;
    background: rgba(0, 255, 136, 0.05);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.result-neural-label {
    font-size: 0.7rem;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.result-neural-value {
    font-size: 1.3rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    color: var(--pure-white);
}

.success-color {
    color: var(--success-color);
}

.fail-color {
    color: var(--fail-color);
}

/* Neural Accuracy */
.neural-accuracy-section {
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(0, 255, 136, 0.2);
}

.accuracy-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
    font-size: 0.9rem;
}

.accuracy-percent {
    font-weight: 700;
    color: var(--primary-gold);
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
}

.accuracy-bar {
    height: 8px;
    background: rgba(0, 255, 136, 0.1);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.accuracy-fill {
    height: 100%;
    background: var(--gradient-primary);
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* ==================== SECTIONS ==================== */
.section-neural-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.section-neural-title h2 {
    font-size: 2rem;
    font-weight: 700;
    background: var(--gradient-quantum);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-family: 'Rajdhani', sans-serif;
    margin-bottom: 4px;
}

.section-neural-subtitle {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--light-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Controls */
.neural-operations-controls,
.log-controls {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.neural-filters,
.log-filters {
    display: flex;
    gap: var(--space-xs);
}

.neural-filter-btn,
.log-filter-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 8px 14px;
    background: var(--gradient-card);
    color: var(--light-gray);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: var(--radius);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
}

.neural-filter-btn:hover,
.log-filter-btn:hover,
.neural-filter-btn.active,
.log-filter-btn.active {
    background: var(--gradient-primary);
    color: var(--dark-space);
    border-color: var(--primary-gold);
    transform: translateY(-1px);
}

.neural-action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 12px 20px;
    background: var(--gradient-primary);
    color: var(--dark-space);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: var(--transition);
}

.neural-action-btn:hover {
    box-shadow: var(--shadow-quantum);
    transform: translateY(-2px);
}

/* ==================== TABLES ==================== */
.table-neural-container {
    background: var(--gradient-card);
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-neural-light);
}

.neural-table {
    width: 100%;
    border-collapse: collapse;
}

.neural-table thead {
    background: rgba(0, 255, 136, 0.1);
    border-bottom: 2px solid rgba(0, 255, 136, 0.3);
}

.neural-table th {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-weight: 600;
    color: var(--primary-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.neural-table td {
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(0, 255, 136, 0.1);
    color: var(--pure-white);
    font-size: 0.9rem;
}

.neural-table tbody tr {
    transition: var(--transition);
}

.neural-table tbody tr:hover {
    background: rgba(0, 255, 136, 0.05);
}

/* Network Status Badges */
.network-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.network-status.active {
    background: rgba(0, 255, 136, 0.2);
    color: var(--success-color);
    border: 1px solid var(--success-color);
}

.network-status.idle {
    background: rgba(255, 165, 0, 0.2);
    color: var(--warning-color);
    border: 1px solid var(--warning-color);
}

.network-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: neuralPulse 2s ease-in-out infinite;
}

/* Action Buttons in Table */
.table-actions {
    display: flex;
    gap: var(--space-xs);
}

.table-action-btn {
    padding: 6px 10px;
    border: 1px solid;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: var(--transition);
    background: transparent;
}

.table-action-btn.start {
    color: var(--success-color);
    border-color: var(--success-color);
}

.table-action-btn.start:hover {
    background: var(--success-color);
    color: var(--dark-space);
}

.table-action-btn.stop {
    color: var(--fail-color);
    border-color: var(--fail-color);
}

.table-action-btn.stop:hover {
    background: var(--fail-color);
    color: var(--pure-white);
}

.table-action-btn.remove {
    color: var(--light-gray);
    border-color: var(--light-gray);
}

.table-action-btn.remove:hover {
    background: var(--light-gray);
    color: var(--dark-space);
}

.table-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Operation Result Badges */
.operation-result {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.operation-result.win {
    background: rgba(0, 255, 136, 0.2);
    color: var(--success-color);
}

.operation-result.loss {
    background: rgba(255, 68, 68, 0.2);
    color: var(--fail-color);
}

.operation-result.pending {
    background: rgba(255, 165, 0, 0.2);
    color: var(--warning-color);
    animation: pulse 2s infinite;
}

.operation-result.antiloss {
    background: rgba(0, 255, 255, 0.15);
    color: #00ffff;
    font-weight: bold;
    animation: antiloss-glow 1.5s infinite;
}

@keyframes antiloss-glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    }
}

.operation-result.countdown {
    background: rgba(100, 149, 237, 0.2);
    color: #6495ED;
    font-weight: bold;
    animation: countdown-pulse 2s infinite;
}

@keyframes countdown-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

/* ==================== PAGINATION ==================== */
.neural-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.neural-page-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-card);
    color: var(--primary-gold);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.neural-page-btn:hover:not(:disabled) {
    background: var(--gradient-primary);
    color: var(--dark-space);
    box-shadow: var(--shadow-quantum);
}

.neural-page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.neural-page-info {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-weight: 600;
    color: var(--light-gray);
}

/* ==================== MODAL ==================== */
.neural-modal {
    display: none;
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.neural-modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(13, 15, 28, 0.8);
    backdrop-filter: blur(10px);
}

.neural-modal-panel {
    position: relative;
    background: var(--gradient-card);
    margin: 8% auto;
    padding: 0;
    border: 2px solid rgba(0, 255, 136, 0.4);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 500px;
    box-shadow: var(--shadow-neural-heavy);
    animation: neuralModalSlide 0.3s ease-out;
}

.neural-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 2px solid rgba(0, 255, 136, 0.2);
    background: rgba(0, 255, 136, 0.05);
}

.neural-modal-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.neural-modal-title h3 {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary-gold);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-family: 'Rajdhani', sans-serif;
}

.close-neural-modal {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--light-gray);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.close-neural-modal:hover {
    background: var(--fail-color);
    color: var(--pure-white);
    border-color: var(--fail-color);
}

.neural-modal-content {
    padding: var(--space-lg);
}

.neural-form-group {
    margin-bottom: var(--space-md);
}

.neural-form-group label {
    display: block;
    margin-bottom: var(--space-xs);
    font-weight: 600;
    color: var(--primary-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.8rem;
}

.neural-form-group input {
    width: 100%;
    padding: 12px 16px;
    background: rgba(0, 255, 136, 0.05);
    color: var(--pure-white);
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: var(--transition);
}

.neural-form-group input:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
    background: rgba(0, 255, 136, 0.08);
}

.neural-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 16px 24px;
    background: var(--gradient-primary);
    color: var(--dark-space);
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: var(--transition);
    margin-top: var(--space-md);
}

.neural-submit-btn:hover {
    box-shadow: var(--shadow-quantum);
    transform: translateY(-2px);
}

/* ==================== NOTIFICATIONS ==================== */
.neural-notifications {
    position: fixed;
    top: 120px;
    right: var(--space-md);
    z-index: 3000;
    max-width: 350px;
}

.neural-notification {
    background: var(--gradient-card);
    border: 2px solid;
    border-radius: var(--radius);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    box-shadow: var(--shadow-neural-medium);
    animation: neuralNotificationSlide 0.3s ease-out;
    position: relative;
    overflow: hidden;
}

.neural-notification::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: currentColor;
}

.neural-notification.success {
    border-color: var(--success-color);
    color: var(--success-color);
}

.neural-notification.error {
    border-color: var(--fail-color);
    color: var(--fail-color);
}

.neural-notification.info {
    border-color: var(--electric-blue);
    color: var(--accent-cyan);
}

.neural-notification-content {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.neural-notification-icon {
    font-size: 1.2rem;
}

.neural-notification-text {
    flex: 1;
    color: var(--pure-white);
    font-weight: 500;
}

/* ==================== ANIMATIONS ==================== */
@keyframes neuralRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes neuralPulse {

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

    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@keyframes neuralScan {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes streamFlow {

    0%,
    100% {
        opacity: 0.3;
        height: 15px;
    }

    50% {
        opacity: 1;
        height: 25px;
    }
}

@keyframes neuralModalSlide {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.8);
    }

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

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

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

/* Animações Únicas do Binary AI */
@keyframes hexRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes binaryPulse {

    0%,
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 10px var(--primary-green);
    }

    50% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.3);
        box-shadow: 0 0 20px var(--primary-green);
    }
}

@keyframes particleFloat {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0px);
    }

    50% {
        opacity: 1;
        transform: translateY(-10px);
    }
}

@keyframes streamPulse {

    0%,
    100% {
        opacity: 0.3;
        height: 10px;
    }

    50% {
        opacity: 1;
        height: 20px;
    }
}

@keyframes statusPulse {

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

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

/* ==================== ANIMAÇÕES ESPECÍFICAS ==================== */

/* Animações do cabeçalho */
@keyframes crownGlowHeader {

    0%,
    100% {
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.6);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 15px rgba(255, 215, 0, 0.9);
        transform: scale(1.05);
    }
}

@keyframes spikeRiseHeader {

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

    50% {
        transform: translateY(-2px) scale(1.1);
        opacity: 1;
    }
}

@keyframes gemTwinkleHeader {

    0%,
    100% {
        opacity: 0.6;
        transform: scale(1);
        box-shadow: 0 0 3px currentColor;
    }

    50% {
        opacity: 1;
        transform: scale(1.3);
        box-shadow: 0 0 8px currentColor;
    }
}

@keyframes orbitRotateHeader {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes aiCorePulseHeader {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 8px rgba(0, 212, 255, 0.6);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 12px rgba(0, 212, 255, 0.9);
    }
}

@keyframes neuralExpandHeader {

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

    50% {
        transform: scale(1.5);
        opacity: 0.3;
    }
}

@keyframes rayShineHeader {

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

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

@keyframes titleGlowHeader {

    0%,
    100% {
        filter: brightness(1);
    }

    50% {
        filter: brightness(1.2);
    }
}

@keyframes modeIconSpin {

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

    50% {
        transform: scale(1.2) rotate(180deg);
    }
}

@keyframes modeGlow {

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

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

@keyframes statusPulsePremium {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px var(--cyber-green);
    }

    50% {
        transform: scale(1.2);
        box-shadow: 0 0 20px var(--cyber-green);
    }
}

@keyframes effectFloat {

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

    50% {
        transform: translateY(-5px) scale(1.2);
        opacity: 1;
    }
}

/* Animações dos Cards Premium */
@keyframes cardShimmer {
    0% {
        left: -100%;
    }

    50% {
        left: 0%;
    }

    100% {
        left: 100%;
    }
}

@keyframes iconFloat {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-3px) rotate(5deg);
    }
}

@keyframes iconRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes glowPulse {

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

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

@keyframes badgePulse {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px currentColor;
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px currentColor;
    }
}

@keyframes badgeIconSpin {

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

    25% {
        transform: rotate(90deg) scale(1.1);
    }

    50% {
        transform: rotate(180deg) scale(1);
    }

    75% {
        transform: rotate(270deg) scale(1.1);
    }
}

@keyframes balanceGlow {

    0%,
    100% {
        filter: brightness(1) drop-shadow(0 0 5px rgba(255, 215, 0, 0.3));
    }

    50% {
        filter: brightness(1.2) drop-shadow(0 0 15px rgba(255, 215, 0, 0.6));
    }
}

@keyframes changeIndicator {

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

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

@keyframes trendArrow {
    0% {
        transform: translateY(0px);
    }

    100% {
        transform: translateY(-2px);
    }
}

@keyframes balancePulseBar {

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

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

/* Animações dos Botões Épicos */
@keyframes btnSweep {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    50% {
        transform: translateX(0%) skewX(-15deg);
    }

    100% {
        transform: translateX(100%) skewX(-15deg);
    }
}

@keyframes btnSweepStop {
    0% {
        transform: translateX(-100%) skewX(-15deg);
    }

    50% {
        transform: translateX(0%) skewX(-15deg);
    }

    100% {
        transform: translateX(100%) skewX(-15deg);
    }
}

@keyframes iconPulse {

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

    50% {
        transform: scale(1.2) translateY(0);
    }
}

@keyframes particleBurst {
    0% {
        opacity: 0;
        transform: translateX(0) translateY(0) scale(0);
    }

    50% {
        opacity: 1;
        transform: translateX(var(--x, 15px)) translateY(var(--y, -15px)) scale(1);
    }

    100% {
        opacity: 0;
        transform: translateX(var(--x, 30px)) translateY(var(--y, -30px)) scale(0);
    }
}

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

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

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

@keyframes staticGlitch {

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

    10% {
        opacity: 1;
        transform: translateX(-2px);
    }

    20% {
        opacity: 0;
        transform: translateX(2px);
    }

    30% {
        opacity: 1;
        transform: translateX(-1px);
    }

    40% {
        opacity: 0;
        transform: translateX(1px);
    }

    50% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ==================== ANIMAÇÕES TOPWIN I.A ==================== */

/* Animações de fundo */
@keyframes backgroundShift {

    0%,
    100% {
        filter: hue-rotate(0deg) brightness(1);
    }

    25% {
        filter: hue-rotate(90deg) brightness(1.1);
    }

    50% {
        filter: hue-rotate(180deg) brightness(0.9);
    }

    75% {
        filter: hue-rotate(270deg) brightness(1.1);
    }
}

@keyframes particleFloat {
    0% {
        transform: translateY(0px) translateX(0px);
    }

    33% {
        transform: translateY(-10px) translateX(5px);
    }

    66% {
        transform: translateY(5px) translateX(-5px);
    }

    100% {
        transform: translateY(0px) translateX(0px);
    }
}

/* Logo TOPWIN I.A no header */
.topwin-logo-header {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Garantir que o texto fique à frente da logo */
.logo-topwin {
    position: relative;
    z-index: 4;
}

/* Alinhar a seção da logo e título em linha e evitar quebra estranha */
.topwin-matrix-section {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-width: 0;
}

.crown-container-header {
    position: relative;
    width: 30px;
    height: 20px;
    z-index: 3;
}

.crown-base-header {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 6px;
    background: var(--gradient-crown);
    border-radius: 3px;
    box-shadow: var(--shadow-gold);
    animation: crownGlowHeader 3s ease-in-out infinite;
}

.crown-spikes-header {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.spike-header {
    background: var(--gradient-crown);
    border-radius: 1px 1px 0 0;
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.6);
    animation: spikeRiseHeader 2s ease-in-out infinite;
}

.spike-header.spike-1 {
    width: 3px;
    height: 8px;
    animation-delay: 0s;
}

.spike-header.spike-2 {
    width: 4px;
    height: 10px;
    animation-delay: 0.2s;
}

.spike-header.spike-3 {
    width: 5px;
    height: 14px;
    animation-delay: 0.4s;
}

.spike-header.spike-4 {
    width: 4px;
    height: 10px;
    animation-delay: 0.6s;
}

.spike-header.spike-5 {
    width: 3px;
    height: 8px;
    animation-delay: 0.8s;
}

.crown-gems-header {
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 100%;
    height: 10px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.gem-header {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    animation: gemTwinkleHeader 1.5s ease-in-out infinite;
}

.gem-header.gem-1 {
    background: var(--neon-pink);
    animation-delay: 0s;
}

.gem-header.gem-2 {
    background: var(--electric-blue);
    animation-delay: 0.3s;
}

.gem-header.gem-3 {
    background: var(--cyber-green);
    animation-delay: 0.6s;
}

.gem-header.gem-4 {
    background: var(--electric-blue);
    animation-delay: 0.9s;
}

.gem-header.gem-5 {
    background: var(--neon-pink);
    animation-delay: 1.2s;
}

.ai-orbit-header {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0;
    left: 0;
}

.orbit-ring-header {
    position: absolute;
    border: 1px solid;
    border-radius: 50%;
    border-style: dashed;
    opacity: 0.7;
}

.orbit-ring-header.ring-1 {
    width: 50px;
    height: 50px;
    border-color: var(--royal-purple);
    animation: orbitRotateHeader 8s linear infinite;
}

.orbit-ring-header.ring-2 {
    width: 40px;
    height: 40px;
    top: 5px;
    left: 5px;
    border-color: var(--electric-blue);
    animation: orbitRotateHeader 6s linear infinite reverse;
}

.orbit-ring-header.ring-3 {
    width: 30px;
    height: 30px;
    top: 10px;
    left: 10px;
    border-color: var(--cyber-green);
    animation: orbitRotateHeader 4s linear infinite;
}

.ai-core-header {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 17px;
    left: 17px;
    background: var(--gradient-cyber);
    border-radius: 50%;
    box-shadow: var(--shadow-cyber);
    animation: aiCorePulseHeader 2s ease-in-out infinite;
}

.neural-pulse-header {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 1px solid var(--pure-white);
    border-radius: 50%;
    animation: neuralExpandHeader 2s ease-in-out infinite;
}

.power-rays-header {
    position: absolute;
    width: 60px;
    height: 60px;
    top: -5px;
    left: -5px;
}

.ray-header {
    position: absolute;
    width: 1px;
    height: 8px;
    background: linear-gradient(to bottom, var(--primary-gold), transparent);
    border-radius: 1px;
    opacity: 0.8;
    animation: rayShineHeader 3s ease-in-out infinite;
}

.ray-header.ray-1 {
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(0deg);
    animation-delay: 0s;
}

.ray-header.ray-2 {
    top: 8px;
    right: 8px;
    transform: rotate(45deg);
    animation-delay: 0.5s;
}

.ray-header.ray-3 {
    top: 50%;
    right: 0;
    transform: translateY(-50%) rotate(90deg);
    animation-delay: 1s;
}

.ray-header.ray-4 {
    bottom: 8px;
    right: 8px;
    transform: rotate(135deg);
    animation-delay: 1.5s;
}

.ray-header.ray-5 {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    animation-delay: 2s;
}

.ray-header.ray-6 {
    bottom: 8px;
    left: 8px;
    transform: rotate(225deg);
    animation-delay: 2.5s;
}

.logo-topwin {
    margin-left: var(--space-sm);
}

.brand-title-header {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.5rem;
    font-weight: 900;
    background: var(--gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    margin-bottom: 2px;
    animation: titleGlowHeader 3s ease-in-out infinite;
}

.accent-header {
    color: var(--electric-blue);
    -webkit-text-fill-color: var(--electric-blue);
    background: none;
    text-shadow: 0 0 10px var(--electric-blue);
}

.brand-subtitle-header {
    font-family: 'Exo 2', sans-serif;
    font-size: 0.65rem;
    color: var(--silver-gray);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: 0.9;
}

/* Por padrão, mostrar versão desktop e esconder mobile */
.brand-subtitle-desktop {
    display: block !important;
}

.brand-subtitle-mobile {
    display: none !important;
}

/* Seletor de Modo Demo/Real */
.account-mode-section {
    display: flex;
    align-items: center;
}

/* Removido do cabeçalho: garantir que não ocupe espaço no header antigo */
header .account-mode-section {
    display: none;
}

.mode-switcher {
    display: flex;
    background: rgba(26, 11, 46, 0.8);
    border-radius: var(--radius);
    padding: 4px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: var(--shadow-neural-light);
}

.mode-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: calc(var(--radius) - 4px);
    color: var(--silver-gray);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
}

.mode-btn.active {
    background: var(--gradient-crown);
    color: var(--deep-space);
    box-shadow: var(--shadow-gold);
    transform: scale(1.05);
}

.mode-btn:not(.active):hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--primary-gold);
}

.mode-icon {
    font-size: 0.9rem;
    transition: var(--transition);
}

.mode-btn.active .mode-icon {
    animation: modeIconSpin 2s ease-in-out infinite;
}

.mode-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: var(--transition);
}

.mode-btn.active .mode-glow {
    opacity: 1;
    animation: modeGlow 2s ease-in-out infinite;
}

/* Status Premium */
.status-indicator-premium {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--gradient-card);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius);
    box-shadow: var(--shadow-neural-light);
    overflow: hidden;
}

/* Centralizar claramente o HUD de status no header */
.bot-status-hud {
    justify-content: center;
}

.status-pulse-premium {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cyber-green);
    box-shadow: 0 0 10px var(--cyber-green);
    animation: statusPulsePremium 2s ease-in-out infinite;
}

.status-info-premium {
    display: flex;
    flex-direction: column;
}

.bot-status-text-premium {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-gold);
    letter-spacing: 1px;
}

.bot-status-message-premium {
    font-size: 0.7rem;
    color: var(--silver-gray);
    opacity: 0.9;
}

.status-effects {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.effect {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--primary-gold);
    border-radius: 50%;
    opacity: 0.6;
    animation: effectFloat 4s ease-in-out infinite;
}

.effect-1 {
    top: 20%;
    left: 20%;
    animation-delay: 0s;
}

.effect-2 {
    top: 60%;
    left: 80%;
    animation-delay: 1.3s;
}

.effect-3 {
    top: 80%;
    left: 30%;
    animation-delay: 2.6s;
}

/* ==================== CARDS PREMIUM ==================== */

/* Card de Saldo Premium */
.premium-card {
    background: var(--gradient-card);
    border: 2px solid rgba(255, 215, 0, 0.25);
    box-shadow: var(--shadow-premium);
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    transition: var(--transition);
}

.premium-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    animation: cardShimmer 3s ease-in-out infinite;
}

.premium-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-premium), 0 0 20px rgba(255, 215, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.6);
}

.card-neural-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-md);
}

.card-neural-icon {
    position: relative;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.6) 0%, rgba(255, 140, 0, 0.5) 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
    animation: none;
}

.card-neural-icon i {
    font-size: 1.2rem;
    color: var(--pure-white);
    mix-blend-mode: normal;
    animation: none;
}

.icon-glow {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.12) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 2s ease-in-out infinite;
}

.card-neural-title h3 {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-gold);
    margin-bottom: 4px;
    letter-spacing: 1px;
}

.card-subtitle {
    font-size: 0.8rem;
    color: var(--silver-gray);
    opacity: 0.9;
}

/* Indicador de Tipo de Conta */
.account-type-indicator {
    display: flex;
    align-items: center;
}

.account-badge {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(0, 245, 255, 0.15);
    border: 1px solid var(--cyber-green);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--cyber-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    animation: badgePulse 3s ease-in-out infinite;
    transition: var(--transition);
}

.account-badge.real {
    background: rgba(255, 215, 0, 0.15);
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.account-badge i {
    font-size: 0.8rem;
    animation: badgeIconSpin 4s linear infinite;
}

/* Saldo Principal */
.balance-amount {
    font-family: 'Rajdhani', sans-serif;
    font-size: 2.2rem;
    font-weight: 900;
    background: var(--gradient-premium);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
    margin-bottom: var(--space-xs);
    display: block;
    animation: balanceGlow 4s ease-in-out infinite;
}

.balance-change {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 8px;
    animation: changeIndicator 2s ease-in-out infinite;
}

.balance-change.positive {
    color: var(--cyber-green);
    background: rgba(0, 245, 255, 0.1);
}

.balance-change.negative {
    color: var(--fail-color);
    background: rgba(255, 0, 110, 0.1);
}

.balance-change i {
    font-size: 0.8rem;
    animation: none;
}

/* Efeito de Pulsação no Saldo */
.balance-pulse-effect {
    display: none;
}

/* ==================== BOTÕES ÉPICOS ==================== */

/* Botão Iniciar Épico */
.epic-btn {
    position: relative;
    padding: 16px 24px;
    background: var(--gradient-crown);
    border: 2px solid var(--primary-gold);
    border-radius: var(--radius);
    color: var(--deep-space);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    min-height: 56px;
    height: 56px;
    box-sizing: border-box;
}

.epic-btn:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-gold), 0 0 40px rgba(255, 215, 0, 0.6);
    border-color: var(--electric-blue);
}

.epic-btn:active {
    transform: translateY(-1px) scale(1.02);
}

.epic-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Efeito de Fundo do Botão */
.btn-background-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.2) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: btnSweep 3s ease-in-out infinite;
}

.epic-btn:hover .btn-background-effect {
    animation-duration: 0.8s;
}

/* Container do Ícone - SIMPLIFICADO */
.btn-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
}

.btn-icon-container i {
    font-size: 1.1rem;
    line-height: 1;
    margin: 0;
    padding: 0;
}

/* DESABILITAR animações e efeitos nos botões de controle do menu */
.menu-control-btn .btn-icon-container i {
    animation: none !important;
}

.menu-control-btn .icon-burst,
.menu-control-btn .icon-static,
.menu-control-btn .btn-background-effect,
.menu-control-btn .btn-background-effect-stop {
    display: none !important;
}

/* Partículas do Ícone */
.icon-burst {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.burst-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--electric-blue);
    border-radius: 50%;
    opacity: 0;
    animation: particleBurst 2s ease-out infinite;
}

.burst-particle:nth-child(1) {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 0s;
}

.burst-particle:nth-child(2) {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    animation-delay: 0.5s;
}

.burst-particle:nth-child(3) {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    animation-delay: 1s;
}

.burst-particle:nth-child(4) {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    animation-delay: 1.5s;
}

/* Texto Épico */
.btn-text-epic {
    position: relative;
    z-index: 2;
    font-weight: 800;
    letter-spacing: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Ondas de Energia */
.btn-energy-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.energy-wave {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid var(--electric-blue);
    border-radius: var(--radius);
    opacity: 0;
    animation: energyPulse 3s ease-out infinite;
}

.wave-1 {
    animation-delay: 0s;
}

.wave-2 {
    animation-delay: 1s;
}

.wave-3 {
    animation-delay: 2s;
}

/* Botão Parar Épico */
.epic-btn-stop {
    position: relative;
    padding: 16px 24px;
    background: var(--gradient-royal);
    border: 2px solid var(--fail-color);
    border-radius: var(--radius);
    color: var(--pure-white);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 2px;
    cursor: pointer;
    overflow: hidden;
    transition: var(--transition);
    box-shadow: var(--shadow-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    text-transform: uppercase;
    min-height: 56px;
    height: 56px;
    box-sizing: border-box;
}

.epic-btn-stop:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.05);
    box-shadow: var(--shadow-purple), 0 0 40px rgba(255, 0, 110, 0.6);
    border-color: var(--neon-pink);
}

.epic-btn-stop:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
    filter: grayscale(0.7);
}

/* Efeito de Fundo do Botão Parar */
.btn-background-effect-stop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 0, 110, 0.3) 50%, transparent 70%);
    transform: translateX(-100%);
    animation: btnSweepStop 4s ease-in-out infinite;
}

/* Efeito Estático para Botão Parar */
.icon-static {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.static-line {
    position: absolute;
    width: 100%;
    height: 1px;
    background: var(--neon-pink);
    opacity: 0;
    animation: staticGlitch 1.5s ease-in-out infinite;
}

.static-line:nth-child(1) {
    top: 30%;
    animation-delay: 0s;
}

.static-line:nth-child(2) {
    top: 50%;
    animation-delay: 0.5s;
}

.static-line:nth-child(3) {
    top: 70%;
    animation-delay: 1s;
}

/* ==================== RESPONSIVE ==================== */

/* Tablet - 1200px e abaixo */
@media (max-width: 1200px) {
    .command-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        text-align: center;
    }

    .nyrion-matrix-section,
    .status-hud,
    .quantum-controls {
        justify-self: center;
        margin-bottom: var(--space-sm);
    }

    .neural-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        max-width: 600px;
    }

    .control-center-grid {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .neural-interface {
        margin-top: 120px;
    }
}

/* Mobile - 768px e abaixo */
@media (max-width: 768px) {

    /* Cabeçalho Mobile - Ajustado para não cortar */
    .neural-command-center {
        height: 90px;
        padding: 0 var(--space-xs);
    }

    .command-grid {
        grid-template-columns: 1fr 2fr 1fr;
        height: 90px;
        padding: 0 var(--space-sm);
        gap: var(--space-xs);
        align-items: center;
    }

    /* Reduzir logo no mobile */
    .nyrion-matrix-section,
    .topwin-matrix-section {
        gap: 8px;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }

    .logo-topwin {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .bot-status-hud {
        justify-content: center;
    }

    .menu-toggle-container {
        justify-content: flex-end;
        display: flex;
        align-items: center;
    }

    .brand-title,
    .brand-title-header {
        font-size: 0.95rem;
    }

    .brand-subtitle,
    .brand-subtitle-header {
        font-size: 0.5rem;
    }

    /* Mostrar versão mobile curta do subtítulo */
    .brand-subtitle-desktop {
        display: none !important;
    }

    .brand-subtitle-mobile {
        display: block !important;
    }

    /* Logo TOPWIN reduzida e centralizada */
    .topwin-logo-header {
        width: 35px;
        height: 35px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .crown-container-header {
        width: 21px;
        height: 14px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .ai-orbit-header {
        width: 35px;
        height: 35px;
    }

    .orbit-ring-header.ring-1 {
        width: 35px;
        height: 35px;
    }

    .orbit-ring-header.ring-2 {
        width: 28px;
        height: 28px;
        top: 3.5px;
        left: 3.5px;
    }

    .orbit-ring-header.ring-3 {
        width: 21px;
        height: 21px;
        top: 7px;
        left: 7px;
    }

    .ai-core-header {
        width: 10px;
        height: 10px;
        top: 12.5px;
        left: 12.5px;
    }

    .power-rays-header {
        width: 42px;
        height: 42px;
        top: -3.5px;
        left: -3.5px;
    }

    .ray-header {
        height: 6px;
    }

    /* Ajustes do status HUD no mobile */
    .status-indicator,
    .status-indicator-premium {
        padding: 4px 8px;
        gap: 4px;
        max-width: calc(100vw - 180px);
        min-width: 0;
    }

    .bot-status-text,
    .bot-status-text-premium {
        font-size: 0.65rem;
    }

    .bot-status-message,
    .bot-status-message-premium {
        font-size: 0.52rem;
        max-width: 140px;
    }

    .menu-toggle-btn {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
        z-index: 1001;
        position: relative;
    }

    .menu-toggle-container {
        z-index: 1001;
        position: relative;
    }

    /* Logo compacto */
    .binary-core {
        width: 35px;
        height: 35px;
    }

    .core-hexagon {
        width: 30px;
        height: 30px;
    }

    .hex-ring.outer {
        width: 30px;
        height: 30px;
    }

    .hex-ring.middle {
        width: 20px;
        height: 20px;
    }

    .hex-ring.inner {
        width: 12px;
        height: 12px;
    }

    .binary-center {
        width: 6px;
        height: 6px;
    }

    /* Logo mobile - mais compacto */
    .nyrion-matrix-section {
        flex-shrink: 0;
    }

    .logo-topwin {
        text-align: center;
    }

    .logo-binary {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Interface principal mobile */
    .neural-interface {
        margin-top: 115px;
        padding: var(--space-sm);
    }

    /* Cards mobile */
    .neural-card {
        margin-bottom: var(--space-md);
        padding: var(--space-md);
        min-height: auto;
    }

    /* Results metrics mobile */
    .results-neural-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .card-neural-title h3 {
        font-size: 1.1rem;
    }

    .card-subtitle {
        font-size: 0.7rem;
    }

    /* Grid de estatísticas mobile */
    .neural-stats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
        max-width: 100%;
    }

    /* Card de controle mobile */
    .control-center-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .control-title {
        font-size: 0.9rem;
        text-align: center;
    }

    .status-indicator-large {
        gap: var(--space-sm);
        padding: var(--space-sm);
    }

    .status-dot-large {
        width: 12px;
        height: 12px;
    }

    .status-text-large {
        font-size: 1rem;
    }

    .bot-controls-large {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .control-btn {
        width: 100%;
        min-width: auto;
        padding: var(--space-md);
        font-size: 0.8rem;
    }

    .menu-btn {
        padding: var(--space-sm);
        font-size: 0.8rem;
    }

    /* Seção de operações mobile */
    .section-neural-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-sm);
    }

    .section-neural-title h2 {
        font-size: 1.3rem;
    }

    .log-filter-buttons {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-xs);
    }

    .log-filter-btn {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    /* Tabela mobile */
    .neural-table {
        font-size: 0.7rem;
    }

    .neural-table th,
    .neural-table td {
        padding: 6px 4px;
    }

    /* Mobile Operations - Card Style Layout */
    .operations-log-table {
        display: none;
        /* Esconder tabela no mobile */
    }

    .mobile-operations-cards {
        display: block;
        gap: var(--space-sm);
    }

    .mobile-operation-card {
        background: rgba(0, 255, 136, 0.05);
        border: 1px solid rgba(0, 255, 136, 0.15);
        border-radius: var(--radius);
        padding: var(--space-md);
        margin-bottom: var(--space-sm);
        position: relative;
    }

    .mobile-operation-card:last-child {
        margin-bottom: 0;
    }

    .mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--space-sm);
        padding-bottom: var(--space-xs);
        border-bottom: 1px solid rgba(0, 255, 136, 0.1);
    }

    .mobile-card-asset {
        font-weight: 600;
        color: var(--primary-gold);
        font-size: 0.9rem;
    }

    .mobile-card-result {
        padding: 2px 8px;
        border-radius: var(--radius-sm);
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
    }

    .mobile-card-result.win {
        background: var(--success-color);
        color: var(--dark-space);
    }

    .mobile-card-result.loss {
        background: var(--fail-color);
        color: var(--pure-white);
    }

    .mobile-card-result.pending {
        background: rgba(255, 165, 0, 0.2);
        color: var(--warning-color);
        animation: pulse 2s infinite;
    }

    .mobile-card-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .mobile-card-item {
        display: flex;
        flex-direction: column;
    }

    .mobile-card-label {
        font-size: 0.65rem;
        color: var(--light-gray);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 2px;
    }

    .mobile-card-value {
        font-size: 0.8rem;
        color: var(--pure-white);
        font-weight: 500;
    }

    .mobile-card-profit {
        font-weight: 600;
    }

    .mobile-card-profit.positive {
        color: var(--success-color);
    }

    .mobile-card-profit.negative {
        color: var(--fail-color);
    }

    /* Esconder colunas desktop em mobile */
    .desktop-only {
        display: none;
    }

    /* Notificações mobile */
    .neural-notifications {
        top: 100px;
        right: var(--space-sm);
        left: var(--space-sm);
        max-width: none;
    }
}

/* Mobile pequeno - 480px e abaixo */
@media (max-width: 480px) {
    .neural-command-center {
        height: 85px;
        padding: 4px var(--space-xs);
    }

    .command-grid {
        padding: 0;
        height: 85px;
        grid-template-columns: 80px 1fr 70px;
        gap: 4px;
    }

    /* Logo TOPWIN ainda menor para mobile portrait */
    .topwin-matrix-section {
        gap: 5px;
        justify-content: flex-start;
    }

    .logo-topwin {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
    }

    .bot-status-hud {
        justify-content: center;
    }

    .menu-toggle-container {
        justify-content: flex-end;
    }

    .brand-title,
    .brand-title-header {
        font-size: 0.75rem;
    }

    .brand-subtitle,
    .brand-subtitle-header {
        font-size: 0.42rem;
    }

    /* Manter versão mobile curta do subtítulo */
    .brand-subtitle-desktop {
        display: none !important;
    }

    .brand-subtitle-mobile {
        display: block !important;
    }

    .topwin-logo-header {
        width: 30px;
        height: 30px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .crown-container-header {
        width: 18px;
        height: 12px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .crown-spikes-header {
        bottom: 4px;
        height: 12px;
    }

    .spike-header.spike-1,
    .spike-header.spike-5 {
        width: 2px;
        height: 6px;
    }

    .spike-header.spike-2,
    .spike-header.spike-4 {
        width: 3px;
        height: 8px;
    }

    .spike-header.spike-3 {
        width: 4px;
        height: 11px;
    }

    .crown-gems-header {
        bottom: 6px;
        height: 8px;
    }

    .gem-header {
        width: 2px;
        height: 2px;
    }

    .ai-orbit-header {
        width: 30px;
        height: 30px;
    }

    .orbit-ring-header.ring-1 {
        width: 30px;
        height: 30px;
    }

    .orbit-ring-header.ring-2 {
        width: 24px;
        height: 24px;
        top: 3px;
        left: 3px;
    }

    .orbit-ring-header.ring-3 {
        width: 18px;
        height: 18px;
        top: 6px;
        left: 6px;
    }

    .ai-core-header {
        width: 9px;
        height: 9px;
        top: 10.5px;
        left: 10.5px;
    }

    .power-rays-header {
        width: 36px;
        height: 36px;
        top: -3px;
        left: -3px;
    }

    .ray-header {
        height: 5px;
    }


    /* Avatar ainda menor */
    .quantum-avatar {
        width: 20px;
        height: 20px;
    }

    .user-name {
        font-size: 0.6rem;
        max-width: 60px;
    }

    .user-role {
        font-size: 0.45rem;
    }

    .menu-toggle-btn {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    /* Status ainda mais compacto */
    .status-indicator,
    .status-indicator-premium {
        padding: 3px 6px;
        max-width: calc(100vw - 160px);
    }

    .bot-status-text,
    .bot-status-text-premium {
        font-size: 0.58rem;
    }

    .bot-status-message,
    .bot-status-message-premium {
        font-size: 0.48rem;
        max-width: 95px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .neural-interface {
        margin-top: 95px;
        padding: var(--space-xs);
    }

    .neural-card {
        padding: var(--space-sm);
    }

    .card-neural-title h3 {
        font-size: 1rem;
    }

    .control-btn,
    .menu-btn {
        font-size: 0.7rem;
        padding: var(--space-sm);
    }

    .neural-table {
        font-size: 0.65rem;
    }

    .neural-table th,
    .neural-table td {
        padding: 4px 2px;
    }

    /* Ajustar largura das colunas restantes na tabela mobile */
    .neural-table th:nth-child(2),
    .neural-table td:nth-child(2) {
        width: 25%;
        /* Ativo */
    }

    .neural-table th:nth-child(3),
    .neural-table td:nth-child(3) {
        width: 20%;
        /* Valor */
    }

    .neural-table th:nth-child(4),
    .neural-table td:nth-child(4) {
        width: 20%;
        /* Direção */
    }

    .neural-table th:nth-child(5),
    .neural-table td:nth-child(5) {
        width: 20%;
        /* Resultado */
    }

    .neural-table th:nth-child(6),
    .neural-table td:nth-child(6) {
        width: 15%;
        /* Lucro/Perda */
    }
}

/* ==================== SIDE MENU ==================== */
.side-menu {
    position: fixed;
    top: 0;
    left: -320px;
    width: 320px;
    height: 100vh;
    background: linear-gradient(180deg, var(--dark-space) 0%, var(--medium-dark) 100%);
    border-right: 2px solid rgba(0, 255, 136, 0.3);
    box-shadow: 4px 0 25px rgba(0, 255, 136, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2000;
    backdrop-filter: blur(15px);
}

/* Melhorar overlay existente */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 1999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    display: none; /* Esconder no desktop por padrão */
}

.side-menu.open {
    left: 0;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

.side-menu-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-xl) var(--space-lg);
    gap: var(--space-lg);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-gold) var(--dark-space);
}

/* Estilização da barra de scroll do menu */
.side-menu-content::-webkit-scrollbar {
    width: 6px;
}

.side-menu-content::-webkit-scrollbar-track {
    background: var(--dark-space);
    border-radius: 3px;
}

.side-menu-content::-webkit-scrollbar-thumb {
    background: var(--primary-gold);
    border-radius: 3px;
    transition: var(--transition);
}

.side-menu-content::-webkit-scrollbar-thumb:hover {
    background: var(--accent-cyan);
}

/* Menu User Section */
.menu-user-section {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(0, 255, 136, 0.2);
}

.menu-user-section:hover {
    background: rgba(0, 255, 136, 0.05);
    border-radius: 12px;
    padding: 12px;
    margin: -12px;
    padding-bottom: var(--space-lg);
    margin-bottom: 0;
    transform: translateX(5px);
}

.menu-user-avatar {
    position: relative;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gradient-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.menu-user-avatar i {
    font-size: 1.5rem;
    color: var(--dark-space);
}

.menu-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.menu-user-name {
    font-weight: 600;
    color: var(--pure-white);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-user-role {
    font-size: 0.7rem;
    color: var(--light-gray);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Menu Items */
.menu-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.menu-section-title {
    font-size: 0.8rem;
    color: var(--primary-gold);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(0, 255, 136, 0.1);
    padding-bottom: var(--space-xs);
}

/* Bot Controls in Menu */
.menu-bot-controls {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.menu-bot-status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    background: rgba(0, 255, 136, 0.05);
    border: 1px solid rgba(0, 255, 136, 0.2);
    border-radius: var(--radius);
}

.menu-status-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.menu-status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--fail-color);
    animation: pulse 2s infinite;
}

.menu-status-dot.active {
    background: var(--success-color);
}

.menu-status-text {
    font-weight: 600;
    color: var(--pure-white);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.5px;
}

.menu-bot-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.menu-control-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: var(--radius);
    font-family: inherit;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.85rem;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.menu-control-btn .btn-icon-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.menu-control-btn .btn-icon-container i {
    font-size: 1rem;
    line-height: 1;
    display: block;
}

.menu-control-btn .btn-text-epic {
    line-height: 1;
    display: block;
}

.menu-control-btn.start-btn {
    background: linear-gradient(135deg, var(--success-color) 0%, #00CC70 100%);
    color: var(--dark-space);
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.3);
}

.menu-control-btn.start-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4);
}

.menu-control-btn.stop-btn {
    background: linear-gradient(135deg, var(--fail-color) 0%, #CC3333 100%);
    color: var(--pure-white);
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}

.menu-control-btn.stop-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
}

.menu-control-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Menu Options - PREMIUM REDESIGN */
.menu-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
}

.menu-option-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 16px 18px;
    border: none;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, rgba(123, 44, 191, 0.08) 100%);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 12px;
    color: var(--pure-white);
    font-family: 'Exo 2', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Efeito de brilho no fundo */
.menu-option-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.15), transparent);
    transition: left 0.5s ease;
}

.menu-option-btn:hover::before {
    left: 100%;
}

/* Borda animada */
.menu-option-btn::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #FFD700, #00D4FF, #7B2CBF, #FFD700);
    border-radius: 12px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    background-size: 300% 300%;
    animation: gradientShift 3s ease infinite;
}

.menu-option-btn:hover::after {
    opacity: 1;
}

.menu-option-btn:hover {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(123, 44, 191, 0.15) 100%);
    border-color: rgba(255, 215, 0, 0.5);
    transform: translateX(6px) scale(1.02);
    box-shadow:
        0 6px 20px rgba(0, 212, 255, 0.3),
        0 0 30px rgba(255, 215, 0, 0.2);
}

.menu-option-btn:active {
    transform: translateX(4px) scale(0.98);
}

/* Ícone com container premium */
.menu-option-btn i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 215, 0, 0.05) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    color: var(--primary-gold);
    font-size: 1.1rem;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.2);
}

.menu-option-btn:hover i {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(255, 215, 0, 0.1) 100%);
    border-color: rgba(255, 215, 0, 0.6);
    transform: rotate(10deg) scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

/* Texto com efeito */
.menu-option-btn .menu-btn-text {
    position: relative;
    z-index: 1;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
    flex: 1; /* ✅ Ocupa espaço disponível */
}

.menu-option-btn span {
    position: relative;
    z-index: 1;
    letter-spacing: 0.3px;
    transition: all 0.3s ease;
}

.menu-option-btn:hover .menu-btn-text,
.menu-option-btn:hover span:not(.menu-badge) {
    color: #FFD700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
}

/* ==================== BADGES DE AVISO ==================== */
.menu-badge {
    /* ✅ NOVA ABORDAGEM: Usar flexbox normal, não absolute */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    min-width: 24px; /* ✅ Garantir largura mínima */
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 700;
    z-index: 10;
    margin-left: auto; /* ✅ Empurra para a direita */
    transition: all 0.3s ease;
    animation: badgePulse 2s ease-in-out infinite;
}

.menu-badge.warning {
    background: #FF4757;
    border: 1px solid #FF6B6B;
    color: #FFFFFF;
    box-shadow:
        0 0 8px rgba(255, 71, 87, 0.4),
        0 2px 5px rgba(255, 71, 87, 0.3);
}

.menu-badge.success {
    background: #00FF88;
    border: 1px solid #00F5FF;
    color: #0A0A0F;
    box-shadow:
        0 0 8px rgba(0, 255, 136, 0.4),
        0 2px 5px rgba(0, 255, 136, 0.3);
}

.menu-badge.hidden {
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
}

.menu-option-btn:hover .menu-badge {
    transform: scale(1.15);
}

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

/* Indicador de Status de Pares */
.pairs-status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(0, 212, 255, 0.1) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--pure-white);
    margin-bottom: var(--space-md);
}

.pairs-status-indicator.loaded {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.1) 0%, rgba(0, 245, 255, 0.1) 100%);
    border-color: rgba(0, 255, 136, 0.4);
}

.pairs-status-indicator.warning {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 165, 0, 0.15) 100%);
    border-color: rgba(255, 215, 0, 0.5);
}

.pairs-status-indicator i {
    font-size: 1.1rem;
    color: var(--primary-gold);
}

.pairs-status-indicator.loaded i {
    color: var(--primary-green);
    animation: none;
}

.pairs-status-indicator.warning i {
    color: var(--warning-color);
    animation: badgePulse 2s ease-in-out infinite;
}

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

/* Menu Footer */
.menu-footer {
    border-top: 1px solid rgba(0, 255, 136, 0.2);
    padding-top: var(--space-lg);
}

.menu-exit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-lg);
    border: none;
    background: linear-gradient(135deg, var(--fail-color) 0%, #CC3333 100%);
    border-radius: var(--radius);
    color: var(--pure-white);
    font-family: inherit;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: var(--transition);
    font-size: 0.9rem;
}

.menu-exit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 68, 68, 0.4);
}

/* Menu Overlay */
.menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1500;
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Updated Header Styles */
.command-grid {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 100%;
    padding: 0 var(--space-sm);
    gap: var(--space-sm);
    max-width: 100%;
}

/* Bot Status HUD */
.bot-status-hud {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 255, 136, 0.1);
    border: 1px solid rgba(0, 255, 136, 0.3);
    border-radius: var(--radius);
    backdrop-filter: blur(10px);
    min-width: 0;
    max-width: 100%;
}

.status-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    overflow: hidden;
}

.bot-status-text {
    font-weight: 600;
    color: var(--pure-white);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bot-status-message {
    font-size: 0.7rem;
    color: var(--light-gray);
    font-style: italic;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Menu Toggle Button */
.menu-toggle-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.menu-toggle-btn {
    width: 45px;
    height: 45px;
    border: none;
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-gold) 100%);
    border-radius: var(--radius);
    color: var(--dark-space);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    position: relative;
}

.menu-toggle-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.4);
}

.menu-toggle-btn.active {
    background: linear-gradient(135deg, var(--secondary-gold) 0%, var(--primary-green) 100%);
    transform: rotate(90deg);
}

/* Badge no botão de menu */
.menu-toggle-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FF4757;
    border: 2px solid #0A0A0F;
    animation: menuBadgePulse 2s ease-in-out infinite;
    z-index: 10;
}

.menu-toggle-badge.hidden {
    display: none;
}

@keyframes menuBadgePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.15);
        opacity: 0.85;
    }
}

/* Ocultar botão X no desktop */
.menu-close-btn {
    display: none;
}

/* ====================================
   MENU MOBILE COMPLETAMENTE NOVO
   ==================================== */
@media (max-width: 768px) {
    .side-menu {
        width: 100vw;
        max-width: none;
        left: -100vw;
        height: 100vh;
        height: 100dvh;
        background: linear-gradient(145deg, #0A0A0F 0%, #1A0B2E 50%, #16213E 100%);
        border: none;
        box-shadow: none;
        position: fixed;
        top: 0;
        z-index: 2000;
        overflow: hidden;
    }

    /* FUNDO ANIMADO PARA MENU MOBILE */
    .side-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(123, 44, 191, 0.1) 0%, transparent 50%),
            radial-gradient(circle at 40% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
        z-index: 0;
        animation: mobileBackgroundShift 15s ease-in-out infinite;
    }

    .side-menu::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(2px 2px at 40px 60px, rgba(255, 215, 0, 0.3), transparent),
            radial-gradient(2px 2px at 120px 180px, rgba(0, 212, 255, 0.2), transparent),
            radial-gradient(1px 1px at 200px 300px, rgba(123, 44, 191, 0.4), transparent);
        background-size: 180px 120px;
        z-index: 0;
        animation: mobileParticleFloat 20s linear infinite;
    }

    .menu-overlay {
        display: block;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 1999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .menu-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .side-menu-content {
        padding: 20px;
        gap: 20px;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 10;
    }

    /* BOTÃO FECHAR MOBILE - APENAS NO MOBILE */
    .menu-close-btn {
        position: absolute;
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
        background: #ff4444;
        color: #fff;
        border: none;
        border-radius: 50%;
        font-size: 1.2rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: all 0.2s ease;
        box-shadow: 0 2px 10px rgba(255, 68, 68, 0.3);
    }

    .menu-close-btn:hover {
        background: #ff2222;
        transform: scale(1.05);
    }

    .menu-close-btn:active {
        transform: scale(0.95);
    }

    /* CABEÇALHO MOBILE SIMPLES */
    .menu-user-section {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 20px;
        background: linear-gradient(145deg, rgba(42, 42, 42, 0.9) 0%, rgba(26, 26, 26, 0.9) 100%);
        border: 1px solid rgba(255, 215, 0, 0.3);
        border-radius: 12px;
        margin-bottom: 20px;
        box-shadow: 0 4px 15px rgba(255, 215, 0, 0.1);
        backdrop-filter: blur(10px);
    }

    .menu-user-avatar {
        width: 50px;
        height: 50px;
        background: linear-gradient(45deg, #FFD700, #00FFFF);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .menu-user-avatar i {
        font-size: 1.5rem;
        color: #000;
    }

    .menu-user-info {
        flex: 1;
    }

    .menu-user-name {
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .menu-user-role {
        font-size: 0.8rem;
        color: #aaa;
    }

    /* SEÇÃO STATUS DO BOT - OCULTAR TÍTULO NO MOBILE */
    .menu-section-title,
    .menu-items .menu-section-title,
    h4.menu-section-title {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .menu-bot-controls {
        background: linear-gradient(145deg, rgba(42, 42, 42, 0.9) 0%, rgba(26, 26, 26, 0.9) 100%);
        border: 1px solid rgba(0, 255, 136, 0.3);
        border-radius: 12px;
        padding: 20px;
        margin-bottom: 20px;
        box-shadow: 0 4px 15px rgba(0, 255, 136, 0.1);
        backdrop-filter: blur(10px);
    }

    .menu-bot-status {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 20px;
        padding: 15px;
        background: #1a1a1a;
        border-radius: 8px;
    }

    .menu-status-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: #ff4444;
    }

    .menu-status-dot.active {
        background: #00ff88;
        animation: pulse 2s infinite;
    }

    .menu-status-text {
        font-size: 0.9rem;
        font-weight: 600;
        color: #fff;
    }

    /* BOTÕES PRINCIPAIS */
    .menu-bot-buttons {
        display: flex;
        gap: 10px;
    }

    .menu-control-btn {
        flex: 1;
        padding: 15px 10px;
        background: #FFD700;
        color: #000;
        border: none;
        border-radius: 8px;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 50px;
        height: 50px;
        max-height: 50px;
        box-sizing: border-box;
    }

    .menu-control-btn:disabled {
        background: #555;
        color: #999;
        cursor: not-allowed;
    }

    .menu-control-btn.stop-btn {
        background: #ff4444;
        color: #fff;
        height: 50px;
        max-height: 50px;
        min-height: 50px;
        flex: 1;
        padding: 15px 10px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }

    .menu-control-btn:active {
        transform: scale(0.95);
    }

    .btn-text-epic {
        font-size: 0.9rem;
        font-weight: 600;
    }

    .btn-icon-container i {
        font-size: 1rem;
    }

    /* SEÇÃO OPÇÕES - PREMIUM MOBILE */
    .menu-options {
        display: flex;
        flex-direction: column;
        gap: 12px;
        padding: 0;
        margin-bottom: 20px;
    }

    .menu-option-btn {
        position: relative;
        width: 100%;
        padding: 16px 15px;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.12) 0%, rgba(123, 44, 191, 0.12) 100%);
        border: 1px solid rgba(0, 212, 255, 0.3);
        border-radius: 10px;
        color: #fff;
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.25s ease;
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 56px;
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
    }

    .menu-option-btn::before {
        content: '';
        position: absolute;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
        transition: left 0.4s ease;
    }

    .menu-option-btn:active::before {
        left: 100%;
    }

    .menu-option-btn:active {
        transform: scale(0.97);
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.18) 0%, rgba(123, 44, 191, 0.18) 100%);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }

    .menu-option-btn i {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        min-width: 38px;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.25) 0%, rgba(255, 215, 0, 0.08) 100%);
        border: 1px solid rgba(255, 215, 0, 0.35);
        border-radius: 8px;
        color: #FFD700;
        font-size: 1.15rem;
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.25);
    }

    .menu-option-btn:active i {
        transform: scale(0.92);
    }

    .menu-option-btn span {
        letter-spacing: 0.3px;
        font-family: 'Exo 2', sans-serif;
    }

    /* BOTÃO SAIR */
    .menu-exit-btn {
        width: 100%;
        padding: 18px;
        background: #ff4444;
        color: #fff;
        border: none;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        text-transform: uppercase;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-top: auto;
        min-height: 55px;
    }

    .menu-exit-btn:active {
        transform: scale(0.95);
    }

    /* REMOVER EFEITOS COMPLEXOS MAS MANTER ALGUNS SUTIS */
    .btn-energy-pulse,
    .energy-wave,
    .icon-burst,
    .burst-particle,
    .icon-static,
    .static-line,
    .avatar-ring {
        display: none !important;
    }

    /* MANTER EFEITOS DE FUNDO SUTIS */
    .btn-background-effect,
    .btn-background-effect-stop {
        opacity: 0.3 !important;
        animation-duration: 4s !important;
    }

    /* FORÇA LAYOUT SIMPLES DOS BOTÕES */
    .menu-control-btn {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        position: relative !important;
        overflow: hidden !important;
    }

    .menu-control-btn .btn-icon-container {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 8px !important;
        position: relative !important;
    }

    .menu-control-btn .btn-icon-container i {
        font-size: 1rem !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        position: static !important;
        transform: none !important;
    }

    .menu-control-btn .btn-text-epic {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
        position: static !important;
    }

    /* OTIMIZAÇÕES DE TOQUE */
    .menu-control-btn,
    .menu-option-btn,
    .menu-exit-btn {
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        user-select: none;
        -webkit-user-select: none;
    }

    /* SCROLL OTIMIZADO */
    .side-menu-content {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }

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

    /* ANIMAÇÕES PARA MENU MOBILE */
    @keyframes mobileBackgroundShift {
        0%, 100% {
            background:
                radial-gradient(circle at 20% 30%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 80% 70%, rgba(123, 44, 191, 0.1) 0%, transparent 50%),
                radial-gradient(circle at 40% 80%, rgba(0, 212, 255, 0.08) 0%, transparent 50%);
        }
        50% {
            background:
                radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.15) 0%, transparent 60%),
                radial-gradient(circle at 30% 80%, rgba(123, 44, 191, 0.12) 0%, transparent 60%),
                radial-gradient(circle at 70% 40%, rgba(0, 212, 255, 0.1) 0%, transparent 60%);
        }
    }

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

/* AJUSTES PARA CELULARES MENORES */
@media (max-width: 480px) {
    .side-menu-content {
        padding: 15px;
        gap: 15px;
    }

    .menu-user-section {
        padding: 15px;
        margin-bottom: 15px;
    }

    .menu-user-avatar {
        width: 45px;
        height: 45px;
    }

    .menu-user-avatar i {
        font-size: 1.3rem;
    }

    .menu-user-name {
        font-size: 0.9rem;
    }

    .menu-user-role {
        font-size: 0.75rem;
    }

    .menu-bot-controls,
    .menu-options {
        padding: 0;
        margin-bottom: 15px;
        gap: 10px;
    }

    .menu-bot-status {
        padding: 12px;
        margin-bottom: 15px;
    }

    .menu-control-btn {
        padding: 12px 8px;
        min-height: 48px;
        font-size: 0.85rem;
    }

    .menu-option-btn {
        padding: 14px 12px;
        min-height: 52px;
        font-size: 0.9rem;
        gap: 12px;
    }

    .menu-option-btn i {
        width: 36px;
        height: 36px;
        min-width: 36px;
        font-size: 1.05rem;
    }

    /* GARANTIR QUE TÍTULOS FICAM OCULTOS TAMBÉM EM TELAS MENORES */
    .menu-section-title,
    .menu-items .menu-section-title,
    h4.menu-section-title {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .menu-exit-btn {
        padding: 15px;
        min-height: 50px;
        font-size: 0.95rem;
    }
}

/* CELULARES MUITO PEQUENOS */
@media (max-width: 360px) {
    .side-menu-content {
        padding: 12px;
        gap: 12px;
    }

    .menu-user-section {
        padding: 12px;
        margin-bottom: 12px;
    }

    .menu-user-avatar {
        width: 40px;
        height: 40px;
    }

    .menu-user-avatar i {
        font-size: 1.2rem;
    }

    .menu-user-name {
        font-size: 0.85rem;
    }

    .menu-user-role {
        font-size: 0.7rem;
    }

    .menu-bot-controls,
    .menu-options {
        padding: 0;
        margin-bottom: 12px;
        gap: 8px;
    }

    .menu-bot-status {
        padding: 10px;
        margin-bottom: 12px;
    }

    .menu-control-btn {
        padding: 10px 6px;
        min-height: 44px;
        font-size: 0.8rem;
    }

    .menu-option-btn {
        padding: 12px 10px;
        min-height: 48px;
        font-size: 0.85rem;
        gap: 10px;
    }

    .menu-option-btn i {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 1rem;
    }

    .menu-exit-btn {
        padding: 12px;
        min-height: 45px;
        font-size: 0.9rem;
    }

    .btn-text-epic {
        font-size: 0.8rem;
    }
}

/* Desktop/Tablet - Show table, hide mobile cards */
@media (min-width: 769px) {
    .operations-log-table {
        display: block;
    }

    .mobile-operations-cards {
        display: none;
    }
}

/* Desktop Layout Expansion */
@media (min-width: 1200px) {
    .neural-interface {
        max-width: none;
        padding: var(--space-xl) var(--space-lg);
    }

    .neural-stats-grid {
        grid-template-columns: repeat(4, 1fr);
        max-width: none;
        gap: var(--space-md);
    }

    .neural-operations-log-section {
        max-width: none;
    }

    .neural-table {
        font-size: 0.9rem;
    }
}

/* === SETTINGS MODAL === */
.settings-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 10000;
    animation: fadeIn 0.3s ease;
}

.settings-modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: center;
}

.settings-modal {
    background: var(--gradient-card);
    border: 1px solid var(--primary-green);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-neural-heavy);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn 0.4s ease;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }

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

.settings-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md);
    border-bottom: 1px solid var(--primary-green);
    background: rgba(0, 255, 136, 0.08);
}

.settings-modal-header h2 {
    color: var(--primary-gold);
    font-size: 1.5rem;
    font-weight: 600;
    display: flex;
    gap: var(--space-sm);
    align-items: center;
}

/* Pequena logo no header do modal, combinando com a do dashboard */
.settings-logo {
    position: relative;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.settings-logo::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px dashed var(--accent-cyan);
    opacity: 0.7;
}

.settings-logo::after {
    content: '';
    width: 10px;
    height: 10px;
    background: var(--gradient-cyber);
    border-radius: 50%;
}

.settings-close-btn {
    background: none;
    border: none;
    color: var(--light-gray);
    font-size: 1.5rem;
    cursor: pointer;
    transition: var(--transition);
}

.settings-close-btn:hover {
    color: var(--primary-gold);
    transform: rotate(90deg);
}

.settings-tabs {
    display: flex;
    background: var(--dark-space);
    border-bottom: 1px solid var(--primary-green);
}

.settings-tab {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
    background: none;
    border: none;
    color: var(--light-gray);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.9rem;
    font-weight: 500;
}

.settings-tab:hover {
    background: rgba(0, 255, 136, 0.1);
    color: var(--primary-gold);
}

.settings-tab.active {
    background: var(--primary-gold);
    color: var(--dark-space);
    font-weight: 600;
}

.settings-content {
    padding: var(--space-md);
}

.settings-tab-content {
    display: none;
}

.settings-tab-content.active {
    display: block;
}

.settings-section h3 {
    color: var(--primary-gold);
    margin-bottom: var(--space-md);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-md);
}

.settings-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.settings-field label {
    color: var(--pure-white);
    font-weight: 500;
    font-size: 0.9rem;
}

.settings-field input,
.settings-field select {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 136, 0.35);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    color: var(--pure-white);
    font-size: 0.95rem;
    transition: var(--transition);
}

.settings-field input:focus,
.settings-field select:focus {
    outline: none;
    border-color: var(--primary-gold);
    box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.25);
    background: rgba(255, 255, 255, 0.06);
}

.settings-field small {
    color: var(--light-gray);
    font-size: 0.8rem;
}

.coming-soon {
    text-align: center;
    padding: var(--space-xl);
    color: var(--light-gray);
}

.coming-soon i {
    font-size: 3rem;
    color: var(--primary-gold);
    margin-bottom: var(--space-md);
}

.coming-soon h4 {
    color: var(--primary-gold);
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.settings-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md);
    border-top: 1px solid var(--primary-green);
    background: rgba(0, 255, 136, 0.05);
}

.settings-btn {
    padding: var(--space-sm) var(--space-md);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-weight: 500;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.settings-btn.cancel {
    background: var(--medium-dark);
    color: var(--light-gray);
    border: 1px solid var(--light-gray);
}

.settings-btn.cancel:hover {
    background: var(--light-gray);
    color: var(--dark-space);
}

.settings-btn.save {
    background: var(--primary-gold);
    color: var(--dark-space);
}

/* ============================================
   EPIC SETTINGS MODAL - ULTIMATE REDESIGN
   ============================================ */

/* Epic Settings Overlay */
.epic-settings-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(15, 20, 35, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%);
    backdrop-filter: blur(20px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.epic-settings-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Epic Settings Container */
.epic-settings-container {
    position: relative;
    width: 100%;
    max-width: 1400px;
    max-height: 95vh;
    background: linear-gradient(135deg,
        rgba(20, 25, 45, 0.95) 0%,
        rgba(15, 20, 35, 0.98) 50%,
        rgba(10, 15, 25, 0.99) 100%);
    border: 2px solid;
    border-image: linear-gradient(45deg, var(--primary-gold), var(--accent-cyan), var(--primary-gold)) 1;
    border-radius: 2rem;
    box-shadow:
        0 0 50px rgba(255, 215, 0, 0.3),
        0 0 100px rgba(0, 255, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    overflow: hidden;
    transform: scale(0.8) translateY(50px);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.epic-settings-overlay.active .epic-settings-container {
    transform: scale(1) translateY(0);
}

/* Neural Background Effects */
.neural-bg-effects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: hidden;
}

.neural-particle {
    position: absolute;
    width: 2px;
    height: 2px;
    background: var(--primary-gold);
    border-radius: 50%;
    opacity: 0.6;
    animation: neuralFloat 15s linear infinite;
}

.neural-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.neural-particle:nth-child(2) { left: 30%; animation-delay: 3s; }
.neural-particle:nth-child(3) { left: 50%; animation-delay: 6s; }
.neural-particle:nth-child(4) { left: 70%; animation-delay: 9s; }
.neural-particle:nth-child(5) { left: 90%; animation-delay: 12s; }

@keyframes neuralFloat {
    0% { transform: translateY(100vh) scale(0); opacity: 0; }
    10% { opacity: 0.6; }
    90% { opacity: 0.6; }
    100% { transform: translateY(-100px) scale(1); opacity: 0; }
}

/* Epic Header */
.epic-settings-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem 3rem;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.1) 0%, rgba(0, 255, 255, 0.1) 100%);
    border-bottom: 1px solid rgba(255, 215, 0, 0.3);
    position: relative;
}

/* Header Neural Core */
.header-neural-core {
    position: relative;
    width: 60px;
    height: 60px;
    margin-right: 1.5rem;
}

.core-ring-1, .core-ring-2, .core-ring-3 {
    position: absolute;
    border: 1px solid;
    border-radius: 50%;
    animation: coreRotate 10s linear infinite;
}

.core-ring-1 {
    width: 60px;
    height: 60px;
    border-color: var(--primary-gold);
    animation-duration: 8s;
}

.core-ring-2 {
    width: 45px;
    height: 45px;
    top: 7.5px;
    left: 7.5px;
    border-color: var(--accent-cyan);
    animation-duration: 12s;
    animation-direction: reverse;
}

.core-ring-3 {
    width: 30px;
    height: 30px;
    top: 15px;
    left: 15px;
    border-color: var(--primary-gold);
    animation-duration: 6s;
}

.core-center {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 20px;
    height: 20px;
    background: linear-gradient(45deg, var(--primary-gold), var(--accent-cyan));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--dark-space);
}

.core-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, var(--primary-gold), transparent);
    border-radius: 50%;
    animation: corePulse 2s ease-in-out infinite;
}

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

@keyframes corePulse {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.2); }
}

/* Epic Title Section */
.header-title-section {
    flex: 1;
    position: relative;
}

.epic-title .title-main {
    display: block;
    font-size: 2.5rem;
    font-weight: 800;
    background: linear-gradient(45deg, var(--primary-gold), var(--accent-cyan));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.epic-title .title-sub {
    display: block;
    font-size: 1rem;
    color: var(--light-gray);
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
}

.title-effects {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 2px;
}

.effect-line {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-gold), transparent);
    animation: titleScan 3s ease-in-out infinite;
}

.effect-line.line-1 { width: 30%; animation-delay: 0s; }
.effect-line.line-2 { width: 50%; left: 25%; animation-delay: 1s; }
.effect-line.line-3 { width: 40%; left: 60%; animation-delay: 2s; }

@keyframes titleScan {
    0%, 100% { opacity: 0.3; transform: scaleX(0.5); }
    50% { opacity: 1; transform: scaleX(1); }
}

/* Epic Close Button */
.epic-close-btn {
    position: relative;
    width: 50px;
    height: 50px;
    background: transparent;
    border: 2px solid var(--primary-gold);
    border-radius: 50%;
    color: var(--primary-gold);
    font-size: 1.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
}

.close-bg-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--primary-gold), var(--accent-cyan));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.epic-close-btn:hover .close-bg-effect {
    opacity: 0.2;
}

.close-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 215, 0, 0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.epic-close-btn:active .close-ripple {
    width: 100px;
    height: 100px;
}

/* Epic Navigation */
.epic-nav-container {
    position: relative;
    padding: 0 3rem;
    background: rgba(0, 0, 0, 0.3);
}

.nav-background-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 215, 0, 0.05) 0%,
        rgba(0, 255, 255, 0.05) 50%,
        rgba(255, 215, 0, 0.05) 100%);
    animation: navGlow 4s ease-in-out infinite;
}

@keyframes navGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

.epic-nav-tabs {
    display: flex;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.epic-nav-tab {
    position: relative;
    flex: 1;
    padding: 1.5rem 2rem;
    background: transparent;
    border: none;
    color: var(--light-gray);
    cursor: pointer;
    transition: all 0.3s ease;
    overflow: hidden;
    border-bottom: 3px solid transparent;
}

.tab-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(0, 255, 255, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.epic-nav-tab:hover .tab-background,
.epic-nav-tab.active .tab-background {
    opacity: 1;
}

.epic-nav-tab.active {
    color: var(--primary-gold);
    border-bottom-color: var(--primary-gold);
}

.tab-icon-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.icon-glow-effect {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, var(--primary-gold), transparent);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.epic-nav-tab.active .icon-glow-effect {
    opacity: 0.6;
    animation: iconPulse 2s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.8); opacity: 0.4; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.8; }
}

.tab-text {
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: 1px;
}

.tab-energy-flow {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.energy-dot {
    width: 4px;
    height: 4px;
    background: var(--accent-cyan);
    border-radius: 50%;
    opacity: 0;
}

.epic-nav-tab.active .energy-dot {
    animation: energyFlow 1.5s ease-in-out infinite;
}

.epic-nav-tab.active .energy-dot.dot-1 { animation-delay: 0s; }
.epic-nav-tab.active .energy-dot.dot-2 { animation-delay: 0.5s; }
.epic-nav-tab.active .energy-dot.dot-3 { animation-delay: 1s; }

@keyframes energyFlow {
    0%, 100% { opacity: 0; transform: scale(0.5); }
    50% { opacity: 1; transform: scale(1.5); }
}

/* Epic Content */
.epic-settings-content {
    padding: 3rem;
    max-height: 60vh;
    overflow-y: auto;
    position: relative;
}

.epic-settings-content::-webkit-scrollbar {
    width: 8px;
}

.epic-settings-content::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.epic-settings-content::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, var(--primary-gold), var(--accent-cyan));
    border-radius: 4px;
}

.epic-tab-content {
    display: none;
    animation: tabFadeIn 0.5s ease-in-out;
}

.epic-tab-content.active {
    display: block;
}

@keyframes tabFadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Content Section Title */
.content-section-title {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
}

.section-icon {
    position: relative;
    display: inline-block;
    font-size: 3rem;
    color: var(--primary-gold);
    margin-bottom: 1rem;
}

.icon-energy-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 60px;
    height: 60px;
    border: 2px solid var(--accent-cyan);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: energyRingRotate 8s linear infinite;
}

@keyframes energyRingRotate {
    0% { transform: translate(-50%, -50%) rotate(0deg) scale(1); opacity: 0.5; }
    50% { transform: translate(-50%, -50%) rotate(180deg) scale(1.1); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(360deg) scale(1); opacity: 0.5; }
}

.content-section-title h2 {
    font-size: 2rem;
    font-weight: 700;
    background: linear-gradient(45deg, var(--primary-gold), var(--accent-cyan));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.5rem;
    letter-spacing: 2px;
}

.section-subtitle {
    color: var(--light-gray);
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 1px;
}

/* Epic Settings Grid */
.epic-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* Epic Control Cards */
.epic-control-card {
    position: relative;
    background: linear-gradient(135deg,
        rgba(20, 25, 45, 0.8) 0%,
        rgba(15, 20, 35, 0.9) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    overflow: hidden;
}

.epic-control-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 215, 0, 0.2);
}

.card-glow-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
        rgba(255, 215, 0, 0.1),
        rgba(0, 255, 255, 0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.epic-control-card:hover .card-glow-effect {
    opacity: 1;
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
}

.card-icon {
    position: relative;
    width: 40px;
    height: 40px;
    background: linear-gradient(45deg, var(--primary-gold), var(--accent-cyan));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.2rem;
    color: var(--dark-space);
}

.icon-pulse {
    position: absolute;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50%;
    animation: cardIconPulse 3s ease-in-out infinite;
}

@keyframes cardIconPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.card-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--primary-gold);
    margin: 0;
}

/* Epic Input Container */
.epic-input-container {
    position: relative;
    margin-bottom: 0.5rem;
}

.epic-input {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 0.5rem;
    color: var(--light-gray);
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.epic-input:focus {
    outline: none;
    border-color: var(--primary-gold);
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.input-energy-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-gold), var(--accent-cyan));
    transition: width 0.3s ease;
}

.epic-input:focus + .input-energy-bar {
    width: 100%;
}

.input-scanner {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 215, 0, 0.2),
        transparent);
    transition: left 0.3s ease;
}

.epic-input:focus ~ .input-scanner {
    left: 100%;
}

/* Epic Select Container */
.epic-select-container {
    position: relative;
}

.epic-select {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 0.5rem;
    color: var(--light-gray);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    appearance: none;
    position: relative;
    z-index: 1;
}

.epic-select:focus {
    outline: none;
    border-color: var(--primary-gold);
    background: rgba(0, 0, 0, 0.7);
    color: var(--white);
}

.select-energy-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-gold), var(--accent-cyan));
    transition: width 0.3s ease;
}

.epic-select:focus + .select-energy-bar {
    width: 100%;
}

.select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-gold);
    pointer-events: none;
    transition: transform 0.3s ease;
}

.epic-select:focus ~ .select-arrow {
    transform: translateY(-50%) rotate(180deg);
}

.input-description {
    color: var(--light-gray);
    font-size: 0.85rem;
    font-weight: 300;
    margin-top: 0.5rem;
    opacity: 0.8;
}

/* Special Card Variants */
.success-card {
    border-color: rgba(0, 255, 100, 0.5);
}

.success-glow {
    background: linear-gradient(45deg, rgba(0, 255, 100, 0.1), rgba(0, 255, 255, 0.1));
}

.success-pulse {
    background: linear-gradient(45deg, #00ff64, var(--accent-cyan));
}

.success-bar {
    background: linear-gradient(90deg, #00ff64, var(--accent-cyan));
}

.danger-card {
    border-color: rgba(255, 0, 100, 0.5);
}

.danger-glow {
    background: linear-gradient(45deg, rgba(255, 0, 100, 0.1), rgba(255, 100, 0, 0.1));
}

.danger-pulse {
    background: linear-gradient(45deg, #ff0064, #ff6400);
}

.danger-bar {
    background: linear-gradient(90deg, #ff0064, #ff6400);
}

.wide-card {
    grid-column: span 2;
}

/* Epic Coming Soon */
.epic-coming-soon {
    position: relative;
    padding: 4rem;
    text-align: center;
    background: linear-gradient(135deg,
        rgba(20, 25, 45, 0.3) 0%,
        rgba(15, 20, 35, 0.5) 100%);
    border: 2px dashed rgba(255, 215, 0, 0.3);
    border-radius: 1rem;
    overflow: hidden;
}

.coming-soon-bg-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg,
        rgba(255, 215, 0, 0.05),
        rgba(0, 255, 255, 0.05));
    animation: comingSoonGlow 4s ease-in-out infinite;
}

@keyframes comingSoonGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.8; }
}

.coming-soon-content {
    position: relative;
    z-index: 1;
}

.rocket-container {
    position: relative;
    display: inline-block;
    font-size: 4rem;
    color: var(--primary-gold);
    margin-bottom: 2rem;
    animation: rocketFloat 3s ease-in-out infinite;
}

@keyframes rocketFloat {
    0%, 100% { transform: translateY(0) rotate(-5deg); }
    50% { transform: translateY(-10px) rotate(5deg); }
}

.rocket-trail {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.trail-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent-cyan);
    border-radius: 50%;
    animation: trailFloat 2s ease-in-out infinite;
}

.trail-particle:nth-child(1) { left: -10px; animation-delay: 0s; }
.trail-particle:nth-child(2) { left: -5px; animation-delay: 0.5s; }
.trail-particle:nth-child(3) { left: 5px; animation-delay: 1s; }
.trail-particle:nth-child(4) { left: 10px; animation-delay: 1.5s; }

@keyframes trailFloat {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(30px) scale(0.3); }
}

.epic-coming-soon h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-gold);
    margin-bottom: 1rem;
    letter-spacing: 2px;
}

.epic-coming-soon p {
    color: var(--light-gray);
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.progress-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.progress-dot.active {
    background: var(--primary-gold);
    box-shadow: 0 0 10px var(--primary-gold);
    animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.eta-info {
    color: var(--accent-cyan);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

/* Epic Footer */
.epic-settings-footer {
    position: relative;
    padding: 2rem 3rem;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(10, 15, 25, 0.9) 100%);
    border-top: 1px solid rgba(255, 215, 0, 0.3);
}

.footer-background-effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
        rgba(255, 215, 0, 0.05) 0%,
        rgba(0, 255, 255, 0.05) 50%,
        rgba(255, 215, 0, 0.05) 100%);
    animation: footerGlow 5s ease-in-out infinite;
}

@keyframes footerGlow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
}

.footer-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

/* Epic Buttons */
.epic-btn {
    position: relative;
    padding: 1rem 2rem;
    background: transparent;
    border: 2px solid;
    border-radius: 0.8rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    overflow: hidden;
    min-width: 180px;
}

.btn-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-energy-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.energy-ring {
    position: absolute;
    border: 1px solid;
    border-radius: 50%;
    opacity: 0;
}

.energy-ring.ring-1 {
    width: 60px;
    height: 60px;
    margin: -30px;
}

.energy-ring.ring-2 {
    width: 80px;
    height: 80px;
    margin: -40px;
}

/* Cancel Button */
.cancel-btn {
    border-color: rgba(128, 128, 128, 0.5);
    color: var(--light-gray);
}

.cancel-btn .btn-background {
    background: linear-gradient(45deg, rgba(128, 128, 128, 0.2), rgba(64, 64, 64, 0.3));
}

.cancel-btn:hover {
    border-color: var(--light-gray);
    color: var(--white);
}

.cancel-btn:hover .btn-background {
    opacity: 1;
}

.cancel-btn:hover .energy-ring {
    border-color: var(--light-gray);
    opacity: 0.6;
    animation: energyRingExpand 1s ease-out;
}

/* Save Button */
.save-btn {
    border-color: var(--primary-gold);
    color: var(--primary-gold);
}

.save-btn .btn-background {
    background: linear-gradient(45deg, var(--primary-gold), var(--accent-cyan));
}

.save-btn:hover {
    color: var(--dark-space);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
}

.save-btn:hover .btn-background {
    opacity: 1;
}

.save-btn:hover .energy-ring {
    border-color: var(--accent-cyan);
    opacity: 0.8;
    animation: energyRingExpand 1s ease-out;
}

@keyframes energyRingExpand {
    0% { transform: scale(0); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: scale(1.5); opacity: 0; }
}

.success-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.success-particles .particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--accent-cyan);
    border-radius: 50%;
    opacity: 0;
}

.save-btn:active .success-particles .particle {
    animation: particleBurst 0.6s ease-out;
}

.success-particles .particle:nth-child(1) { animation-delay: 0s; }
.success-particles .particle:nth-child(2) { animation-delay: 0.2s; }
.success-particles .particle:nth-child(3) { animation-delay: 0.4s; }

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

/* Mobile Responsive */
@media (max-width: 1200px) {
    .epic-settings-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }

    .wide-card {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .epic-settings-overlay {
        padding: 1rem;
    }

    .epic-settings-container {
        border-radius: 1rem;
    }

    .epic-settings-header {
        padding: 1.5rem;
        flex-direction: column;
        text-align: center;
    }

    .header-neural-core {
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .epic-title .title-main {
        font-size: 2rem;
    }

    .epic-nav-tabs {
        flex-direction: column;
    }

    .epic-nav-tab {
        padding: 1rem;
    }

    .epic-settings-content {
        padding: 2rem;
        max-height: 50vh;
    }

    .epic-settings-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .epic-settings-footer {
        padding: 1.5rem;
    }

    .footer-buttons {
        flex-direction: column;
    }

    .epic-btn {
        min-width: auto;
    }
}

/* ========================================
   CARD DE ESTATÍSTICAS AVANÇADAS
   ======================================== */

.stats-neural-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.stat-neural-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: linear-gradient(135deg, rgba(123, 44, 191, 0.1), rgba(90, 24, 154, 0.1));
    border: 2px solid rgba(123, 44, 191, 0.3);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.stat-neural-item:hover {
    transform: translateY(-3px);
    border-color: var(--primary-gold);
    box-shadow: 0 8px 20px rgba(255, 215, 0, 0.2);
}

.stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--royal-purple), var(--electric-blue));
    border-radius: 10px;
    font-size: 1.25rem;
    color: var(--pure-white);
}

.stat-icon.success {
    background: linear-gradient(135deg, var(--cyber-green), var(--primary-green));
}

.stat-icon.fail {
    background: linear-gradient(135deg, var(--neon-pink), var(--fail-red));
}

.stat-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-family: 'Rajdhani', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-gold);
}

/* ========================================
   BOTÃO TOGGLE ANÁLISE
   ======================================== */

.toggle-analysis-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.2), rgba(39, 174, 96, 0.2));
    border: 2px solid rgba(46, 204, 113, 0.5);
    border-radius: 8px;
    color: var(--pure-white);
    font-family: 'Rajdhani', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.toggle-analysis-btn:hover {
    background: linear-gradient(135deg, rgba(46, 204, 113, 0.3), rgba(39, 174, 96, 0.3));
    border-color: #2ecc71;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(46, 204, 113, 0.4);
}

.toggle-analysis-btn i {
    font-size: 1.1rem;
    transition: all 0.3s ease;
    color: #2ecc71;
}

.toggle-analysis-btn:hover i {
    transform: scale(1.1);
}

/* Estado quando está escondido (vermelho) */
.toggle-analysis-btn[data-hidden="true"] {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.2), rgba(192, 57, 43, 0.2));
    border-color: rgba(231, 76, 60, 0.5);
}

.toggle-analysis-btn[data-hidden="true"]:hover {
    background: linear-gradient(135deg, rgba(231, 76, 60, 0.3), rgba(192, 57, 43, 0.3));
    border-color: #e74c3c;
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
}

.toggle-analysis-btn[data-hidden="true"] i {
    color: #e74c3c;
}

/* ======================================
   MODAL DE ESTRATÉGIAS
====================================== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal-overlay.active {
    display: flex;
}

.modal-container {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border-radius: 20px;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 255, 255, 0.3);
    border: 2px solid rgba(0, 255, 255, 0.3);
    animation: slideUp 0.3s ease;
}

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

.modal-header {
    background: linear-gradient(135deg, #0f3460 0%, #16213e 100%);
    padding: 1.5rem;
    border-bottom: 2px solid rgba(0, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.modal-title {
    color: #00ffff;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.modal-title i {
    font-size: 1.75rem;
}

.modal-close-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-close-btn:hover {
    background: rgba(231, 76, 60, 0.3);
    border-color: #e74c3c;
    transform: rotate(90deg);
}

/* ✅ CSS Base para modais genéricos (.modal) */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.modal > .modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
    display: flex;
    flex-direction: column;
    background: var(--bg-secondary, #1a1a2e);
    border-radius: 12px;
}

.modal > .modal-content > .modal-header {
    flex-shrink: 0;
}

.modal > .modal-content > .modal-body {
    flex: 1;
    overflow-y: auto !important;
    max-height: calc(70vh - 100px) !important;
    -webkit-overflow-scrolling: touch;
}

.modal > .modal-content > .modal-footer {
    flex-shrink: 0;
}

/* Modais específicos - Scroll garantido */
#modalTestPreset .modal-content,
#modalPresetDetails .modal-content,
#modalPayment .modal-content,
#modalBuyPreset .modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
}

#modalTestPreset .modal-body,
#modalPresetDetails .modal-body,
#modalBuyPreset .modal-body {
    overflow-y: auto !important;
    max-height: 60vh !important;
    -webkit-overflow-scrolling: touch;
}

/* Modal de Pagamento - Scroll especial */
#modalPayment {
    overflow-y: auto !important;
    padding: 10px !important;
}

#modalPayment .modal-content {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
    margin: auto !important;
}

#modalPayment .modal-body {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}

.modal-content {
    padding: 2rem;
    padding-bottom: 6rem; /* Espaço extra para o botão não ficar cortado */
    max-height: calc(90vh - 150px);
    overflow-y: auto;
}

.modal-content.hidden {
    display: none;
}

/* Estilização da Scrollbar */
.modal-content::-webkit-scrollbar {
    width: 12px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(15, 52, 96, 0.3);
    border-radius: 10px;
    border: 1px solid rgba(0, 255, 255, 0.1);
}

.modal-content::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    border-radius: 10px;
    border: 2px solid rgba(15, 52, 96, 0.5);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #00ffff 0%, #00ff88 100%);
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

/* Firefox */
.modal-content {
    scrollbar-width: thin;
    scrollbar-color: #00d4ff rgba(15, 52, 96, 0.3);
}

/* Aplicar scrollbar personalizada em outras áreas do modal */
.pairs-details-table::-webkit-scrollbar,
.performance-table-container::-webkit-scrollbar,
.operations-log-table::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.pairs-details-table::-webkit-scrollbar-track,
.performance-table-container::-webkit-scrollbar-track,
.operations-log-table::-webkit-scrollbar-track {
    background: rgba(15, 52, 96, 0.3);
    border-radius: 10px;
}

.pairs-details-table::-webkit-scrollbar-thumb,
.performance-table-container::-webkit-scrollbar-thumb,
.operations-log-table::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    border-radius: 10px;
    border: 2px solid rgba(15, 52, 96, 0.5);
}

.pairs-details-table::-webkit-scrollbar-thumb:hover,
.performance-table-container::-webkit-scrollbar-thumb:hover,
.operations-log-table::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #00ffff 0%, #00ff88 100%);
}

/* Strategies Tabs */
.strategies-tabs {
    display: flex;
    background: rgba(15, 52, 96, 0.3);
    border-bottom: 2px solid rgba(0, 255, 255, 0.2);
    padding: 0;
    gap: 0;
}

.strategy-tab-btn {
    flex: 1;
    padding: 1.2rem 2rem;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    border-bottom: 3px solid transparent;
    position: relative;
}

.strategy-tab-btn i {
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.strategy-tab-btn:hover {
    background: rgba(0, 212, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.strategy-tab-btn.active {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 255, 255, 0.1) 100%);
    color: #00ffff;
    border-bottom-color: #00ffff;
    box-shadow: 0 -2px 10px rgba(0, 255, 255, 0.3);
}

.strategy-tab-btn.active i {
    transform: scale(1.1);
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.6));
}

/* Tab Content */
.strategy-tab-content {
    display: none;
}

.strategy-tab-content.active {
    display: block;
}

/* Section Header for Strategies */
.section-header-strategies {
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 255, 255, 0.2);
}

.section-title-strategies {
    color: #00ffff;
    font-size: 1.3rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.section-title-strategies i {
    font-size: 1.4rem;
}

/* Timeframe Config Section */
.timeframe-config-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.info-box {
    background: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 10px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.info-box i {
    color: #00d4ff;
    font-size: 1.5rem;
}

.info-box p {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
}

.info-box-small {
    background: rgba(0, 212, 255, 0.08);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.info-box-small i {
    color: #00d4ff;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.info-box-small span {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    line-height: 1.4;
}

.info-tooltip {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    cursor: help;
    margin-left: 0.5rem;
}

.info-tooltip:hover {
    color: #00d4ff;
}

/* Timeframe Preview */
.timeframe-preview {
    background: linear-gradient(135deg, rgba(15, 52, 96, 0.4) 0%, rgba(22, 33, 62, 0.4) 100%);
    border: 2px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1rem;
}

.timeframe-preview h4 {
    color: #00ffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.preview-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.preview-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.85rem;
    font-weight: 500;
}

.preview-value {
    color: #00ffff;
    font-size: 1rem;
    font-weight: 600;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

/* Botão de Catalogar */
.catalog-button-section {
    text-align: center;
    margin: 0.75rem 0;
    padding: 0.75rem;
    background: rgba(0, 212, 255, 0.05);
    border-radius: 8px;
    border: 2px dashed rgba(0, 212, 255, 0.3);
}

.btn-catalog {
    padding: 0.6rem 1.5rem;
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    border: none;
    border-radius: 8px;
    color: #0a0a0f;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 3px 12px rgba(0, 212, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-catalog:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(0, 212, 255, 0.6);
    background: linear-gradient(135deg, #00ffff 0%, #00ff88 100%);
}

.btn-catalog:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.btn-catalog i {
    font-size: 1rem;
}

/* Responsividade para as abas */
@media (max-width: 768px) {
    /* ✅ CORREÇÃO: Tabs organizadas e compactas no celular */
    .strategies-tabs {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.25rem;
        padding: 0.5rem;
        background: rgba(15, 52, 96, 0.3);
        border-bottom: 2px solid rgba(0, 255, 255, 0.2);
    }

    .strategy-tab-btn {
        padding: 0.75rem 0.25rem;
        font-size: 0.7rem;
        gap: 0.25rem;
        flex-direction: column;
        min-width: auto;
        border-radius: 8px;
        border: 1px solid rgba(0, 255, 255, 0.2);
    }

    .strategy-tab-btn span {
        display: block;
        font-size: 0.65rem;
        text-align: center;
        line-height: 1.1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    .strategy-tab-btn i {
        font-size: 1.2rem;
        margin: 0;
    }

    .strategy-tab-btn.active {
        border-color: #00ffff;
        border-bottom-width: 1px;
    }

    .section-title-strategies {
        font-size: 1rem;
        padding: 0.75rem 0;
    }

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

    .btn-catalog {
        padding: 0.875rem 1.5rem;
        font-size: 0.95rem;
    }

    /* ✅ CORREÇÃO: Modal de estratégias responsivo */
    .strategies-modal {
        max-height: 95vh;
        width: 95vw;
        margin: auto;
    }

    .modal-content {
        max-height: calc(95vh - 250px);
        overflow-y: auto;
        padding: 1rem;
        padding-bottom: 120px; /* Mais espaço para botão */
    }

    .modal-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(15, 52, 96, 0.98);
        backdrop-filter: blur(15px);
        padding: 1rem;
        border-top: 2px solid rgba(0, 255, 255, 0.3);
        box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.5);
        z-index: 1000;
    }

    .modal-footer .modal-actions {
        display: flex;
        gap: 0.5rem;
        justify-content: stretch;
    }

    .modal-footer .modal-actions button {
        flex: 1;
        padding: 1rem;
        font-size: 0.9rem;
    }

    /* Gerenciamento modal tabs também */
    .modal-tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        padding: 0.5rem;
    }

    .modal-tab {
        padding: 0.75rem;
        font-size: 0.85rem;
    }

    .modal-tab i {
        font-size: 1.1rem;
    }

    /* ✅ Modal de Pagamento PIX - Responsivo */
    #modalPayment {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #modalPayment .modal-content {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #modalPayment .modal-body {
        max-height: 70vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 2rem !important;
    }

    /* ✅ Modal de Teste - Responsivo */
    #modalTestPreset {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #modalTestPreset > div {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ✅ Modal de Detalhes - Responsivo */
    #modalPresetDetails {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #modalPresetDetails > div {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    /* ✅ Modal de Compra - Responsivo */
    #modalBuyPreset {
        align-items: flex-end !important;
        padding: 0 !important;
    }

    #modalBuyPreset > div {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 !important;
        border-radius: 16px 16px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #modalPayment .modal-header,
    #modalTestPreset .modal-header,
    #modalPresetDetails .modal-header,
    #modalBuyPreset .modal-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 10 !important;
    }

    #modalPayment .modal-header {
        padding: 1.25rem !important;
        border-radius: 16px 16px 0 0 !important;
    }

    #modalPayment .modal-header i.fa-qrcode {
        font-size: 32px !important;
    }

    #modalPayment .modal-header h3 {
        font-size: 18px !important;
    }

    #modalPayment .modal-body {
        padding: 1rem !important;
    }

    #modalPayment #paymentValue {
        font-size: 32px !important;
    }

    #modalPayment #paymentQrImage {
        width: 200px !important;
        height: 200px !important;
    }

    #modalPayment textarea#paymentPixCode {
        font-size: 10px !important;
        height: 60px !important;
    }

    #modalPayment input {
        font-size: 16px !important; /* Evita zoom no iOS */
    }

    #modalPayment button {
        padding: 12px !important;
        font-size: 14px !important;
    }
}

/* Step Indicator */
.step-indicator {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 255, 255, 0.1);
}

.step-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
}

.step-badge.active {
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    border-color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.step-badge.completed {
    background: linear-gradient(135deg, #00ff88 0%, #00ffaa 100%);
    border-color: #00ff88;
}

.step-text {
    color: #00ffff;
    font-size: 1.1rem;
    font-weight: 600;
}

/* Config Section */
.candles-config-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.config-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.config-label {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.config-label i {
    color: #00ffff;
}

.config-select {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    color: #fff;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.config-select:hover,
.config-select:focus {
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    outline: none;
}

.config-select option {
    background: #1a1a2e;
    color: #fff;
}

.config-hint {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    font-style: italic;
}

/* Pairs Grid */
.pairs-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.pair-category {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
}

.category-title {
    color: #00ffff;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.75rem 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.pairs-checkboxes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 0.75rem;
}

.pair-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
}

.pair-checkbox:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.3);
}

.pair-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #00ffff;
    cursor: pointer;
}

.pair-checkbox span {
    color: #fff;
    font-size: 0.875rem;
    font-weight: 500;
}

/* Controles de Seleção de Pares */
.pairs-selection-controls {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.btn-select-all,
.btn-deselect-all {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 2px solid rgba(0, 255, 255, 0.3);
    background: rgba(0, 255, 255, 0.05);
    color: #00ffff;
}

.btn-select-all:hover,
.btn-deselect-all:hover {
    background: rgba(0, 255, 255, 0.15);
    border-color: #00ffff;
    transform: translateY(-2px);
}

.btn-deselect-all {
    border-color: rgba(255, 100, 100, 0.3);
    background: rgba(255, 100, 100, 0.05);
    color: #ff6464;
}

.btn-deselect-all:hover {
    background: rgba(255, 100, 100, 0.15);
    border-color: #ff6464;
}

/* Modal Actions */
.modal-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem; /* Padding extra no bottom */
    border-top: 2px solid rgba(0, 255, 255, 0.1);
}

.btn-primary,
.btn-secondary {
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: none;
}

.btn-primary {
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    color: #0f0f1e;
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 255, 255, 0.5);
}

.btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Candles Status */
.candles-status {
    background: rgba(0, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.status-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
}

.status-item i {
    color: #00ff88;
    font-size: 1.2rem;
}

.status-item strong {
    color: #00ffff;
}

/* Strategies List */
.strategies-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.strategy-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 255, 0.2);
    border-radius: 15px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.strategy-card:hover {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.2);
}

.strategy-header {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.strategy-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: #0f0f1e;
}

.strategy-info {
    flex: 1;
}

.strategy-name {
    color: #00ffff;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
}

.strategy-description {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    margin: 0;
}

/* Toggle Switch */
.strategy-toggle {
    display: flex;
    align-items: center;
}

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.2);
    transition: 0.4s;
    border-radius: 34px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

input:checked + .slider {
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    border-color: #00ffff;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
}

input:checked + .slider:before {
    transform: translateX(26px);
}

/* Strategy Config */
.strategy-config {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 2px solid rgba(0, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.config-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.config-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.config-item label {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.config-item label i {
    font-size: 0.75rem;
    opacity: 0.7;
}

.config-item input[type="number"],
.config-item .config-input {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    color: #fff;
    font-size: 0.9rem;
}

.config-item input[type="number"]:focus,
.config-item .config-input:focus {
    outline: none;
    border-color: #00ffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

.config-item small {
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
    line-height: 1.3;
    margin-top: 0.15rem;
}

.config-select {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
    color: #fff;
    font-size: 0.9rem;
}

.config-select:focus {
    outline: none;
    border-color: #00ffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

/* Strategy Stats */
.strategy-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.6rem;
    margin-top: 0.75rem;
}

.stat-box {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    text-align: center;
}

.stat-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    color: #00ffff;
    font-size: 1.1rem;
    font-weight: 700;
}

/* ======================================
   ESTILOS ADICIONAIS PARA MODAIS
====================================== */
.config-section {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.config-input {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 6px;
    padding: 0.5rem 0.7rem;
    color: #fff;
    font-size: 0.9rem;
    width: 100%;
}

.config-input:focus {
    outline: none;
    border-color: #00ffff;
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

.antiloss-status,
.sorosgale-status,
.risk-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(0, 255, 255, 0.1);
}

.status-box {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    text-align: center;
}

.status-label {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.status-value {
    color: #00ffff;
    font-size: 1.2rem;
    font-weight: 700;
}

.risk-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.section-title {
    color: #00ffff;
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Loading Progress - VISUAL MELHORADO */
.loading-progress {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.1) 0%, rgba(0, 255, 136, 0.1) 100%);
    border: 2px solid rgba(0, 255, 136, 0.3);
    border-radius: 15px;
    padding: 2rem;
    margin: 2rem 0;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 8px 32px rgba(0, 255, 136, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.loading-progress::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(0, 255, 136, 0.1) 50%,
        transparent 70%
    );
    animation: shimmerSweep 3s infinite;
}

@keyframes shimmerSweep {
    0% {
        transform: translateX(-100%) translateY(-100%) rotate(45deg);
    }
    100% {
        transform: translateX(100%) translateY(100%) rotate(45deg);
    }
}

.loading-progress.hidden {
    display: none;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    position: relative;
    z-index: 1;
}

.progress-text {
    color: #00FFB3;
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.progress-text::before {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #00FFB3;
    border-radius: 50%;
    animation: pulseCircle 1.5s ease-in-out infinite;
}

@keyframes pulseCircle {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}

.progress-counter {
    color: #FFD700;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    background: rgba(255, 215, 0, 0.1);
    padding: 4px 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.progress-bar-container {
    width: 100%;
    height: 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
    border: 1px solid rgba(0, 255, 136, 0.2);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00FF88 0%, #00D4FF 50%, #00FFB3 100%);
    border-radius: 10px;
    width: 0%;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.6);
    position: relative;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    animation: progressShimmer 2s infinite;
}

@keyframes progressShimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

.progress-status {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    z-index: 1;
    padding-right: 8px;
}

/* Scrollbar estilizada */
.progress-status::-webkit-scrollbar {
    width: 6px;
}

.progress-status::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.progress-status::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00FF88, #00D4FF);
    border-radius: 10px;
}

.progress-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    animation: slideInFade 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

@keyframes slideInFade {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.progress-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.progress-item.loading {
    color: #00D4FF;
    border-left-color: #00D4FF;
}

.progress-item.success {
    color: #00FF88;
    border-left-color: #00FF88;
    background: rgba(0, 255, 136, 0.08);
}

.progress-item.error {
    color: #FF4757;
    border-left-color: #FF4757;
    background: rgba(255, 71, 87, 0.08);
}

.progress-item i {
    font-size: 1.1rem;
    min-width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    font-size: 1.1rem;
}

.progress-item-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.progress-item-name {
    font-weight: 600;
    color: inherit;
}

.progress-item-status {
    font-size: 0.85rem;
    opacity: 0.8;
    color: inherit;
}

/* Responsividade */
@media (max-width: 768px) {
    .stats-card {
        grid-column: span 1;
    }

    .stats-neural-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    .stat-neural-item {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .toggle-analysis-btn {
        width: 100%;
        justify-content: center;
        margin-top: 0.5rem;
    }

    .modal-container {
        width: 95%;
        max-height: 95vh;
    }

    .modal-content {
        padding: 1rem;
    }

    .pairs-checkboxes {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .candles-status {
        flex-direction: column;
        gap: 0.75rem;
    }

    .config-row {
        grid-template-columns: 1fr;
    }

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

    .btn-primary,
    .btn-secondary {
        width: 100%;
        justify-content: center;
    }
}
/* ========================================
   MELHORIAS NO MODAL DE ESTRATÉGIAS
   ======================================== */

/* Seção de Pares Carregados */
.pairs-loaded-section {
    margin-bottom: 2rem;
}

.pairs-loaded-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 255, 255, 0.2);
}

.pairs-loaded-section .section-header h3 {
    color: #00ffff;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-reload-pairs {
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    color: #0f0f1e;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-reload-pairs:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.btn-reload-pairs i {
    transition: transform 0.5s ease;
}

.btn-reload-pairs:hover i {
    transform: rotate(180deg);
}

/* Grid de Estatísticas dos Pares */
.pairs-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.stat-card:hover {
    border-color: rgba(0, 255, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(0, 255, 255, 0.2);
}

.stat-card .stat-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #0f0f1e;
}

.stat-card .stat-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stat-card .stat-label {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-card .stat-value {
    color: #00ffff;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Container de Detalhes dos Pares */
.pairs-details-container {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.15);
    border-radius: 12px;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.pairs-details-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.pairs-details-header h4 {
    color: #00ffff;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Botões de Filtro */
.filter-buttons {
    display: flex;
    gap: 0.5rem;
}

.filter-btn {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.filter-btn.active {
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    color: #0f0f1e;
    border-color: transparent;
}

/* Tabela de Detalhes dos Pares */
.pairs-details-table {
    max-height: 400px;
    overflow-y: auto;
}

.loading-pairs-stats {
    text-align: center;
    padding: 3rem;
    color: rgba(255, 255, 255, 0.6);
}

.loading-pairs-stats i {
    font-size: 2rem;
    color: #00ffff;
    margin-bottom: 1rem;
    display: block;
}

/* Tabela */
.pairs-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

.pairs-table thead {
    position: sticky;
    top: 0;
    background: rgba(15, 15, 30, 0.95);
    z-index: 10;
}

.pairs-table thead th {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid rgba(0, 255, 255, 0.2);
}

.pairs-table tbody tr {
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s ease;
}

.pairs-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(5px);
}

.pairs-table tbody td {
    padding: 1rem;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.pairs-table tbody tr:first-child td {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.pairs-table tbody tr:last-child td {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom: none;
}

/* Nome do par com ícone */
.pair-name {
    font-weight: 700;
    color: #00ffff;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pair-name i {
    color: rgba(0, 255, 255, 0.6);
}

/* Badges de estatísticas */
.stat-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.stat-badge.call {
    background: rgba(0, 255, 136, 0.15);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.3);
}

.stat-badge.put {
    background: rgba(255, 68, 68, 0.15);
    color: #ff4444;
    border: 1px solid rgba(255, 68, 68, 0.3);
}

.stat-badge.total {
    background: rgba(0, 212, 255, 0.15);
    color: #00d4ff;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* Winrate com cor dinâmica */
.winrate {
    font-weight: 700;
    font-size: 1rem;
}

.winrate.high {
    color: #00ff88;
}

.winrate.medium {
    color: #ffaa00;
}

.winrate.low {
    color: #ff4444;
}

/* Progresso visual do winrate */
.winrate-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 0.25rem;
}

.winrate-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ff88 0%, #00d4ff 100%);
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Scroll customizado para a tabela */
.pairs-details-table::-webkit-scrollbar {
    width: 8px;
}

.pairs-details-table::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.pairs-details-table::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #00d4ff 0%, #00ffff 100%);
    border-radius: 4px;
}

.pairs-details-table::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #00a3cc 0%, #00d4ff 100%);
}

/* Animação de entrada */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pairs-details-container {
    animation: fadeInUp 0.5s ease;
}

/* Responsividade */
@media (max-width: 768px) {
    .pairs-stats-grid {
        grid-template-columns: 1fr;
    }
    
    .pairs-details-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .filter-buttons {
        width: 100%;
        justify-content: space-between;
    }
    
    .filter-btn {
        flex: 1;
    }
    
    .pairs-table {
        font-size: 0.8rem;
    }
    
    .pairs-table thead th,
    .pairs-table tbody td {
        padding: 0.5rem;
    }
}


/* ========================================
   MELHORIAS NO STEP INDICATOR
   ======================================== */

.step-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 255, 255, 0.2);
}

.step-badge.completed {
    background: linear-gradient(135deg, #00ff88 0%, #00d4a0 100%);
    color: #0f0f1e;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.step-badge.completed i {
    font-size: 1rem;
}

.step-text.completed-text {
    color: #00ff88;
    font-weight: 600;
    font-size: 0.9rem;
}

.step-badge.active {
    background: linear-gradient(135deg, #00d4ff 0%, #00ffff 100%);
    color: #0f0f1e;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
}


/* ========================================
   ESTATÍSTICAS NO STEP 1 (COLAPSÁVEL)
   ======================================== */

.pairs-stats-section {
    margin-top: 1.5rem;
    background: rgba(0, 255, 136, 0.05);
    border: 2px solid rgba(0, 255, 136, 0.2);
    border-radius: 12px;
    overflow: hidden;
    animation: slideDown 0.5s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 2000px;
    }
}

.stats-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: rgba(0, 255, 136, 0.1);
    cursor: pointer;
    transition: background 0.3s ease;
}

.stats-header:hover {
    background: rgba(0, 255, 136, 0.15);
}

.stats-header h3 {
    color: #00ff88;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-toggle-stats {
    background: none;
    border: none;
    color: #00ff88;
    font-size: 1.2rem;
    cursor: pointer;
    transition: transform 0.3s ease;
    padding: 0.5rem;
}

.btn-toggle-stats.collapsed i {
    transform: rotate(-90deg);
}

.stats-content {
    padding: 1.5rem;
    max-height: 1000px;
    overflow: hidden;
    transition: max-height 0.4s ease, padding 0.4s ease;
}

.stats-content.collapsed {
    max-height: 0;
    padding: 0 1.5rem;
}

/* ====================================
   ESTATÍSTICAS DE PERFORMANCE (STEP 2)
   ==================================== */

.strategy-performance-section {
    margin-top: 2rem;
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.05), rgba(138, 43, 226, 0.05));
    border: 1px solid rgba(0, 245, 255, 0.2);
    border-radius: 12px;
    padding: 0;
    overflow: hidden;
}

.performance-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid rgba(0, 245, 255, 0.2);
    cursor: pointer;
    transition: background 0.3s ease;
}

.performance-header:hover {
    background: rgba(0, 245, 255, 0.1);
}

.performance-header h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #00F5FF;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-refresh-stats {
    background: transparent;
    border: 1px solid rgba(0, 245, 255, 0.3);
    color: #00F5FF;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-refresh-stats:hover {
    background: rgba(0, 245, 255, 0.2);
    border-color: #00F5FF;
    transform: scale(1.05);
}

.btn-refresh-stats:active {
    transform: scale(0.95);
}

.btn-refresh-stats.spinning i {
    animation: spin 1s linear infinite;
}

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

.btn-toggle-performance {
    background: transparent;
    border: none;
    color: #00F5FF;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.btn-toggle-performance:hover {
    background: rgba(0, 245, 255, 0.2);
    transform: scale(1.1);
}

.btn-toggle-performance.collapsed i {
    transform: rotate(-90deg);
}

.performance-content {
    padding: 1.5rem;
    max-height: 2000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
}

.performance-content.collapsed {
    max-height: 0;
    padding: 0 1.5rem;
    opacity: 0;
}

/* Resumo Geral */
.performance-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.summary-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: all 0.3s ease;
}

.summary-card:hover {
    border-color: rgba(0, 245, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 245, 255, 0.2);
}

.summary-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.2), rgba(138, 43, 226, 0.2));
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #00F5FF;
}

.summary-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.summary-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.summary-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

/* Tabela de Performance por Gale */
.gale-performance-table {
    margin-bottom: 2rem;
}

.gale-performance-table h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #00F5FF;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.performance-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    overflow: hidden;
}

.performance-table thead {
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.2), rgba(138, 43, 226, 0.2));
}

.performance-table th {
    padding: 1rem;
    text-align: left;
    font-size: 0.85rem;
    font-weight: 600;
    color: #00F5FF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.performance-table td {
    padding: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    font-size: 0.9rem;
}

.performance-table tbody tr {
    transition: background 0.3s ease;
}

.performance-table tbody tr:hover {
    background: rgba(0, 245, 255, 0.05);
}

.gale-badge {
    display: inline-block;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

.gale-badge.gale-0 {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid rgba(0, 255, 136, 0.4);
}

.gale-badge.gale-1 {
    background: rgba(255, 217, 61, 0.2);
    color: #ffd93d;
    border: 1px solid rgba(255, 217, 61, 0.4);
}

.gale-badge.gale-2 {
    background: rgba(255, 71, 87, 0.2);
    color: #ff4757;
    border: 1px solid rgba(255, 71, 87, 0.4);
}

/* Tabela de Performance por Par */
.pair-performance-table {
    margin-bottom: 2rem;
}

.pair-performance-table h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #00F5FF;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.performance-filters {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.perf-filter-btn {
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.perf-filter-btn:hover {
    border-color: rgba(0, 245, 255, 0.4);
    background: rgba(0, 245, 255, 0.1);
    color: #00F5FF;
}

.perf-filter-btn.active {
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.3), rgba(138, 43, 226, 0.3));
    border-color: #00F5FF;
    color: #00F5FF;
    font-weight: 600;
}

.performance-table-container {
    max-height: 400px;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
}

/* Estatísticas CALL vs PUT */
.call-put-stats h4 {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: #00F5FF;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.call-put-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.call-put-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.call-put-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.call-put-card.call-card {
    border-color: rgba(0, 255, 136, 0.3);
}

.call-put-card.call-card:hover {
    border-color: rgba(0, 255, 136, 0.6);
    box-shadow: 0 4px 12px rgba(0, 255, 136, 0.2);
}

.call-put-card.put-card {
    border-color: rgba(255, 71, 87, 0.3);
}

.call-put-card.put-card:hover {
    border-color: rgba(255, 71, 87, 0.6);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.2);
}

.call-put-header {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
}

.call-card .call-put-header {
    background: linear-gradient(135deg, rgba(0, 255, 136, 0.2), rgba(0, 255, 136, 0.1));
    color: #00ff88;
}

.put-card .call-put-header {
    background: linear-gradient(135deg, rgba(255, 71, 87, 0.2), rgba(255, 71, 87, 0.1));
    color: #ff4757;
}

.call-put-stats-content {
    padding: 1.25rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-row span:first-child {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
}

.stat-row .stat-value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

/* Responsividade */
@media (max-width: 1024px) {
    .performance-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .call-put-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .performance-summary {
        grid-template-columns: 1fr;
    }

    .performance-table {
        font-size: 0.85rem;
    }

    .performance-table th,
    .performance-table td {
        padding: 0.75rem 0.5rem;
    }
}

/* ================================================
   PERFORMANCE CARD REDESIGN - Mais Bonito e Informativo
   ================================================ */

.performance-main-redesign {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.05) 0%, rgba(0, 200, 255, 0.02) 100%);
    border-radius: 10px;
    margin-bottom: 1rem;
    border: 1px solid rgba(0, 245, 255, 0.1);
}

.profit-display {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.profit-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
}

.performance-amount-redesign {
    font-size: 1.75rem;
    font-weight: 800;
    font-family: 'Rajdhani', sans-serif;
    line-height: 1;
    text-shadow: 0 0 15px currentColor;
}

.performance-amount-redesign.profit {
    color: #10b981;
}

.performance-amount-redesign.loss {
    color: #ef4444;
}

.profit-percentage {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
}

.profit-percentage i {
    font-size: 1.1rem;
    animation: pulse 2s ease-in-out infinite;
}

.profit-percentage span {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
}

/* Grid de Métricas - COMPACT */
.performance-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.metric-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.5);
    border-radius: 8px;
    border: 1px solid rgba(0, 245, 255, 0.1);
    transition: all 0.3s ease;
}

.metric-item:hover {
    border-color: rgba(0, 245, 255, 0.3);
    background: rgba(15, 23, 42, 0.7);
    transform: translateY(-2px);
}

.metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.2) 0%, rgba(0, 200, 255, 0.1) 100%);
    border-radius: 6px;
    color: var(--primary-cyan);
}

.metric-icon i {
    font-size: 1rem;
}

.metric-content {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
}

.metric-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-value {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
}

/* Barra de Progresso Redesenhada */
.progress-bar-container-redesign {
    margin-bottom: 1.5rem;
}

.progress-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.progress-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

.progress-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary-cyan);
    font-family: 'Rajdhani', sans-serif;
}

.progress-bar-track {
    width: 100%;
    height: 12px;
    background: rgba(15, 23, 42, 0.7);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(0, 245, 255, 0.2);
}

.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00f5ff 0%, #00d4ff 50%, #00a8ff 100%);
    border-radius: 6px;
    transition: width 0.5s ease;
    position: relative;
    box-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Status da Meta Redesenhado */
.target-status-redesign {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.4);
    border-radius: 10px;
    border-left: 3px solid var(--primary-cyan);
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 245, 255, 0.1);
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    width: fit-content;
}

.status-badge i {
    font-size: 1rem;
}

/* Estados do Badge */
.status-badge.in-progress {
    background: rgba(59, 130, 246, 0.1);
    color: #60a5fa;
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.status-badge.completed {
    background: rgba(16, 185, 129, 0.1);
    color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.status-badge.failed {
    background: rgba(239, 68, 68, 0.1);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.status-badge.warning {
    background: rgba(245, 158, 11, 0.1);
    color: #f59e0b;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.status-message {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* Responsivo */
@media (max-width: 768px) {
    .performance-main-redesign {
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .profit-percentage {
        align-items: flex-start;
        width: 100%;
    }

    .performance-metrics-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .performance-amount-redesign {
        font-size: 2rem;
    }
}

/* ================================================
   ACCOUNT STATUS CARD REDESIGN - Mais Informativo
   ================================================ */

.balance-main-compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.05) 0%, rgba(0, 200, 255, 0.02) 100%);
    border-radius: 10px;
    border: 1px solid rgba(0, 245, 255, 0.1);
    margin-bottom: 1rem;
}

.balance-info-item {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.balance-info-label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
}

.balance-amount-compact {
    font-size: 1.75rem;
    font-weight: 800;
    font-family: 'Rajdhani', sans-serif;
    color: var(--primary-cyan);
    text-shadow: 0 0 15px rgba(0, 245, 255, 0.5);
}

.balance-change-compact {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}

.balance-change-compact i {
    font-size: 1.1rem;
    animation: pulse 2s ease-in-out infinite;
}

.balance-change-compact span {
    font-size: 0.95rem;
    font-weight: 600;
    font-family: 'Rajdhani', sans-serif;
}

.balance-change-compact.positive {
    color: #10b981;
}

.balance-change-compact.negative {
    color: #ef4444;
}

/* Divider */
.account-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(0, 245, 255, 0.3) 50%, transparent 100%);
    margin-bottom: 1rem;
}

/* Grid de Informações */
.account-info-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.account-info-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background: rgba(15, 23, 42, 0.3);
    border-radius: 8px;
    border: 1px solid rgba(0, 245, 255, 0.08);
    transition: all 0.3s ease;
}

.account-info-item:hover {
    background: rgba(15, 23, 42, 0.5);
    border-color: rgba(0, 245, 255, 0.2);
    transform: translateX(3px);
}

.account-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.15) 0%, rgba(0, 200, 255, 0.08) 100%);
    border-radius: 8px;
    color: var(--primary-cyan);
}

.account-info-icon i {
    font-size: 1rem;
}

.account-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1;
}

.account-info-label {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.account-info-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
}

.account-info-value.status-active {
    color: #10b981;
}

.account-info-value.status-inactive {
    color: #ef4444;
}

.account-info-value.status-paused {
    color: #f59e0b;
}

/* Responsivo */
@media (max-width: 768px) {
    .balance-main-compact {
        flex-direction: column;
        gap: 0.75rem;
    }

    .balance-change-compact {
        align-items: flex-start;
        width: 100%;
    }
}

/* ========================================
   MODAL DE CONFIRMAÇÃO PREMIUM
   ======================================== */
.confirm-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(12px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: fadeIn 0.3s ease-out forwards;
}

@keyframes fadeIn {
    to { opacity: 1; }
}

.confirm-modal {
    background: linear-gradient(145deg, #1A0B2E 0%, #16213E 100%);
    border: 2px solid rgba(255, 215, 0, 0.3);
    border-radius: 20px;
    padding: 2.5rem;
    max-width: 480px;
    width: 90%;
    box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.5),
        0 0 50px rgba(255, 215, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: 0.1s;
}

@keyframes modalPop {
    to { 
        transform: scale(1); 
    }
}

.confirm-modal-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.confirm-modal-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    flex-shrink: 0;
}

.confirm-modal-icon.warning {
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.15) 100%);
    color: #FFD700;
    box-shadow: 0 0 25px rgba(255, 215, 0, 0.3);
}

.confirm-modal-icon.danger {
    background: linear-gradient(135deg, rgba(255, 0, 110, 0.2) 0%, rgba(220, 0, 90, 0.15) 100%);
    color: #FF006E;
    box-shadow: 0 0 25px rgba(255, 0, 110, 0.3);
}

.confirm-modal-icon.info {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 180, 255, 0.15) 100%);
    color: #00D4FF;
    box-shadow: 0 0 25px rgba(0, 212, 255, 0.3);
}

.confirm-modal-title {
    flex: 1;
}

.confirm-modal-title h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 0.25rem;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.confirm-modal-title p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}

.confirm-modal-body {
    margin-bottom: 2rem;
}

.confirm-modal-message {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    border-left: 4px solid rgba(255, 215, 0, 0.5);
}

.confirm-modal-highlight {
    display: block;
    font-size: 1.3rem;
    font-weight: 700;
    margin: 0.75rem 0;
    text-align: center;
    padding: 0.75rem;
    border-radius: 10px;
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 2px;
}

.confirm-modal-highlight.demo {
    background: linear-gradient(135deg, rgba(0, 245, 255, 0.15) 0%, rgba(0, 212, 255, 0.1) 100%);
    color: #00F5FF;
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

.confirm-modal-highlight.real {
    background: linear-gradient(135deg, rgba(255, 0, 110, 0.15) 0%, rgba(220, 0, 90, 0.1) 100%);
    color: #FF006E;
    text-shadow: 0 0 10px rgba(255, 0, 110, 0.5);
}

.confirm-modal-actions {
    display: flex;
    gap: 1rem;
}

.confirm-modal-btn {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

.confirm-modal-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.confirm-modal-btn:hover::before {
    width: 300px;
    height: 300px;
}

.confirm-modal-btn span {
    position: relative;
    z-index: 1;
}

.confirm-modal-btn-cancel {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(200, 200, 200, 0.05) 100%);
    color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.confirm-modal-btn-cancel:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(200, 200, 200, 0.08) 100%);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.confirm-modal-btn-confirm {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #0A0A0F;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.25);
}

.confirm-modal-btn-confirm:hover {
    background: linear-gradient(135deg, #FFA500 0%, #FFD700 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(255, 215, 0, 0.4),
        0 0 30px rgba(255, 215, 0, 0.2);
}

.confirm-modal-btn-confirm:active,
.confirm-modal-btn-cancel:active {
    transform: translateY(0);
}

/* Modal de perigo (para logout) */
.confirm-modal-btn-danger {
    background: linear-gradient(135deg, #FF006E 0%, #DC005A 100%);
    color: #FFFFFF;
    border: 2px solid rgba(255, 0, 110, 0.3);
    box-shadow: 0 4px 15px rgba(255, 0, 110, 0.25);
}

.confirm-modal-btn-danger:hover {
    background: linear-gradient(135deg, #DC005A 0%, #FF006E 100%);
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(255, 0, 110, 0.4),
        0 0 30px rgba(255, 0, 110, 0.2);
}

/* Animação de saída */
.confirm-modal-overlay.closing {
    animation: fadeOut 0.3s ease-out forwards;
}

.confirm-modal-overlay.closing .confirm-modal {
    animation: modalClose 0.3s ease-out forwards;
}

@keyframes fadeOut {
    to { opacity: 0; }
}

@keyframes modalClose {
    to {
        transform: scale(0.9);
        opacity: 0;
    }
}

/* ✅ RESPONSIVIDADE MOBILE para modals */
@media (max-width: 768px) {
    .confirm-modal {
        padding: 1.5rem;
        max-width: 95%;
        width: 95%;
        max-height: 90vh;
        overflow-y: auto;
    }

    .confirm-modal-header {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        margin-bottom: 1rem;
    }

    .confirm-modal-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .confirm-modal-title h3 {
        font-size: 1.25rem;
    }

    .confirm-modal-title p {
        font-size: 0.8rem;
    }

    .confirm-modal-body {
        margin-bottom: 1.5rem;
    }

    .confirm-modal-message {
        font-size: 0.95rem;
        line-height: 1.6;
        padding: 1rem;
    }

    .confirm-modal-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .confirm-modal-btn {
        padding: 0.875rem 1.25rem;
        font-size: 0.95rem;
        width: 100%;
    }

    .confirm-modal-highlight {
        font-size: 1.1rem;
        padding: 0.5rem;
    }
}

@media (max-width: 480px) {
    .confirm-modal {
        padding: 1.25rem;
        max-width: 98%;
        border-radius: 15px;
    }

    .confirm-modal-title h3 {
        font-size: 1.1rem;
    }

    .confirm-modal-message {
        font-size: 0.9rem;
        padding: 0.875rem;
    }

    .confirm-modal-btn {
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }
}

/* Responsivo */
@media (max-width: 480px) {
    .confirm-modal {
        padding: 2rem 1.5rem;
    }

    .confirm-modal-header {
        flex-direction: column;
        text-align: center;
    }

    .confirm-modal-actions {
        flex-direction: column-reverse;
    }

    .confirm-modal-btn {
        width: 100%;
    }
}

/* ========================================
   SISTEMA DE NOTIFICAÇÕES BONITAS
   ======================================== */

/* Container de notificações (canto superior direito) */
.notifications-container {
    position: fixed;
    top: 80px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 400px;
}

/* Notificação individual */
.neural-notification {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(26, 35, 53, 0.95), rgba(31, 41, 62, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    animation: slideInRight 0.3s ease-out;
    transition: all 0.3s ease;
}

.neural-notification:hover {
    transform: translateX(-5px);
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
}

/* Ícone */
.notification-icon {
    font-size: 24px;
    flex-shrink: 0;
}

/* Mensagem */
.notification-message {
    flex: 1;
    color: #fff;
    font-size: 14px;
    line-height: 1.4;
}

/* Botão fechar */
.notification-close {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    cursor: pointer;
    padding: 0;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    transition: color 0.2s;
}

.notification-close:hover {
    color: #fff;
}

/* Cores por tipo */
.neural-notification-success {
    border-left: 4px solid #00ff88;
}

.neural-notification-error {
    border-left: 4px solid #ff4444;
}

.neural-notification-warning {
    border-left: 4px solid #ffaa00;
}

.neural-notification-info {
    border-left: 4px solid #00aaff;
}

/* Animação */
@keyframes slideInRight {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Status indicators */
.status-indicators {
    display: flex;
    gap: 15px;
    align-items: center;
}

.candles-status span {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}

.status-success {
    background: rgba(0, 255, 136, 0.2);
    color: #00ff88;
    border: 1px solid #00ff88;
}

.status-error {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
    border: 1px solid #ff4444;
}

.status-warning {
    background: rgba(255, 170, 0, 0.2);
    color: #ffaa00;
    border: 1px solid #ffaa00;
}

/* ==================== MODAL DE NOTIFICAÇÕES ADMIN ==================== */
.admin-notification-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: notificationFadeIn 0.3s ease-out;
}

.admin-notification-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
}

.admin-notification-content {
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid;
    border-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%) 1;
    border-radius: 20px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4);
    animation: notificationSlideIn 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.admin-notification-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 25px 30px;
    text-align: center;
    position: relative;
}

.notification-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    animation: notificationIconPulse 2s ease-in-out infinite;
}

.notification-icon.type-info {
    background: rgba(33, 150, 243, 0.3);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.5);
}

.notification-icon.type-warning {
    background: rgba(255, 152, 0, 0.3);
    box-shadow: 0 0 20px rgba(255, 152, 0, 0.5);
}

.notification-icon.type-danger {
    background: rgba(244, 67, 54, 0.3);
    box-shadow: 0 0 20px rgba(244, 67, 54, 0.5);
}

.notification-icon.type-success {
    background: rgba(76, 175, 80, 0.3);
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.5);
}

.admin-notification-header h2 {
    margin: 0;
    color: #fff;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.notification-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notification-close-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.admin-notification-body {
    padding: 30px;
    color: #fff;
}

.notification-message {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.95);
    text-align: justify;
}

.notification-meta {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.notification-date {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

.admin-notification-footer {
    padding: 20px 30px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
}

.btn-notification-ok {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
    border: none;
    padding: 12px 40px;
    border-radius: 25px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-notification-ok:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
}

.btn-notification-ok:active {
    transform: translateY(0);
}

/* Animações */
@keyframes notificationFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

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

/* Responsivo */
@media (max-width: 768px) {
    .admin-notification-content {
        width: 95%;
        max-height: 90vh;
    }

    .admin-notification-header {
        padding: 20px;
    }

    .admin-notification-header h2 {
        font-size: 1.4rem;
    }

    .notification-icon {
        width: 50px;
        height: 50px;
        font-size: 24px;
    }

    .admin-notification-body {
        padding: 20px;
    }

    .notification-message {
        font-size: 1rem;
    }
}

/* ==================== BOTÃO ADMIN - SEMPRE ESCONDIDO POR PADRÃO ==================== */
/* 🔒 SEGURANÇA CRÍTICA: Este botão NUNCA deve aparecer sem verificação backend */
#menu-admin-btn {
    display: none !important;
}

/* Quando JavaScript verificar que é admin, adiciona classe 'admin-verified' */
#menu-admin-btn.admin-verified {
    display: flex !important;
}

/* ==================== LANGUAGE SELECTOR (NEXT TO DEMO/REAL) ==================== */
.language-switcher {
    display: flex;
    background: rgba(26, 11, 46, 0.8);
    border-radius: var(--radius);
    padding: 4px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    box-shadow: var(--shadow-neural-light);
}

.lang-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: calc(var(--radius) - 4px);
    color: var(--silver-gray);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
    cursor: pointer;
    transition: var(--transition);
    overflow: hidden;
}

.lang-btn.active {
    background: var(--gradient-crown);
    color: var(--deep-space);
    box-shadow: var(--shadow-gold);
    transform: scale(1.05);
}

.lang-btn:not(.active):hover {
    background: rgba(255, 215, 0, 0.1);
    color: var(--primary-gold);
}

.lang-icon {
    font-size: 1.1rem;
    transition: var(--transition);
}

.lang-icon .flag-icon {
    width: 20px;
    height: 15px;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.lang-text {
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

.lang-btn.active .lang-icon {
    animation: langIconPulse 2s ease-in-out infinite;
}

.lang-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
    opacity: 0;
    transition: var(--transition);
}

.lang-btn.active .lang-glow {
    opacity: 1;
    animation: langGlow 2s ease-in-out infinite;
}

/* Language Icon Animations */
@keyframes langIconPulse {
    0%,
    100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15);
    }
}

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

/* ===============================================
   GERENCIAMENTO - ABAS (SOROSGALE + MASANIELLO)
   =============================================== */

/* Abas do Modal */
.modal-tabs {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 255, 255, 0.03);
    border-bottom: 2px solid rgba(0, 255, 255, 0.1);
}

.modal-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(0, 255, 255, 0.05);
    border: 2px solid rgba(0, 255, 255, 0.2);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Rajdhani', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.modal-tab i {
    font-size: 1.2rem;
}

.modal-tab:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.4);
    color: #00ffff;
    transform: translateY(-2px);
}

.modal-tab.active {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2) 0%, rgba(0, 150, 255, 0.2) 100%);
    border-color: #00ffff;
    color: #00ffff;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3), inset 0 0 20px rgba(0, 255, 255, 0.1);
}

/* Conteúdo das Abas */
.tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.tab-content.active {
    display: block;
}

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

/* Toggle de Ativar/Desativar */
.management-toggle-section {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.05) 0%, rgba(0, 150, 255, 0.05) 100%);
    border: 2px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.toggle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
}

.toggle-header h3 {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    color: #00ffff;
    font-family: 'Rajdhani', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

.toggle-header i {
    font-size: 1.5rem;
    color: #00ffff;
}

.toggle-description {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
}

/* Status do Masaniello */
.masaniello-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid rgba(0, 255, 255, 0.1);
}

/* Estilos para selects */
select.config-input {
    appearance: none;
    background-color: rgba(255, 255, 255, 0.05);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2300ffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    background-size: 12px;
    padding-right: 2.5rem;
    cursor: pointer;
    color: #fff;
}

/* Estilos para options do select */
select.config-input option {
    background: #1a1a2e;
    color: #fff;
}

select.config-input:focus {
    outline: none;
    border-color: #00ffff;
    box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.1);
}

/* Responsivo para abas */
@media (max-width: 768px) {
    .modal-tabs {
        flex-direction: column;
        gap: 0.5rem;
    }

    .modal-tab {
        font-size: 0.9rem;
    }

    .masaniello-status {
        grid-template-columns: 1fr;
    }

    .toggle-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

/* ================================================
   MODAL DE LICENÇA - Estilo Premium
   ================================================ */

.license-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.license-modal.show {
    opacity: 1;
}

.license-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
}

.license-modal-content {
    position: relative;
    background: linear-gradient(145deg, #1A0B2E 0%, #16213E 100%);
    border: 2px solid rgba(255, 215, 0, 0.4);
    border-radius: 24px;
    padding: 0;
    max-width: 520px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 
        0 30px 60px rgba(0, 0, 0, 0.6),
        0 0 60px rgba(255, 215, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.9);
    animation: licenseModalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes licenseModalPop {
    to { 
        transform: scale(1); 
    }
}

.license-modal-header {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 2rem 2.5rem;
    border-bottom: 2px solid rgba(255, 215, 0, 0.15);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(123, 44, 191, 0.05) 100%);
    position: relative;
}

.license-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(255, 165, 0, 0.15) 100%);
    color: #FFD700;
    font-size: 2rem;
    box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
    flex-shrink: 0;
}

.license-modal-header h2 {
    flex: 1;
    font-size: 1.75rem;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.license-close-btn {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.license-close-btn:hover {
    background: rgba(255, 0, 110, 0.2);
    color: #FF006E;
    transform: rotate(90deg);
}

.license-modal-body {
    padding: 2.5rem;
}

.license-message {
    text-align: center;
}

.license-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 1rem;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.license-description {
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 2rem;
}

.license-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 16px;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.license-feature {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem;
    background: rgba(255, 215, 0, 0.05);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.license-feature:hover {
    background: rgba(255, 215, 0, 0.1);
    transform: translateX(5px);
}

.license-feature i {
    color: #FFD700;
    font-size: 1.3rem;
    flex-shrink: 0;
}

.license-feature span {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
    font-weight: 500;
}

.license-modal-footer {
    display: flex;
    gap: 1rem;
    padding: 2rem 2.5rem;
    border-top: 2px solid rgba(255, 215, 0, 0.15);
    background: rgba(0, 0, 0, 0.2);
}

.btn-license-contact,
.btn-license-close {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Rajdhani', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-license-contact {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    color: #0A0A0F;
    border: 2px solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}

.btn-license-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

.btn-license-close {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(200, 200, 200, 0.05) 100%);
    color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.15);
}

.btn-license-close:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(200, 200, 200, 0.08) 100%);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .license-modal-content {
        width: 95%;
        max-height: 95vh;
    }

    .license-modal-header {
        padding: 1.5rem;
        flex-wrap: wrap;
    }

    .license-modal-header h2 {
        font-size: 1.4rem;
    }

    .license-modal-body {
        padding: 1.5rem;
    }

    .license-modal-footer {
        flex-direction: column;
        padding: 1.5rem;
    }

    .btn-license-contact,
    .btn-license-close {
        width: 100%;
    }
}

/* ========================================
   INDICATORS COMBINER STYLES
   ======================================== */

/* Indicators Grid */
.indicators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Indicator Card */
.indicator-card {
    background: linear-gradient(145deg, rgba(26, 11, 46, 0.6) 0%, rgba(22, 33, 62, 0.6) 100%);
    border: 1px solid rgba(255, 215, 0, 0.1);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
}

.indicator-card:hover {
    border-color: rgba(255, 215, 0, 0.3);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.15);
    transform: translateY(-2px);
}

/* Indicator Header */
.indicator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Indicator Icon */
.indicator-icon {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.indicator-icon i {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Indicator Config */
.indicator-config {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 215, 0, 0.1);
    animation: slideDown 0.3s ease;
}

.indicator-config.hidden {
    display: none;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

/* Global Config Section */
.global-config-section {
    background: rgba(255, 255, 255, 0.05);
    padding: 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    border: 1px solid rgba(255, 215, 0, 0.1);
}

.global-config-section h4 {
    color: var(--primary-gold);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.global-config-section h4 i {
    color: var(--primary-gold);
}

/* Indicator Toggle Enhancements */
.indicator-card .switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.indicator-card .switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.indicator-card .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 0.4s;
    border-radius: 26px;
    border: 1px solid rgba(255, 215, 0, 0.2);
}

.indicator-card .slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 4px;
    bottom: 3px;
    background-color: rgba(255, 255, 255, 0.5);
    transition: 0.4s;
    border-radius: 50%;
}

.indicator-card input:checked + .slider {
    background: var(--gradient-crown);
    border-color: var(--primary-gold);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.indicator-card input:checked + .slider:before {
    transform: translateX(24px);
    background-color: #fff;
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

/* Stats for Combiner */
#combinerStats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

#combinerStats .stat-box {
    background: linear-gradient(145deg, rgba(26, 11, 46, 0.4) 0%, rgba(22, 33, 62, 0.4) 100%);
    border: 1px solid rgba(255, 215, 0, 0.15);
    border-radius: 10px;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s ease;
}

#combinerStats .stat-box:hover {
    border-color: rgba(255, 215, 0, 0.4);
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.1);
    transform: translateY(-2px);
}

#combinerStats .stat-label {
    display: block;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    font-weight: 500;
}

#combinerStats .stat-value {
    display: block;
    color: var(--primary-gold);
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 4px rgba(255, 215, 0, 0.2);
}

/* Catalog Button Enhancement */
#catalogCombinerBtn {
    background: var(--gradient-crown);
    border: 2px solid var(--primary-gold);
    color: #0A0A0F;
    font-weight: 700;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
    min-width: 300px;
}

#catalogCombinerBtn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(255, 215, 0, 0.4);
}

#catalogCombinerBtn:active {
    transform: translateY(-1px);
}

#catalogCombinerBtn i {
    margin-right: 0.5rem;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .indicators-grid {
        grid-template-columns: 1fr;
    }

    .global-config-section .config-row {
        flex-direction: column;
    }

    .global-config-section .config-item {
        width: 100%;
    }

    #catalogCombinerBtn {
        min-width: 100%;
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    #combinerStats {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===============================================
   STRATEGY SELECTION MODAL (Mobile-First)
   =============================================== */

.strategy-selection-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.strategy-selection-card:active {
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    #strategySelectionModalOverlay .modal-container {
        max-width: 95% !important;
        margin: 10px;
    }
    
    .strategy-selection-card {
        padding: 15px !important;
    }
    
    .strategy-selection-card h3 {
        font-size: 16px !important;
    }
    
    .strategy-selection-card p {
        font-size: 12px !important;
    }
}

/* ========================================
   FILTROS DE SINAIS
   ======================================== */
.config-header-with-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.filter-options {
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 2px solid var(--cyber-green, #00F5FF);
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
    }
    to {
        opacity: 1;
        max-height: 1000px;
    }
}

.filters-config-section {
    padding: 0 1rem;
}

.filters-config-section .config-group {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(0, 245, 255, 0.1);
}

.filters-config-section .config-group:last-child {
    border-bottom: none;
}

.config-range {
    width: 100%;
    height: 6px;
    border-radius: 5px;
    background: linear-gradient(to right, rgba(0, 245, 255, 0.2), var(--cyber-green, #00F5FF));
    outline: none;
    -webkit-appearance: none;
}

.config-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cyber-green, #00F5FF);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

.config-range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cyber-green, #00F5FF);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 10px rgba(0, 245, 255, 0.5);
}

/* ========================================
   FLUXO STRATEGY STYLES
   ======================================== */

/* ========================================
   PRESET SYSTEM STYLES - MODERN & RESPONSIVE
   ======================================== */

/* Preset Modal Container */
#presetsModal .modal-content {
    max-width: 1200px;
    width: 95%;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(108, 99, 255, 0.3);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

#presetsModal .modal-header {
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    padding: 24px;
    border-bottom: 2px solid rgba(108, 99, 255, 0.3);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

#presetsModal .modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: white;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

#presetsModal .modal-header h2 i {
    font-size: 28px;
}

#presetsModal .modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    background: #0f0f23;
}

/* Preset Actions Bar */
.preset-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.preset-actions button {
    flex: 1;
    min-width: 160px;
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid transparent;
    cursor: pointer;
}

.preset-actions button i {
    font-size: 16px;
}

.preset-actions button:first-child {
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    color: white;
    border-color: #6c63ff;
}

.preset-actions button:first-child:hover {
    background: linear-gradient(135deg, #5a52d5 0%, #4a42c5 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(108, 99, 255, 0.4);
}

/* Preset Tabs */
.preset-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: rgba(108, 99, 255, 0.1);
    padding: 8px;
    border-radius: 12px;
    border: 1px solid rgba(108, 99, 255, 0.2);
}

.preset-tab {
    flex: 1;
    padding: 14px 20px;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
}

.preset-tab::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.preset-tab:hover::before {
    left: 100%;
}

.preset-tab:hover {
    color: white;
    background: rgba(108, 99, 255, 0.2);
    border-color: rgba(108, 99, 255, 0.4);
}

.preset-tab.active {
    color: white;
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    border-color: #6c63ff;
    box-shadow: 0 4px 15px rgba(108, 99, 255, 0.4);
}

.preset-tab i {
    font-size: 18px;
}

.preset-tab-content {
    display: none;
    animation: fadeInUp 0.4s ease;
}

.preset-tab-content.active {
    display: block;
}

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

/* Presets Grid */
.presets-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    min-height: 300px;
}

/* Preset Card */
.preset-card {
    background: linear-gradient(135deg, #1e1e38 0%, #252540 100%);
    border-radius: 16px;
    padding: 24px;
    border: 2px solid rgba(108, 99, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.preset-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, #6c63ff, #5a52d5, #48bfe3);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.preset-card:hover::before {
    opacity: 1;
}

.preset-card::after {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, #6c63ff, #48bfe3);
    border-radius: 16px;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.preset-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: #6c63ff;
    box-shadow:
        0 20px 40px rgba(108, 99, 255, 0.3),
        0 0 0 1px rgba(108, 99, 255, 0.2);
}

.preset-card:hover::after {
    opacity: 0.1;
}

/* Preset Card Header */
.preset-card h3 {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 700;
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}

.preset-card h3 i {
    font-size: 22px;
}

/* Preset Description */
.preset-card p {
    margin: 12px 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    min-height: 42px;
    line-height: 1.6;
}

/* Preset Meta Info */
.preset-meta {
    display: flex;
    gap: 12px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.preset-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(108, 99, 255, 0.2);
    border-radius: 20px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(108, 99, 255, 0.3);
}

.preset-meta span i {
    font-size: 14px;
}

/* Category Badge */
.category-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.3), rgba(72, 191, 227, 0.3));
    border: 1px solid rgba(108, 99, 255, 0.4);
    color: #48bfe3;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Preset Visibility Icons */
.preset-card .fa-lock {
    color: #ffd60a;
    filter: drop-shadow(0 0 8px rgba(255, 214, 10, 0.6));
}

.preset-card .fa-unlock {
    color: #06ffa5;
    filter: drop-shadow(0 0 8px rgba(6, 255, 165, 0.6));
}

.preset-card .fa-crown {
    color: #ffd60a;
    filter: drop-shadow(0 0 8px rgba(255, 214, 10, 0.6));
}

/* Preset Buttons */
.preset-card .preset-card-buttons {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(108, 99, 255, 0.2);
}

.preset-card .preset-card-buttons button {
    flex: 1;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid transparent;
    cursor: pointer;
}

.preset-card .preset-card-buttons button:first-child {
    background: linear-gradient(135deg, #06ffa5 0%, #04cc83 100%);
    color: #0f0f23;
    border-color: #06ffa5;
}

.preset-card .preset-card-buttons button:first-child:hover {
    background: linear-gradient(135deg, #04cc83 0%, #039668 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(6, 255, 165, 0.4);
}

.preset-card .preset-card-buttons button:not(:first-child) {
    background: rgba(108, 99, 255, 0.2);
    color: white;
    border-color: rgba(108, 99, 255, 0.3);
}

.preset-card .preset-card-buttons button:not(:first-child):hover {
    background: rgba(108, 99, 255, 0.3);
    border-color: #6c63ff;
    transform: translateY(-2px);
}

/* Loading, Error, Empty States */
.loading-message,
.error-message,
.empty-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
}

.loading-message {
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
}

.loading-message i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    animation: spin 2s linear infinite;
}

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

.error-message {
    color: #ff6b6b;
    font-size: 16px;
}

.error-message i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

.empty-message {
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
}

.empty-message i {
    font-size: 64px;
    margin-bottom: 20px;
    opacity: 0.3;
    display: block;
}

.empty-message p {
    margin: 8px 0;
}

/* ========================================
   RESPONSIVE - MOBILE OPTIMIZATION
   ======================================== */

@media (max-width: 768px) {
    #presetsModal .modal-content {
        width: 98%;
        max-height: 95vh;
        margin: 10px;
    }

    #presetsModal .modal-header {
        padding: 16px;
    }

    #presetsModal .modal-header h2 {
        font-size: 18px;
    }

    #presetsModal .modal-header h2 i {
        font-size: 20px;
    }

    #presetsModal .modal-body {
        padding: 16px;
    }

    .preset-actions {
        flex-direction: column;
        gap: 10px;
    }

    .preset-actions button {
        width: 100%;
        min-width: auto;
        padding: 14px 20px;
    }

    .preset-tabs {
        flex-direction: column;
        gap: 6px;
    }

    .preset-tab {
        padding: 12px 16px;
        font-size: 13px;
    }

    .preset-tab i {
        font-size: 16px;
    }

    .presets-list {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .preset-card {
        padding: 20px;
    }

    .preset-card h3 {
        font-size: 18px;
    }

    .preset-card p {
        font-size: 13px;
        min-height: auto;
    }

    .preset-card .preset-card-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .preset-card .preset-card-buttons button {
        width: 100%;
        padding: 12px;
    }

    .preset-meta {
        gap: 8px;
    }

    .preset-meta span {
        font-size: 11px;
        padding: 5px 10px;
    }
}

@media (max-width: 480px) {
    #presetsModal .modal-header h2 {
        font-size: 16px;
    }

    .preset-card {
        padding: 16px;
    }

    .preset-card h3 {
        font-size: 16px;
    }

    .preset-meta {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ========================================
   SAVE PRESET MODAL STYLES
   ======================================== */

#savePresetModal .modal-content {
    max-width: 600px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 1px solid rgba(108, 99, 255, 0.3);
}

#savePresetModal .modal-header {
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    padding: 20px 24px;
}

#savePresetModal .modal-header h2 {
    color: white;
    font-size: 20px;
    margin: 0;
}

#savePresetModal .modal-body {
    padding: 24px;
    background: #0f0f23;
}

#savePresetModal .form-group {
    margin-bottom: 20px;
}

#savePresetModal .form-group label {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-size: 14px;
}

#savePresetModal .form-group input,
#savePresetModal .form-group textarea,
#savePresetModal .form-group select {
    width: 100%;
    padding: 12px 16px;
    background: rgba(108, 99, 255, 0.1);
    border: 2px solid rgba(108, 99, 255, 0.3);
    border-radius: 8px;
    color: white;
    font-size: 14px;
    transition: all 0.3s ease;
}

#savePresetModal .form-group input:focus,
#savePresetModal .form-group textarea:focus,
#savePresetModal .form-group select:focus {
    outline: none;
    border-color: #6c63ff;
    background: rgba(108, 99, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.2);
}

#savePresetModal .form-group textarea {
    min-height: 100px;
    resize: vertical;
}

#savePresetModal .modal-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    background: rgba(108, 99, 255, 0.05);
    border-top: 1px solid rgba(108, 99, 255, 0.2);
}

#savePresetModal .modal-footer button {
    flex: 1;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

#savePresetModal .modal-footer button:first-child {
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    color: white;
    border-color: #6c63ff;
}

#savePresetModal .modal-footer button:first-child:hover {
    background: linear-gradient(135deg, #5a52d5 0%, #4a42c5 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(108, 99, 255, 0.4);
}

#savePresetModal .modal-footer button:last-child {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.3);
}

#savePresetModal .modal-footer button:last-child:hover {
    background: rgba(255, 107, 107, 0.3);
    border-color: #ff6b6b;
}

/* ═══════════════════════════════════════════════════════════════
   📝 SAVE PRESET MODAL - COMPREHENSIVE FORM STYLING
   ═══════════════════════════════════════════════════════════════ */

.preset-save-modal {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    border-radius: 24px;
    max-width: 800px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6),
                0 0 60px rgba(108, 99, 255, 0.2);
    animation: preset-modal-slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

@keyframes preset-modal-slide-in {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.preset-save-modal::-webkit-scrollbar {
    width: 8px;
}

.preset-save-modal::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
}

.preset-save-modal::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    border-radius: 4px;
}

.preset-save-header {
    padding: 32px 32px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.1) 0%, rgba(90, 82, 213, 0.05) 100%);
    border-radius: 24px 24px 0 0;
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(10px);
}

.preset-save-header h2 {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    background: linear-gradient(135deg, #6c63ff 0%, #a29bfe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: flex;
    align-items: center;
    gap: 12px;
}

.preset-save-header .close-preset-modal {
    position: absolute;
    top: 24px;
    right: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.preset-save-header .close-preset-modal:hover {
    background: rgba(255, 107, 107, 0.2);
    border-color: rgba(255, 107, 107, 0.4);
    transform: rotate(90deg);
}

.preset-save-body {
    padding: 32px;
}

/* Form Groups */
.preset-form-group {
    margin-bottom: 24px;
}

.preset-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preset-label::before {
    content: '';
    width: 4px;
    height: 14px;
    background: linear-gradient(135deg, #6c63ff 0%, #a29bfe 100%);
    border-radius: 2px;
}

/* Input Fields */
.preset-input,
.preset-select,
.preset-textarea {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: #fff;
    font-size: 15px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.preset-input:focus,
.preset-select:focus,
.preset-textarea:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #6c63ff;
    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.1),
                0 4px 12px rgba(108, 99, 255, 0.2);
}

.preset-input::placeholder,
.preset-textarea::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.preset-textarea {
    resize: vertical;
    min-height: 100px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.6;
}

.preset-select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 18px center;
    padding-right: 45px;
}

.preset-select option {
    background: #1a1a2e;
    color: #fff;
    padding: 10px;
}

/* Grid Layout - 2 Columns */
.preset-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

/* Checkbox Group */
.preset-checkbox-group {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.08) 0%, rgba(90, 82, 213, 0.05) 100%);
    border: 2px solid rgba(108, 99, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.preset-checkbox-group::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(108, 99, 255, 0.1), transparent);
    transition: left 0.6s;
}

.preset-checkbox-group:hover {
    background: linear-gradient(135deg, rgba(108, 99, 255, 0.15) 0%, rgba(90, 82, 213, 0.1) 100%);
    border-color: rgba(108, 99, 255, 0.5);
    box-shadow: 0 8px 24px rgba(108, 99, 255, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.preset-checkbox-group:hover::before {
    left: 100%;
}

.preset-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.preset-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 24px;
    height: 24px;
}

.preset-checkbox-label {
    display: flex;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    user-select: none;
    padding-left: 36px;
    position: relative;
    transition: all 0.3s ease;
}

.preset-checkbox-label::before {
    content: '';
    position: absolute;
    left: 0;
    width: 24px;
    height: 24px;
    border: 2px solid rgba(108, 99, 255, 0.4);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.03);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.preset-checkbox-label::after {
    content: '\2713';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    font-size: 16px;
    color: #fff;
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.preset-checkbox input[type="checkbox"]:checked ~ .preset-checkbox-label::before {
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    border-color: #6c63ff;
    box-shadow: 0 4px 12px rgba(108, 99, 255, 0.4),
                inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.preset-checkbox input[type="checkbox"]:checked ~ .preset-checkbox-label::after {
    transform: translateY(-50%) scale(1);
}

.preset-checkbox:hover .preset-checkbox-label::before {
    border-color: #6c63ff;
    background: rgba(108, 99, 255, 0.1);
}

/* Legacy checkbox label (for compatibility) */
.preset-checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #6c63ff;
    border-radius: 6px;
}

.preset-checkbox-label input[type="checkbox"]:checked {
    background: #6c63ff;
}

/* Hint Text */
.preset-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 8px;
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.preset-hint::before {
    content: 'ℹ️';
    flex-shrink: 0;
}

/* Required Indicator */
.preset-label.required::after {
    content: ' *';
    color: #ff6b6b;
    font-weight: 700;
}

/* Form Actions */
.preset-form-actions {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: sticky;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, #1a1a2e 20%);
    padding-bottom: 8px;
}

.preset-btn-save,
.preset-btn-cancel {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.preset-btn-save::before,
.preset-btn-cancel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.preset-btn-save:active::before,
.preset-btn-cancel:active::before {
    width: 300px;
    height: 300px;
}

.preset-btn-save {
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    color: #fff;
    box-shadow: 0 8px 20px rgba(108, 99, 255, 0.3);
}

.preset-btn-save:hover {
    background: linear-gradient(135deg, #7d75ff 0%, #6b63e5 100%);
    box-shadow: 0 12px 28px rgba(108, 99, 255, 0.4);
    transform: translateY(-2px);
}

.preset-btn-save:active {
    transform: translateY(0);
}

.preset-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.preset-btn-cancel:hover {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    border-color: rgba(255, 107, 107, 0.3);
}

/* Visibility Selector Special Styling */
.preset-visibility-option {
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.preset-visibility-option::before {
    font-size: 18px;
}

/* Marketplace Price Field - Hidden by Default */
.preset-price-group {
    display: none;
    margin-top: 16px;
    padding: 20px;
    background: rgba(108, 99, 255, 0.08);
    border: 1px solid rgba(108, 99, 255, 0.2);
    border-radius: 12px;
    animation: preset-price-slide 0.3s ease;
}

@keyframes preset-price-slide {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.preset-price-group.show {
    display: block;
}

.preset-price-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #6c63ff;
}

.preset-price-input {
    width: 100%;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(108, 99, 255, 0.3);
    border-radius: 12px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

.preset-price-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #6c63ff;
    box-shadow: 0 0 0 4px rgba(108, 99, 255, 0.1);
}

/* Category Pills */
.preset-category-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.category-pill {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-pill:hover,
.category-pill.active {
    background: rgba(108, 99, 255, 0.2);
    border-color: #6c63ff;
    color: #6c63ff;
}

/* Responsive Design */
@media (max-width: 768px) {
    .preset-save-modal {
        width: 95%;
        max-height: 95vh;
        border-radius: 16px;
    }

    .preset-save-header {
        padding: 24px 20px 20px;
    }

    .preset-save-header h2 {
        font-size: 22px;
    }

    .preset-save-header .close-preset-modal {
        width: 36px;
        height: 36px;
        top: 20px;
        right: 20px;
    }

    .preset-save-body {
        padding: 24px 20px;
    }

    .preset-grid-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .preset-form-group {
        margin-bottom: 20px;
    }

    .preset-input,
    .preset-select,
    .preset-textarea {
        padding: 12px 16px;
        font-size: 14px;
    }

    .preset-form-actions {
        flex-direction: column;
        gap: 12px;
    }

    .preset-btn-save,
    .preset-btn-cancel {
        width: 100%;
        padding: 14px 20px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .preset-save-modal {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .preset-save-header {
        padding: 20px 16px 16px;
        border-radius: 0;
    }

    .preset-save-header h2 {
        font-size: 20px;
    }

    .preset-save-body {
        padding: 20px 16px;
    }

    .preset-label {
        font-size: 13px;
    }

    .preset-hint {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🎯 PRESET PAIRS SELECTOR
   ═══════════════════════════════════════════════════════════════ */

.preset-pairs-selector {
    margin-top: 12px;
}

.preset-pairs-actions {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
}

.preset-btn-secondary {
    flex: 1;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.preset-btn-secondary:hover {
    background: rgba(108, 99, 255, 0.15);
    border-color: rgba(108, 99, 255, 0.4);
    color: #6c63ff;
}

.preset-btn-secondary:active {
    transform: scale(0.98);
}

.preset-pairs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
}

.preset-pairs-grid::-webkit-scrollbar {
    width: 6px;
}

.preset-pairs-grid::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.preset-pairs-grid::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    border-radius: 3px;
}

.preset-pair-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
}

.preset-pair-item:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(108, 99, 255, 0.3);
}

.preset-pair-item.selected {
    background: rgba(108, 99, 255, 0.15);
    border-color: #6c63ff;
}

.preset-pair-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #6c63ff;
    margin: 0;
}

.preset-pair-item label {
    flex: 1;
    cursor: pointer;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
}

.preset-pair-item.selected label {
    color: #6c63ff;
}

@media (max-width: 768px) {
    .preset-pairs-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
        padding: 12px;
    }

    .preset-pair-item {
        padding: 8px 10px;
    }

    .preset-pair-item label {
        font-size: 12px;
    }
}

/* ===== Candlestick Patterns Styling ===== */
.candlestick-pattern-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    position: relative;
    min-height: 48px;
}

.candlestick-pattern-label:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(108, 99, 255, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(108, 99, 255, 0.2);
}

.candlestick-pattern-toggle {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.pattern-checkbox-custom {
    width: 22px;
    height: 22px;
    min-width: 22px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
}

.pattern-checkbox-custom::after {
    content: '';
    position: absolute;
    display: none;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 12px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.candlestick-pattern-toggle:checked ~ .pattern-checkbox-custom {
    background: linear-gradient(135deg, #6c63ff 0%, #5a52d5 100%);
    border-color: #6c63ff;
    box-shadow: 0 0 10px rgba(108, 99, 255, 0.5);
}

.candlestick-pattern-toggle:checked ~ .pattern-checkbox-custom::after {
    display: block;
}

.candlestick-pattern-toggle:checked ~ .pattern-name {
    color: #6c63ff;
    font-weight: 600;
}

.pattern-name {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
}

.candlestick-pattern-label:hover .pattern-name {
    color: #fff;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .candlestick-pattern-label {
        padding: 10px 12px;
        min-height: 42px;
    }

    .pattern-checkbox-custom {
        width: 20px;
        height: 20px;
        min-width: 20px;
    }

    .pattern-name {
        font-size: 13px;
    }

    #candlestickIndicatorCard {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 480px) {
    .candlestick-pattern-label {
        padding: 8px 10px;
        gap: 8px;
    }

    .pattern-checkbox-custom {
        width: 18px;
        height: 18px;
        min-width: 18px;
    }

    .pattern-checkbox-custom::after {
        left: 5px;
        top: 1px;
        width: 5px;
        height: 10px;
    }

    .pattern-name {
        font-size: 12px;
    }
}

/* ============================================
   MARKETPLACE SECTION - Loja de Presets
   ============================================ */

.marketplace-section {
    padding: 2.5rem;
    animation: fadeIn 0.5s ease-in-out;
    max-width: 1400px;
    margin: 0 auto;
    background: linear-gradient(180deg, rgba(102, 126, 234, 0.02) 0%, transparent 100%);
    border-radius: 24px;
}

@media (max-width: 768px) {
    .marketplace-section {
        padding: 1.5rem;
    }
}

.marketplace-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.marketplace-back-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    color: #667eea;
    transform: translateX(-5px);
}

.marketplace-back-btn i {
    font-size: 18px;
}

.marketplace-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.marketplace-title-container {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.marketplace-icon-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    animation: iconPulse 3s infinite;
}

.marketplace-icon-wrapper i {
    font-size: 32px;
    color: white;
    z-index: 2;
}

.icon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.6), transparent);
    border-radius: 50%;
    filter: blur(20px);
    animation: glowPulse 2s infinite alternate;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes glowPulse {
    0% { opacity: 0.5; }
    100% { opacity: 1; }
}

.marketplace-title-text {
    flex: 1;
}

.marketplace-main-title {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.marketplace-subtitle {
    margin: 0.5rem 0 0 0;
    color: var(--text-secondary);
    font-size: 16px;
}

.marketplace-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.marketplace-filter-btn {
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.marketplace-filter-btn:hover {
    background: rgba(102, 126, 234, 0.1);
    border-color: #667eea;
    color: #667eea;
    transform: translateY(-2px);
}

.marketplace-filter-btn.active {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.marketplace-search-container {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.search-input-wrapper {
    flex: 1;
    position: relative;
    min-width: 250px;
}

.search-input-wrapper i {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 18px;
}

.marketplace-search-input {
    width: 100%;
    padding: 1rem 1rem 1rem 3rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.3s ease;
}

.marketplace-search-input:focus {
    outline: none;
    border-color: #667eea;
    background: rgba(102, 126, 234, 0.05);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
}

.marketplace-search-input::placeholder {
    color: var(--text-secondary);
}

.marketplace-sort-select {
    padding: 1rem 2rem 1rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 200px;
}

.marketplace-sort-select:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.2);
}

.marketplace-sort-select option {
    background: var(--bg-primary);
    color: var(--text-primary);
}

.marketplace-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 2.5rem;
    margin-bottom: 4rem;
    padding: 1rem 0;
}

@media (max-width: 768px) {
    .marketplace-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.marketplace-loading {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    gap: 1rem;
}

.loading-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

.marketplace-loading p {
    color: var(--text-secondary);
    font-size: 16px;
}

/* Preset Card - Design Moderno Premium */
.preset-card {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    position: relative;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.preset-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.preset-card:hover {
    transform: translateY(-12px) scale(1.02);
    border-color: #667eea;
    box-shadow: 0 20px 60px rgba(102, 126, 234, 0.4), 0 0 40px rgba(118, 75, 162, 0.2);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

.preset-card:hover::before {
    opacity: 1;
}

.preset-card-image {
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
    display: flex;
    align-items: center;
    justify-content: center;
}

.preset-card-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
    z-index: 1;
}

.preset-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.preset-card:hover .preset-card-image img {
    transform: scale(1.1);
}

.preset-card-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.4);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

.preset-card-new {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, #ff6b6b, #ee5a6f);
    color: white;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.4);
}

.preset-card-content {
    padding: 1.75rem;
    position: relative;
    z-index: 1;
    background: rgba(0, 0, 0, 0.2);
}

.preset-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.preset-card-title {
    flex: 1;
}

.preset-card-name {
    margin: 0 0 0.25rem 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
}

.preset-card-author {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.preset-card-author i {
    font-size: 12px;
}

.preset-card-price {
    font-size: 24px;
    font-weight: 700;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    white-space: nowrap;
}

.preset-card-description {
    margin: 1rem 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.preset-card-stats {
    display: flex;
    gap: 1.5rem;
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.preset-stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.preset-stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.preset-stat-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.preset-card-footer {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.preset-btn {
    flex: 1;
    padding: 0.875rem 1.5rem;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.preset-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.preset-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.5);
}

.preset-btn-secondary {
    background: rgba(74, 222, 128, 0.1);
    color: #4ade80;
    border: 2px solid #4ade80;
}

.preset-btn-secondary:hover {
    background: rgba(74, 222, 128, 0.2);
    transform: translateY(-2px);
}

.preset-btn-disabled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    cursor: not-allowed;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.preset-btn-disabled:hover {
    transform: none;
}

/* My Purchases Grid */
.my-purchases-container {
    margin-top: 3rem;
}

.my-purchases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}

.my-purchase-card {
    background: rgba(255, 255, 255, 0.02);
    border: 2px solid rgba(74, 222, 128, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.my-purchase-card:hover {
    transform: translateY(-4px);
    border-color: #4ade80;
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.2);
}

.my-purchase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.my-purchase-status {
    padding: 0.375rem 0.75rem;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}

.status-active {
    background: rgba(74, 222, 128, 0.2);
    color: #4ade80;
}

.status-test {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
}

.status-expired {
    background: rgba(255, 107, 107, 0.2);
    color: #ff6b6b;
}

.my-purchase-name {
    margin: 0.5rem 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.my-purchase-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin: 1rem 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 14px;
    color: var(--text-secondary);
}

.my-purchase-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
}

.my-purchase-btn {
    flex: 1;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-load {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.btn-load:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-renew {
    background: rgba(255, 193, 7, 0.1);
    color: #ffc107;
    border: 2px solid #ffc107;
}

.btn-renew:hover {
    background: rgba(255, 193, 7, 0.2);
}

/* Empty State */
.marketplace-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary);
}

.marketplace-empty i {
    font-size: 64px;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.marketplace-empty h3 {
    margin: 1rem 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 24px;
}

.marketplace-empty p {
    margin: 0;
    font-size: 16px;
}

/* Responsive */
@media (max-width: 768px) {
    .marketplace-section {
        padding: 1rem;
    }

    .marketplace-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .marketplace-title-container {
        gap: 1rem;
    }

    .marketplace-icon-wrapper {
        width: 50px;
        height: 50px;
    }

    .marketplace-icon-wrapper i {
        font-size: 24px;
    }

    .marketplace-main-title {
        font-size: 24px;
    }

    .marketplace-subtitle {
        font-size: 14px;
    }

    .marketplace-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .marketplace-filter-btn {
        padding: 0.625rem 1rem;
        font-size: 13px;
    }

    .marketplace-search-container {
        flex-direction: column;
    }

    .marketplace-sort-select {
        width: 100%;
    }

    .marketplace-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .my-purchases-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   🎨 MARKETPLACE MODALS - MODERN ANIMATIONS & EFFECTS
   ═══════════════════════════════════════════════════════════════ */

/* Modal Overlay - Fade In Effect */
#modalBuyPreset,
#modalTestPreset,
#modalPresetDetails {
    animation: modalFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(8px);
    background: rgba(0, 0, 0, 0.7);
}

/* Modal Content - Slide Up & Scale Effect */
#modalBuyPreset .modal-content,
#modalTestPreset .modal-content,
#modalPresetDetails .modal-content {
    animation: modalSlideUp 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5),
                0 0 100px rgba(102, 126, 234, 0.3);
}

/* Modal Header - Animated Gradient */
#modalBuyPreset .modal-header,
#modalTestPreset .modal-header,
#modalPresetDetails .modal-header {
    position: relative;
    overflow: hidden;
}

#modalBuyPreset .modal-header::before,
#modalTestPreset .modal-header::before,
#modalPresetDetails .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 3s infinite;
}

/* Keyframes */
@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Price Animation */
#buyPresetPrice,
#modalBuyPreset .modal-body > div:nth-child(3) > div:first-child {
    animation: priceGlow 2s ease-in-out infinite;
}

@keyframes priceGlow {
    0%, 100% {
        text-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    }
    50% {
        text-shadow: 0 0 30px rgba(102, 126, 234, 0.8);
    }
}

/* Hover Effects for Buttons */
#modalBuyPreset button,
#modalTestPreset button,
#modalPresetDetails button {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

#modalBuyPreset button::before,
#modalTestPreset button::before,
#modalPresetDetails button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

#modalBuyPreset button:hover::before,
#modalTestPreset button:hover::before,
#modalPresetDetails button:hover::before {
    width: 300px;
    height: 300px;
}

#modalBuyPreset button:hover,
#modalTestPreset button:hover,
#modalPresetDetails button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}

#modalBuyPreset button:active,
#modalTestPreset button:active,
#modalPresetDetails button:active {
    transform: translateY(0);
}

/* Image Zoom on Hover */
#buyPresetImage,
#testPresetImage,
#detailsPresetImage {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

#buyPresetImage:hover,
#testPresetImage:hover,
#detailsPresetImage:hover {
    transform: scale(1.05);
}

/* Info Box Animation */
#modalBuyPreset .modal-body > div[style*="background: rgba(102, 126, 234, 0.1)"],
#modalTestPreset .modal-body > div[style*="background: rgba(74, 222, 128, 0.1)"] {
    animation: pulseBox 2s ease-in-out infinite;
}

@keyframes pulseBox {
    0%, 100% {
        box-shadow: 0 0 0 rgba(102, 126, 234, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
    }
}

/* Stagger Animation for List Items */
#modalBuyPreset ul li,
#modalTestPreset ul li,
#modalPresetDetails ul li {
    animation: slideInLeft 0.4s ease-out both;
}

#modalBuyPreset ul li:nth-child(1),
#modalTestPreset ul li:nth-child(1),
#modalPresetDetails ul li:nth-child(1) {
    animation-delay: 0.1s;
}

#modalBuyPreset ul li:nth-child(2),
#modalTestPreset ul li:nth-child(2),
#modalPresetDetails ul li:nth-child(2) {
    animation-delay: 0.2s;
}

#modalBuyPreset ul li:nth-child(3),
#modalTestPreset ul li:nth-child(3),
#modalPresetDetails ul li:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Close Button Hover Effect */
#modalPresetDetails button[onclick="closeMarketplaceModal('details')"] {
    transition: all 0.3s ease;
}

#modalPresetDetails button[onclick="closeMarketplaceModal('details')"]:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    transform: rotate(90deg);
}

/* ============================================
   MODAL DE PAGAMENTO PIX - DESIGN MODERNO
   ============================================ */
#modalPayment {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 10001 !important;
    align-items: center !important;
    justify-content: center !important;
    animation: fadeIn 0.3s ease !important;
}

#modalPayment[style*="display: flex"],
#modalPayment[style*="display:flex"] {
    display: flex !important;
}

#modalPayment[style*="display: none"],
#modalPayment[style*="display:none"] {
    display: none !important;
}

#modalPayment .modal-content {
    max-width: 550px !important;
    width: 90% !important;
    background: linear-gradient(145deg, rgba(15, 20, 35, 0.98), rgba(10, 15, 30, 0.98)) !important;
    border: 2px solid rgba(0, 212, 255, 0.3) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px rgba(0, 212, 255, 0.2), 0 0 100px rgba(0, 212, 255, 0.1) !important;
    position: relative !important;
    z-index: 10002 !important;
    overflow: hidden;
    animation: modalSlideUp 0.4s ease;
}

/* Header do Modal de Pagamento */
#modalPayment .modal-header {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 153, 204, 0.15) 100%) !important;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2) !important;
    padding: 2.5rem 2rem !important;
    position: relative !important;
}

#modalPayment .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
    opacity: 0.05;
    pointer-events: none;
}

#modalPayment .modal-header i.fa-qrcode {
    font-size: 56px !important;
    color: #00d4ff;
    text-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
    animation: pulse 2s ease-in-out infinite;
}

#modalPayment .modal-header h3 {
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 1rem 0 0.5rem 0 !important;
}

#modalPayment .modal-header p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 15px !important;
}

/* Botão Fechar */
#modalPayment .modal-header button {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

#modalPayment .modal-header button:hover {
    background: rgba(255, 77, 77, 0.2) !important;
    border-color: #ff4d4d !important;
    transform: rotate(90deg) scale(1.1) !important;
}

/* Body do Modal */
#modalPayment .modal-body {
    padding: 2rem !important;
}

/* Item sendo comprado */
#modalPayment .modal-body > div:first-child {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 153, 204, 0.08)) !important;
    border: 1px solid rgba(0, 212, 255, 0.2) !important;
    border-left: 4px solid #00d4ff !important;
    padding: 1.2rem !important;
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
}

#modalPayment #paymentItemName {
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    margin-bottom: 0.5rem !important;
}

#modalPayment #paymentItemDescription {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
}

/* Valor */
#modalPayment #paymentValue {
    font-size: 52px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #00d4ff, #00ff9d) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    filter: drop-shadow(0 0 20px rgba(0, 212, 255, 0.3));
}

/* QR Code Container */
#modalPayment #paymentQrSection > div:first-child {
    text-align: center;
    margin-bottom: 2rem !important;
}

#modalPayment #paymentQrSection > div:first-child > div {
    background: #fff !important;
    padding: 25px !important;
    border-radius: 16px !important;
    display: inline-block !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 212, 255, 0.2) !important;
}

#modalPayment #paymentQrImage {
    width: 260px !important;
    height: 260px !important;
    border-radius: 8px;
}

/* Instruções */
#modalPayment .modal-body > div:nth-child(4) {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 152, 0, 0.08)) !important;
    border: 1px solid rgba(255, 193, 7, 0.2) !important;
    border-left: 4px solid #ffc107 !important;
    padding: 1.2rem !important;
    border-radius: 12px !important;
}

#modalPayment .modal-body h5 {
    color: #ffc107 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#modalPayment .modal-body ol {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    line-height: 2 !important;
}

/* Código PIX */
#modalPayment #paymentPixCode {
    background: rgba(0, 212, 255, 0.05) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    color: #00d4ff !important;
    font-family: 'Courier New', monospace !important;
    font-size: 12px !important;
    padding: 14px !important;
    border-radius: 10px !important;
    transition: all 0.3s ease !important;
}

#modalPayment #paymentPixCode:focus {
    outline: none !important;
    border-color: #00d4ff !important;
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.1) !important;
}

/* Botão Copiar */
#modalPayment button[onclick="copyPixCode()"] {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%) !important;
    border: none !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
    transition: all 0.3s ease !important;
}

#modalPayment button[onclick="copyPixCode()"]:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.4) !important;
}

/* Status de Pagamento */
#modalPayment #paymentStatus {
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.08), rgba(0, 153, 204, 0.08)) !important;
    border: 1px solid rgba(0, 212, 255, 0.3) !important;
    padding: 1.5rem !important;
    border-radius: 12px !important;
    animation: pulseGlow 2s ease-in-out infinite !important;
}

/* Loading Spinner */
#modalPayment .loading-spinner {
    border: 4px solid rgba(0, 212, 255, 0.2) !important;
    border-top-color: #00d4ff !important;
    width: 70px !important;
    height: 70px !important;
}

/* Footer */
#modalPayment .modal-footer {
    background: rgba(0, 212, 255, 0.03) !important;
    border-top: 1px solid rgba(0, 212, 255, 0.15) !important;
    padding: 1.5rem 2rem !important;
    display: flex !important;
    gap: 1rem !important;
}

#modalPayment .modal-footer button {
    flex: 1 !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

#modalPayment .modal-footer button:first-child {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#modalPayment .modal-footer button:first-child:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

#modalPayment .modal-footer button:last-child {
    background: linear-gradient(135deg, #00d4ff 0%, #0099cc 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3) !important;
}

#modalPayment .modal-footer button:last-child:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(0, 212, 255, 0.4) !important;
}

/* Animação de pulso para o status */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(0, 212, 255, 0);
    }
}

/* Responsivo */
@media (max-width: 768px) {
    #modalPayment .modal-content {
        width: 95% !important;
        max-width: 95% !important;
    }

    #modalPayment .modal-header {
        padding: 2rem 1.5rem !important;
    }

    #modalPayment .modal-body {
        padding: 1.5rem !important;
    }

    #modalPayment #paymentValue {
        font-size: 42px !important;
    }

    #modalPayment #paymentQrImage {
        width: 220px !important;
        height: 220px !important;
    }
}

/* ============================================
   MODAL DE TESTE - DESIGN MODERNO
   ============================================ */
#modalTestPreset {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 10001 !important;
    align-items: center !important;
    justify-content: center !important;
    animation: fadeIn 0.3s ease !important;
}

#modalTestPreset[style*="display: flex"],
#modalTestPreset[style*="display:flex"] {
    display: flex !important;
}

#modalTestPreset[style*="display: none"],
#modalTestPreset[style*="display:none"] {
    display: none !important;
}

#modalTestPreset .modal-content {
    max-width: 550px !important;
    width: 90% !important;
    background: linear-gradient(145deg, rgba(15, 20, 35, 0.98), rgba(10, 15, 30, 0.98)) !important;
    border: 2px solid rgba(74, 222, 128, 0.3) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px rgba(74, 222, 128, 0.2), 0 0 100px rgba(74, 222, 128, 0.1) !important;
    position: relative !important;
    z-index: 10002 !important;
    overflow: hidden;
    animation: modalSlideUp 0.4s ease;
}

/* Header do Modal de Teste */
#modalTestPreset .modal-header {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.15) 0%, rgba(34, 197, 94, 0.15) 100%) !important;
    border-bottom: 1px solid rgba(74, 222, 128, 0.2) !important;
    padding: 2.5rem 2rem !important;
    position: relative !important;
    text-align: center;
}

#modalTestPreset .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%);
    opacity: 0.05;
    pointer-events: none;
}

#modalTestPreset .modal-header i.fa-flask {
    font-size: 56px !important;
    color: #4ade80;
    text-shadow: 0 0 20px rgba(74, 222, 128, 0.5);
    animation: pulse 2s ease-in-out infinite;
    display: block;
    margin-bottom: 1rem !important;
}

#modalTestPreset .modal-header h3 {
    color: #fff !important;
    font-size: 28px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Body do Modal de Teste */
#modalTestPreset .modal-body {
    padding: 2rem !important;
}

/* Imagem e Nome do Preset */
#modalTestPreset #testPresetImage {
    max-width: 100% !important;
    border-radius: 12px !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

#modalTestPreset #testPresetName {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0.5rem 0 !important;
}

#modalTestPreset #testPresetAuthor {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px !important;
}

/* Badge GRÁTIS */
#modalTestPreset .modal-body > div:nth-child(2) {
    text-align: center;
    margin: 2rem 0 !important;
}

#modalTestPreset .modal-body > div:nth-child(2) > div:first-child {
    font-size: 52px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #4ade80, #22c55e) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    animation: pulse 2s ease-in-out infinite;
}

#modalTestPreset #testPresetDays {
    color: #4ade80 !important;
    font-weight: 700 !important;
}

/* Box de Informações */
#modalTestPreset .modal-body > div:nth-child(3) {
    background: linear-gradient(135deg, rgba(74, 222, 128, 0.08), rgba(34, 197, 94, 0.08)) !important;
    border: 1px solid rgba(74, 222, 128, 0.2) !important;
    border-left: 4px solid #4ade80 !important;
    padding: 1.2rem !important;
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
}

#modalTestPreset .modal-body ul {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 14px !important;
    line-height: 2 !important;
}

#modalTestPreset .modal-body ul li {
    margin: 0.3rem 0;
}

/* Warning Box */
#modalTestPreset .modal-body > div:nth-child(4) {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.08), rgba(255, 152, 0, 0.08)) !important;
    border: 1px solid rgba(255, 193, 7, 0.2) !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7) !important;
}

#modalTestPreset .modal-body .fa-exclamation-triangle {
    color: #ffc107 !important;
    margin-right: 0.5rem;
}

/* Footer */
#modalTestPreset .modal-footer {
    background: rgba(74, 222, 128, 0.03) !important;
    border-top: 1px solid rgba(74, 222, 128, 0.15) !important;
    padding: 1.5rem 2rem !important;
    display: flex !important;
    gap: 1rem !important;
}

#modalTestPreset .modal-footer button {
    flex: 1 !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

#modalTestPreset .modal-footer button:first-child {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#modalTestPreset .modal-footer button:first-child:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

#modalTestPreset .modal-footer button:last-child {
    flex: 2 !important;
    background: linear-gradient(135deg, #4ade80 0%, #22c55e 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 15px rgba(74, 222, 128, 0.3) !important;
}

#modalTestPreset .modal-footer button:last-child:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 25px rgba(74, 222, 128, 0.4) !important;
}

/* Responsivo */
@media (max-width: 768px) {
    #modalTestPreset .modal-content {
        width: 95% !important;
        max-width: 95% !important;
    }

    #modalTestPreset .modal-header {
        padding: 2rem 1.5rem !important;
    }

    #modalTestPreset .modal-body {
        padding: 1.5rem !important;
    }
}

/* ============================================
   MODAL DE DETALHES - DESIGN MODERNO
   ============================================ */
#modalPresetDetails {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: blur(15px) !important;
    z-index: 10001 !important;
    align-items: center !important;
    justify-content: center !important;
    animation: fadeIn 0.3s ease !important;
    overflow-y: auto;
}

#modalPresetDetails[style*="display: flex"],
#modalPresetDetails[style*="display:flex"] {
    display: flex !important;
}

#modalPresetDetails[style*="display: none"],
#modalPresetDetails[style*="display:none"] {
    display: none !important;
}

#modalPresetDetails .modal-content {
    max-width: 900px !important;
    width: 90% !important;
    background: linear-gradient(145deg, rgba(15, 20, 35, 0.98), rgba(10, 15, 30, 0.98)) !important;
    border: 2px solid rgba(102, 126, 234, 0.3) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 60px rgba(102, 126, 234, 0.2), 0 0 100px rgba(102, 126, 234, 0.1) !important;
    position: relative !important;
    z-index: 10002 !important;
    overflow: hidden;
    animation: modalSlideUp 0.4s ease;
    margin: 2rem auto;
}

/* Header do Modal de Detalhes */
#modalPresetDetails .modal-header {
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%) !important;
    border-bottom: 1px solid rgba(102, 126, 234, 0.2) !important;
    padding: 2rem !important;
    position: relative !important;
}

#modalPresetDetails .modal-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    opacity: 0.05;
    pointer-events: none;
}

/* Botão Fechar */
#modalPresetDetails .modal-header button {
    position: absolute !important;
    top: 1rem !important;
    right: 1rem !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    width: 45px !important;
    height: 45px !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    font-size: 20px !important;
    transition: all 0.3s ease !important;
    z-index: 10;
}

#modalPresetDetails .modal-header button:hover {
    background: rgba(255, 77, 77, 0.2) !important;
    border-color: #ff4d4d !important;
    transform: rotate(90deg) scale(1.1) !important;
}

/* Imagem e Info do Header */
#modalPresetDetails #detailsPresetImage {
    width: 150px !important;
    height: 150px !important;
    border-radius: 16px !important;
    object-fit: cover !important;
    border: 3px solid rgba(102, 126, 234, 0.3) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

#modalPresetDetails #detailsPresetName {
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    margin: 0 0 0.5rem 0 !important;
}

#modalPresetDetails #detailsPresetAuthor {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* Body */
#modalPresetDetails .modal-body {
    padding: 2rem !important;
    max-height: 70vh;
    overflow-y: auto;
}

/* Seções de info */
#modalPresetDetails .modal-body h4 {
    color: #667eea !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-bottom: 1rem !important;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#modalPresetDetails #detailsPresetDescription {
    color: rgba(255, 255, 255, 0.8) !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
}

/* Cards de preço e teste */
#modalPresetDetails #detailsPresetPrice {
    font-size: 40px !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* Footer */
#modalPresetDetails .modal-footer {
    background: rgba(102, 126, 234, 0.03) !important;
    border-top: 1px solid rgba(102, 126, 234, 0.15) !important;
    padding: 1.5rem 2rem !important;
    display: flex !important;
    gap: 1rem !important;
}

#modalPresetDetails .modal-footer button {
    flex: 1 !important;
    padding: 14px 24px !important;
    border-radius: 12px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
}

#modalPresetDetails .modal-footer button:hover {
    transform: translateY(-2px) !important;
}

/* Responsivo */
@media (max-width: 768px) {
    #modalPresetDetails .modal-content {
        width: 95% !important;
        max-width: 95% !important;
    }

    #modalPresetDetails .modal-header {
        padding: 1.5rem !important;
    }

    #modalPresetDetails .modal-header > div {
        flex-direction: column !important;
        text-align: center !important;
    }

    #modalPresetDetails #detailsPresetImage {
        width: 120px !important;
        height: 120px !important;
    }

    #modalPresetDetails .modal-body {
        padding: 1.5rem !important;
    }
}

/* ============================================
   MODAL DE COMPRA - Z-INDEX
   ============================================ */
#modalBuyPreset {
    z-index: 10001 !important;
}

#modalBuyPreset .modal-content {
    z-index: 10002 !important;
    position: relative;
}