body {
    min-height: 100vh;
    background: #f6f7fb;
    color: #111827;
    font-family: 'Be Vietnam Pro', sans-serif;
    -webkit-tap-highlight-color: transparent;
}
.option-btn { transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.option-btn:active { transform: scale(0.98); }
.progress-bar { transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade { animation: fadeIn 0.35s ease-out forwards; }
@keyframes slideUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.animate-slide-up { animation: slideUp 0.4s ease-out forwards; }
.nav-panel { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.nav-panel.closed { transform: translateX(100%); }
.nav-panel.open { transform: translateX(0); }
.q-btn { width: 38px; height: 38px; border-radius: 10px; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; transition: all 0.15s; cursor: pointer; border: 2px solid transparent; }
.q-btn.unanswered { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; }
.q-btn.answered { background: #e0e7ff; color: #4f46e5; border-color: #a5b4fc; }
.q-btn.correct { background: #dcfce7; color: #16a34a; border-color: #86efac; }
.q-btn.wrong { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }
.q-btn.flagged { background: #fef3c7; color: #d97706; border-color: #fbbf24; }
.q-btn.current { box-shadow: 0 0 0 2px #4f46e5; }

@media (min-width: 1024px) {
    #loginScreen {
        max-width: 520px;
        margin: 0 auto;
        width: 100%;
    }

    #questionContainer {
        max-width: 980px;
        margin: 0 auto;
        width: 100%;
        padding-top: 3.5rem;
    }

    #timerDisplay {
        top: 20px;
        right: 24px;
    }
}

@media (min-width: 1536px) {
    #questionContainer {
        max-width: 1080px;
    }
}

@media (prefers-color-scheme: dark) {
    body { background: #0b1020; color: #e5e7eb; }
    .glass-card { background: rgba(30,27,75,0.95); backdrop-filter: blur(12px); }
    .q-btn.unanswered { background: #1f2937; color: #9ca3af; border-color: #374151; }
    .q-btn.answered { background: #312e81; color: #a5b4fc; border-color: #4338ca; }
    .q-btn.correct { background: #14532d; color: #86efac; border-color: #166534; }
    .q-btn.wrong { background: #7f1d1d; color: #fca5a5; border-color: #991b1b; }
    .q-btn.flagged { background: #78350f; color: #fbbf24; border-color: #b45309; }
}