:root { --primary: #6c5ce7; --secondary: #00cec9; --bg: #0a0f1d; --card-bg: #161d31; --danger: #ff7675; --success: #55efc4; }

body { background: radial-gradient(circle at center, #161d31 0%, #0a0f1d 100%); font-family: 'Quicksand', sans-serif; color: white; min-height: 100vh; display: block; margin: 0; padding: 15px; }

.briefing-card { background: var(--card-bg); border-radius: 30px; padding: 30px; box-shadow: 0 25px 80px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.05); max-width: 850px; width: 100%; position: relative; overflow: hidden; backdrop-filter: blur(10px); margin: 5vh auto; }

@media (min-width: 768px) { .briefing-card { border-radius: 40px; padding: 50px; } }

.briefing-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 6px; }

.user-welcome-badge { background: rgba(85, 239, 196, 0.1); color: var(--success); border: 1px solid rgba(85, 239, 196, 0.2); padding: 8px 15px; border-radius: 100px; font-size: 0.85rem; display: inline-flex; align-items: center; }

.btn-launch { background: var(--secondary); color: #0a0f1d; border-radius: 20px; padding: 15px 30px; font-family: 'Fredoka One'; font-size: 1.2rem; border: none; box-shadow: 0 6px 0 #009d99; transition: 0.2s; text-decoration: none; display: inline-block; width: 100%; max-width: 350px; }

@media (min-width: 768px) { .btn-launch { padding: 18px 50px; font-size: 1.5rem; border-radius: 25px; box-shadow: 0 8px 0 #009d99; } }

.btn-launch:active { transform: translateY(4px); box-shadow: 0 2px 0 #009d99; }
.btn-launch:hover { background: #01e6e2; color: #0a0f1d; }

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 25px; }
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.stat-box { background: rgba(255,255,255,0.03); border-radius: 15px; padding: 15px; text-align: center; border: 1px solid rgba(255,255,255,0.08); }

.briefing-text-area { background: rgba(0,0,0,0.2); border-radius: 20px; padding: 20px; border-left: 4px solid var(--primary); }

.auth-glass { background: rgba(22, 29, 49, 0.98); border: 1px solid rgba(0, 206, 201, 0.5); border-radius: 25px; color: white; box-shadow: 0 15px 50px rgba(0,0,0,0.6); }

.auth-input { border: 1px solid rgba(255, 255, 255, 0.1) !important; color: white !important; border-radius: 15px !important; padding: 14px 20px !important; font-size: 1rem; }
.auth-input:focus { border-color: var(--secondary) !important; box-shadow: 0 0 0 4px rgba(0, 206, 201, 0.15) !important; }

#authTabs { background: rgba(0,0,0,0.2); border-radius: 50px; padding: 5px; display: inline-flex; }
#authTabs .nav-link { border-radius: 50px; color: rgba(255,255,255,0.7); padding: 10px 30px; transition: 0.3s; font-weight: 600; border: none; }
#authTabs .nav-link.active { background: var(--secondary); color: #0a0f1d; }

.personal-stats-box { background: linear-gradient(90deg, rgba(85, 239, 196, 0.1) 0%, rgba(0, 206, 201, 0.05) 100%); border: 1px solid rgba(85, 239, 196, 0.2); border-radius: 20px; padding: 15px; margin-bottom: 20px; }

.scanline { width: 100%; height: 2px; background: rgba(0, 206, 201, 0.1); position: absolute; animation: scan 4s linear infinite; z-index: 5; pointer-events: none; }
@keyframes scan { from { top: 0; } to { top: 100%; } }

@media (max-width: 768px) {
    .modal-dialog { margin: 1rem; }
    .modal-body { padding: 30px 20px !important; }
    #authTabs { display: flex; width: 100%; }
    #authTabs .nav-item { flex: 1; }
    #authTabs .nav-link { padding: 10px 15px; width: 100%; }
    .briefing-card { margin: 20px auto; padding: 25px 20px; border-radius: 25px; }
    .briefing-card h1 { font-size: 1.6rem !important; }
    .user-welcome-badge { padding: 6px 12px; font-size: 0.8rem; }
    .stat-grid { grid-template-columns: 1fr; gap: 8px; margin-bottom: 20px; }
    .stat-box { padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; text-align: left; }
    .stat-box small { font-size: 0.75rem !important; margin-bottom: 0 !important; }
    .stat-box span { font-size: 0.95rem; }
    .briefing-text-area { padding: 15px; border-radius: 15px; }
    .btn-launch { padding: 14px 20px; font-size: 1.1rem; max-width: 100%; }
    .personal-stats-box { padding: 12px; border-radius: 15px; }
}