.quiz-shell {
    background:
        radial-gradient(1100px 480px at 8% -10%, rgba(31, 170, 89, .28), transparent 55%),
        radial-gradient(800px 380px at 100% 0%, rgba(245, 193, 108, .16), transparent 50%),
        #07131c !important;
    color: #e8eef5;
}
.quiz-shell > header,
.quiz-shell header.bg-white,
.quiz-shell header.shadow,
.quiz-shell header.shadow-sm {
    background: rgba(7, 19, 28, .94) !important;
    border-color: rgba(255, 255, 255, .08) !important;
    box-shadow: none !important;
    color: #f8fafc;
    position: sticky;
    top: 0;
    z-index: 30;
}
.quiz-shell header h1,
.quiz-shell header .text-gray-800,
.quiz-shell header button,
.quiz-shell header a {
    color: #f8fafc !important;
}
.quiz-shell header p,
.quiz-shell header .text-gray-600,
.quiz-shell header .text-gray-500,
.quiz-shell header .header-stats,
.quiz-shell header .header-stats strong {
    color: #cbd5e1 !important;
}
.quiz-shell .bg-gray-200.h-2,
.quiz-shell .w-full.bg-gray-200 {
    background: rgba(255, 255, 255, .08) !important;
}
.quiz-shell #progress-bar {
    background: linear-gradient(90deg, #1faa59, #f5c16c) !important;
}
.quiz-shell .bg-white.rounded-xl,
.quiz-shell .bg-white.rounded-2xl,
.quiz-shell .rounded-xl.shadow-xl,
.quiz-shell .rounded-2xl.shadow-xl,
.quiz-shell .rounded-xl.shadow-lg,
.quiz-shell .rounded-xl.shadow {
    background: #ffffff !important;
    color: #102433;
    border-radius: 22px !important;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .28) !important;
}
.quiz-shell #next-button,
.quiz-shell button.bg-gradient-to-r {
    background: #1faa59 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    border: 0 !important;
}
.quiz-shell #previous-button {
    color: #e2e8f0 !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 999px !important;
}
.quiz-shell #previous-button:disabled {
    opacity: .45;
}
.quiz-shell #quiz-container {
    background: #ffffff;
    color: #102433;
    border-radius: 22px;
    padding: 18px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .28);
}
.quiz-shell #quiz-container,
.quiz-shell #quiz-container * ,
.quiz-shell .scrambled-word,
.quiz-shell .dropped-word,
.quiz-shell .drop-zone,
.quiz-shell .bg-white,
.quiz-shell .bg-white .text-gray-800,
.quiz-shell .bg-white .text-gray-700,
.quiz-shell .bg-white .text-gray-600,
.quiz-shell .bg-white .text-gray-500 {
    color: #102433;
}
.quiz-shell .scrambled-word,
.quiz-shell .dropped-word {
    color: #102433 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
}
.quiz-shell .bg-white button.text-white,
.quiz-shell #next-button,
.quiz-shell #check-answer-btn,
.quiz-shell button.bg-blue-500,
.quiz-shell button.bg-blue-600,
.quiz-shell button.bg-green-500,
.quiz-shell button.bg-green-600 {
    color: #ffffff !important;
}
.quiz-shell .container > .text-center,
.quiz-shell .container > .text-center * {
    color: #e8eef5 !important;
}
@media (max-width: 800px) {
    .quiz-shell header .h-16,
    .quiz-shell header .max-w-7xl > .flex {
        height: auto !important;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .quiz-shell header h1 { font-size: 18px !important; }
    .quiz-shell .container { padding: 12px !important; }
    .quiz-shell #quiz-container { padding: 12px; }
    .quiz-shell .flex.justify-between { flex-wrap: wrap; gap: 8px; }
    .quiz-shell #previous-button,
    .quiz-shell #next-button,
    .quiz-shell #check-answer-btn { width: 100%; }
}