/* ===== RESET & BASE ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --primary: #c9a55a;
    --primary-dark: #b08d3e;
    --primary-light: #e2cc8f;
    --bg: #0b0e14;
    --bg-card: #141820;
    --text: #f0ece4;
    --text-secondary: #8a8f9c;
    --border: #1f2533;
    --success: #34d399;
    --warning: #fbbf24;
    --danger: #f87171;
    --radius: 12px;
    --shadow: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 32px rgba(0,0,0,0.5);
    --transition: all 0.2s ease;
    --gold-gradient: linear-gradient(135deg, #c9a55a, #e2cc8f, #c9a55a);
    --bg-elevated: #1a1f2b;
}

html { overflow-x: hidden; touch-action: pan-y; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; overflow-x: hidden; max-width: 100%; width: 100%; overscroll-behavior: none; touch-action: pan-y; position: relative; }
/* Fileiras/áreas de rolagem horizontal continuam rolando na horizontal */
/* pan-x SOZINHO travava a rolagem vertical da página quando o gesto começava numa faixa
   (no celular as faixas cobrem quase a tela toda). pan-x pan-y: a faixa rola na horizontal
   E a página continua rolando na vertical. */
.nfx-strip, .ai-suggestions, .se-viewport, .se-track, .hot-badge-row { touch-action: pan-x pan-y; }
/* Modais/overlays: travados, sem samba lateral, scroll contido dentro do card */
.checkout-overlay, .promo-overlay, .vsl-overlay, .modal-overlay, .explainer-overlay { overflow: hidden; overscroll-behavior: contain; touch-action: none; }
.co-card, .modal-content { overflow-x: hidden; overscroll-behavior: contain; touch-action: pan-y; max-width: 100%; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; }
.hidden { display: none !important; }

/* ===== HEADER ===== */
.header { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 64px; background: var(--bg-card); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; }
.header-left { display: flex; align-items: center; gap: 24px; }
.logo { display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 36px; height: 36px; background: var(--gold-gradient); color: #0b0e14; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; }
.logo-text { font-weight: 700; font-size: 18px; }
.header-nav { display: flex; gap: 2px; }
.nav-link { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-secondary); transition: var(--transition); cursor: pointer; }
.nav-link:hover { background: var(--bg); color: var(--text); }
.nav-link.active { background: rgba(201,165,90,0.12); color: var(--primary); }
.header-right { display: flex; align-items: center; gap: 10px; }

/* Header XP */
.header-xp { display: flex; flex-direction: column; gap: 2px; min-width: 120px; }
.header-xp-info { display: flex; justify-content: space-between; font-size: 11px; }
.header-level { font-weight: 700; color: var(--primary); }
.header-xp-text { color: var(--text-secondary); }
.header-xp-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.header-xp-fill { height: 100%; background: var(--gold-gradient); border-radius: 2px; transition: width 0.5s ease; }

/* Header Streak */
.header-streak { display: flex; align-items: center; gap: 4px; padding: 4px 10px; background: rgba(234,88,12,0.15); border-radius: 16px; font-size: 13px; font-weight: 700; color: #fb923c; }

.btn-icon { width: 40px; height: 40px; border-radius: 50%; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition); position: relative; }
.btn-icon:hover { background: var(--bg); color: var(--text); }
.badge { position: absolute; top: 4px; right: 4px; background: var(--danger); color: white; font-size: 10px; font-weight: 600; width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.user-avatar img { width: 36px; height: 36px; border-radius: 50%; cursor: pointer; transition: var(--transition); }
.user-avatar img:hover { box-shadow: 0 0 0 3px var(--primary-light); }

/* ===== COUNTDOWN BAR (20) ===== */
.countdown-bar { background: linear-gradient(90deg, #1a1510, #2a2015, #1a1510); border-bottom: 1px solid rgba(201,165,90,0.3); color: #f0ece4; padding: 10px 24px; }
.countdown-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }
.countdown-label { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.live-pulse { animation: pulse 1.5s infinite; color: #f87171; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
.countdown-title { font-weight: 600; font-size: 14px; }
.countdown-timer { display: flex; align-items: center; gap: 4px; }
.countdown-unit { text-align: center; background: rgba(201,165,90,0.15); border: 1px solid rgba(201,165,90,0.2); padding: 4px 8px; border-radius: 6px; min-width: 44px; }
.countdown-unit span { font-size: 18px; font-weight: 800; display: block; line-height: 1; }
.countdown-unit small { font-size: 9px; text-transform: uppercase; opacity: 0.8; }
.countdown-sep { font-size: 18px; font-weight: 700; opacity: 0.6; }
.btn-sm { padding: 6px 14px; font-size: 12px; }

/* ===== MAIN CONTENT ===== */
.main-content { max-width: 1200px; margin: 0 auto; padding: 24px; }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== CARDS ===== */
.card { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); padding: 20px; margin-bottom: 16px; }

/* ===== WEEKLY RECAP (19) ===== */
.weekly-recap { background: linear-gradient(135deg, rgba(201,165,90,0.08), rgba(201,165,90,0.04)); border-color: rgba(201,165,90,0.3); margin-bottom: 20px; }
.recap-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.recap-header h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; color: var(--primary); }
.recap-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.recap-stat { text-align: center; background: var(--bg-elevated); padding: 12px; border-radius: 8px; border: 1px solid var(--border); }
.recap-number { font-size: 24px; font-weight: 800; color: var(--primary); display: block; }
.recap-label { font-size: 11px; color: var(--text-secondary); }
.recap-highlights { display: flex; flex-direction: column; gap: 8px; }
.recap-highlight { display: flex; gap: 10px; align-items: flex-start; padding: 8px; background: var(--bg-elevated); border-radius: 8px; font-size: 13px; border: 1px solid var(--border); }
.recap-icon { font-size: 20px; }
.recap-highlight strong { font-size: 12px; }
.recap-highlight p { font-size: 12px; color: var(--text-secondary); margin-top: 2px; }

/* ===== ONBOARDING (18) ===== */
.onboarding-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.85); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; }
.onboarding-modal { background: var(--bg-card); border: 1px solid rgba(201,165,90,0.3); border-radius: 20px; max-width: 520px; width: 100%; padding: 40px; text-align: center; animation: modalIn 0.4s ease; }
.onboarding-step.hidden { display: none; }
.onboarding-icon { font-size: 48px; margin-bottom: 16px; color: var(--primary); }
.onboarding-icon i { font-size: 48px; }
.onboarding-modal h2 { font-size: 24px; margin-bottom: 12px; }
.onboarding-modal p { color: var(--text-secondary); margin-bottom: 20px; font-size: 15px; }
.onboarding-modal textarea { width: 100%; border: 1px solid var(--border); border-radius: 10px; padding: 14px; font-size: 14px; font-family: inherit; resize: none; outline: none; margin-bottom: 16px; background: var(--bg); color: var(--text); }
.onboarding-modal textarea:focus { border-color: var(--primary); }

.trail-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.trail-option { border: 2px solid var(--border); border-radius: 12px; padding: 20px 12px; cursor: pointer; transition: var(--transition); }
.trail-option:hover { border-color: var(--primary-light); }
.trail-option.selected { border-color: var(--primary); background: rgba(201,165,90,0.1); }
.trail-option i { font-size: 28px; color: var(--primary); display: block; margin-bottom: 8px; }
.trail-option h4 { font-size: 14px; margin-bottom: 4px; }
.trail-option p { font-size: 11px; color: var(--text-secondary); }

.onboarding-checklist { text-align: left; margin: 16px 0; }
.checklist-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px; margin-bottom: 4px; font-size: 14px; cursor: default; }
.checklist-item em { margin-left: auto; color: var(--primary); font-style: normal; font-weight: 600; font-size: 13px; }
.checklist-item input { accent-color: var(--primary); }

.onboarding-progress { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.ob-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: var(--transition); }
.ob-dot.active { background: var(--primary); width: 24px; border-radius: 4px; }

.btn-lg { padding: 12px 28px; font-size: 16px; border-radius: 10px; }
.btn-text { border: none; background: none; color: var(--text-secondary); cursor: pointer; font-size: 13px; font-family: inherit; padding: 8px; }
.btn-text:hover { color: var(--primary); }
.btn-block { width: 100%; justify-content: center; }

/* Onboarding Progress Card */
.onboarding-progress-card { background: rgba(52,211,153,0.06); border-color: rgba(52,211,153,0.25); }
.ob-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ob-progress-header h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; color: var(--success); }
.ob-progress-pct { font-size: 14px; font-weight: 700; color: var(--success); }
.ob-progress-bar-wrap { height: 6px; background: rgba(52,211,153,0.15); border-radius: 3px; overflow: hidden; margin-bottom: 12px; }
.ob-progress-bar { height: 100%; background: var(--success); border-radius: 3px; transition: width 0.5s ease; }
.ob-checklist-compact { display: flex; flex-wrap: wrap; gap: 6px; }
.ob-check-item { display: flex; align-items: center; gap: 6px; font-size: 12px; padding: 4px 10px; border-radius: 16px; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-secondary); }
.ob-check-item.done { background: rgba(52,211,153,0.15); text-decoration: line-through; color: var(--success); border-color: rgba(52,211,153,0.3); }
.ob-check-item i { font-size: 10px; }

/* ===== WEEKLY CHALLENGES (4) ===== */
.weekly-challenges { border-left: 4px solid var(--warning); }
.challenges-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.challenges-header h3 { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.challenges-header h3 i { color: var(--warning); }
.challenges-timer { font-size: 12px; color: var(--warning); font-weight: 600; padding: 4px 10px; background: rgba(251,191,36,0.12); border-radius: 12px; }
.challenge-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.challenge-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.challenge-check { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; color: transparent; font-size: 12px; flex-shrink: 0; cursor: pointer; transition: var(--transition); }
.challenge-check.completed { background: var(--success); border-color: var(--success); color: white; }
.challenge-info { flex: 1; }
.challenge-info h4 { font-size: 13px; font-weight: 600; }
.challenge-info p { font-size: 12px; color: var(--text-secondary); }
.challenge-progress { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.challenge-bar-wrap { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; max-width: 100px; }
.challenge-bar { height: 100%; background: var(--warning); border-radius: 2px; transition: width 0.3s ease; }
.challenge-pct { font-size: 11px; color: var(--text-secondary); }
.challenge-reward { font-size: 12px; font-weight: 700; color: var(--primary); white-space: nowrap; }

/* ===== SPOTLIGHT (7) ===== */
.spotlight-card { background: linear-gradient(135deg, rgba(201,165,90,0.1), rgba(201,165,90,0.04)); border-color: rgba(201,165,90,0.35); }
.spotlight-badge { font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: 1px; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; }
.spotlight-content { display: flex; align-items: center; gap: 16px; }
.spotlight-avatar { width: 64px; height: 64px; border-radius: 50%; border: 3px solid var(--primary); flex-shrink: 0; }
.spotlight-info h3 { font-size: 18px; }
.spotlight-info p { font-size: 13px; color: var(--text-secondary); }
.spotlight-badges { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.mini-badge { font-size: 11px; padding: 3px 8px; background: var(--bg-elevated); border-radius: 12px; border: 1px solid rgba(201,165,90,0.3); color: var(--primary); }

/* ===== PINNED POST (6) ===== */
.pinned-post { border-left: 4px solid var(--primary); position: relative; }
.pinned-badge { font-size: 10px; font-weight: 700; color: var(--primary); letter-spacing: 1px; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.role-badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.role-badge.admin { background: rgba(201,165,90,0.15); color: var(--primary); }
.role-badge.mentor { background: rgba(52,211,153,0.15); color: var(--success); }
.intro-input-area { margin-top: 16px; }
.intro-input-area textarea { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 12px; font-size: 14px; font-family: inherit; resize: none; outline: none; margin-bottom: 8px; background: var(--bg); color: var(--text); }
.intro-input-area textarea:focus { border-color: var(--primary); }
.intro-responses { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }

/* ===== VICTORY THREAD (9) ===== */
.victory-thread { border-left: 4px solid var(--success); }
.victory-header { margin-bottom: 8px; }
.victory-badge { font-size: 11px; font-weight: 700; color: var(--success); letter-spacing: 1px; display: flex; align-items: center; gap: 6px; }
.victory-prompt h3 { font-size: 16px; }
.victory-prompt p { font-size: 13px; color: var(--text-secondary); margin-bottom: 12px; }
.victory-input-area { display: flex; gap: 8px; margin-bottom: 16px; }
.victory-input-area textarea { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 10px; font-size: 13px; font-family: inherit; resize: none; outline: none; background: var(--bg); color: var(--text); }
.btn-victory { white-space: nowrap; align-self: flex-end; }
.victory-list { border-top: 1px solid var(--border); padding-top: 12px; }
.victory-item { display: flex; gap: 12px; padding: 12px 0; }
.victory-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.victory-item img { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.victory-content h4 { font-size: 13px; font-weight: 600; }
.victory-content p { font-size: 13px; color: var(--text-secondary); margin: 4px 0; }
.victory-reactions { display: flex; gap: 6px; }
.reaction-btn { border: 1px solid var(--border); background: var(--bg-elevated); padding: 4px 10px; border-radius: 16px; font-size: 12px; cursor: pointer; transition: var(--transition); }
.reaction-btn:hover, .reaction-btn.active { background: rgba(201,165,90,0.12); border-color: rgba(201,165,90,0.3); }

/* ===== POLL (8) ===== */
.poll-creator { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.poll-question-input, .poll-option-input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; font-family: inherit; outline: none; margin-bottom: 8px; background: var(--bg); color: var(--text); }
.poll-question-input:focus, .poll-option-input:focus { border-color: var(--primary); }
.poll-display { margin-top: 12px; }
.poll-option-bar { margin-bottom: 8px; cursor: pointer; }
.poll-option-label { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; }
.poll-bar-bg { height: 28px; background: var(--bg); border-radius: 6px; overflow: hidden; position: relative; border: 1px solid var(--border); }
.poll-bar-fill { height: 100%; border-radius: 6px; transition: width 0.5s ease; display: flex; align-items: center; padding-left: 10px; font-size: 12px; font-weight: 600; color: white; }
.poll-bar-fill.option-a { background: var(--primary); }
.poll-bar-fill.option-b { background: #8b5cf6; }
.poll-bar-fill.option-c { background: #06b6d4; }
.poll-bar-fill.option-d { background: #10b981; }
.poll-total { font-size: 12px; color: var(--text-secondary); margin-top: 4px; }

/* ===== COMMUNITY LAYOUT ===== */
.community-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; min-width: 0; }
/* Evita que os cards do feed estourem a largura da tela (overflow horizontal) */
.community-layout > *, .community-layout .card { min-width: 0; max-width: 100%; }
.challenges-header { flex-wrap: wrap; gap: 8px; }
.card { max-width: 100%; }

/* Create Post */
.create-post-header { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; }
.post-input { flex: 1; border: 1px solid var(--border); border-radius: 24px; padding: 10px 20px; font-size: 14px; outline: none; transition: var(--transition); font-family: inherit; background: var(--bg); color: var(--text); }
.post-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(201,165,90,0.1); }
.create-post-actions { display: flex; justify-content: space-between; align-items: center; }
.post-options { display: flex; gap: 4px; }
.btn-option { border: none; background: transparent; color: var(--text-secondary); padding: 8px 12px; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; display: flex; align-items: center; gap: 6px; transition: var(--transition); }
.btn-option:hover { background: var(--bg); color: var(--text); }
.btn-primary { background: var(--gold-gradient); color: #0b0e14; border: none; padding: 8px 20px; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 14px; font-family: inherit; transition: var(--transition); display: flex; align-items: center; gap: 6px; }
.btn-primary:hover { background: var(--primary-dark); filter: brightness(1.1); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border); padding: 8px 20px; border-radius: 8px; font-weight: 500; cursor: pointer; font-size: 14px; font-family: inherit; transition: var(--transition); display: flex; align-items: center; gap: 6px; }
.btn-secondary:hover { background: var(--border); }

/* Category Filter */
.category-filter { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cat-btn { border: 1px solid var(--border); background: var(--bg-card); padding: 6px 16px; border-radius: 20px; cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; color: var(--text-secondary); transition: var(--transition); }
.cat-btn:hover { border-color: var(--primary); color: var(--primary); }
.cat-btn.active { background: var(--gold-gradient); color: #0b0e14; border-color: var(--primary); }

/* Posts */
.post-card { cursor: pointer; transition: var(--transition); }
.post-card:hover { border-color: var(--primary-light); }
.post-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.post-author { display: flex; gap: 10px; align-items: center; }
.post-author-info h4 { font-size: 14px; font-weight: 600; }
.post-author-info span { font-size: 12px; color: var(--text-secondary); }
.post-category { font-size: 11px; padding: 3px 10px; border-radius: 12px; font-weight: 500; background: rgba(201,165,90,0.12); color: var(--primary); }
.post-category.duvidas { background: rgba(251,191,36,0.12); color: #fbbf24; }
.post-category.conquistas { background: rgba(52,211,153,0.12); color: #34d399; }
.post-category.recursos { background: rgba(244,114,182,0.12); color: #f472b6; }
.post-category.enquete { background: rgba(56,189,248,0.12); color: #38bdf8; }
.post-body { margin-bottom: 16px; }
.post-body h3 { font-size: 16px; margin-bottom: 8px; }
.post-body p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.post-footer { display: flex; gap: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.post-action { display: flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; font-size: 13px; padding: 6px 10px; border-radius: 6px; transition: var(--transition); font-family: inherit; }
.post-action:hover { background: var(--bg); color: var(--primary); }
.post-action.liked { color: var(--danger); }

/* XP Sidebar Card */
.xp-card { background: linear-gradient(135deg, rgba(201,165,90,0.08), rgba(201,165,90,0.03)); border-color: rgba(201,165,90,0.3); }
.xp-card-header { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; }
.xp-avatar { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--primary); }
.xp-card-header h3 { font-size: 16px; margin-bottom: 0; }
.user-level-badge { font-size: 12px; color: var(--primary); font-weight: 600; }
.xp-progress-section { margin-bottom: 16px; }
.xp-bar-wrapper { height: 8px; background: rgba(201,165,90,0.15); border-radius: 4px; overflow: hidden; }
.xp-bar { height: 100%; background: var(--gold-gradient); border-radius: 4px; transition: width 0.5s ease; }
.xp-numbers { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--text-secondary); }
.xp-actions-today h4 { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; text-transform: uppercase; letter-spacing: 0.5px; }
.xp-today-list { display: flex; flex-direction: column; gap: 4px; }
.xp-today-item { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 0; }
.xp-amount { font-weight: 700; color: var(--primary); }

/* Streak Card */
.streak-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.streak-card h3 i { color: #fb923c; }
.streak-display { text-align: center; margin-bottom: 16px; }
.streak-number { font-size: 48px; font-weight: 800; color: #fb923c; line-height: 1; }
.streak-display span { font-size: 13px; color: var(--text-secondary); }
.streak-calendar { display: flex; justify-content: space-between; gap: 4px; margin-bottom: 12px; }
.streak-day { flex: 1; text-align: center; }
.streak-day .day-label { font-size: 10px; color: var(--text-secondary); display: block; margin-bottom: 4px; }
.streak-day .day-dot { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); margin: 0 auto; display: flex; align-items: center; justify-content: center; font-size: 10px; color: transparent; }
.streak-day .day-dot.active { background: #fb923c; border-color: #fb923c; color: #0b0e14; }
.streak-day .day-dot.today { border-color: #fb923c; }
.streak-record { text-align: center; font-size: 12px; color: var(--text-secondary); }

/* Mentorship Card */
.mentorship-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.mentorship-card h3 i { color: var(--primary); }
.mentorship-desc { font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; }
.mentor-item { display: flex; gap: 10px; align-items: center; padding: 8px 0; }
.mentor-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.mentor-item img { width: 36px; height: 36px; border-radius: 50%; }
.mentor-info h4 { font-size: 13px; }
.mentor-info span { font-size: 11px; color: var(--text-secondary); }
.mentor-badge { font-size: 10px; padding: 2px 6px; background: rgba(52,211,153,0.15); color: var(--success); border-radius: 4px; font-weight: 600; margin-left: 4px; }

/* Sidebar */
.sidebar-card h3 { font-size: 15px; font-weight: 600; margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
.sidebar-card h3 i { color: var(--primary); }

.leaderboard-mini .lb-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.lb-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.lb-rank { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-secondary); flex-shrink: 0; }
.lb-rank.gold { background: rgba(201,165,90,0.2); color: var(--primary); }
.lb-rank.silver { background: rgba(148,163,184,0.2); color: #94a3b8; }
.lb-rank.bronze { background: rgba(251,146,60,0.2); color: #fb923c; }
.lb-item img { width: 32px; height: 32px; border-radius: 50%; }
.lb-info { flex: 1; }
.lb-info h4 { font-size: 13px; font-weight: 600; }
.lb-info span { font-size: 11px; color: var(--text-secondary); }
.lb-points { font-size: 13px; font-weight: 700; color: var(--primary); }

.top3-prizes { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.prize-item { font-size: 12px; padding: 4px 0; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.prize-medal { font-size: 16px; }

/* Events */
.event-mini { display: flex; gap: 12px; padding: 10px 0; align-items: center; }
.event-mini:not(:last-child) { border-bottom: 1px solid var(--border); }
.event-date-badge { width: 44px; height: 44px; border-radius: 10px; background: rgba(201,165,90,0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.event-date-badge .day { font-size: 16px; font-weight: 700; color: var(--primary); line-height: 1; }
.event-date-badge .month { font-size: 10px; color: var(--primary); text-transform: uppercase; font-weight: 600; }
.event-mini-info h4 { font-size: 13px; font-weight: 600; }
.event-mini-info span { font-size: 12px; color: var(--text-secondary); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; }
.stat-item { display: flex; flex-direction: column; }
.stat-number { font-size: 22px; font-weight: 700; color: var(--primary); }
.stat-label { font-size: 12px; color: var(--text-secondary); }

/* ===== CLASSROOM ===== */
.trail-selector { margin-bottom: 16px; padding: 0; background: none; border: none; line-height: 0; }
.trail-selector h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.trail-tabs { display: flex; gap: 8px; }
.trail-tab { border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary); padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; font-family: inherit; transition: var(--transition); }
.trail-tab:hover { border-color: var(--primary-light); }
.trail-tab.active { background: var(--gold-gradient); color: #0b0e14; border-color: var(--primary); }

.classroom-header-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.classroom-header-section h2 { font-size: 24px; }
.progress-overview { display: flex; align-items: center; gap: 12px; }
.progress-bar-wrapper { width: 200px; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.progress-bar { height: 100%; background: var(--primary); border-radius: 4px; transition: width 0.5s ease; }
.progress-text { font-size: 14px; color: var(--text-secondary); font-weight: 500; }

.module-card { margin-bottom: 16px; }
.module-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; padding: 4px 0; }
.module-header-left { display: flex; align-items: center; gap: 12px; }
.module-icon { width: 44px; height: 44px; border-radius: 10px; background: rgba(201,165,90,0.12); display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 18px; }
.module-title h3 { font-size: 16px; font-weight: 600; }
.module-title span { font-size: 13px; color: var(--text-secondary); }
.module-progress { display: flex; align-items: center; gap: 10px; }
.module-progress-text { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.module-toggle { color: var(--text-secondary); transition: var(--transition); }
.module-toggle.open { transform: rotate(180deg); }
.module-lessons { display: none; padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--border); }
.module-lessons.open { display: block; }

.lesson-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; cursor: pointer; transition: var(--transition); }
.lesson-item:hover { background: var(--bg); }
.lesson-item.locked { opacity: 0.5; cursor: not-allowed; }
.lesson-check { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: transparent; font-size: 12px; transition: var(--transition); }
.lesson-check.completed { background: var(--success); border-color: var(--success); color: white; }
.lesson-info { flex: 1; }
.lesson-info h4 { font-size: 14px; font-weight: 500; }
.lesson-info span { font-size: 12px; color: var(--text-secondary); }
.lesson-duration { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.lesson-type-icon { color: var(--text-secondary); font-size: 14px; }
.lesson-lock-icon { color: var(--text-secondary); font-size: 14px; }
.lesson-xp { font-size: 11px; color: var(--primary); font-weight: 600; }

/* Drip Content (11) */
.drip-lock-overlay { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.2); border-radius: 8px; font-size: 12px; color: #fbbf24; margin-top: 4px; }
.drip-lock-overlay i { font-size: 14px; }

/* Bonus Content (12) */
.bonus-content { border-left: 4px solid var(--primary); }
.bonus-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.bonus-header h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.bonus-subtitle { font-size: 12px; color: var(--text-secondary); }
.bonus-item { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; transition: var(--transition); }
.bonus-item.locked { opacity: 0.6; }
.bonus-item.unlocked { border-color: rgba(52,211,153,0.3); background: rgba(52,211,153,0.06); }
.bonus-item .bonus-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.bonus-item .bonus-icon.locked-bg { background: var(--bg); color: var(--text-secondary); }
.bonus-item .bonus-icon.unlocked-bg { background: rgba(52,211,153,0.15); color: var(--success); }
.bonus-item-info h4 { font-size: 14px; }
.bonus-item-info p { font-size: 12px; color: var(--text-secondary); }
.bonus-level-req { font-size: 11px; font-weight: 600; color: var(--primary); white-space: nowrap; }

/* Certificate (13) */
.certificate-section { background: linear-gradient(135deg, rgba(201,165,90,0.1), rgba(201,165,90,0.04)); border-color: rgba(201,165,90,0.35); }
.certificate-preview { display: flex; align-items: center; gap: 20px; }
.cert-icon { font-size: 48px; color: var(--primary); flex-shrink: 0; }
.cert-info { flex: 1; }
.cert-info h3 { font-size: 18px; }
.cert-info p { font-size: 13px; color: var(--text-secondary); margin: 4px 0 12px; }
.cert-progress { display: flex; align-items: center; gap: 10px; }
.cert-progress .progress-bar-wrapper { width: 150px; }

/* ===== CALENDAR ===== */
.calendar-layout { max-width: 900px; margin: 0 auto; }
.calendar-header-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.calendar-header-section h2 { font-size: 24px; }
.calendar-nav { display: flex; align-items: center; gap: 12px; }
.month-label { font-size: 16px; font-weight: 600; min-width: 140px; text-align: center; }
.calendar-grid { background: var(--bg-card); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; margin-bottom: 24px; }
.calendar-grid .cal-header { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg); border-bottom: 1px solid var(--border); }
.calendar-grid .cal-header span { padding: 12px; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.calendar-grid .cal-body { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-day { padding: 10px; min-height: 70px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 13px; position: relative; }
.cal-day:nth-child(7n) { border-right: none; }
.cal-day.other-month { color: #2d3344; }
.cal-day.today { background: rgba(201,165,90,0.08); }
.cal-day .day-number { font-weight: 600; margin-bottom: 4px; }
.cal-day.today .day-number { background: var(--primary); color: white; width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }
.cal-event-dot { width: 100%; padding: 2px 4px; border-radius: 3px; font-size: 10px; font-weight: 500; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: rgba(201,165,90,0.12); color: var(--primary); }
.cal-event-dot.live { background: rgba(248,113,113,0.15); color: var(--danger); }
.cal-event-dot.workshop { background: rgba(52,211,153,0.15); color: var(--success); }

.events-list-section h3 { font-size: 18px; margin-bottom: 16px; }
.event-card { display: flex; gap: 16px; align-items: center; margin-bottom: 12px; }
.event-date-big { width: 60px; height: 60px; border-radius: 12px; background: rgba(201,165,90,0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.event-date-big .day { font-size: 22px; font-weight: 700; color: var(--primary); line-height: 1; }
.event-date-big .month { font-size: 11px; color: var(--primary); text-transform: uppercase; font-weight: 600; }
.event-details { flex: 1; }
.event-details h4 { font-size: 15px; font-weight: 600; }
.event-details p { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.event-meta { display: flex; gap: 16px; margin-top: 4px; }
.event-meta span { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.event-type-badge { padding: 4px 12px; border-radius: 16px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.event-type-badge.live { background: rgba(248,113,113,0.15); color: var(--danger); }
.event-type-badge.workshop { background: rgba(52,211,153,0.15); color: var(--success); }
.event-type-badge.qa { background: rgba(201,165,90,0.12); color: var(--primary); }

/* ===== MEMBERS ===== */
.members-header-section { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.members-header-section h2 { font-size: 24px; }
.member-count { color: var(--text-secondary); font-weight: 400; font-size: 18px; }
.members-search { position: relative; }
.members-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-secondary); font-size: 14px; }
.members-search input { padding: 10px 16px 10px 40px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; width: 260px; transition: var(--transition); background: var(--bg); color: var(--text); }
.members-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(201,165,90,0.1); }
.members-tabs { display: flex; gap: 4px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.members-tab { border: none; background: transparent; padding: 10px 20px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--text-secondary); font-family: inherit; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--transition); }
.members-tab:hover { color: var(--text); }
.members-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.members-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.member-card { display: flex; align-items: center; gap: 12px; padding: 16px; transition: var(--transition); }
.member-card:hover { border-color: var(--primary-light); }
.member-card .member-rank { font-size: 18px; font-weight: 700; color: var(--text-secondary); width: 30px; text-align: center; flex-shrink: 0; }
.member-card .member-rank.top-1 { color: var(--primary); }
.member-card .member-rank.top-2 { color: #94a3b8; }
.member-card .member-rank.top-3 { color: #fb923c; }
.member-avatar-wrapper { position: relative; flex-shrink: 0; }
.member-avatar-wrapper img { width: 48px; height: 48px; border-radius: 50%; }
.online-indicator { width: 12px; height: 12px; background: var(--success); border: 2px solid var(--bg-card); border-radius: 50%; position: absolute; bottom: 0; right: 0; }
.member-info { flex: 1; min-width: 0; }
.member-info h4 { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-info .member-role { font-size: 12px; color: var(--text-secondary); }
.member-points { font-size: 14px; font-weight: 700; color: var(--primary); white-space: nowrap; }
.member-level { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; padding: 2px 8px; border-radius: 10px; font-weight: 600; margin-top: 2px; }
.level-1 { background: rgba(56,189,248,0.12); color: #38bdf8; }
.level-2 { background: rgba(52,211,153,0.12); color: #34d399; }
.level-3 { background: rgba(251,191,36,0.12); color: #fbbf24; }
.level-4 { background: rgba(244,114,182,0.12); color: #f472b6; }
.level-5 { background: rgba(201,165,90,0.2); color: var(--primary); }

/* ===== ACHIEVEMENTS TAB ===== */
.achievements-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.achievements-header h2 { font-size: 24px; display: flex; align-items: center; gap: 10px; }
.achievements-summary { font-size: 14px; color: var(--text-secondary); }

.xp-overview { display: flex; justify-content: space-between; align-items: center; gap: 24px; background: linear-gradient(135deg, rgba(201,165,90,0.08), rgba(201,165,90,0.03)); border-color: rgba(201,165,90,0.3); }
.xp-ov-left { display: flex; align-items: center; gap: 20px; flex: 1; }
.xp-ov-level { text-align: center; }
.xp-ov-level-num { font-size: 48px; font-weight: 800; color: var(--primary); display: block; line-height: 1; }
.xp-ov-level-title { font-size: 13px; color: var(--primary); font-weight: 600; }
.xp-ov-bar-section { flex: 1; }
.xp-ov-bar-wrap { height: 10px; background: rgba(201,165,90,0.15); border-radius: 5px; overflow: hidden; }
.xp-ov-bar { height: 100%; background: var(--gold-gradient); border-radius: 5px; transition: width 0.5s ease; }
.xp-ov-text { font-size: 12px; color: var(--text-secondary); margin-top: 4px; display: block; }
.xp-ov-right { display: flex; gap: 24px; }
.xp-ov-stat { text-align: center; }
.xp-ov-num { font-size: 24px; font-weight: 800; color: var(--primary); display: block; }
.xp-ov-stat small { font-size: 11px; color: var(--text-secondary); }

.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 32px; }
.badge-card { text-align: center; padding: 20px 12px; transition: var(--transition); }
.badge-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.badge-card.locked { opacity: 0.4; filter: grayscale(1); }
.badge-card.unlocked { border-color: var(--primary-light); }
.badge-emoji { font-size: 36px; display: block; margin-bottom: 8px; }
.badge-name { font-size: 13px; font-weight: 600; display: block; }
.badge-desc { font-size: 11px; color: var(--text-secondary); display: block; margin-top: 4px; }
.badge-xp-reward { font-size: 11px; color: var(--primary); font-weight: 700; margin-top: 4px; display: block; }

/* Quiz */
.quiz-section { margin-top: 32px; }
.quiz-section h3 { font-size: 20px; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.quiz-section > p { font-size: 14px; color: var(--text-secondary); margin-bottom: 16px; }
.quiz-question { font-size: 16px; font-weight: 600; margin-bottom: 16px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 2px solid var(--border); border-radius: 10px; cursor: pointer; transition: var(--transition); font-size: 14px; }
.quiz-option:hover { border-color: var(--primary-light); background: rgba(201,165,90,0.08); }
.quiz-option.selected { border-color: var(--primary); background: rgba(201,165,90,0.08); }
.quiz-option.correct { border-color: var(--success); background: rgba(52,211,153,0.08); }
.quiz-option.wrong { border-color: var(--danger); background: rgba(248,113,113,0.08); }
.quiz-option-letter { width: 28px; height: 28px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.quiz-result { text-align: center; padding: 20px; font-size: 16px; }
.quiz-result .result-icon { font-size: 48px; display: block; margin-bottom: 8px; }
.quiz-ranking { margin-top: 16px; }
.quiz-ranking h4 { font-size: 15px; margin-bottom: 12px; }

/* ===== ABOUT ===== */
.about-banner { width: 100%; height: 200px; background: linear-gradient(135deg, #1a1510, #2a2015, #1a1510); border: 1px solid rgba(201,165,90,0.3); border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; }
.about-banner-overlay { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; text-align: center; }
.about-banner-overlay h1 { font-size: 32px; font-weight: 700; }
.about-banner-overlay p { font-size: 16px; opacity: 0.9; margin-top: 8px; }
.about-content { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.about-features { list-style: none; margin-top: 12px; }
.about-features li { padding: 8px 0; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.about-features li i { color: var(--primary); }

/* Level explanation */
.levels-explanation { display: flex; flex-direction: column; gap: 12px; }
.level-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; }
.level-badge-big { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }

/* XP Guide */
.xp-guide { display: flex; flex-direction: column; gap: 4px; }
.xp-guide-item { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; }
.xp-guide-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.xp-value { font-weight: 700; color: var(--primary); }

.rules-list { display: flex; flex-direction: column; gap: 16px; }
.rule-item { display: flex; gap: 12px; align-items: flex-start; }
.rule-number { width: 28px; height: 28px; border-radius: 50%; background: rgba(201,165,90,0.12); color: var(--primary); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.rule-item strong { font-size: 14px; }
.rule-item p { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
.creator-card { text-align: center; }
.creator-avatar { width: 64px; height: 64px; border-radius: 50%; margin-bottom: 8px; }
.creator-card h4 { font-size: 16px; }
.creator-card p { font-size: 13px; color: var(--text-secondary); }
.useful-links { display: flex; flex-direction: column; gap: 8px; }
.useful-links a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--text-secondary); transition: var(--transition); }
.useful-links a:hover { background: var(--bg); color: var(--primary); }

/* ===== MODALS ===== */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.75); z-index: 200; align-items: center; justify-content: center; padding: 24px; }
.modal-overlay.open { display: flex; }
.modal-content { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; animation: modalIn 0.3s ease; }
@keyframes modalIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.modal-close { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--bg); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: var(--transition); }
.modal-close:hover { background: var(--border); }

.lesson-player { width: 100%; aspect-ratio: 16/9; background: #111; border-radius: 16px 16px 0 0; overflow: hidden; }
.video-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; gap: 8px; cursor: pointer; }
.video-placeholder i { font-size: 64px; opacity: 0.8; }
.video-placeholder p { font-size: 14px; opacity: 0.6; }
.lesson-info { padding: 24px; }
.lesson-info h2 { font-size: 20px; margin-bottom: 8px; }
.lesson-info > p { color: var(--text-secondary); font-size: 14px; margin-bottom: 12px; }
.lesson-xp-reward { display: inline-flex; align-items: center; gap: 6px; background: rgba(201,165,90,0.12); color: var(--primary); padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 600; margin-bottom: 16px; }
.lesson-actions { display: flex; gap: 12px; }

/* Post Detail */
.post-detail-modal { max-width: 600px; padding: 24px; }
.post-detail-modal .post-header { padding-top: 16px; }
.comment-section { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); }
.comment-section h4 { font-size: 15px; margin-bottom: 16px; }
.comment-input-wrapper { display: flex; gap: 10px; margin-bottom: 16px; align-items: center; }
.comment-input-wrapper input { flex: 1; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; font-size: 14px; font-family: inherit; outline: none; background: var(--bg); color: var(--text); }
.comment-input-wrapper input:focus { border-color: var(--primary); }
.comment-item { display: flex; gap: 10px; padding: 10px 0; }
.comment-item:not(:last-child) { border-bottom: 1px solid var(--border); }
.comment-item img { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.comment-body h5 { font-size: 13px; font-weight: 600; }
.comment-body h5 span { font-weight: 400; color: var(--text-secondary); font-size: 11px; margin-left: 6px; }
.comment-body p { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

/* Certificate Modal */
.cert-modal-content { max-width: 700px; padding: 24px; text-align: center; }
.certificate-display { padding: 20px; margin-bottom: 20px; }
.cert-border { border: 3px solid var(--primary); padding: 40px; border-radius: 8px; background: linear-gradient(135deg, #1a1510, #141820); position: relative; }
.cert-header-decor { font-size: 24px; color: var(--primary); letter-spacing: 12px; margin-bottom: 16px; }
.cert-border h2 { font-size: 28px; color: var(--primary); margin-bottom: 20px; }
.cert-subtitle { color: var(--text-secondary); font-size: 14px; }
.cert-name { font-size: 36px; color: var(--primary); margin: 12px 0; font-style: italic; }
.cert-course { font-size: 14px; color: var(--text-secondary); margin: 8px 0; }
.cert-course-name { font-size: 18px; color: var(--primary-light); margin-bottom: 20px; }
.cert-date { font-size: 13px; color: var(--text-secondary); margin-bottom: 24px; }
.cert-footer-decor { display: flex; justify-content: space-around; align-items: flex-end; }
.cert-seal { font-size: 48px; color: var(--primary); }
.cert-sig-line { width: 120px; height: 1px; background: var(--primary); margin-bottom: 4px; }
.cert-signature span { font-size: 12px; color: var(--primary-light); }

/* Notification Panel */
.notification-panel { position: fixed; top: 64px; right: 24px; width: 360px; max-height: 480px; background: var(--bg-card); border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); z-index: 150; display: none; overflow: hidden; }
.notification-panel.open { display: block; animation: fadeIn 0.2s ease; }
.notif-header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid var(--border); }
.notif-header h3 { font-size: 16px; }
.notif-list { max-height: 400px; overflow-y: auto; }
.notif-item { display: flex; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); cursor: pointer; transition: var(--transition); }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: rgba(201,165,90,0.06); }
.notif-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.notif-icon.xp { background: rgba(201,165,90,0.12); }
.notif-icon.streak { background: rgba(251,146,60,0.12); }
.notif-icon.badge-n { background: rgba(251,191,36,0.12); }
.notif-icon.social { background: rgba(52,211,153,0.12); }
.notif-icon.warning { background: rgba(248,113,113,0.12); }
.notif-content { flex: 1; }
.notif-content p { font-size: 13px; line-height: 1.4; }
.notif-content small { font-size: 11px; color: var(--text-secondary); }

/* Popups (Streak, Badge, Level Up) */
.streak-popup, .badge-popup, .levelup-popup {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.75); z-index: 300; align-items: center; justify-content: center;
}
.streak-popup.open, .badge-popup.open, .levelup-popup.open { display: flex; }
.streak-popup-content, .badge-popup-content, .levelup-popup-content {
    background: var(--bg-card); border: 1px solid rgba(201,165,90,0.3); border-radius: 20px; padding: 40px; text-align: center; animation: modalIn 0.4s ease; max-width: 360px; width: 100%;
}
.streak-fire { font-size: 64px; margin-bottom: 8px; }
.streak-count { font-size: 24px; font-weight: 800; color: #fb923c; }
.streak-xp { font-size: 16px; color: var(--primary); font-weight: 700; margin: 8px 0 16px; }
.badge-unlock-icon { font-size: 64px; margin-bottom: 8px; }
.badge-xp { font-size: 16px; color: var(--primary); font-weight: 700; margin: 8px 0 16px; }
.levelup-icon { font-size: 64px; margin-bottom: 8px; }
.levelup-level { font-size: 28px; font-weight: 800; color: var(--primary); }
.levelup-reward { font-size: 14px; color: var(--text-secondary); margin: 8px 0 16px; }

/* ===== MOBILE ===== */
.mobile-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-card); border-top: 1px solid var(--border); padding: 8px 0; z-index: 100; justify-content: space-around; }
.mobile-nav-link { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10px; color: var(--text-secondary); padding: 4px 8px; border-radius: 8px; cursor: pointer; transition: var(--transition); border: none; background: none; font-family: inherit; }
.mobile-nav-link i { font-size: 18px; }
.mobile-nav-link.active { color: var(--primary); }

@media (max-width: 1024px) {
    .community-layout { grid-template-columns: 1fr; }
    .community-sidebar { display: none; }
    .about-content { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .header { padding: 0 12px; }
    .header-nav { display: none; }
    .logo-text { display: none; }
    .header-xp { display: none; }
    .main-content { padding: 16px; padding-bottom: 80px; }
    .mobile-nav { display: flex !important; }
    .members-header-section { flex-direction: column; gap: 12px; align-items: flex-start; }
    .members-search input { width: 100%; }
    .members-grid { grid-template-columns: 1fr; }
    .classroom-header-section { flex-direction: column; gap: 12px; align-items: flex-start; }
    .progress-bar-wrapper { width: 150px; }
    .calendar-header-section { flex-direction: column; gap: 12px; align-items: flex-start; }
    .about-banner-overlay h1 { font-size: 24px; }
    .lesson-actions { flex-direction: column; }
    .post-options { display: none; }
    .countdown-content { font-size: 12px; }
    .countdown-unit { min-width: 36px; padding: 3px 6px; }
    .countdown-unit span { font-size: 14px; }
    .recap-stats { grid-template-columns: repeat(2, 1fr); }
    .trail-options { grid-template-columns: 1fr; }
    .spotlight-content { flex-direction: column; text-align: center; }
    .badges-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
    .xp-overview { flex-direction: column; }
    .xp-ov-right { width: 100%; justify-content: space-around; }
    .certificate-preview { flex-direction: column; text-align: center; }
}

/* ============================================= */
/* CURSO DO GABE — Módulos bloqueados / Unlock    */
/* ============================================= */

/* Hero de desbloqueio no topo do Classroom */
.course-unlock-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 28px 24px;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #1a1510 0%, #241a0d 45%, #0b0e14 100%);
    border: 1px solid rgba(201,165,90,0.35);
    box-shadow: 0 12px 40px rgba(0,0,0,0.45), inset 0 1px 0 rgba(201,165,90,0.15);
}
.course-unlock-hero .cuh-glow {
    position: absolute; top: -60%; right: -20%; width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(201,165,90,0.28) 0%, rgba(201,165,90,0) 70%);
    pointer-events: none;
}
.cuh-content { position: relative; z-index: 1; }
.cuh-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 1px;
    color: #0b0e14; background: linear-gradient(90deg, #f5cd6b, #c9a55a);
    padding: 5px 12px; border-radius: 999px; margin-bottom: 12px;
    text-transform: uppercase;
}
.course-unlock-hero h3 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; line-height: 1.2; }
.course-unlock-hero p { font-size: 14px; color: #c7cdd8; max-width: 560px; margin-bottom: 18px; line-height: 1.5; }
.cuh-hint { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #8a8f9c; margin-top: 12px; }
.cuh-hint i { color: #c9a55a; }

/* Banner (imagem) do hero "Destrave o curso completo do Gabe" */
.course-unlock-banner {
    display: block; width: 100%; padding: 0; margin-bottom: 20px; border: none; background: none;
    cursor: pointer; border-radius: 16px; overflow: hidden; line-height: 0;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45); transition: transform .15s ease, box-shadow .15s ease;
}
.course-unlock-banner:hover { transform: translateY(-2px); box-shadow: 0 16px 48px rgba(201,165,90,0.28); }
.course-unlock-banner img { width: 100%; display: block; border-radius: 16px; }

/* Banner da seção "Sua Trilha" */
.trail-banner { width: 100%; display: block; border-radius: 12px; margin: 0; }

/* Botões de desbloqueio (WhatsApp) */
.btn-unlock, .btn-unlock-lg {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    border: none; cursor: pointer; font-weight: 700;
    color: #fff; background: linear-gradient(90deg, #1faa54, #25d366);
    border-radius: 12px; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    box-shadow: 0 8px 22px rgba(37,211,102,0.28);
}
.btn-unlock-lg { padding: 14px 26px; font-size: 15px; }
.btn-unlock { padding: 11px 20px; font-size: 14px; }
.btn-unlock:hover, .btn-unlock-lg:hover { transform: translateY(-2px); filter: brightness(1.06); box-shadow: 0 12px 30px rgba(37,211,102,0.4); }
.btn-unlock i, .btn-unlock-lg i { font-size: 17px; }

/* Módulo bloqueado */
.module-card.module-locked { border: 1px solid rgba(201,165,90,0.22); background: linear-gradient(180deg, rgba(201,165,90,0.04), transparent); }
.module-card.module-locked .module-icon { background: rgba(201,165,90,0.14); color: #c9a55a; }
.module-card.module-locked .module-title h3 { color: #e8ddc4; }

/* Selo do módulo */
.module-tag {
    display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: .6px;
    padding: 2px 8px; border-radius: 999px; margin-left: 6px; vertical-align: middle; text-transform: uppercase;
}
.module-tag-free { color: #0b0e14; background: linear-gradient(90deg, #34d399, #10b981); }
.module-tag-vip  { color: #0b0e14; background: linear-gradient(90deg, #f5cd6b, #c9a55a); }
.module-tag-bonus{ color: #fff;    background: linear-gradient(90deg, #a78bfa, #7c3aed); }

/* Aulas bloqueadas (teaser) */
.locked-lessons { filter: saturate(0.55); }
.lesson-item.lesson-locked { cursor: default; opacity: 0.72; }
.lesson-item.lesson-locked:hover { background: transparent; }
.lesson-lock-check { border-color: rgba(201,165,90,0.5) !important; color: #c9a55a !important; background: transparent !important; }
.lesson-xp-lock { color: #8a8f9c; }

/* CTA dentro do módulo bloqueado */
.module-unlock-cta {
    margin-top: 14px; padding: 16px; border-radius: 12px; text-align: center;
    background: rgba(201,165,90,0.07); border: 1px dashed rgba(201,165,90,0.35);
}
.module-unlock-cta p { font-size: 13px; color: #c7cdd8; margin-bottom: 12px; }
.module-unlock-cta p i { color: #c9a55a; margin-right: 4px; }
.module-unlock-cta strong { color: #f5cd6b; }

/* ============================================= */
/* CLASSROOM ESTILO NETFLIX (fileiras + pôsteres) */
/* ============================================= */
.nfx-row { margin: 0 0 30px; }
.nfx-row-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.nfx-row-titles h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 10px; letter-spacing: .2px; }
.nfx-row-ico { width: 30px; height: 30px; border-radius: 8px; background: rgba(201,165,90,.14); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.nfx-row.is-locked .nfx-row-ico { background: rgba(201,165,90,.1); }
.nfx-row-prog { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-secondary); font-weight: 600; white-space: nowrap; }
.nfx-row-prog-bar { width: 64px; height: 5px; border-radius: 3px; background: var(--border); overflow: hidden; }
.nfx-row-prog-bar > span { display: block; height: 100%; background: var(--gold-gradient); border-radius: 3px; transition: width .5s ease; }
.nfx-row-lock { font-size: 12px; color: var(--primary); font-weight: 600; white-space: nowrap; }
.nfx-row-lock i { margin-right: 4px; }

.nfx-strip {
    display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden;
    padding: 6px 4px 14px; margin: 0 -4px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nfx-strip::-webkit-scrollbar { display: none; }

.nfx-card {
    flex: 0 0 auto; width: 160px; scroll-snap-align: start;
    background: none; border: none; padding: 0; cursor: pointer; text-align: left;
    font-family: inherit; color: var(--text); transition: transform .22s ease;
}
.nfx-card[data-lesson-id]:hover, .nfx-card[data-lesson-id]:focus-visible { transform: translateY(-4px) scale(1.04); outline: none; z-index: 2; }
.nfx-card-media {
    position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden;
    border: 1px solid var(--border); background: #0d1017; box-shadow: 0 6px 18px rgba(0,0,0,.35);
    transition: border-color .22s ease, box-shadow .22s ease;
}
.nfx-card[data-lesson-id]:hover .nfx-card-media { border-color: rgba(201,165,90,.6); box-shadow: 0 14px 34px rgba(201,165,90,.22); }
.nfx-cover { width: 100%; height: 100%; object-fit: cover; display: block; }

.nfx-play {
    position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(11,14,20,.62); color: #fff; font-size: 15px; padding-left: 3px;
    border: 1px solid rgba(255,255,255,.35);
    opacity: 0; transform: scale(.8); transition: opacity .22s ease, transform .22s ease;
}
.nfx-card[data-lesson-id]:hover .nfx-play { opacity: 1; transform: scale(1); }

.nfx-type {
    position: absolute; top: 8px; left: 8px; font-size: 9px; font-weight: 800; letter-spacing: .6px;
    background: rgba(11,14,20,.72); color: #f5cd6b; padding: 3px 7px; border-radius: 6px;
    display: flex; align-items: center; gap: 4px; text-transform: uppercase;
}
.nfx-xp { position: absolute; bottom: 8px; right: 8px; font-size: 9px; font-weight: 800; color: #0b0e14; background: var(--gold-gradient); padding: 3px 7px; border-radius: 6px; }
.nfx-done { position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--success); color: #0b0e14; display: flex; align-items: center; justify-content: center; font-size: 11px; box-shadow: 0 2px 8px rgba(52,211,153,.5); }
.nfx-card.is-done .nfx-card-media { border-color: rgba(52,211,153,.4); }

.nfx-card-cap { padding: 8px 2px 0; }
.nfx-cap-title { font-size: 12px; font-weight: 600; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.nfx-cap-meta { display: block; font-size: 10.5px; color: var(--text-secondary); margin-top: 3px; }
.nfx-cap-meta i { color: var(--success); }

/* pôster gerado quando a aula não tem capa própria */
.nfx-fallback {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    align-items: center; text-align: center; padding: 14px; gap: 6px;
    background: radial-gradient(120% 80% at 50% 0%, rgba(201,165,90,.16), transparent 60%), linear-gradient(160deg, #161a23, #0d1017);
}
.nfx-fallback > i { font-size: 30px; color: var(--primary); opacity: .9; }
.nfx-fallback-kicker { font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #f5cd6b; text-transform: uppercase; }
.nfx-fallback-title { font-size: 11px; font-weight: 600; line-height: 1.25; color: #e8ddc4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* pôsteres bloqueados (módulos VIP) */
.nfx-card.is-locked { cursor: default; }
.nfx-card.is-locked .nfx-card-media { filter: grayscale(.4) brightness(.55); }
.nfx-card.is-locked .nfx-cover, .nfx-card.is-locked .nfx-fallback > i { filter: blur(1px); }
.nfx-lock { position: absolute; inset: 0; margin: auto; width: 40px; height: 40px; border-radius: 50%; background: rgba(11,14,20,.7); border: 1px solid rgba(201,165,90,.5); color: #f5cd6b; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.nfx-row.is-locked .nfx-cap-title { color: var(--text-secondary); }

/* card de desbloqueio no fim da fileira VIP */
.nfx-unlock-card { width: 160px; flex: 0 0 auto; scroll-snap-align: start; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; }
.nfx-unlock-inner { aspect-ratio: 1/1; border-radius: 12px; border: 1.5px dashed rgba(201,165,90,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 14px; background: linear-gradient(160deg, rgba(201,165,90,.1), transparent); transition: var(--transition); }
.nfx-unlock-card:hover .nfx-unlock-inner { border-color: var(--primary); background: linear-gradient(160deg, rgba(201,165,90,.2), transparent); transform: translateY(-4px); }
.nfx-unlock-inner i { font-size: 26px; color: var(--primary); }
.nfx-unlock-inner strong { font-size: 14px; color: #fff; }
.nfx-unlock-inner span { font-size: 11px; color: var(--text-secondary); }

/* modal da aula "passando" ao navegar entre aulas */
@keyframes nfxSwap { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } }
.lesson-modal.nfx-swap { animation: nfxSwap .28s cubic-bezier(.22,.61,.36,1); }

@media (max-width: 640px) {
    .nfx-card, .nfx-unlock-card { width: 134px; }
    .nfx-row { margin-bottom: 24px; }
    .nfx-row-titles h3 { font-size: 14px; }
    .nfx-fallback > i { font-size: 26px; }
}

/* ============================================= */
/* RANKING REDESIGN (pódio + fotos + barras)      */
/* ============================================= */
.members-grid { display: block; }

/* Pódio Top 3 */
.lb-podium {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; align-items: end;
    margin-bottom: 22px; padding: 20px 10px 0;
    background: linear-gradient(180deg, rgba(201,165,90,0.06), transparent 70%);
    border-radius: 16px;
}
.podium-col { display: flex; flex-direction: column; align-items: center; text-align: center; }
.podium-avatar { position: relative; }
.podium-avatar img { border-radius: 50%; object-fit: cover; border: 3px solid var(--border); background: var(--bg); }
.podium-medal { position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); font-size: 20px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.podium-col h4 { font-size: 14px; font-weight: 700; margin-top: 12px; }
.podium-rev { font-size: 12px; font-weight: 700; color: #34d399; margin-top: 2px; }
.podium-bar { margin-top: 10px; width: 100%; border-radius: 10px 10px 0 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 8px; color: #0b0e14; font-size: 12px; font-weight: 800; }
.podium-1 .podium-avatar img { width: 92px; height: 92px; border-color: #f5cd6b; box-shadow: 0 0 0 4px rgba(245,205,107,.18), 0 8px 24px rgba(245,205,107,.25); }
.podium-1 .podium-bar { height: 78px; background: linear-gradient(180deg, #f5cd6b, #c9a55a); }
.podium-2 .podium-avatar img { width: 72px; height: 72px; border-color: #cbd5e1; }
.podium-2 .podium-bar { height: 56px; background: linear-gradient(180deg, #cbd5e1, #94a3b8); }
.podium-3 .podium-avatar img { width: 72px; height: 72px; border-color: #fbbf77; }
.podium-3 .podium-bar { height: 44px; background: linear-gradient(180deg, #fbbf77, #fb923c); }
.podium-avatar .online-indicator { width: 14px; height: 14px; bottom: 2px; right: 2px; }

/* Lista do ranking */
.member-list { display: flex; flex-direction: column; gap: 10px; }
.member-card-rank { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.member-card-rank .member-rank { font-size: 15px; font-weight: 800; color: var(--text-secondary); width: 26px; text-align: center; flex-shrink: 0; }
.member-card-rank .member-avatar-wrapper img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.member-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 6px; margin-top: 7px; overflow: hidden; max-width: 220px; }
.member-bar-fill { height: 100%; background: linear-gradient(90deg, #c9a55a, #f5cd6b); border-radius: 6px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.member-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.member-rev { font-size: 12px; font-weight: 700; color: #34d399; white-space: nowrap; }
.member-card-rank:hover { border-color: var(--primary); transform: translateY(-1px); }

/* ============================================= */
/* ALUNOS COPIANDO E COLANDO (faturamento ticker) */
/* ============================================= */
.students-earning {
    margin-top: 16px;
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(201,165,90,0.10), rgba(20,24,32,0.9));
    border: 1px solid rgba(201,165,90,0.35);
    box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.se-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px 10px; }
.se-title { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .5px; color: #eafff4; text-transform: uppercase; }
.se-title .se-dot { width: 9px; height: 9px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: sePulse 1.6s infinite; }
@keyframes sePulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.6)} 70%{box-shadow:0 0 0 8px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }
.se-total { font-size: 12px; color: #8a8f9c; }
.se-total b { color: #34d399; font-size: 14px; }
.se-viewport { position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.se-track { display: flex; gap: 10px; padding: 4px 12px 14px; width: max-content; animation: seScroll 34s linear infinite; }
.se-viewport:hover .se-track { animation-play-state: paused; }
@keyframes seScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.se-chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: rgba(255,255,255,0.04); border: 1px solid rgba(52,211,153,0.18); flex-shrink: 0; }
.se-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.se-chip .se-name { font-size: 13px; font-weight: 600; color: #f0ece4; }
.se-chip .se-amt { font-size: 13px; font-weight: 800; color: #34d399; }
.se-chip .se-when { font-size: 11px; color: #8a8f9c; }
.se-chip .se-plus { color: #34d399; font-weight: 800; }

/* ============================================= */
/* IA ESPECIALISTA (chat + copy + imagem)         */
/* ============================================= */
.ai-screen { display: flex; flex-direction: column; height: calc(100vh - 108px); max-height: calc(100vh - 108px); max-width: 860px; margin: 0 auto; padding: 14px 16px 0; }
.ai-top { display: flex; align-items: center; gap: 12px; padding: 4px 2px 14px; }
.ai-back { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text); cursor: pointer; flex-shrink: 0; }
.ai-back:hover { border-color: var(--primary); color: var(--primary); }
.ai-id { display: flex; align-items: center; gap: 12px; }
.ai-avatar { width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 6px 18px rgba(124,58,237,.35); }
.ai-id-text h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.ai-id-text p { font-size: 12px; color: var(--text-secondary); }
.ai-online-dot { width: 8px; height: 8px; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: sePulse 1.6s infinite; }

.ai-modes { display: flex; gap: 8px; margin-bottom: 12px; }
.ai-mode { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-secondary); font-size: 13px; font-weight: 600; font-family: inherit; cursor: pointer; transition: var(--transition); }
.ai-mode:hover { color: var(--text); }
.ai-mode.active { color: #fff; border-color: transparent; background: linear-gradient(135deg, #7c3aed, #a78bfa); box-shadow: 0 6px 16px rgba(124,58,237,.3); }

.ai-messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 8px 2px; }
.ai-msg { display: flex; gap: 10px; max-width: 92%; }
.ai-msg-ava { width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ai-msg.ai .ai-msg-ava { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; }
.ai-msg.user { align-self: flex-end; flex-direction: row-reverse; }
.ai-msg.user .ai-msg-ava { background: rgba(201,165,90,.18); color: var(--primary); }
.ai-bubble { padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-wrap: break-word; }
.ai-msg.ai .ai-bubble { background: var(--bg-card); border: 1px solid var(--border); border-top-left-radius: 4px; }
.ai-msg.user .ai-bubble { background: linear-gradient(135deg, #c9a55a, #b08d3e); color: #0b0e14; border-top-right-radius: 4px; font-weight: 500; }
.ai-bubble strong { font-weight: 700; }
.ai-gen-img { max-width: 320px; width: 100%; border-radius: 12px; margin-top: 6px; display: block; border: 1px solid var(--border); }
.ai-gen-vid { max-width: 280px; width: 100%; border-radius: 12px; margin-top: 6px; display: block; border: 1px solid var(--border); background: #000; }
.ai-img-actions { margin-top: 8px; }
.ai-img-dl { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--primary); cursor: pointer; text-decoration: none; }
.ai-img-dl:hover { border-color: var(--primary); }
.ai-copy-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); cursor: pointer; }
.ai-copy-btn:hover { color: var(--primary); border-color: var(--primary); }

.ai-typing { display: inline-flex; gap: 4px; padding: 14px; }
.ai-typing span { width: 7px; height: 7px; border-radius: 50%; background: #a78bfa; animation: aiBlink 1.2s infinite both; }
.ai-typing span:nth-child(2){ animation-delay:.2s } .ai-typing span:nth-child(3){ animation-delay:.4s }
@keyframes aiBlink { 0%,80%,100%{opacity:.25;transform:translateY(0)} 40%{opacity:1;transform:translateY(-3px)} }

.ai-welcome { text-align: center; padding: 24px 16px; color: var(--text-secondary); }
.ai-welcome .aw-ic { font-size: 40px; color: #a78bfa; margin-bottom: 10px; }
.ai-welcome h4 { font-size: 17px; color: var(--text); margin-bottom: 6px; }
.ai-welcome p { font-size: 13px; max-width: 420px; margin: 0 auto; }

.ai-suggestions { display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; scrollbar-width: none; }
.ai-suggestions::-webkit-scrollbar { display: none; }
.ai-chip { flex-shrink: 0; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(167,139,250,.35); background: rgba(124,58,237,.08); color: #c4b5fd; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: var(--transition); }
.ai-chip:hover { background: rgba(124,58,237,.2); color: #fff; }

.ai-input-bar { display: flex; align-items: flex-end; gap: 10px; padding: 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); }
.ai-input-bar textarea { flex: 1; resize: none; border: none; outline: none; background: transparent; color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.5; max-height: 140px; padding: 6px 4px; }
.ai-send { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; border: none; cursor: pointer; color: #fff; background: linear-gradient(135deg, #7c3aed, #a78bfa); font-size: 15px; transition: var(--transition); }
.ai-send:hover { filter: brightness(1.1); transform: translateY(-1px); }
.ai-send:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.ai-disclaimer { text-align: center; font-size: 11px; color: var(--text-secondary); margin-top: 8px; }
.ai-disclaimer i { color: #a78bfa; margin-right: 4px; }

/* Upload de imagem na IA */
.ai-attach { width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px; border: none; cursor: pointer; color: var(--text-secondary); background: transparent; font-size: 17px; transition: var(--transition); }
.ai-attach:hover { color: #a78bfa; background: rgba(124,58,237,0.1); }
.ai-input-bar { position: relative; }
.ai-attach-preview { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin-bottom: 8px; border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); }
.ai-attach-preview[hidden] { display: none; }
.ai-attach-preview img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; }
.ai-attach-preview span { flex: 1; font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-attach-preview button { background: none; border: none; color: var(--text-secondary); cursor: pointer; padding: 6px; font-size: 14px; }
.ai-attach-preview button:hover { color: #f87171; }
.ai-user-img { display: block; max-width: 220px; width: 100%; border-radius: 10px; margin-bottom: 6px; }
.ai-msg.user .ai-user-img { margin-left: auto; }

/* Overlay de arrastar imagem */
.ai-screen { position: relative; }
.ai-drop-hint { position: absolute; inset: 60px 0 90px; z-index: 20; display: none; align-items: center; justify-content: center; gap: 10px; border-radius: 14px; border: 2px dashed #a78bfa; background: rgba(11,14,20,0.85); color: #c4b5fd; font-weight: 700; font-size: 16px; pointer-events: none; }
.ai-drop-hint.show { display: flex; }
.ai-screen.ai-dragging .ai-input-bar { border-color: #a78bfa; }

@media (max-width: 768px) {
    .ai-screen { height: calc(100vh - 120px); max-height: calc(100vh - 120px); }
    .ai-mode { font-size: 12px; }
}

/* ============================================= */
/* LOGIN / GATE DE ACESSO                          */
/* ============================================= */
.login-overlay {
    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center; padding: 20px;
    background: #07090e;
}
.login-overlay.hidden { display: none; }
.login-bg {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(1100px 520px at 50% -10%, rgba(201,165,90,0.16), transparent 60%),
        radial-gradient(700px 500px at 90% 110%, rgba(124,58,237,0.12), transparent 60%);
}
.login-card {
    position: relative; z-index: 1; width: 100%; max-width: 400px; text-align: center;
    background: linear-gradient(180deg, #141824, #0d1017);
    border: 1px solid rgba(201,165,90,0.28); border-radius: 20px;
    padding: 34px 26px 26px; box-shadow: 0 24px 70px rgba(0,0,0,0.6);
}
.login-logo {
    width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 22px; color: #0b0e14;
    background: linear-gradient(135deg, #f5cd6b, #c9a55a);
    box-shadow: 0 8px 24px rgba(201,165,90,0.35);
}
.login-brand { font-size: 24px; font-weight: 800; color: #f5e6c4; letter-spacing: .2px; }
.login-sub { font-size: 13px; color: #8a8f9c; margin: 6px 0 22px; }
.login-form { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.login-field {
    display: flex; align-items: center; gap: 10px; padding: 0 14px;
    background: #0b0e14; border: 1px solid #262c3a; border-radius: 12px; transition: border-color .2s;
}
.login-field:focus-within { border-color: #c9a55a; }
.login-field > i { color: #8a8f9c; font-size: 14px; }
.login-field input {
    flex: 1; background: transparent; border: none; outline: none; color: var(--text);
    font-family: inherit; font-size: 14px; padding: 13px 0;
}
.login-eye { background: none; border: none; color: #8a8f9c; cursor: pointer; padding: 6px; }
.login-eye:hover { color: #c9a55a; }
.login-error { color: #f87171; font-size: 12.5px; min-height: 16px; display: none; }
.login-error.show { display: block; }
.login-btn {
    margin-top: 4px; padding: 14px; border: none; border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 15px; font-weight: 800; color: #0b0e14;
    background: linear-gradient(90deg, #f5cd6b, #c9a55a); transition: transform .15s, filter .15s;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.login-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.login-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.login-help {
    display: inline-flex; align-items: center; gap: 7px; margin-top: 20px;
    font-size: 13px; color: #8a8f9c; text-decoration: none;
}
.login-help:hover { color: #25d366; }
.login-help i { color: #25d366; }

/* ============================================= */
/* SUPORTE 24H — estilo WhatsApp                   */
/* ============================================= */
.wa-screen { display: flex; flex-direction: column; height: calc(100vh - 108px); max-height: calc(100vh - 108px); max-width: 860px; margin: 0 auto; border-radius: 14px; overflow: hidden; border: 1px solid #0b141a; }
.wa-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #202c33; }
.wa-back { background: none; border: none; color: #e9edef; font-size: 18px; cursor: pointer; padding: 4px; }
.wa-avatar { width: 40px; height: 40px; border-radius: 50%; background: #128c7e; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 16px; flex-shrink: 0; }
.wa-id { flex: 1; min-width: 0; }
.wa-id h3 { font-size: 15px; font-weight: 600; color: #e9edef; }
.wa-id p { font-size: 12px; color: #8696a0; }
.wa-menu { color: #aebac1; }
.wa-chat {
    flex: 1; overflow-y: auto; padding: 16px 14px; display: flex; flex-direction: column; gap: 8px;
    background-color: #0b141a;
    background-image: radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
    background-size: 22px 22px;
}
.wa-msg { max-width: 82%; padding: 7px 11px 6px; border-radius: 9px; font-size: 14px; line-height: 1.45; color: #e9edef; position: relative; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 1px rgba(0,0,0,0.2); }
.wa-msg.inc { align-self: flex-start; background: #202c33; border-top-left-radius: 2px; }
.wa-msg.out { align-self: flex-end; background: #005c4b; border-top-right-radius: 2px; }
.wa-msg .wa-time { display: block; text-align: right; font-size: 10px; color: rgba(233,237,239,0.5); margin-top: 2px; }
.wa-msg.out .wa-time i { color: #53bdeb; margin-left: 3px; }
.wa-actions { align-self: flex-start; display: flex; flex-direction: column; gap: 8px; margin: 2px 0 4px; max-width: 82%; }
.wa-action-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 16px; border-radius: 11px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; border: none; transition: filter .15s, transform .15s; }
.wa-action-btn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.wa-action-btn.pay { background: linear-gradient(90deg, #ffcf5b, #ff8a3d); color: #0b0e14; box-shadow: 0 8px 22px rgba(255,138,61,0.4); }
.wa-action-btn.wa { background: #25d366; color: #05271a; }
.wa-typing-msg { align-self: flex-start; background: #202c33; padding: 10px 14px; border-radius: 9px; border-top-left-radius: 2px; }
.wa-typing-msg span { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #8696a0; margin: 0 1px; animation: aiBlink 1.2s infinite both; }
.wa-typing-msg span:nth-child(2){animation-delay:.2s} .wa-typing-msg span:nth-child(3){animation-delay:.4s}
.wa-input-bar { display: flex; align-items: flex-end; gap: 8px; padding: 8px 10px; background: #202c33; }
.wa-input-wrap { flex: 1; display: flex; align-items: center; gap: 8px; background: #2a3942; border-radius: 22px; padding: 8px 14px; }
.wa-input-wrap i { color: #8696a0; }
.wa-input-wrap textarea { flex: 1; resize: none; border: none; outline: none; background: transparent; color: #e9edef; font-family: inherit; font-size: 14px; max-height: 120px; line-height: 1.4; }
.wa-send { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer; color: #fff; background: #00a884; font-size: 16px; }
.wa-send:hover { filter: brightness(1.08); }
.wa-send:disabled { opacity: .6; cursor: not-allowed; }

/* ============================================= */
/* PRODUTOS MAIS VENDIDOS (afiliação)              */
/* ============================================= */
.products-screen { max-width: 640px; margin: 0 auto; padding: 8px 16px 24px; }
.products-top { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.products-title { font-size: 20px; font-weight: 800; line-height: 1.2; }
.products-sub { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.products-sub strong { color: #34d399; }
.hot-badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.hot-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; padding: 6px 11px; border-radius: 999px; background: rgba(255,90,31,0.12); color: #ff884d; border: 1px solid rgba(255,90,31,0.25); }
.product-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; margin-bottom: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.product-rank { position: absolute; top: 12px; left: 12px; z-index: 2; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px; color: #fff; background: linear-gradient(90deg, #ff5a1f, #ff8a3d); box-shadow: 0 4px 12px rgba(255,90,31,0.4); }
.product-card > img { width: 100%; display: block; background: #fff; }

/* Produtos bloqueados (comissão) — só o 1º libera pra não pago; demais viram isca */
.product-locked > img { filter: brightness(0.55) saturate(0.72); }
.product-lock-ov { position: absolute; top: 0; left: 0; right: 0; bottom: 62px; display: flex; align-items: center; justify-content: center; background: rgba(11,14,20,0.42); cursor: pointer; z-index: 1; }
.product-lock-ov i { width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #0b0e14; background: linear-gradient(135deg, #ffcf5b, #ff8a3d); box-shadow: 0 8px 22px rgba(0,0,0,0.55); }
.btn-afiliar-locked { background: linear-gradient(90deg, #2a2f3c, #3a4150) !important; color: #f5cd6b !important; box-shadow: none !important; }
.btn-afiliar-locked:hover { filter: brightness(1.12); }
.btn-afiliar {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    margin: 14px; padding: 14px; border-radius: 12px; text-decoration: none;
    font-weight: 800; font-size: 15px; color: #fff;
    background: linear-gradient(90deg, #1faa54, #25d366);
    box-shadow: 0 8px 20px rgba(37,211,102,0.28); transition: transform .15s, filter .15s;
}
.btn-afiliar:hover { transform: translateY(-2px); filter: brightness(1.06); }
.btn-afiliar i { font-size: 18px; }

/* ============================================= */
/* CHAT DA COMUNIDADE (bots)                       */
/* ============================================= */
.comm-chat-card { padding: 0; overflow: hidden; }
.comm-chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); background: linear-gradient(90deg, rgba(124,58,237,0.08), transparent); }
.comm-chat-title { display: flex; align-items: center; gap: 9px; }
.comm-chat-title h3 { font-size: 15px; font-weight: 700; }
.comm-live-dot { width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,.6); animation: sePulse 1.5s infinite; }
.comm-online { font-size: 12px; color: #34d399; display: flex; align-items: center; gap: 6px; }
.comm-online i { font-size: 7px; }
.comm-chat-body { height: 340px; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 12px; }
.comm-m { display: flex; gap: 9px; max-width: 88%; animation: commIn .25s ease; }
@keyframes commIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.comm-m img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comm-m-body { display: flex; flex-direction: column; }
.comm-m-name { font-size: 12px; font-weight: 700; margin-bottom: 2px; }
.comm-bubble { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; border-top-left-radius: 3px; padding: 8px 12px; font-size: 13.5px; line-height: 1.45; color: var(--text); }
.comm-m.me { align-self: flex-end; flex-direction: row-reverse; }
.comm-m.me .comm-m-body { align-items: flex-end; }
.comm-m.me .comm-bubble { background: linear-gradient(135deg, #c9a55a, #b08d3e); color: #0b0e14; border-top-left-radius: 12px; border-top-right-radius: 3px; font-weight: 500; }
.comm-m.me img { display: none; }
.comm-typing .comm-bubble { color: var(--text-secondary); font-style: italic; }
.comm-chat-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--border); }
.comm-chat-input input { flex: 1; background: var(--bg); border: 1px solid var(--border); border-radius: 22px; padding: 11px 16px; color: var(--text); font-family: inherit; font-size: 14px; outline: none; }
.comm-chat-input input:focus { border-color: var(--primary); }
.comm-chat-input button { width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: none; cursor: pointer; color: #0b0e14; background: linear-gradient(135deg, #f5cd6b, #c9a55a); font-size: 14px; }
.comm-chat-input button:hover { filter: brightness(1.08); }

@media (max-width: 768px) {
    .wa-screen { height: calc(100vh - 120px); max-height: calc(100vh - 120px); }
}



/* ============================================= */
/* CALENDÁRIO — paleta mais forte/vibrante        */
/* ============================================= */
/* Badges de data (lista de eventos + próximos) */
.event-date-big, .event-date-badge {
    background: linear-gradient(135deg, #f5cd6b, #c9a55a) !important;
    box-shadow: 0 6px 16px rgba(201,165,90,0.35);
}
.event-date-big .day, .event-date-big .month,
.event-date-badge .day, .event-date-badge .month { color: #0b0e14 !important; }

/* Marcadores de evento dentro dos dias do calendário */
.cal-event-dot { background: linear-gradient(90deg, #f5cd6b, #c9a55a) !important; color: #0b0e14 !important; font-weight: 700 !important; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.cal-event-dot.live { background: linear-gradient(90deg, #ff4d4d, #e11d1d) !important; color: #fff !important; }
.cal-event-dot.workshop { background: linear-gradient(90deg, #22c55e, #15a34a) !important; color: #fff !important; }
.cal-event-dot.qa { background: linear-gradient(90deg, #8b5cf6, #6d28d9) !important; color: #fff !important; }

/* Selos de tipo na lista de eventos */
.event-type-badge { box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
.event-type-badge.live { background: linear-gradient(90deg, #ff4d4d, #e11d1d) !important; color: #fff !important; }
.event-type-badge.workshop { background: linear-gradient(90deg, #22c55e, #15a34a) !important; color: #fff !important; }
.event-type-badge.qa { background: linear-gradient(90deg, #8b5cf6, #6d28d9) !important; color: #fff !important; }

/* Dia de hoje e destaque de dias com evento */
.cal-day.today { background: rgba(201,165,90,0.20) !important; box-shadow: inset 0 0 0 2px rgba(245,205,107,0.5); }
.cal-day.today .day-number { background: linear-gradient(135deg, #f5cd6b, #c9a55a) !important; color: #0b0e14 !important; }
.calendar-grid { border-color: rgba(201,165,90,0.25); }
.calendar-nav .btn-icon { color: var(--primary); }

/* ============================================= */
/* ESTRATÉGIAS VALIDADAS (botões → vídeo)         */
/* ============================================= */
.estrategias-screen { max-width: 640px; margin: 0 auto; padding: 8px 16px 24px; }
.estr-list { display: flex; flex-direction: column; gap: 10px; }
.estr-btn {
    display: block; width: 100%; padding: 0; border: none; background: none; cursor: pointer;
    border-radius: 14px; overflow: hidden; line-height: 0; transition: transform .15s ease, box-shadow .15s ease;
}
.estr-btn img { width: 100%; display: block; border-radius: 14px; }
.estr-btn:hover { transform: translateY(-2px) scale(1.01); box-shadow: 0 10px 28px rgba(255,138,61,0.22); }
.estr-btn:active { transform: scale(0.99); }

/* Modal de vídeo */
.estr-video-content { max-width: 720px; width: 94%; padding: 0; background: #0b0e14; border: 1px solid var(--border); overflow: hidden; max-height: 92vh; display: flex; flex-direction: column; }
.estr-video-content .modal-close { z-index: 3; }
#estrVideoBody { width: 100%; overflow-y: auto; }
.estr-page-video { position: relative; background: #000; }
.estr-page-body { padding: 16px 18px 22px; }
.estr-page-title { font-size: 18px; font-weight: 800; color: #fff; margin: 2px 0 14px; }
/* Materiais pra baixar */
.estr-mats { margin-bottom: 18px; }
.estr-mats h4, .estr-comments h4 { font-size: 13px; font-weight: 700; color: #c7cdd8; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.estr-mats h4 i, .estr-comments h4 i { color: #c9a55a; }
.estr-mat { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: 10px; background: #141820; border: 1px solid var(--border); color: #f0ece4; font-size: 13px; font-weight: 600; text-decoration: none; margin-bottom: 8px; transition: border-color .15s, background .15s; }
.estr-mat:hover { border-color: var(--primary); background: rgba(201,165,90,0.08); }
.estr-mat i { color: #34d399; }
.estr-mats-soon { font-size: 12.5px; color: #8a8f9c; display: flex; align-items: center; gap: 8px; padding: 10px 0; }
.estr-mats-soon i { color: #c9a55a; }
.estr-howto { margin-top: 6px; padding: 12px 14px; border-radius: 10px; background: rgba(52,211,153,0.06); border: 1px solid rgba(52,211,153,0.22); }
.estr-howto b { color: #f0ece4; }
.estr-howto > b { display: block; font-size: 12.5px; margin-bottom: 8px; }
.estr-howto ol { margin: 0 0 8px; padding-left: 18px; }
.estr-howto ol li { font-size: 12.5px; line-height: 1.6; color: #c7cdd8; }
.estr-howto p { font-size: 12.5px; color: #34d399; font-weight: 600; margin: 0; }
/* Comentários */
.estr-comments { border-top: 1px solid var(--border); padding-top: 16px; }
.estr-cm-form { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 14px; }
.estr-cm-form textarea { flex: 1; resize: none; background: #141820; border: 1px solid var(--border); border-radius: 12px; padding: 11px 13px; color: #f0ece4; font-family: inherit; font-size: 13.5px; outline: none; }
.estr-cm-form textarea:focus { border-color: var(--primary); }
.estr-cm-send { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; border: none; background: linear-gradient(90deg, #e2cc8f, #c9a55a); color: #0b0e14; font-size: 15px; cursor: pointer; }
.estr-cm-list { display: flex; flex-direction: column; gap: 14px; }
.estr-cm { display: flex; gap: 10px; }
.estr-cm-ava { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg, #c9a55a, #ff8a3d); color: #0b0e14; font-weight: 800; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.estr-cm-main { min-width: 0; }
.estr-cm-h { font-size: 13px; display: flex; align-items: baseline; gap: 8px; }
.estr-cm-h b { color: #f0ece4; }
.estr-cm-h span { color: #6b7280; font-size: 11px; }
.estr-cm-main p { font-size: 13.5px; color: #c7cdd8; line-height: 1.5; margin-top: 2px; word-wrap: break-word; }
.estr-cm-empty { font-size: 13px; color: #8a8f9c; padding: 6px 0; }
#estrVideoBody video, #estrVideoBody iframe { width: 100%; aspect-ratio: 16/9; display: block; border: none; background: #000; }
/* Embed limpo (facade YouTube sem infos) */
.yt-lite { position: relative; width: 100%; aspect-ratio: 16/9; cursor: pointer; overflow: hidden; background: #000; display: block; }
.lesson-player .yt-lite { border-radius: 16px 16px 0 0; }
.yt-lite-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Capa própria da aula (quadrada, fundo preto): mostra inteira sem cortar */
.yt-lite-thumb.lesson-cover { object-fit: contain; background: #000; }
.yt-lite-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 66px; height: 66px; border-radius: 50%; background: rgba(201,165,90,0.94); color: #0b0e14; font-size: 22px; display: flex; align-items: center; justify-content: center; padding-left: 4px; box-shadow: 0 8px 26px rgba(0,0,0,0.55); transition: transform .15s; }
.yt-lite:hover .yt-lite-play { transform: translate(-50%, -50%) scale(1.09); }
.lesson-player iframe, .lesson-player .yt-lite { width: 100%; height: 100%; }
.lesson-player iframe { border: none; }
.estr-video-soon { padding: 60px 24px; text-align: center; color: var(--text-secondary); }
.estr-video-soon .esv-ic { font-size: 44px; color: #ff8a3d; margin-bottom: 14px; }
.estr-video-soon h3 { color: var(--text); font-size: 18px; margin-bottom: 6px; }
.estr-video-soon p { font-size: 14px; max-width: 360px; margin: 0 auto; }

/* ============================================= */
/* FEEDBACKS DAS ESTRATÉGIAS (prova social)       */
/* ============================================= */
.estr-fb-header { margin: 28px 0 14px; text-align: center; }
.estr-fb-header h3 { font-size: 18px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; }
.estr-fb-header p { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
.estr-fb-list { display: flex; flex-direction: column; gap: 12px; }
.estr-fb { display: flex; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--border); }
.estr-fb > img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.gv-avatar { display: flex; align-items: center; justify-content: center; border-radius: 50%; flex-shrink: 0; color: #fff; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.gv-avatar-fb { width: 44px; height: 44px; font-size: 15px; }
.estr-fb-body { flex: 1; min-width: 0; }
.estr-fb-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.estr-fb-name { font-size: 14px; font-weight: 700; }
.estr-fb-verify { font-size: 11px; color: #34d399; display: inline-flex; align-items: center; gap: 4px; }
.estr-fb-tag { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #ff884d; background: rgba(255,90,31,0.12); border: 1px solid rgba(255,90,31,0.25); padding: 2px 8px; border-radius: 999px; margin: 4px 0 6px; }
.estr-fb-text { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.estr-fb-actions { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--text-secondary); }
.estr-fb-actions span { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }

/* ============================================= */
/* CADASTRO + PROMOÇÃO + CHECKOUT (Cakto)         */
/* ============================================= */
.login-toggle { margin-top: 16px; font-size: 13px; color: #8a8f9c; }
.login-toggle button { background: none; border: none; color: #f5cd6b; font-weight: 700; cursor: pointer; font-size: 13px; padding: 0; }
.login-toggle button:hover { text-decoration: underline; }

/* Overlay base dos modais de promo/checkout */
.promo-overlay, .checkout-overlay {
    position: fixed; inset: 0; z-index: 100010; display: none;
    align-items: center; justify-content: center; padding: 18px;
    background: rgba(0,0,0,0.82); backdrop-filter: blur(3px);
}
.promo-overlay.open, .checkout-overlay.open { display: flex; }

/* VSL de aquecimento */
.vsl-overlay {
    position: fixed; inset: 0; z-index: 100020; display: none;
    align-items: center; justify-content: center; padding: 18px;
    background: rgba(0,0,0,0.94); backdrop-filter: blur(4px);
}
.vsl-overlay.open { display: flex; }
.vsl-card { position: relative; width: 100%; max-width: 440px; text-align: center; animation: promoPop .3s ease; }
.vsl-tagline { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .6px; color: #ff884d; text-transform: uppercase; margin-bottom: 12px; }
.vsl-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ff5a1f; box-shadow: 0 0 0 0 rgba(255,90,31,0.6); animation: vslPulse 1.4s infinite; }
@keyframes vslPulse { 0% { box-shadow: 0 0 0 0 rgba(255,90,31,0.6); } 70% { box-shadow: 0 0 0 9px rgba(255,90,31,0); } 100% { box-shadow: 0 0 0 0 rgba(255,90,31,0); } }
.vsl-video-wrap { position: relative; border-radius: 16px; overflow: hidden; background: #000; box-shadow: 0 24px 70px rgba(0,0,0,0.7); border: 1px solid rgba(201,165,90,0.35); }
.vsl-video-wrap video { display: block; width: 100%; max-height: 68vh; object-fit: contain; background: #000; }
.vsl-play {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: rgba(0,0,0,0.45); border: none; cursor: pointer; color: #fff; font-family: inherit;
}
.vsl-play i { font-size: 30px; width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(90deg, #ff5a1f, #ff8a3d); box-shadow: 0 10px 30px rgba(255,90,31,0.5); padding-left: 5px; }
.vsl-play span { font-size: 14px; font-weight: 700; }
.vsl-cta {
    display: block; width: 100%; margin-top: 16px; padding: 16px; border: none; border-radius: 14px; cursor: pointer;
    font-family: inherit; font-size: 17px; font-weight: 800; color: #0b0e14;
    background: linear-gradient(90deg, #ffcf5b, #ff8a3d); box-shadow: 0 12px 34px rgba(255,138,61,0.45);
    animation: promoPop .35s ease; transition: transform .15s ease;
}
.vsl-cta:hover { transform: translateY(-2px); }
.vsl-cta i { margin-right: 8px; }
/* CTA do vídeo explicativo (neutro, não é venda) */
/* ===== Vídeo explicativo: card FLUTUANTE pequeno (não tampa a seção) ===== */
.explainer-overlay {
    z-index: 100030;
    background: transparent;            /* não escurece a seção atrás */
    backdrop-filter: none;
    align-items: flex-end;             /* canto inferior direito (desktop) */
    justify-content: flex-end;
    padding: 16px;
    pointer-events: none;              /* a seção continua clicável */
}
.explainer-overlay .vsl-card {
    width: 230px; max-width: 42vw;
    pointer-events: auto;              /* mas o card responde */
    text-align: left;
    animation: explainerPop .28s ease;
}
@keyframes explainerPop { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.explainer-overlay .vsl-tagline { font-size: 9.5px; margin-bottom: 7px; }
.explainer-overlay .vsl-video-wrap {
    border-radius: 14px; border: 2px solid rgba(201,165,90,0.5); box-shadow: 0 16px 40px rgba(0,0,0,0.55);
}
.explainer-overlay .vsl-video-wrap video { aspect-ratio: 9 / 16; max-height: 52vh; width: 100%; object-fit: cover; }
.explainer-overlay .vsl-play { gap: 8px; }
.explainer-overlay .vsl-play i { width: 48px; height: 48px; font-size: 18px; }
.explainer-overlay .vsl-play span { font-size: 12px; padding: 0 10px; }
.explainer-overlay .vsl-x {
    top: -12px; right: -12px; width: 32px; height: 32px; font-size: 14px;
    background: #1a1f2b; border: 1px solid rgba(255,255,255,0.3);
}
.explainer-overlay .vsl-cta.explainer-cta {
    margin-top: 10px; padding: 11px; font-size: 13.5px; border-radius: 11px;
    background: linear-gradient(90deg, #2a3342, #3a4556); color: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
@media (max-width: 640px) {
    .explainer-overlay { align-items: flex-end; justify-content: center; padding: 12px; padding-bottom: 78px; }
    .explainer-overlay .vsl-card { width: 200px; max-width: 60vw; }
    .explainer-overlay .vsl-video-wrap video { max-height: 46vh; }
}

/* Seção Tudo Pronto (vídeos prontos) */
.tp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 4px 0 20px; }
.tp-banner { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding: 12px 14px; border-radius: 12px; background: rgba(201,165,90,0.10); border: 1px solid rgba(201,165,90,0.30); color: #e6d6ad; font-size: 13px; font-weight: 600; }
.tp-banner i { color: #c9a55a; }
.tp-card { background: var(--bg-card, #141820); border: 1px solid var(--border, #1f2533); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.tp-thumb { position: relative; aspect-ratio: 9/16; background: #0d1017 center/cover no-repeat; display: flex; align-items: center; justify-content: center; color: #2a3342; font-size: 34px; }
.tp-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d1017; }
.tp-preview-tag { position: absolute; top: 8px; left: 8px; z-index: 3; font-size: 9px; font-weight: 800; letter-spacing: .6px; color: #0b0e14; background: linear-gradient(90deg, #ffcf5b, #ff8a3d); padding: 3px 8px; border-radius: 999px; pointer-events: none; }
.tp-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; }
.tp-play i { width: 46px; height: 46px; border-radius: 50%; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; padding-left: 3px; }
.tp-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.tp-title { font-size: 13px; font-weight: 700; color: #f0ece4; }
.tp-download { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px; border-radius: 9px; background: linear-gradient(90deg, #ffcf5b, #ff8a3d); color: #0b0e14; font-weight: 800; font-size: 12.5px; text-decoration: none; }
.tp-soon { opacity: .72; }
.tp-soon .tp-thumb { filter: grayscale(0.4); }
.tp-soon-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: #8a8f9c; }
.tp-soon-tag i { color: #c9a55a; }
.tp-estrategia { margin: 4px 0 22px; padding: 16px 16px 14px; border-radius: 14px; background: rgba(255,138,61,0.07); border: 1px solid rgba(255,138,61,0.28); }
.tp-estrategia h3 { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: #f0ece4; margin-bottom: 10px; }
.tp-estrategia p { font-size: 13px; line-height: 1.55; color: #c7cdd8; margin-bottom: 8px; }
.tp-estrategia p:last-child { margin-bottom: 0; }
.tp-estrategia b { color: #f0ece4; }
/* ===== Tudo Pronto bloqueado (não pago) ===== */
.tp-card-locked .tp-thumb { filter: brightness(0.45) saturate(0.7); }
.tp-card-locked .tp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tp-lock-ic { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2;
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #0b0e14; border-radius: 50%; filter: none;
    background: linear-gradient(135deg, #ffcf5b, #ff8a3d); box-shadow: 0 6px 18px rgba(0,0,0,0.5); }
.tp-card-locked::before { content: "VIP"; position: absolute; top: 8px; right: 8px; z-index: 3;
    font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #0b0e14;
    background: linear-gradient(90deg, #ffcf5b, #ff8a3d); padding: 3px 8px; border-radius: 999px; }
.tp-card-locked { position: relative; }
.tp-download-locked { border: 0; cursor: pointer; background: linear-gradient(90deg, #ffcf5b, #ff8a3d); }
.tp-estrategia-locked .tp-estr-lock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: #c7cdd8; margin: 0; }
.tp-estrategia-locked .tp-estr-lock > i { color: #ffcf5b; }
.tp-estr-unlock { border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-weight: 800; font-size: 12px;
    color: #0b0e14; background: linear-gradient(90deg, #ffcf5b, #ff8a3d); }
.vsl-x {
    position: absolute; top: -14px; right: -6px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%; cursor: pointer;
    background: rgba(0,0,0,0.65); border: 1px solid rgba(255,255,255,0.25); color: #fff; font-size: 17px;
    display: flex; align-items: center; justify-content: center; transition: var(--transition);
}
.vsl-x:hover { background: rgba(0,0,0,0.9); border-color: #fff; }
.vsl-spinner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; pointer-events: none; background: rgba(0,0,0,0.25); }
@media (max-width: 480px) { .vsl-x { top: 4px; right: 4px; background: rgba(0,0,0,0.8); } }

/* Modal de promoção */
.promo-card {
    position: relative; width: 100%; max-width: 400px; text-align: center;
    background: linear-gradient(180deg, #1a1510, #0d1017);
    border: 1px solid rgba(201,165,90,0.4); border-radius: 20px; padding: 30px 24px 24px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6); animation: promoPop .3s ease;
}
@keyframes promoPop { from { opacity: 0; transform: scale(0.92) translateY(10px); } to { opacity: 1; transform: none; } }
.promo-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #8a8f9c; font-size: 18px; cursor: pointer; }
.promo-x:hover { color: #fff; }
.promo-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .6px; color: #0b0e14; background: linear-gradient(90deg, #ffcf5b, #ff8a3d); padding: 5px 14px; border-radius: 999px; margin-bottom: 14px; }
.promo-card h2 { font-size: 23px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.promo-card p { font-size: 14px; color: #c7cdd8; line-height: 1.55; margin-bottom: 18px; }
.promo-card p strong { color: #f5cd6b; }
.promo-price { display: flex; flex-direction: column; align-items: center; margin-bottom: 20px; }
.promo-old { font-size: 14px; color: #8a8f9c; text-decoration: line-through; }
.promo-new { font-size: 46px; font-weight: 800; color: #34d399; line-height: 1; margin: 2px 0; }
.promo-per { font-size: 12px; color: #8a8f9c; text-transform: uppercase; letter-spacing: .5px; }
.promo-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
    padding: 15px; border: none; border-radius: 12px; cursor: pointer; font-family: inherit;
    font-size: 16px; font-weight: 800; color: #0b0e14; background: linear-gradient(90deg, #34d399, #10b981);
    box-shadow: 0 10px 26px rgba(16,185,129,0.35); transition: transform .15s, filter .15s;
}
.promo-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.promo-methods { font-size: 12px; color: #8a8f9c; margin-top: 14px; }
.promo-methods i { color: #c9a55a; }
.promo-later { display: block; margin: 14px auto 0; background: none; border: none; color: #6b7280; font-size: 13px; cursor: pointer; }
.promo-later:hover { color: #8a8f9c; }

/* Modal de checkout (iframe Cakto) */
.checkout-card { width: 100%; max-width: 460px; height: 88vh; max-height: 860px; display: flex; flex-direction: column; background: #0b0e14; border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.checkout-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: #141820; border-bottom: 1px solid var(--border); }
.checkout-head span { font-size: 12.5px; color: #c7cdd8; display: inline-flex; align-items: center; gap: 7px; }
.checkout-head span i { color: #34d399; }
.checkout-head button { background: none; border: none; color: #8a8f9c; font-size: 18px; cursor: pointer; }
.checkout-head button:hover { color: #fff; }
.checkout-frame-wrap { flex: 1; background: #fff; }
.checkout-frame-wrap iframe { width: 100%; height: 100%; border: none; display: block; }
.checkout-newtab { display: block; text-align: center; padding: 11px; font-size: 12.5px; color: #8a8f9c; text-decoration: none; background: #141820; border-top: 1px solid var(--border); }
.checkout-newtab:hover { color: #f5cd6b; }

/* ===== Checkout próprio (API Cakto) ===== */
.co-card {
    position: relative; width: 100%; max-width: 440px; max-height: 92vh; overflow-y: auto;
    background: linear-gradient(180deg, #12151d, #0b0e14);
    border: 1px solid rgba(201,165,90,0.35); border-radius: 18px; padding: 24px 22px 22px;
    box-shadow: 0 24px 70px rgba(0,0,0,0.6); animation: promoPop .3s ease;
}
.co-card::-webkit-scrollbar { width: 8px; }
.co-card::-webkit-scrollbar-thumb { background: #26303f; border-radius: 8px; }
.co-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: #8a8f9c; font-size: 18px; cursor: pointer; z-index: 2; }
.co-x:hover { color: #fff; }

.co-urgency {
    background: linear-gradient(90deg, #ff4d4d, #ff8a3d); color: #fff; font-weight: 800; font-size: 13px;
    text-align: center; padding: 9px 12px; border-radius: 10px; margin-bottom: 14px; letter-spacing: .2px;
    box-shadow: 0 8px 22px rgba(255,77,77,0.32); animation: coPulse 1.3s ease-in-out infinite;
}
@keyframes coPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.02); } }

.co-offer { text-align: center; margin-bottom: 16px; }
.co-banner { display: block; width: 100%; border-radius: 12px; margin-bottom: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.45); border: 1px solid rgba(201,165,90,0.3); }
/* Checkout compacto */
.co-offer { margin-bottom: 12px; }
.co-timer { margin-bottom: 10px !important; }
.co-plans { margin-bottom: 10px !important; }
.co-plan { padding: 8px !important; }
.co-price { margin-bottom: 4px !important; }
.co-new { font-size: 38px; }

/* ===== Banners e modais SEM bordas / arredondamento / espaço em volta ===== */
.banner-carousel, .banner-carousel img,
.course-unlock-banner, .course-unlock-banner img,
.trail-selector, .trail-banner,
.estr-btn, .estr-btn img { border-radius: 0 !important; border: none !important; box-shadow: none !important; }
/* Banner do checkout: full-bleed nas laterais do card, sem borda */
.co-banner { margin: 0 -22px 12px !important; width: calc(100% + 44px) !important; max-width: none !important; border-radius: 0 !important; border: none !important; box-shadow: none !important; }
/* Modais: sem linha de borda */
.co-card, .modal-content, .estr-video-content, .vsl-video-wrap, .vsl-card { border: none !important; }
.co-badge { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .6px; color: #0b0e14; background: linear-gradient(90deg, #ffcf5b, #ff8a3d); padding: 5px 14px; border-radius: 999px; margin-bottom: 12px; }
.co-offer h2 { font-size: 21px; font-weight: 800; color: #fff; margin-bottom: 10px; line-height: 1.25; }
.co-lead { font-size: 13.5px; color: #c7cdd8; line-height: 1.4; max-width: 320px; margin: 0 auto 10px; }
.co-lead b { color: #f5cd6b; }
.co-price { display: flex; flex-direction: column; align-items: center; margin-bottom: 12px; }
.co-old { font-size: 13px; color: #8a8f9c; text-decoration: line-through; }
.co-new { font-size: 42px; font-weight: 800; color: #34d399; line-height: 1; margin: 2px 0; }
.co-new b { font-weight: 800; }
.co-per { font-size: 11.5px; color: #8a8f9c; text-transform: uppercase; letter-spacing: .5px; }

/* Toggle de plano (Mensal / Anual R$397) */
.co-plans { display: flex; gap: 8px; margin: 0 auto 14px; max-width: 340px; }
.co-plan { flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 8px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--bg); color: var(--text-secondary); font-family: inherit; cursor: pointer; transition: var(--transition); }
.co-plan:hover { border-color: rgba(201,165,90,.5); }
.co-plan.active { border-color: #34d399; background: rgba(52,211,153,.08); color: #fff; }
.co-plan-name { font-size: 14px; font-weight: 800; color: inherit; }
.co-plan-price { font-size: 16px; font-weight: 800; color: #34d399; }
.co-plan-tag { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #0b0e14; background: linear-gradient(90deg,#ffcf5b,#ff8a3d); padding: 2px 7px; border-radius: 999px; }
.co-plan-price-m { color: #34d399; }
.co-plan-sub { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--text-secondary); }
.co-plan { min-height: 92px; justify-content: center; }
.co-plan-annual.active { border-color: #f5cd6b; background: rgba(245,205,107,.12); }

/* Plano anual: pulsando + brilhando (chama atenção) */
.co-plan-annual { position: relative; overflow: visible; border-color: rgba(245,205,107,.55); background: linear-gradient(160deg, rgba(245,205,107,.14), rgba(201,165,90,.05)); animation: coAnnualPulse 1.5s ease-in-out infinite; }
.co-plan-annual .co-plan-price { color: #f5cd6b; }
@keyframes coAnnualPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(245,205,107,0.22); }
    50% { box-shadow: 0 0 0 3px rgba(245,205,107,0.35), 0 0 26px rgba(245,205,107,0.6); }
}
.co-plan-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 8px; font-weight: 800; letter-spacing: .5px; color: #0b0e14; background: linear-gradient(90deg,#ffcf5b,#ff8a3d); padding: 2px 9px; border-radius: 999px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.45); }

/* Temporizador da promoção (1 min) */
.co-timer { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 12px; padding: 9px 14px; border-radius: 10px; font-size: 13px; font-weight: 700; color: #ffd9a3; background: rgba(255,90,31,0.14); border: 1px solid rgba(255,138,61,0.45); }
.co-timer i { color: #ff8a3d; }
.co-timer b { font-variant-numeric: tabular-nums; font-size: 16px; color: #fff; letter-spacing: .5px; }
.co-timer-end { background: rgba(248,113,113,0.18); border-color: rgba(248,113,113,0.55); animation: coTimerBlink 1s steps(2) infinite; }
@keyframes coTimerBlink { 50% { opacity: .55; } }

/* Benefício por-dia */
.co-perday { font-size: 13px; color: #d6dbe4; line-height: 1.45; max-width: 340px; margin: 0 auto 14px; padding: 10px 14px; border-radius: 12px; background: rgba(52,211,153,0.09); border: 1px solid rgba(52,211,153,0.28); }
.co-perday b { color: #34d399; }

/* Card do checkout: borda/brilho dourado mais forte */
.co-card { border-color: rgba(201,165,90,0.4) !important; box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,165,90,0.15), 0 0 40px rgba(201,165,90,0.12) !important; }
.co-new { text-shadow: 0 0 22px rgba(52,211,153,0.4); }

@media (prefers-reduced-motion: reduce) { .co-plan-annual, .co-timer-end { animation: none; } }

/* ===== Botões da home: compra (piscando) + atualizações ===== */
.home-cta-row { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 4px; }
.home-buy-btn {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; padding: 16px; border: none; border-radius: 14px; cursor: pointer;
    font-family: inherit; font-size: 16px; font-weight: 800; letter-spacing: .3px; color: #05271a;
    background: linear-gradient(90deg, #1faa54, #25d366);
    box-shadow: 0 10px 26px rgba(37,211,102,0.4);
    animation: homeBuyPulse 1.3s ease-in-out infinite;
}
.home-buy-btn:hover { filter: brightness(1.06); }
.home-buy-btn i { font-size: 17px; }
@keyframes homeBuyPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 10px 26px rgba(37,211,102,0.4); }
    50% { transform: scale(1.025); box-shadow: 0 14px 34px rgba(37,211,102,0.62); }
}
@media (prefers-reduced-motion: reduce) { .home-buy-btn { animation: none; } }
.home-updates-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 12px; border: 1px solid rgba(201,165,90,0.4); border-radius: 12px; cursor: pointer;
    font-family: inherit; font-size: 13.5px; font-weight: 700; color: #f5cd6b;
    background: rgba(201,165,90,0.08); transition: var(--transition);
}
.home-updates-btn:hover { background: rgba(201,165,90,0.16); }

/* ===== Modal de atualizações ===== */
.upd-wrap { padding: 24px 22px; }
.upd-title { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 9px; }
.upd-title i { color: var(--primary); }
.upd-sub { font-size: 13px; color: var(--text-secondary); margin: 4px 0 18px; }
.upd-list { display: flex; flex-direction: column; gap: 12px; }
.upd-item { display: flex; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.upd-ic { font-size: 22px; flex-shrink: 0; line-height: 1.3; }
.upd-body h4 { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.upd-when { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: #34d399; background: rgba(52,211,153,0.12); padding: 2px 7px; border-radius: 999px; }
.upd-body p { font-size: 12.5px; color: var(--text-secondary); margin-top: 3px; line-height: 1.45; }
.co-perks { list-style: none; text-align: left; max-width: 300px; margin: 0 auto; padding: 0; }
.co-perks li { font-size: 13px; color: #c7cdd8; display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.co-perks li i { color: #34d399; font-size: 12px; flex-shrink: 0; }
.co-perks li b { color: #fff; }
.co-guarantee {
    display: flex; align-items: center; gap: 11px; text-align: left;
    max-width: 320px; margin: 14px auto 0; padding: 12px 14px; border-radius: 12px;
    background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.30);
    font-size: 12.5px; line-height: 1.4; color: #c7cdd8;
}
.co-guarantee i { color: #34d399; font-size: 22px; flex-shrink: 0; }
.co-guarantee b { color: #6ee7b7; }

.co-methods { display: flex; gap: 8px; margin: 16px 0 8px; }
.co-discount-note {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    margin: 0 0 14px; padding: 8px 10px; border-radius: 9px;
    font-size: 12px; font-weight: 600; color: #34d399;
    background: rgba(52,211,153,0.10); border: 1px solid rgba(52,211,153,0.25);
}
.co-discount-note i { font-size: 11px; }
.co-method {
    flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 6px; border: 1px solid var(--border); background: #141820; color: #8a8f9c;
    border-radius: 10px; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: var(--transition);
}
.co-method:hover { color: #fff; border-color: #2a3342; }
.co-method.active { color: var(--primary); border-color: var(--primary); background: rgba(201,165,90,0.12); }

.co-form { display: flex; flex-direction: column; gap: 11px; }
.co-row { display: flex; gap: 10px; }
.co-row .co-field { flex: 1; }
.co-field { display: flex; flex-direction: column; gap: 5px; }
.co-field label { font-size: 11.5px; color: #8a8f9c; font-weight: 600; }
.co-field input {
    background: #0b0e14; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px;
    color: var(--text); font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s;
}
.co-field input:focus { border-color: var(--primary); }
.co-field input::placeholder { color: #55606f; }
.co-card-fields { display: flex; flex-direction: column; gap: 11px; padding-top: 3px; }

.co-error { background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.35); color: #fca5a5; font-size: 12.5px; padding: 9px 12px; border-radius: 9px; }
.co-submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; margin-top: 4px;
    padding: 15px; border: none; border-radius: 12px; cursor: pointer; font-family: inherit;
    font-size: 16px; font-weight: 800; color: #0b0e14; background: linear-gradient(90deg, #34d399, #10b981);
    box-shadow: 0 10px 26px rgba(16,185,129,0.35); transition: transform .15s, filter .15s;
}
.co-submit:hover { transform: translateY(-2px); filter: brightness(1.05); }
.co-submit:disabled { opacity: .7; cursor: default; transform: none; }
.co-secure { text-align: center; font-size: 11.5px; color: #6b7280; margin-top: 10px; }
.co-secure i { color: #34d399; }

/* Resultado (Pix / boleto / sucesso) */
.co-pay { text-align: center; padding: 6px 0 2px; }
.co-pay-head { font-size: 15px; font-weight: 700; color: #fff; margin-bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.co-pay-head i { color: var(--primary); }
.co-amount { font-size: 28px; font-weight: 800; color: #34d399; margin-bottom: 12px; }
.co-qr { width: 210px; height: 210px; border-radius: 12px; background: #fff; padding: 8px; margin: 0 auto 12px; display: block; image-rendering: pixelated; }
.co-pay-hint { font-size: 12.5px; color: #8a8f9c; margin-bottom: 10px; }
.co-copia { display: flex; gap: 8px; margin-bottom: 12px; }
.co-copia input { flex: 1; min-width: 0; background: #0b0e14; border: 1px solid var(--border); border-radius: 9px; padding: 10px 12px; color: #c7cdd8; font-size: 12px; }
.co-copia button { flex-shrink: 0; width: 44px; border: none; border-radius: 9px; background: var(--primary); color: #0b0e14; font-size: 15px; cursor: pointer; }
.co-copia button:hover { filter: brightness(1.08); }
.co-boleto-pdf { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; color: var(--primary); text-decoration: none; font-size: 13px; font-weight: 600; }
.co-boleto-pdf:hover { text-decoration: underline; }
.co-waiting { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: #f5cd6b; font-weight: 600; margin-top: 6px; }
.co-spin { width: 15px; height: 15px; border: 2px solid rgba(245,205,107,0.3); border-top-color: #f5cd6b; border-radius: 50%; display: inline-block; animation: coSpin .8s linear infinite; }
@keyframes coSpin { to { transform: rotate(360deg); } }
.co-loading { padding: 30px 6px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.co-loading p { font-size: 15px; font-weight: 700; color: #fff; }
.co-loading small { font-size: 12px; color: #8a8f9c; }
.co-spin-lg { width: 40px; height: 40px; border-width: 3px; }

.co-success { text-align: center; padding: 18px 4px 4px; }
.co-success-ic { width: 76px; height: 76px; margin: 0 auto 16px; border-radius: 50%; background: linear-gradient(135deg, #34d399, #10b981); display: flex; align-items: center; justify-content: center; font-size: 34px; color: #0b0e14; box-shadow: 0 10px 30px rgba(16,185,129,0.4); animation: promoPop .4s ease; }
.co-success h3 { font-size: 22px; font-weight: 800; color: #fff; margin-bottom: 8px; }
.co-success p { font-size: 14px; color: #c7cdd8; margin-bottom: 20px; line-height: 1.5; }

/* ===== Overlay de IA travada ===== */
.ai-lock-overlay {
    position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 20px;
    background: rgba(8,10,15,0.82); backdrop-filter: blur(6px); border-radius: inherit;
}
.ai-lock-card {
    text-align: center; max-width: 360px; background: linear-gradient(180deg, #1a1510, #0d1017);
    border: 1px solid rgba(201,165,90,0.4); border-radius: 18px; padding: 32px 26px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.5);
}
.ai-lock-icon { width: 66px; height: 66px; margin: 0 auto 16px; border-radius: 50%; background: rgba(201,165,90,0.14); border: 1px solid rgba(201,165,90,0.4); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--primary); }
.ai-lock-card h3 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.ai-lock-card p { font-size: 13.5px; color: #c7cdd8; line-height: 1.55; margin-bottom: 20px; }
.ai-lock-card p strong { color: #f5cd6b; }
.ai-lock-cta {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
    padding: 14px; border: none; border-radius: 12px; cursor: pointer; font-family: inherit;
    font-size: 15px; font-weight: 800; color: #0b0e14; background: linear-gradient(90deg, #34d399, #10b981);
    box-shadow: 0 10px 26px rgba(16,185,129,0.35); transition: transform .15s, filter .15s;
}
.ai-lock-cta:hover { transform: translateY(-2px); filter: brightness(1.05); }
.ai-lock-sub { display: block; margin-top: 12px; font-size: 11.5px; color: #8a8f9c; }
#tab-ai { position: relative; }
.ai-screen.ai-blurred { filter: blur(2px); pointer-events: none; user-select: none; }
/* Modos Imagem/Vídeo bloqueados (não pago): cadeadinho no botão */
.ai-mode.ai-mode-locked::after { content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 9px; margin-left: 6px; color: #f5cd6b; opacity: .9; }

/* Toast (aviso rápido) */
.gv-toast {
    position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
    background: linear-gradient(135deg, #1a1510, #12151d); border: 1px solid rgba(201,165,90,0.5);
    color: #f0ece4; font-size: 13.5px; font-weight: 600; padding: 12px 18px; border-radius: 12px;
    box-shadow: 0 14px 40px rgba(0,0,0,0.55); z-index: 100020; max-width: 90vw; text-align: center;
    opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
}
.gv-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.gv-toast i { color: #f5cd6b; margin-right: 7px; }

/* Feedbacks ao vivo (rodapé das seções) */
.gv-lf { margin: 30px 0 8px; }
.gv-lf-head { text-align: center; margin-bottom: 16px; }
.gv-lf-live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; letter-spacing: .6px; color: #f43f5e; background: rgba(244,63,94,.12); border: 1px solid rgba(244,63,94,.3); padding: 4px 12px; border-radius: 999px; }
.gv-lf-dot { width: 7px; height: 7px; border-radius: 50%; background: #f43f5e; animation: lfBlink 1.3s infinite; }
@keyframes lfBlink { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(244,63,94,.5); } 50% { opacity: .5; box-shadow: 0 0 0 5px rgba(244,63,94,0); } }
.gv-lf-head h3 { font-size: 17px; font-weight: 800; margin-top: 10px; }
.gv-lf-head p { font-size: 13px; color: var(--text-secondary); margin-top: 4px; }
/* Carrossel horizontal (passa pro lado, altura fixa — não empilha) */
.gv-lf-list { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.gv-lf-track { display: flex; gap: 12px; width: max-content; animation: gvLfScroll 90s linear infinite; }
.gv-lf-list:hover .gv-lf-track { animation-play-state: paused; }
@keyframes gvLfScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.gv-lf-card { width: 320px; max-width: 82vw; flex-shrink: 0; align-items: flex-start; }
.gv-lf-card .estr-fb-text { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gv-lf-time { color: var(--text-secondary); }

/* ===== Estratégias bloqueadas (não pago) ===== */
.estrategias-screen.estr-locked .estr-btn { position: relative; }
.estrategias-screen.estr-locked .estr-btn img { filter: brightness(0.45) saturate(0.7); }
.estrategias-screen.estr-locked .estr-btn::after {
    content: "\f023"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: #0b0e14; border-radius: 50%;
    background: linear-gradient(135deg, #ffcf5b, #ff8a3d); box-shadow: 0 6px 18px rgba(0,0,0,0.5);
}
.estrategias-screen.estr-locked .estr-btn::before {
    content: "VIP"; position: absolute; top: 8px; right: 8px; z-index: 2;
    font-size: 10px; font-weight: 800; letter-spacing: .5px; color: #0b0e14;
    background: linear-gradient(90deg, #ffcf5b, #ff8a3d); padding: 3px 8px; border-radius: 999px;
}

/* ===== Estratégias em drip (liberação diária p/ quem já pagou) ===== */
.estr-btn.estr-drip-locked { position: relative; cursor: default; }
.estr-btn.estr-drip-locked img { filter: brightness(0.4) saturate(0.65); }
.estr-drip-lock {
    position: absolute; inset: 0; z-index: 3; line-height: 1.2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
    background: rgba(11,14,20,0.58); text-align: center; padding: 10px;
}
.estr-drip-lock i { font-size: 22px; color: #ffcf5b; }
.estr-drip-lock b {
    font-size: 12px; font-weight: 800; color: #0b0e14; line-height: 1;
    background: linear-gradient(90deg, #ffcf5b, #ff8a3d); padding: 6px 13px; border-radius: 999px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}

/* ===== Onboarding pós-login: notificações + adicionar à tela inicial ===== */
.gv-setup { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5,7,11,0.74); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.gv-setup.hidden { display: none; }
.gv-setup-card { background: var(--bg-card); border: 1px solid rgba(201,165,90,0.28); border-radius: 22px; max-width: 400px; width: 100%; padding: 30px 24px 22px; text-align: center; animation: modalIn 0.35s ease; box-shadow: 0 24px 60px rgba(0,0,0,0.55); position: relative; }
.gv-setup-x { position: absolute; top: 12px; right: 12px; background: transparent; border: none; color: var(--text-secondary); font-size: 15px; cursor: pointer; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.gv-setup-x:hover { background: var(--bg-elevated); color: var(--text); }
.gv-setup-dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 20px; }
.gv-setup-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); transition: 0.3s; }
.gv-setup-dot.active { background: var(--primary); width: 22px; border-radius: 4px; }
.gv-setup-icon { width: 74px; height: 74px; border-radius: 20px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; background: rgba(201,165,90,0.12); color: var(--primary); border: 1px solid rgba(201,165,90,0.25); }
.gv-setup-icon.ok { color: #4ade80; background: rgba(74,222,128,0.12); border-color: rgba(74,222,128,0.3); }
.gv-setup-title { font-size: 20px; font-weight: 800; margin-bottom: 8px; color: var(--text); }
.gv-setup-text { font-size: 14px; color: var(--text-secondary); margin-bottom: 22px; line-height: 1.5; }
.gv-setup-btn { width: 100%; border: none; border-radius: 12px; padding: 15px; font-size: 15px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: 0.2s; font-family: inherit; }
.gv-setup-btn.primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #1a1204; }
.gv-setup-btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.gv-setup-btn.primary:disabled { opacity: 0.7; cursor: default; transform: none; }
.gv-setup-btn.ghost { background: transparent; color: var(--text-secondary); margin-top: 4px; font-weight: 600; font-size: 13px; padding: 11px; }
.gv-setup-btn.ghost:hover { color: var(--text); }
.gv-ios-steps { text-align: left; display: flex; flex-direction: column; gap: 13px; margin: 2px 0 22px; }
.gv-ios-step { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text); line-height: 1.35; }
.gv-ios-num { flex: none; width: 27px; height: 27px; border-radius: 50%; background: rgba(201,165,90,0.14); color: var(--primary); border: 1px solid rgba(201,165,90,0.3); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; }
.gv-ios-step .gv-ios-ico { color: var(--primary); font-size: 15px; margin: 0 1px; }
.gv-ios-hint { font-size: 12px; color: var(--text-secondary); margin-top: -6px; }

/* ===== Onboarding — visual rico (hero animado, mockups, benefícios) ===== */
.gv-setup-card { overflow: hidden; }
.gv-hero { display: flex; justify-content: center; margin: 4px 0 18px; }
/* Sino com anéis pulsando */
.gv-bell-wrap { position: relative; width: 96px; height: 96px; display: flex; align-items: center; justify-content: center; }
.gv-bell { width: 78px; height: 78px; border-radius: 22px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #1a1204; display: flex; align-items: center; justify-content: center; font-size: 33px; box-shadow: 0 10px 28px rgba(201,165,90,0.4); animation: gvBellSwing 2.4s ease-in-out infinite; z-index: 1; }
.gv-ring { position: absolute; width: 78px; height: 78px; border-radius: 50%; border: 2px solid rgba(201,165,90,0.55); animation: gvRing 2.1s ease-out infinite; }
.gv-ring.d2 { animation-delay: 1.05s; }
@keyframes gvRing { 0% { transform: scale(0.7); opacity: 0.75; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes gvBellSwing { 0%,60%,100% { transform: rotate(0); } 8% { transform: rotate(14deg); } 20% { transform: rotate(-12deg); } 32% { transform: rotate(8deg); } 44% { transform: rotate(-5deg); } }
/* Mockup de celular com o ícone do app na tela inicial */
.gv-phone { width: 128px; height: 150px; border-radius: 26px; background: linear-gradient(165deg, #222b3d, #12161f); border: 2px solid rgba(201,165,90,0.3); box-shadow: 0 16px 34px rgba(0,0,0,0.55), inset 0 0 0 4px #0b0e14; position: relative; display: flex; align-items: center; justify-content: center; }
.gv-phone::before { content: ''; position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 40px; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.15); }
.gv-appicon { display: flex; flex-direction: column; align-items: center; gap: 7px; animation: gvPop 0.6s cubic-bezier(0.34,1.56,0.64,1) both; position: relative; }
.gv-appicon img { width: 58px; height: 58px; border-radius: 15px; box-shadow: 0 8px 18px rgba(0,0,0,0.55); }
.gv-appicon span { font-size: 11px; color: var(--text); font-weight: 600; }
.gv-appicon .gv-badge { position: absolute; top: -8px; right: 8px; width: 22px; height: 22px; border-radius: 50%; background: #22c55e; color: #04210f; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; box-shadow: 0 3px 8px rgba(0,0,0,0.4); animation: gvPop 0.5s 0.35s both; }
@keyframes gvPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Lista de benefícios */
.gv-benefits { display: flex; flex-direction: column; gap: 11px; text-align: left; margin: 2px 0 20px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 14px; padding: 15px 16px; }
.gv-benefit { display: flex; align-items: center; gap: 11px; font-size: 13.5px; color: var(--text); line-height: 1.3; }
.gv-benefit i { color: var(--primary); width: 20px; text-align: center; font-size: 15px; flex: none; }
/* Botão primário com brilho sutil (menos "seco") */
.gv-setup-btn.primary { position: relative; overflow: hidden; box-shadow: 0 8px 20px rgba(201,165,90,0.28); }
.gv-setup-btn.primary::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-18deg); animation: gvShine 3.2s ease-in-out infinite; }
@keyframes gvShine { 0%, 55% { left: -120%; } 80%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .gv-bell, .gv-ring, .gv-setup-btn.primary::after, .gv-appicon, .gv-badge { animation: none; } }

/* ===== Preço 12x (cartão) + garantia agressiva ===== */
.co-new-12x { font-size: 21px; font-weight: 700; color: #34d399; line-height: 1.05; }
.co-new-12x b { font-size: 40px; font-weight: 800; }
.co-avista { font-size: 13px; color: #8a8f9c; margin-top: 3px; }
.co-guarantee { display: flex; gap: 12px; align-items: flex-start; background: rgba(52,211,153,0.08); border: 1px solid rgba(52,211,153,0.32); border-radius: 12px; padding: 12px 14px; margin: 0 0 14px; }
.co-guar-ico { color: #34d399; font-size: 24px; flex: none; margin-top: 1px; }
.co-guar-txt { font-size: 12.5px; line-height: 1.45; color: #f0ece4; }
.co-guar-txt b { color: #34d399; }
.promo-new { font-size: 34px; }
.promo-avista { font-size: 13px; color: #8a8f9c; margin-top: 3px; }
.promo-guarantee { font-size: 12.5px; color: #dff6ec; background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.3); border-radius: 10px; padding: 10px 12px; margin-top: 12px; line-height: 1.4; }
.promo-guarantee i, .promo-guarantee b { color: #34d399; }

/* ===== Oferta agressiva: banner garantia + gatilho por-dia (mobile-first) ===== */
.co-banner-garantia { border-color: rgba(255,180,40,0.5) !important; }
.co-perday { text-align: center; font-size: 15px; color: #f0ece4; background: linear-gradient(90deg, rgba(201,165,90,0.16), rgba(255,138,61,0.16)); border: 1px solid rgba(201,165,90,0.45); border-radius: 12px; padding: 10px 12px; margin: 6px 0 10px; line-height: 1.35; }
.co-perday b { color: #ffcf5b; font-size: 17px; }
.co-guarbar { display: flex; align-items: center; gap: 8px; justify-content: center; flex-wrap: wrap; text-align: center; font-size: 12.5px; line-height: 1.4; color: #dff6ec; background: rgba(52,211,153,0.1); border: 1px solid rgba(52,211,153,0.34); border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; }
.co-guarbar i, .co-guarbar b { color: #34d399; }
.promo-new { font-size: 46px !important; }
.promo-perday { text-align: center; font-size: 14px; color: #f0ece4; background: linear-gradient(90deg, rgba(201,165,90,0.16), rgba(255,138,61,0.16)); border: 1px solid rgba(201,165,90,0.45); border-radius: 10px; padding: 8px 11px; margin: 4px 0 12px; }
.promo-perday b { color: #ffcf5b; }
/* Banner no card de login/cadastro (herói, quebra o padding do card) */
.login-banner { display: block; width: calc(100% + 52px); margin: -34px -26px 18px; border-radius: 20px 20px 0 0; }
@media (max-width: 480px) {
    .co-perday { font-size: 14px; } .co-perday b { font-size: 16px; }
    .login-banner { width: calc(100% + 52px); }
}

/* ===== Página de login/cadastro rica (mobile-first) ===== */
.login-overlay { display: block; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; -webkit-overflow-scrolling: touch; touch-action: pan-y !important; overscroll-behavior-y: contain; }
.login-overlay.hidden { display: none !important; }
.lp-wrap { position: relative; z-index: 1; width: 100%; max-width: 440px; margin: 0 auto; padding: 16px 16px 44px; display: flex; flex-direction: column; gap: 16px; box-sizing: border-box; }
.lp-wrap * { min-width: 0; }
.lp-hero { text-align: center; }
.lp-hero-img { display: block; width: 100%; border-radius: 16px; border: 1px solid rgba(255,180,40,0.4); box-shadow: 0 10px 30px rgba(0,0,0,0.55), 0 0 26px rgba(201,165,90,0.18); }
.lp-hero-sub { font-size: 14px; color: #d6dae2; margin-top: 12px; line-height: 1.45; }
.lp-hero-sub b { color: #f5cd6b; }
/* login-card já estilizado; ajustes no contexto da lp */
.lp-wrap .login-card { max-width: none; margin: 0; padding-top: 26px; }
/* abas login/criar conta */
.lp-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 16px; }
.lp-tab { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 12px; border-radius: 12px; border: 1px solid rgba(201,165,90,0.25); background: #0f131c; color: #8a8f9c; font-weight: 700; font-size: 13.5px; cursor: pointer; font-family: inherit; transition: .18s; }
.lp-tab.active { border-color: #c9a55a; background: rgba(201,165,90,0.12); color: #f5cd6b; box-shadow: 0 0 0 1px rgba(201,165,90,0.35) inset; }
.lp-tab i { font-size: 13px; }
/* linha lembrar/esqueci */
.lp-formrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 2px 0; font-size: 12.5px; }
.lp-remember { display: inline-flex; align-items: center; gap: 7px; color: #b7bcc7; cursor: pointer; }
.lp-remember input { accent-color: #c9a55a; width: 15px; height: 15px; }
.lp-forgot { color: #8a8f9c; text-decoration: none; }
.lp-forgot:hover { color: #f5cd6b; }
/* barra de confiança */
.lp-trust { display: flex; align-items: center; gap: 12px; background: linear-gradient(180deg,#141824,#0d1017); border: 1px solid rgba(201,165,90,0.25); border-radius: 16px; padding: 14px 16px; }
.lp-trust-item { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.lp-trust-ico { color: #f5cd6b; font-size: 22px; flex: none; }
.lp-trust-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.lp-trust-txt b { font-size: 12.5px; color: #f0ece4; }
.lp-trust-txt span { font-size: 10.5px; color: #f5cd6b; font-weight: 700; letter-spacing: .3px; }
.lp-trust-sep { width: 1px; align-self: stretch; background: rgba(201,165,90,0.22); }
.lp-avatars { display: flex; flex: none; }
.lp-avatars img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #141824; margin-left: -9px; object-fit: cover; }
.lp-avatars img:first-child { margin-left: 0; }
/* features */
.lp-features { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.lp-feat { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; background: #0f131c; border: 1px solid rgba(201,165,90,0.2); border-radius: 14px; padding: 14px 6px; }
.lp-feat i { font-size: 20px; color: #f5cd6b; }
.lp-feat span { font-size: 9.5px; font-weight: 700; color: #cfd3db; line-height: 1.25; letter-spacing: .2px; }
/* faturamento */
.lp-fat { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, rgba(201,165,90,0.16), rgba(255,138,61,0.12)); border: 1px solid rgba(201,165,90,0.4); border-radius: 16px; padding: 16px 18px; }
.lp-fat > i { font-size: 30px; color: #f5cd6b; flex: none; }
.lp-fat-txt { display: flex; flex-direction: column; line-height: 1.15; }
.lp-fat-txt span { font-size: 11px; color: #cfd3db; font-weight: 700; letter-spacing: .4px; }
.lp-fat-txt b { font-size: 23px; color: #f5cd6b; font-weight: 800; }
.lp-fat-txt small { font-size: 10.5px; color: #8a8f9c; letter-spacing: .4px; }
@media (max-width: 360px) { .lp-feat span { font-size: 9px; } .lp-fat-txt b { font-size: 20px; } }

/* ===== Card de login com banner no topo (sem logo GV) ===== */
.lp-card { padding-top: 0 !important; overflow: hidden; }
.lp-card-hero { display: block; width: calc(100% + 52px); margin: 0 -26px 14px; border-radius: 19px 19px 0 0; }
.lp-card .lp-hero-sub { margin: 0 0 8px; font-size: 13px; color: #d6dae2; }
.lp-card .login-sub { margin: 0 0 16px; }

/* ===== Estúdio de vídeo IA (acervo pronto + geração simulada) ===== */
.ai-vstudio { padding: 14px 16px 8px; overflow-y: auto; flex: 1; }
.vs-head h3 { display: flex; align-items: center; gap: 9px; font-size: 17px; color: var(--text); }
.vs-head h3 i { color: var(--primary); }
.vs-head p { font-size: 13px; color: var(--text-secondary); margin: 4px 0 16px; line-height: 1.45; }
.vs-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-secondary); font-weight: 700; margin-bottom: 10px; }
.vs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; }
.vs-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px; background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: 14px; cursor: pointer; font-family: inherit; transition: .16s; }
.vs-card:hover { border-color: var(--primary-light); transform: translateY(-2px); }
.vs-card.selected { border-color: var(--primary); background: rgba(201,165,90,0.12); box-shadow: 0 0 0 1px var(--primary) inset; }
.vs-card img { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); }
.vs-card.selected img { border-color: var(--primary); }
.vs-card-name { font-size: 13px; font-weight: 700; color: var(--text); }
.vs-card-tag { font-size: 10px; color: var(--text-secondary); }
.vs-generate { width: 100%; margin: 18px 0 6px; padding: 15px; border: none; border-radius: 13px; font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #1a1204; transition: .16s; box-shadow: 0 8px 22px rgba(201,165,90,0.28); }
.vs-generate:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-1px); }
.vs-generate:disabled { opacity: .55; cursor: default; box-shadow: none; }
/* estágio de geração */
.vs-stage { margin-top: 16px; }
.vs-gen { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 26px 16px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 16px; }
.vs-gen-ring { width: 92px; height: 92px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: var(--primary); background: conic-gradient(var(--primary) 0deg, rgba(201,165,90,0.15) 0deg); position: relative; animation: vsSpin 1.1s linear infinite; }
.vs-gen-ring::before { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--bg-elevated); }
.vs-gen-ring span { position: relative; z-index: 1; font-variant-numeric: tabular-nums; }
@keyframes vsSpin { to { transform: rotate(360deg); } }
.vs-gen-bar { width: 100%; max-width: 320px; height: 8px; border-radius: 6px; background: var(--bg); overflow: hidden; }
.vs-gen-fill { height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--primary), #ff8a3d); transition: width .4s ease; }
.vs-gen-step { font-size: 13.5px; color: var(--text-secondary); font-weight: 600; text-align: center; }
/* resultado */
.vs-result { display: flex; flex-direction: column; gap: 12px; }
.vs-result-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #4ade80; font-size: 15px; }
.vs-video { width: 100%; max-height: 62vh; border-radius: 14px; background: #000; border: 1px solid var(--border); }
.vs-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.vs-dl, .vs-again { flex: 1; min-width: 130px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 11px; font-weight: 700; font-size: 14px; font-family: inherit; cursor: pointer; text-decoration: none; }
.vs-dl { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #1a1204; border: none; }
.vs-again { background: transparent; color: var(--text); border: 1px solid var(--border); }
.vs-again:hover { border-color: var(--primary); }
.vs-error { padding: 16px; border-radius: 12px; background: rgba(248,113,113,0.1); border: 1px solid rgba(248,113,113,0.3); color: #f87171; font-size: 14px; }

/* ===== Fix scroll travado no mobile: feed da comunidade flui na página =====
   (a caixa de 340px com overflow interno sequestrava o gesto de scroll no celular) */
@media (max-width: 768px) {
  .comm-chat-body { height: auto !important; max-height: none !important; overflow: visible !important; }
}

/* ===== Estúdio de vídeo: cards de PRODUTO (imagem retangular) ===== */
.vs-grid-prod { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.vs-card-prod { padding: 8px 6px 9px; }
.vs-card-prod img { width: 100%; height: 68px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); background: #fff; }
.vs-card-prod.selected img { border-color: var(--primary); }
.vs-card-prod .vs-card-name { font-size: 11px; text-align: center; line-height: 1.2; }