:root {
    --cp-primary: #0F766E;
    --cp-secondary: #14B8A6;
    --cp-success: #22C55E;
    --cp-warning: #F59E0B;
    --cp-danger: #EF4444;
    --cp-bg: #F8FAFC;
    --cp-card: #FFFFFF;
    --cp-text: #111827;
    --cp-radius: 20px;
}

body.candidate-portal {
    background: var(--cp-bg);
    color: var(--cp-text);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.glass-card {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: var(--cp-radius);
    box-shadow: 0 10px 40px rgba(15, 118, 110, 0.08);
}

.cp-card {
    background: var(--cp-card);
    border-radius: var(--cp-radius);
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.06);
}

.touch-target {
    min-height: 48px;
    min-width: 48px;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in-up {
    animation: fadeInUp 0.35s ease-out;
}

@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.timer-danger { animation: pulse-soft 1s infinite; color: var(--cp-danger); }
.timer-warning { color: var(--cp-warning); }

.exam-body {
    user-select: none;
    -webkit-user-select: none;
    background: var(--cp-bg);
    padding-bottom: 88px;
}

.option-card {
    border: 2px solid #E5E7EB;
    border-radius: 16px;
    padding: 16px 18px;
    font-size: 17px;
    line-height: 1.5;
    transition: all 0.2s ease;
    cursor: pointer;
}

.option-card.selected {
    border-color: var(--cp-primary);
    background: rgba(20, 184, 166, 0.12);
    box-shadow: 0 0 0 1px var(--cp-primary);
}

.palette-btn { width: 44px; height: 44px; border-radius: 12px; font-weight: 600; font-size: 14px; }
.palette-answered { background: var(--cp-success); color: #fff; }
.palette-review { background: var(--cp-warning); color: #fff; }
.palette-skipped { background: var(--cp-danger); color: #fff; }
.palette-default { background: #E5E7EB; color: #374151; }
.palette-current { box-shadow: 0 0 0 3px var(--cp-primary); }

.save-toast {
    position: fixed;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 60;
}

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    border-radius: 12px;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.bottom-nav-safe {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (min-width: 1024px) {
    .candidate-shell { max-width: 480px; margin: 0 auto; }
}