* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Outfit', sans-serif; background: #0A1628; color: #8A94A8; line-height: 1.75; font-size: 15px; }
h1, h2 { font-family: 'Poiret One', cursive; color: #C4A44A; }

.top-bar { position: fixed; top: 0; left: 0; right: 0; height: 56px; background: linear-gradient(180deg, #0E1E38 0%, #0A1628 40%, #0C1A30 100%); border-top: 1px solid rgba(208, 216, 228, 0.08); border-bottom: 1px solid transparent; background-clip: padding-box; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; opacity: 0; animation: fadeIn 0.3s ease forwards; }
.top-bar::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, #C4A44A 50%, transparent 100%); animation: goldLine 0.6s 0.3s ease forwards; }
@keyframes goldLine { to { left: 0; width: 100%; } }
@keyframes fadeIn { to { opacity: 1; } }

.club-name { font-family: 'Poiret One', cursive; font-size: 18px; color: #C4A44A; letter-spacing: 0.08em; animation: titleReveal 0.8s 0.5s ease forwards; letter-spacing: 0.15em; }
@keyframes titleReveal { to { letter-spacing: 0.08em; } }
.nav-links { display: flex; gap: 24px; }
.nav-links a { font-weight: 300; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #5A6478; text-decoration: none; transition: color 0.2s ease; }
.nav-links a:hover { color: #D0D8E4; }

.dashboard { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; max-width: 1100px; margin: 80px auto 40px; padding: 0 24px; }

.hero-screening { position: relative; padding: 80px 40px; margin-bottom: 32px; overflow: hidden; }
.bokeh-bg { position: absolute; inset: 0; z-index: 0; }
.bokeh { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(196, 164, 74, 0.1) 0%, transparent 70%); animation: bokehPulse 4s ease-in-out infinite; }
.b1 { width: 120px; height: 120px; top: 10%; left: 15%; animation-delay: 0s; }
.b2 { width: 80px; height: 80px; top: 50%; left: 60%; animation-delay: 0.8s; }
.b3 { width: 100px; height: 100px; top: 20%; right: 10%; animation-delay: 1.6s; }
.b4 { width: 60px; height: 60px; bottom: 20%; left: 40%; animation-delay: 0.4s; }
.b5 { width: 90px; height: 90px; bottom: 10%; right: 30%; animation-delay: 1.2s; }
.b6 { width: 70px; height: 70px; top: 60%; left: 10%; animation-delay: 2s; }
@keyframes bokehPulse { 0%, 100% { opacity: 0.05; } 50% { opacity: 0.12; } }

.hero-title { font-size: 48px; letter-spacing: 0.08em; position: relative; z-index: 1; margin-bottom: 12px; }
.hero-sub { font-weight: 400; font-size: 16px; color: #8A94A8; position: relative; z-index: 1; }

.case-card { position: relative; background: #0E1E38; padding: 32px; margin-bottom: 24px; border: 1px solid rgba(196, 164, 74, 0.3); }
.case-card::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(196, 164, 74, 0.15); pointer-events: none; }
.deco-frame { position: absolute; inset: -2px; pointer-events: none; }
.corner-ornament { position: absolute; }
.corner-ornament.tl { top: -2px; left: -2px; }
.corner-ornament.tr { top: -2px; right: -2px; }
.corner-ornament.bl { bottom: -2px; left: -2px; }
.corner-ornament.br { bottom: -2px; right: -2px; }

.case-card { opacity: 0; transition: opacity 0.8s ease; }
.case-card.visible { opacity: 1; }

.case-icon { margin-bottom: 12px; }
.case-label { font-weight: 300; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #5A6478; display: block; margin-bottom: 8px; }
.case-content h2 { font-size: 24px; margin-bottom: 12px; }
.case-content p { font-size: 15px; }

.status-panel { position: sticky; top: 80px; align-self: start; }
.panel-block { background: #0E1E38; border: 1px solid rgba(196, 164, 74, 0.2); padding: 24px; margin-bottom: 16px; }
.panel-label { font-weight: 300; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #5A6478; display: block; margin-bottom: 12px; }
.member-counter { font-family: 'Poiret One', cursive; font-size: 48px; color: #C4A44A; }
.current-test { font-weight: 600; font-size: 16px; color: #D0D8E4; }
.test-status { font-weight: 300; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #1A3460; }
.panel-text { font-size: 14px; color: #8A94A8; }

/* Palette: #0E1E38 #162A4A #C4A44A #D0D8E4 #5A6478 #1A3460 */
@media (max-width: 768px) {
    .dashboard { grid-template-columns: 1fr; }
    .hero-title { font-size: 32px; }
    .status-panel { position: relative; top: 0; }
}