:root {
            --bg-dark: #0b0f19;
            --bg-card: #151c2d;
            --push-color: #f97316; /* Laranja Seguro para Telas OLED/iPhone */
            --pull-color: #0ea5e9; /* Azul Puro */
            --legs-color: #ef4444; /* Vermelho Puro */
            --dash-color: #8b5cf6; 
            --text-light: #e2e8f0;
            --text-muted: #94a3b8;
            --accent-color: #f97316;
            --color-green: #22c55e;
            --color-red: #ef4444;
            --color-pro: #fbbf24; /* Dourado para o plano PRO */
        }

        body {
            margin: 0;
            padding: 20px;
            background-color: var(--bg-dark);
            font-family: 'Rajdhani', sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
            color: var(--text-light);
            overflow-x: hidden;
            min-height: 100vh;
        }

        /* --- Telas Globais --- */
        #auth-container, #setup-container, #main-app, #history-container {
            display: none;
            width: 100%;
            flex-direction: column;
            align-items: center;
        }

        /* --- Botões de Navegação Superior --- */
        .top-nav-bar {
            width: 100%; max-width: 1000px; display: flex; justify-content: flex-end; gap: 10px; padding: 10px 0; margin-bottom: 20px; z-index: 50;
        }
        .nav-btn {
            background: transparent; color: var(--text-muted); border: 1px solid var(--text-muted);
            padding: 8px 15px; border-radius: 6px; cursor: pointer; font-family: 'Rajdhani', sans-serif;
            font-weight: 700; transition: all 0.2s; display: none;
        }
        .nav-btn:hover { color: var(--text-light); border-color: var(--text-light); background: rgba(255, 255, 255, 0.1); }
        #logout-btn:hover { color: #ef4444; border-color: #ef4444; background: rgba(239, 68, 68, 0.1); }


        /* --- Estilos da Tela de Login --- */
        #auth-container {
            max-width: 400px; background-color: var(--bg-card); padding: 40px; border-radius: 16px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8); border: 1px solid rgba(34, 197, 94, 0.3); margin-top: 5vh;
        }
        #auth-container h2 {
            font-family: 'Teko', sans-serif; font-size: 42px; color: var(--color-green);
            margin-top: 0; margin-bottom: 30px; text-shadow: 0 0 10px rgba(34, 197, 94, 0.5); text-transform: uppercase; text-align: center; line-height: 1;
        }
        .auth-form { display: flex; flex-direction: column; width: 100%; gap: 15px; }
        .auth-input {
            background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff;
            font-family: 'Rajdhani', sans-serif; font-size: 18px; padding: 15px; border-radius: 8px; width: calc(100% - 32px);
        }
        .auth-input:focus { outline: none; border-color: var(--color-green); box-shadow: 0 0 8px rgba(34, 197, 94, 0.4); }
        
        .auth-btn {
            background-color: var(--color-green); color: white; border: none; padding: 15px;
            font-family: 'Teko', sans-serif; font-size: 24px; font-weight: 600; letter-spacing: 1px;
            border-radius: 8px; cursor: pointer; text-transform: uppercase; transition: all 0.3s;
            box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
        }
        .auth-btn:hover { background-color: #16a34a; transform: translateY(-2px); }
        .auth-btn:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
        
        /* Botão Google Ajustado */
        .btn-google {
            background-color: rgba(0, 0, 0, 0.4); color: var(--text-light); font-family: 'Rajdhani', sans-serif;
            font-weight: 700; font-size: 18px; text-transform: none; display: flex;
            align-items: center; justify-content: center; gap: 10px; box-shadow: none;
            border: 1px solid rgba(255,255,255,0.1);
        }
        .btn-google:hover { background-color: rgba(255,255,255,0.05); transform: translateY(-2px); border-color: rgba(255,255,255,0.2); }

        .auth-toggle { color: var(--text-muted); text-align: center; margin-top: 15px; cursor: pointer; font-size: 16px; text-decoration: underline; }
        .auth-toggle:hover { color: var(--text-light); }
        .forgot-password { color: var(--text-muted); text-align: center; margin-top: 5px; cursor: pointer; font-size: 14px; }
        .forgot-password:hover { color: var(--color-green); }
        #auth-error { color: #ef4444; text-align: center; margin-top: 10px; font-weight: bold; display: none; }

        .divider { display: flex; align-items: center; text-align: center; color: var(--text-muted); margin: 5px 0; }
        .divider hr { flex: 1; border: 0; border-top: 1px solid rgba(255,255,255,0.1); }
        .divider span { padding: 0 10px; font-size: 14px; font-weight: bold; }

        /* --- ESTILOS DA TELA DE ONBOARDING (SETUP / ANAMNESE) --- */
        #setup-container { max-width: 800px; gap: 30px; }
        .setup-header { text-align: center; }
        .setup-header h1 { font-family: 'Teko', sans-serif; font-size: 56px; color: var(--color-green); margin: 0; line-height: 1; text-transform: uppercase; letter-spacing: 1px; }
        .setup-header p { font-size: 20px; color: var(--text-muted); margin-top: 5px; }

        .setup-section { width: 100%; display: flex; flex-direction: column; gap: 15px; background: var(--bg-card); padding: 25px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05);}
        .setup-section h3 { margin: 0; font-family: 'Teko', sans-serif; font-size: 32px; letter-spacing: 1px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 5px; color: var(--dash-color);}

        /* Anamnese Inputs */
        .anamnese-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
        .anamnese-group { display: flex; flex-direction: column; gap: 5px; }
        .anamnese-group label { color: var(--text-muted); font-weight: 700; text-transform: uppercase; font-size: 14px;}
        .anamnese-input { background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.2); color: white; padding: 12px; border-radius: 8px; font-family: 'Rajdhani', sans-serif; font-size: 18px; }

        /* Dias de Treino Toggle */
        .days-grid { display: flex; flex-wrap: wrap; gap: 10px; width: 100%; }
        .day-btn { flex: 1; background: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.2); color: var(--text-muted); padding: 12px 5px; border-radius: 8px; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px; transition: all 0.2s; min-width: 45px;}
        .day-btn.active { border-color: var(--color-green); color: var(--color-green); background: rgba(34, 197, 94, 0.1); }
        .day-btn:hover { background: rgba(255,255,255,0.1); }

        /* Gender Toggle */
        .gender-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
        .gender-card { background-color: rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.3s; }
        .gender-card i { font-size: 40px; margin-bottom: 10px; color: var(--text-muted); }
        .gender-card h3 { margin: 0; font-family: 'Teko', sans-serif; font-size: 28px; color: var(--text-muted); }
        .gender-card.active-male, .gender-card.active-female { border-color: var(--color-green); background: rgba(34, 197, 94, 0.1); box-shadow: 0 0 20px rgba(34, 197, 94, 0.2); }
        .gender-card.active-male i, .gender-card.active-male h3, .gender-card.active-female i, .gender-card.active-female h3 { color: var(--color-green); }

        select.setup-select { background-color: rgba(0,0,0,0.4); color: var(--text-light); border: 2px solid var(--color-green); padding: 15px 20px; border-radius: 12px; font-family: 'Rajdhani', sans-serif; font-size: 20px; font-weight: 700; width: 100%; }
        .objective-info-card { background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(0,0,0,0.4) 100%); border-left: 4px solid var(--dash-color); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
        .info-row strong { color: var(--dash-color); text-transform: uppercase; font-size: 14px; }
        .info-row span { font-size: 18px; color: var(--text-light); }

        .arsenal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 15px; width: 100%; }
        .arsenal-card { background-color: rgba(0,0,0,0.4); border: 2px solid rgba(255,255,255,0.1); border-radius: 12px; padding: 20px 15px; text-align: center; cursor: pointer; transition: all 0.3s; }
        .arsenal-card h4 { margin: 10px 0 0 0; font-family: 'Teko', sans-serif; font-size: 26px; color: var(--text-light); }
        .arsenal-card.active-arsenal { border-color: var(--color-green); background: rgba(34, 197, 94, 0.1); }
        .arsenal-card.active-arsenal i, .arsenal-card.active-arsenal h4 { color: var(--color-green); }

        .btn-save-protocol { background-color: var(--color-green); color: white; border: none; padding: 15px 40px; font-family: 'Teko', sans-serif; font-size: 28px; font-weight: 600; border-radius: 12px; cursor: pointer; text-transform: uppercase; transition: all 0.3s; width: 100%; max-width: 400px; margin: 20px auto; display: flex; justify-content: center; align-items: center; gap: 10px;}
        .btn-save-protocol:hover { background-color: #16a34a; transform: translateY(-2px); }


        /* --- Estilos Principais do App --- */
        #main-app { gap: 30px; }
        .infographic { width: 100%; max-width: 1000px; background-color: var(--bg-card); border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8); position: relative; }
        .infographic::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 6px; z-index: 10; }
        
        .dash-card { border: 1px solid rgba(139, 92, 246, 0.3); } .dash-card::before { background: var(--dash-color); }
        .push-card { border: 1px solid rgba(249, 115, 22, 0.3); } .push-card::before { background: var(--push-color); }
        .pull-card { border: 1px solid rgba(14, 165, 233, 0.3); } .pull-card::before { background: var(--pull-color); }
        .legs-card { border: 1px solid rgba(239, 68, 68, 0.3); } .legs-card::before { background: var(--legs-color); }

        .header { padding: 25px 30px; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.05); display: flex; justify-content: space-between; align-items: center; }
        .header-text { flex: 1; }
        .header-actions { display: flex; gap: 10px; align-items: center;}

        .header h1 { font-family: 'Teko', sans-serif; font-size: 42px; margin: 0; line-height: 1; text-transform: uppercase; }
        .dash-card .header h1 span { color: var(--dash-color); } .push-card .header h1 span { color: var(--push-color); } .pull-card .header h1 span { color: var(--pull-color); } .legs-card .header h1 span { color: var(--legs-color); }
        .header p { margin: 5px 0 0 0; font-size: 18px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; }
        
        .btn-action { background: transparent; border: 1px dashed rgba(255, 255, 255, 0.3); color: var(--text-light); padding: 8px 15px; border-radius: 8px; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; transition: all 0.2s; }
        .btn-action:hover { background: rgba(255,255,255,0.1); }
        .btn-action.save { border-color: var(--color-green); color: var(--color-green); border-style: solid; }
        .btn-action.save:hover { background: rgba(34, 197, 94, 0.1); box-shadow: 0 0 10px rgba(34, 197, 94, 0.3); }
        
        .workout-toggle-icon { display: none; transition: transform 0.3s; }

        /* Dashboard Insights e Seção PRO */
        .stat-rows-container { display: flex; flex-direction: column; gap: 15px; padding: 20px 30px; }
        .stat-row-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 15px; }
        .stat-row-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 15px; }
        .stat-box { background-color: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; padding: 15px; text-align: center; display: flex; flex-direction: column; justify-content: center; position: relative;}
        .stat-box.interactive:hover { border-color: var(--color-pro); transform: translateY(-5px); background-color: rgba(255,255,255,0.02); }
        .stat-value { font-family: 'Teko', sans-serif; color: var(--dash-color); line-height: 1; margin-bottom: 5px; }
        .stat-row-top .stat-value { font-size: 48px; } .stat-row-bottom .stat-value { font-size: 38px; }
        .stat-label { font-size: 14px; color: var(--text-muted); text-transform: uppercase; font-weight: 700; margin-bottom: 5px; }
        .text-green { color: var(--color-green); } .text-red { color: var(--color-red); } .text-muted { color: var(--text-muted); }
        .trend-text { font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 5px; text-transform: uppercase; background: rgba(0,0,0,0.3); padding: 4px; border-radius: 6px; }
        .chart-container { width: 100%; height: 50px; margin-top: 10px; }
        .coach-insight { background: linear-gradient(90deg, rgba(139, 92, 246, 0.1) 0%, rgba(0,0,0,0) 100%); border-left: 4px solid var(--dash-color); margin: 0 30px 20px 30px; padding: 15px; border-radius: 0 8px 8px 0; font-size: 16px; }

        /* PRO Container Style */
        .pro-insights-box { margin-top: 20px; border: 1px solid var(--color-pro); background: rgba(251, 191, 36, 0.05); border-radius: 12px; padding: 20px; transition: all 0.3s; }
        .pro-insights-header { display: flex; justify-content: space-between; align-items: center; cursor: default; margin-bottom: 15px; }
        .pro-insights-header h3 { color: var(--color-pro); margin: 0; font-family: 'Teko', sans-serif; font-size: 28px; text-transform: uppercase; }
        .pro-toggle-icon { display: none; font-size: 24px; color: var(--color-pro); transition: transform 0.3s; }
        .pro-insights-content { display: block; }

        /* Tabelas */
        .table-responsive { width: 100%; overflow-x: auto; padding-bottom: 20px; }
        table { width: 100%; border-collapse: collapse; text-align: left; white-space: nowrap; }
        th, td { padding: 12px 15px; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 18px; }
        th { font-family: 'Teko', sans-serif; font-size: 22px; color: var(--text-muted); text-transform: uppercase; border-bottom: 2px solid rgba(255, 255, 255, 0.1); background-color: var(--bg-card); }
        tbody tr:hover { background-color: rgba(255, 255, 255, 0.02); }
        .sticky-col { position: sticky; left: 0; background-color: var(--bg-card); z-index: 2; min-width: 250px; box-shadow: 5px 0 10px rgba(0,0,0,0.3); }
        
        .exercise-name { display: flex; align-items: center; gap: 10px; font-weight: 700; }
        .number { font-family: 'Teko', sans-serif; font-size: 24px; opacity: 0.5; min-width: 20px; }
        
        /* Botões PRO e Animação na Tabela */
        .icon-btn { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); color: var(--text-light); border-radius: 6px; padding: 6px 10px; cursor: pointer; transition: all 0.2s; font-size: 14px;}
        .icon-btn:hover { background: rgba(255,255,255,0.1); }
        .btn-pro { border-color: var(--color-pro); color: var(--color-pro); font-size: 12px; font-weight: bold; }
        .btn-pro:hover { background: rgba(251, 191, 36, 0.1); }
        
        .swap-text { display: inline; }

        .tag { background-color: rgba(0, 0, 0, 0.4); padding: 4px 10px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, 0.1); font-weight: 700; }
        .push-card .tag { color: var(--push-color); } .pull-card .tag { color: var(--pull-color); } .legs-card .tag { color: var(--legs-color); }

        .input-group { display: flex; flex-direction: column; gap: 2px; align-items: center; }
        input { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.1); color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 18px; font-weight: 700; padding: 6px; border-radius: 6px; text-align: center; }
        input:focus { outline: none; background: rgba(0, 0, 0, 0.6); }
        .date-input { width: 130px; font-size: 16px; cursor: pointer; }
        
        .log-cell { display: flex; align-items: center; justify-content: center; gap: 4px; }
        .mini-input { width: 40px; font-size: 18px; }
        .mini-input.weight-input { width: 55px; }
        input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

        /* --- TELA DE HISTÓRICO --- */
        #history-container { gap: 0px; }
        .history-header { width: 100%; max-width: 1000px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .history-back-btn { margin-top: 20px; background: transparent; color: var(--text-light); border: 1px solid var(--text-light); padding: 10px 20px; border-radius: 8px; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 16px; text-transform: uppercase; transition: all 0.2s; }
        .history-back-btn:hover { background: rgba(255,255,255,0.1); }

        /* --- MODAIS (POP-UPS) --- */
        .modal-overlay {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.8); z-index: 200; justify-content: center; align-items: center;
            backdrop-filter: blur(5px); padding: 20px; box-sizing: border-box;
        }
        .modal-content {
            background: var(--bg-card); width: 100%; max-width: 500px; border-radius: 16px;
            padding: 30px; position: relative; border: 1px solid rgba(255,255,255,0.1);
            box-shadow: 0 25px 50px rgba(0,0,0,0.5); display: flex; flex-direction: column;
        }
        .modal-close {
            position: absolute; top: 15px; right: 20px; font-size: 24px; color: var(--text-muted); cursor: pointer;
        }
        .modal-close:hover { color: var(--color-red); }
        .modal-title { font-family: 'Teko', sans-serif; font-size: 32px; color: var(--color-green); margin: 0 0 15px 0; line-height: 1;}
        
        /* Modal do Cronômetro Atualizado */
        .timer-display { font-size: 72px; font-family: 'Teko', sans-serif; color: var(--color-green); line-height: 1; margin: 20px 0; text-align: center; }
        .timer-controls { display: flex; flex-direction: column; gap: 15px; width: 100%; }
        
        .btn-timer-style { background: rgba(0, 0, 0, 0.4); color: var(--color-green); padding: 10px; border-radius: 8px; cursor: pointer; font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 18px; transition: all 0.2s; }
        .btn-dashed { border: 1px dashed var(--color-green); }
        .btn-dashed:hover, .btn-dashed:active { background: var(--color-green); color: #fff; }
        .btn-solid { border: 1px solid var(--color-green); }
        .btn-solid:hover, .btn-solid:active { background: var(--color-green); color: #fff; }
        .btn-stop { border: 1px solid var(--color-red); color: var(--color-red); width: 100%; }
        .btn-stop:hover { background: var(--color-red); color: #fff;}

        /* Modal de Animação Placeholder */
        .animation-box { width: 100%; height: 250px; background: rgba(0,0,0,0.5); border-radius: 12px; display: flex; flex-direction: column; justify-content: center; align-items: center; color: var(--text-muted); border: 1px dashed rgba(255,255,255,0.2); margin-bottom: 15px;}
        
        /* Modal IA Swap & Modal 1RM*/
        .ai-swap-box { background: rgba(251, 191, 36, 0.1); border-left: 4px solid var(--color-pro); padding: 15px; border-radius: 0 8px 8px 0; margin-bottom: 20px; }
        .swap-option { background: rgba(0,0,0,0.4); padding: 15px; border-radius: 8px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,0.05); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.2s;}
        .swap-option:hover { border-color: var(--color-pro); background: rgba(255,255,255,0.05); }

        /* Custom Scrollbar for 1RM List */
        #1rm-list-container::-webkit-scrollbar { width: 6px; }
        #1rm-list-container::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
        #1rm-list-container::-webkit-scrollbar-thumb { background: rgba(251, 191, 36, 0.5); border-radius: 4px; }


        @media (max-width: 768px) {
            body { padding: 20px 10px; }
            .top-nav-bar { justify-content: space-between; margin-bottom: 10px; }
            .nav-btn { font-size: 14px; padding: 6px 10px; }
            .header { flex-direction: column; text-align: center; gap: 15px; padding: 20px; }
            .header-actions { flex-wrap: wrap; justify-content: center; }
            .stat-row-top, .stat-row-bottom { grid-template-columns: 1fr; }
            
            /* Responsive PRO Box */
            .pro-insights-header { cursor: pointer; margin-bottom: 0; }
            .pro-toggle-icon { display: block; }
            .pro-insights-content { display: none; margin-top: 20px; } /* Fechado por padrão no mobile */
            .pro-insights-box.expanded .pro-insights-content { display: block; }
            .pro-insights-box.expanded .pro-insights-header { margin-bottom: 15px; }
            .pro-insights-box.expanded .pro-toggle-icon { transform: rotate(180deg); }

            /* Accordion logic for Workouts A, B, C on mobile */
            .workout-toggle-icon { display: inline-block; font-size: 24px; vertical-align: middle; margin-left: 10px; color: inherit; }
            .infographic:not(.dash-card) .header { cursor: pointer; }
            .infographic:not(.dash-card) .header-actions { display: none; }
            .infographic:not(.dash-card) .table-responsive { display: none; }
            
            /* When expanded */
            .infographic.expanded:not(.dash-card) .header-actions { display: flex; }
            .infographic.expanded:not(.dash-card) .table-responsive { display: block; }
            .infographic.expanded:not(.dash-card) .workout-toggle-icon { transform: rotate(180deg); }


            .sticky-col { min-width: 180px; max-width: 180px; white-space: normal; }
            .exercise-name { font-size: 14px; align-items: flex-start; }
            
            /* Hide Swap text on mobile */
            .swap-text { display: none; }
            .icon-btn { padding: 6px 8px; font-size: 14px;}
            
            .history-header { flex-direction: column; gap: 15px; text-align: center; }
        }