/* style.css */
:root {
    --bg-color: #050a10;
    --nav-bg: rgba(5, 10, 16, 0.95);
    --neon-blue: #00eaff;
    --neon-dark: #00aaff;
    --text-color: #ffffff;
    --header-height: 70px;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', sans-serif; }

body { background-color: var(--bg-color); color: var(--text-color); padding-top: var(--header-height); }

/* Navbar */
.navbar { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background-color: var(--nav-bg); border-bottom: 1px solid var(--neon-dark); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; z-index: 1000; backdrop-filter: blur(10px); }
.logo { font-size: 1.5rem; font-weight: 800; color: var(--neon-blue); text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px var(--neon-dark); text-decoration: none; }
.nav-menu { display: flex; list-style: none; gap: 30px; }
.nav-link { text-decoration: none; color: #ccc; font-size: 1rem; font-weight: 500; transition: 0.3s; }
.nav-link:hover { color: var(--neon-blue); text-shadow: 0 0 8px var(--neon-blue); }
.hamburger { display: none; cursor: pointer; }
.bar { display: block; width: 25px; height: 3px; margin: 5px auto; transition: all 0.3s ease-in-out; background-color: var(--neon-blue); border-radius: 2px; }

/* Auth & Tabs (NOVOS) */
.auth-container { max-width: 400px; margin: 50px auto; padding: 30px; background: rgba(10, 20, 30, 0.95); border: 1px solid var(--neon-dark); border-radius: 10px; box-shadow: 0 0 20px rgba(0, 170, 255, 0.2); }
.tabs { display: flex; margin-bottom: 20px; border-bottom: 1px solid #333; }
.tab-btn { flex: 1; background: none; border: none; color: #777; padding: 10px; cursor: pointer; font-size: 1rem; font-weight: bold; transition: 0.3s; }
.tab-btn.active { color: var(--neon-blue); border-bottom: 2px solid var(--neon-blue); }
.form-input { width: 100%; padding: 12px; margin-bottom: 15px; background: #0b1116; border: 1px solid #333; color: white; border-radius: 5px; outline: none; }
.form-input:focus { border-color: var(--neon-blue); }
.btn-submit { width: 100%; padding: 12px; background: var(--neon-dark); border: none; border-radius: 5px; color: black; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-submit:hover { background: var(--neon-blue); box-shadow: 0 0 15px var(--neon-blue); }
.hidden { display: none; }
.message-box { margin-top: 15px; padding: 10px; border-radius: 5px; text-align: center; display: none; }
.msg-success { background: rgba(40, 167, 69, 0.2); color: #28a745; border: 1px solid #28a745; }
.msg-error { background: rgba(220, 53, 69, 0.2); color: #dc3545; border: 1px solid #dc3545; }

@media (max-width: 768px) {
    .hamburger { display: block; order: -1; }
    .nav-menu { position: fixed; left: -100%; top: var(--header-height); gap: 0; flex-direction: column; background-color: var(--bg-color); width: 250px; height: 100vh; transition: 0.3s; border-right: 1px solid var(--neon-dark); padding-top: 20px; }
    .nav-menu.active { left: 0; }
    .nav-link { display: block; padding: 20px 30px; border-bottom: 1px solid rgba(255,255,255,0.05); }
    .hamburger.active .bar:nth-child(2) { opacity: 0; }
    .hamburger.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}



.avatar-circle {
    /* ... estilos existentes ... */
    cursor: pointer;
    background-size: cover;
    background-position: center;
    position: relative;
}
.avatar-circle:hover::after {
    content: '📷';
    position: absolute;
    background: rgba(0,0,0,0.7);
    width: 100%; height: 100%;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
}







/* --- HISTÓRICO FINANCEIRO (EXTRATO) --- */
.statement-list {
    display: flex; flex-direction: column; gap: 10px;
    max-height: 400px; overflow-y: auto; margin-bottom: 20px;
    padding-right: 5px; /* Espaço para scrollbar */
}

.trans-item {
    display: flex; justify-content: space-between; align-items: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 12px 15px;
    border-radius: 8px;
    border-left: 4px solid #555;
    transition: 0.2s;
}
.trans-item:hover { background: rgba(255, 255, 255, 0.07); }

/* Cores por Tipo */
.trans-item.type-entry { border-left-color: #28a745; } /* Ganhou */
.trans-item.type-exit { border-left-color: #ff4757; }  /* Gastou */

.trans-info { text-align: left; flex-grow: 1; margin-left: 10px; }
.trans-desc { font-weight: bold; font-size: 1rem; color: #eee; display: block; }
.trans-date { font-size: 0.75rem; color: #888; }

.trans-value { font-weight: bold; font-size: 1.1rem; white-space: nowrap; }
.val-plus { color: #28a745; }
.val-minus { color: #ff4757; }

/* Scrollbar bonita para o modal */
.statement-list::-webkit-scrollbar { width: 6px; }
.statement-list::-webkit-scrollbar-track { background: #111; }
.statement-list::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }





/* --- ESTILOS ESPECÍFICOS DO LOBBY --- */
        body { background-color: #050a10; color: white; font-family: 'Segoe UI', sans-serif; }
        .lobby-wrapper { max-width: 900px; margin: 80px auto; padding: 20px; position: relative; z-index: 1; }
        
        /* Abas de Navegação */
        .lobby-tabs { display: flex; gap: 10px; margin-bottom: 20px; border-bottom: 2px solid #333; }
        .lobby-tab {
            padding: 10px 20px; cursor: pointer; color: #888; font-weight: bold; font-size: 1.1rem;
            border-bottom: 3px solid transparent; transition: 0.3s;
        }
        .lobby-tab:hover { color: #ccc; }
        .lobby-tab.active { color: #00eaff; border-bottom-color: #00eaff; }

        /* Modal de Criação */
        .modal-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8); z-index: 2000; display: none;
            justify-content: center; align-items: center; backdrop-filter: blur(5px);
        }
        .modal-box {
            background: #151f28; padding: 30px; border-radius: 10px; border: 1px solid #00eaff;
            width: 90%; max-width: 400px; text-align: center;
            position: relative; /* Para o botão fechar */
        }
        .modal-close { position: absolute; top: 10px; right: 15px; font-size: 1.5rem; cursor: pointer; color: #888; }
        .modal-close:hover { color: white; }

        .modal-input {
            width: 100%; padding: 10px; margin: 15px 0; background: #000; 
            border: 1px solid #333; color: white; border-radius: 5px; font-size: 1.2rem;
        }

        /* Cards das Mesas */
        .table-card {
            background: linear-gradient(145deg, #0b1116, #0f1820);
            border: 1px solid #333; border-left: 4px solid #555;
            border-radius: 10px; padding: 20px; margin-bottom: 15px;
            display: flex; justify-content: space-between; align-items: center; transition: 0.3s;
        }
        .table-card.type-sng { border-left-color: #00eaff; box-shadow: 0 0 10px rgba(0, 234, 255, 0.05); }
        .table-card.type-cash { border-left-color: #28a745; }
        
        .table-info h3 { margin: 0; color: #fff; font-size: 1.2rem; }
        .table-info p { margin: 5px 0 0; color: #888; font-size: 0.9rem; }
        
        .btn-join {
            background: transparent; border: 1px solid #00eaff; color: #00eaff;
            padding: 10px 20px; border-radius: 5px; cursor: pointer; font-weight: bold;
            transition: 0.3s; text-transform: uppercase; text-decoration: none;
        }
        .btn-join:hover { background: #00eaff; color: #000; box-shadow: 0 0 10px #00eaff; }

        /* Botão de Observar (Olho) */
        .btn-watch {
            background: transparent; border: 1px solid #555; color: #888;
            padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 1.2rem;
            margin-right: 5px; transition: 0.3s;
        }
        .btn-watch:hover { border-color: #ccc; color: #fff; }
        
        /* Dashboard & Auth */
        .dashboard-container, .auth-container { max-width: 500px; margin: 100px auto; position: relative; z-index: 5; }
        .profile-card { background: linear-gradient(145deg, #0b1116, #0f1820); border: 1px solid #00aaff; border-radius: 15px; padding: 30px; text-align: center; }
        .avatar-circle { width: 100px; height: 100px; margin: 0 auto 20px; background-color: #000; border: 3px solid #00eaff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: #00eaff; background-size: cover; background-position: center; cursor: pointer; }
        .stats-grid { display: flex; gap: 15px; margin-bottom: 30px; }
        .stat-box { flex: 1; background: rgba(0,0,0,0.3); padding: 15px; border-radius: 10px; border: 1px solid #333; }
        .stat-value { font-size: 1.5rem; font-weight: bold; color: #00eaff; display: block; }
        .stat-label { font-size: 0.8rem; color: #aaa; text-transform: uppercase; }
        
        .hidden { display: none !important; }
        
        /* Auth Form */
        .auth-container { background: #0b1116; border: 1px solid #00aaff; padding: 30px; border-radius: 12px; }
        .form-input { width: 100%; padding: 12px; margin-bottom: 15px; background: #1a222b; border: 1px solid #333; color: white; border-radius: 6px; }
        .btn-submit { width: 100%; padding: 12px; background: linear-gradient(45deg, #0088cc, #00eaff); border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
        .message-box { margin-top: 15px; padding: 10px; text-align: center; display: none; border-radius: 5px; }
        .msg-success { background: rgba(40, 167, 69, 0.2); color: #28a745; border: 1px solid #28a745; }
        .msg-error { background: rgba(220, 53, 69, 0.2); color: #dc3545; border: 1px solid #dc3545; }

        /* Botão de Extrato (Estilo discreto) */
        .btn-history {
            background: transparent; border: 1px solid #555; color: #aaa;
            padding: 8px 15px; border-radius: 20px; font-size: 0.9rem; cursor: pointer;
            margin-bottom: 20px; display: inline-block; transition: 0.3s;
        }
        .btn-history:hover { border-color: #00eaff; color: #00eaff; }