:root {
    --quiz-primary: #315cf6;
    --quiz-soft: #f4f7ff;
    --quiz-dark: #121826;
}

body {
    min-height: 100vh;
}

.public-bg {
    background: radial-gradient(circle at top left, #e3ecff, transparent 34%), linear-gradient(135deg, #f8fbff 0%, #eef3ff 100%);
}

.quiz-bg,
.admin-bg {
    background: #f6f8fb;
}

.admin-login-bg {
    background: linear-gradient(135deg, #111827 0%, #1f2937 100%);
}

.code-card,
.login-card {
    max-width: 460px;
    border-radius: 1.25rem;
}

.app-mark,
.finish-icon {
    width: 64px;
    height: 64px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    background: var(--quiz-primary);
    color: #fff;
    font-weight: 800;
    font-size: 1.7rem;
    box-shadow: 0 14px 30px rgba(49, 92, 246, .25);
}

.finish-icon {
    background: #198754;
}

.code-input,
.code-input-admin,
.code-badge {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    letter-spacing: .14em;
    font-weight: 800;
}

.code-badge {
    display: inline-flex;
    align-items: center;
    padding: .25rem .5rem;
    border-radius: .5rem;
    background: #eef3ff;
    color: #1f3fc7;
    letter-spacing: .1em;
}

.quiz-card {
    border-radius: 1.2rem;
    overflow: hidden;
}

.question-text {
    font-size: 1.25rem;
    line-height: 1.55;
}

.answer-option {
    display: block;
    padding: .9rem 1rem .9rem 2.7rem;
    border: 1px solid #dee2e6;
    border-radius: .8rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.answer-option:hover {
    border-color: #9eb2ff;
    background: var(--quiz-soft);
}

.answer-option .form-check-input {
    margin-left: -1.65rem;
}

.timer-pill {
    padding: .55rem .85rem;
    border-radius: 999px;
    background: #fff3cd;
    color: #7a5200;
    border: 1px solid #ffe69c;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.score-box {
    width: min(260px, 100%);
    padding: 1.25rem;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
}

.stat-card {
    border: 0;
    box-shadow: 0 .25rem 1rem rgba(15, 23, 42, .06);
}

.table td,
.table th {
    vertical-align: middle;
}

pre {
    white-space: pre-wrap;
}

@media (max-width: 576px) {
    .question-text {
        font-size: 1.1rem;
    }
    .card-body.p-4,
    .card-body.p-md-5 {
        padding: 1.25rem !important;
    }
}

.timer-pill.text-danger {
    background: #f8d7da;
    color: #842029;
    border-color: #f5c2c7;
    animation: timerPulse 1s ease-in-out infinite;
}

@keyframes timerPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .65; }
}

.live-badge {
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}

#examBanner {
    border-radius: .75rem;
    border: 1.5px solid #ffc107;
}

.site-logo {
    object-fit: contain;
    display: inline-block;
}

.navbar-logo {
    filter: brightness(0) invert(1);
}

@media (prefers-color-scheme: dark) {
    .navbar-logo {
        filter: brightness(0) invert(1);
    }
}