:root {
            /* Light mode variables */
            --background-color: #ffffff;
            --text-color: #333333;
            --container-bg: #f9f9f9;
            --option-bg: #e3f2fd;
            --option-border: #90caf9;
            --option-hover: #bbdefb;
            --correct-bg: #c8e6c9;
            --correct-color: #2e7d32;
            --incorrect-bg: #ffcdd2;
            --incorrect-color: #c62828;
            --skipped-color: #ff9800;
            --button-bg: #2196f3;
            --button-color: white;
            --disabled-button: #bdbdbd;
            --score-container: #e8f5e9;
            --json-sample-bg: #f5f5f5;
            --modal-bg: #fff;
            --modal-overlay: rgba(0,0,0,0.7);
            
            /* Font variables */
            --font-primary: "Montserrat";
            --font-mono: "Montserrat";
            --font-weight-normal: 400;
            --font-weight-medium: 500;
            --font-weight-bold: 600;
        }
        
        /* Dark mode variables */
        [data-theme="dark"] {
            --background-color: #1e1e2e;
            --text-color: #cdd6f4;
            --container-bg: #2a2b3c;
            --option-bg: #313244;
            --option-border: #45475a;
            --option-hover: #585b70;
            --correct-bg: #294c3d;
            --correct-color: #a6e3a1;
            --incorrect-bg: #5e3c40;
            --incorrect-color: #f38ba8;
            --skipped-color: #fab387;
            --button-bg: #89b4fa;
            --button-color: #1e1e2e;
            --disabled-button: #45475a;
            --score-container: #313244;
            --json-sample-bg: #1e1e2e;
            --modal-bg: #313244;
            --modal-overlay: rgba(0,0,0,0.85);
        }
        
        /* Fireworks animation */
        .pyro {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 999;
            pointer-events: none;
            overflow: hidden;
        }
        
        .pyro > .before, .pyro > .after {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            box-shadow: 0 0 #fff;
            animation: 1.25s bang ease-out infinite backwards, 1.25s gravity ease-in infinite backwards, 6.5s position linear infinite backwards;
        }
        
        .pyro > .after {
            animation-delay: 0.4s, 0.4s, 0.4s;
            animation-duration: 1.5s, 1.5s, 7s;
        }
        
        @keyframes bang {
            from {
                box-shadow: 0 0 #fff;
            }
            to {
                box-shadow: 
                -70px -120.67px #ff0055, 
                -100px -90px #ff9500, 
                60px -160px #00ff73, 
                30px -170px #ff0004, 
                -130px -160px #ff7300, 
                -60px -120px #00ffb3, 
                -80px -90px #ff0400, 
                140px -70px #ff9900, 
                40px -100px #ff0044, 
                -90px -50px #0099ff, 
                80px -120px #ff0400, 
                110px -130px #00ff11, 
                -120px -110px #ff8800, 
                -50px -70px #0400ff, 
                60px -80px #0026ff, 
                -110px -90px #ff5900, 
                -80px -60px #ffae00, 
                170px -90px #ff6600, 
                -80px -40px #ff004c, 
                120px -70px #00ffd5,
                -120px -20px #8400ff, 
                140px -30px #ffee00,
                -100px 20px #ff2f00,
                120px 10px #2bff00,
                -30px -50px #ff8800;
                transform: translate(0, 0);
            }
        }
        
        @keyframes gravity {
            to {
                transform: translateY(300px);
                opacity: 0;
            }
        }
        
        @keyframes position {
            0%, 14.9% {
                margin-top: 5%;
                margin-left: 20%;
            }
            15%, 29.9% {
                margin-top: 10%;
                margin-left: 40%;
            }
            30%, 44.9% {
                margin-top: 8%;
                margin-left: 60%;
            }
            45%, 59.9% {
                margin-top: 12%;
                margin-left: 30%;
            }
            60%, 74.9% {
                margin-top: 5%;
                margin-left: 70%;
            }
            75%, 89.9% {
                margin-top: 15%;
                margin-left: 50%;
            }
            90%, 99.9% {
                margin-top: 10%;
                margin-left: 20%;
            }
        }
        
        /* Sparkles animation */
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #fff;
            box-shadow: 0 0 10px 2px #ffeb3b, 0 0 20px 4px #ffeb3b;
            animation: sparkle 1.5s ease-in-out infinite;
            opacity: 0;
            z-index: 1000;
        }
        
        @keyframes sparkle {
            0% {
                transform: scale(0) rotate(0deg);
                opacity: 0;
            }
            50% {
                transform: scale(1) rotate(180deg);
                opacity: 1;
            }
            100% {
                transform: scale(0) rotate(360deg);
                opacity: 0;
            }
        }
        
        body {
            font-family: "Montserrat";
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #ffffff;
            color: var(--text-color);
            line-height: 1.6;
            transition: all 0.3s ease;
            font-weight: var(--font-weight-normal);
            letter-spacing: 0.015em;
        }

        h1, h2, h3 {
            font-weight: var(--font-weight-bold);
            margin-bottom: 1rem;
            letter-spacing: -0.01em;
        }

        h1 {
            font-size: 2.2rem;
        }

        h2 {
            font-size: 1.8rem;
        }

        .quiz-container {
            background-color: var(--container-bg);
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 25px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        .question {
            font-size: 1.25rem;
            font-weight: var(--font-weight-bold);
            margin-bottom: 20px;
            line-height: 1.5;
        }
        .options {
            margin-top: 15px;
        }
        .option {
            margin: 10px 0;
            padding: 14px 16px;
            background-color: var(--option-bg);
            border: 1px solid var(--option-border);
            border-radius: 8px;
            width: 100%;
            text-align: left;
            cursor: pointer;
            transition: all 0.2s ease;
            color: var(--text-color);
            font-size: 1.05rem;
            font-weight: var(--font-weight-medium);
            letter-spacing: 0.01em;
        }
        .option:hover {
            background-color: var(--option-hover);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
        }
        .result {
            font-weight: var(--font-weight-medium);
            margin-top: 20px;
            padding: 15px;
            border-radius: 8px;
            line-height: 1.6;
        }
        .correct {
            background-color: var(--correct-bg);
            color: var(--correct-color);
            border-left: 4px solid var(--correct-color);
        }
        .incorrect {
            background-color: var(--incorrect-bg);
            color: var(--incorrect-color);
            border-left: 4px solid var(--incorrect-color);
        }
        .navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            gap: 10px;
        }
        .nav-button {
            padding: 12px 18px;
            background-color: var(--button-bg);
            color: var(--button-color);
            border: none;
            border-radius: 8px;
            cursor: pointer;
            margin: 0 5px;
            font-weight: var(--font-weight-medium);
            font-size: 1rem;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            font-family: "Montserrat";
        }
        .nav-button:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .nav-button:disabled {
            background-color: var(--disabled-button);
            cursor: not-allowed;
            opacity: 0.7;
        }
        .skip-button {
            background-color: var(--skipped-color);
            color: #1e1e2e;
        }
        .try-again-button {
            background-color: #cba6f7;
            color: #1e1e2e;
        }
        .progress {
            text-align: left;
            margin-bottom: 20px;
            margin-left: 20px;
            font-size: 1.1rem;
            font-weight: var (--font-weight-medium);
        }
        .score-container {
            background-color: var (--score-container);
            padding: 16px;
            border-radius: 10px;
            margin-bottom: 25px;
            display: flex;
            justify-content: space-between;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }
        
        .score {
            font-weight: var(--font-weight-bold);
            font-size: 1.1rem;
        }
        .correct-score {
            color: var(--correct-color);
        }
        .incorrect-score {
            color: var(--incorrect-color);
        }
        .skipped-score {
            color: var(--skipped-color);
        }
        .top-actions {
            display: flex;
            justify-content: space-between;
            margin-bottom: 25px;
            gap: 20px;
            flex-wrap: wrap;
            font-family: "Montserrat";
            font-weight: 500;
        }
        .top-actions * {
            font-family: inherit;
            font-weight: inherit;
        }
        .action-button {
            padding: 10px 16px;
            border-radius: 8px;
            border: none;
            cursor: pointer;
            font-weight: var(--font-weight-medium);
            font-size: 1rem;
            transition: all 0.2s ease;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        .action-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .restart-button {
            background-color: #f38ba8;
            color: #1e1e2e;
        }
        .review-button {
            background-color: #a6e3a1;
            color: #1e1e2e;
        }
        /* Congratulations Modal */
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: var(--modal-overlay);
            overflow: auto;
        }
        .modal-content {
            background-color: var(--modal-bg);
            margin: 10% auto;
            padding: 25px 30px;
            width: 80%;
            max-width: 600px;
            border-radius: 12px;
            text-align: center;
            position: relative;
            animation: modalFadeIn 0.5s;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        @keyframes modalFadeIn {
            from {opacity: 0; transform: translateY(-50px);}
            to {opacity: 1; transform: translateY(0);}
        }
        .close-modal {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 28px;
            cursor: pointer;
            color: var(--text-color);
            transition: color 0.2s;
        }
        .close-modal:hover {
            color: var(--button-bg);
        }
        .modal h2 {
            color: var(--correct-color);
            margin-bottom: 20px;
            font-size: 2rem;
        }
        .modal p {
            font-size: 1.2rem;
            margin-bottom: 20px;
            line-height: 1.6;
        }
        .score-details {
            display: flex;
            justify-content: space-around;
            margin: 25px 0;
            gap: 15px;
            flex-wrap: wrap; /* Add flex-wrap for better mobile display */
        }
        .score-box {
            padding: 18px 15px;
            border-radius: 10px;
            width: 28%;
            font-weight: var(--font-weight-bold);
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            transition: transform 0.2s;
        }
        
        .score-box:hover {
            transform: translateY(-3px);
        }
        
        /* Enhanced score box labels */
        .score-box br {
            display: block;
            content: "";
            margin-top: 8px;
        }
        
        /* Score values */
        .score-box span {
            font-size: 2rem;
            font-weight: 700;
            display: block;
            margin-top: 8px;
        }
        
        /* Dark mode specific enhancements for score boxes */
        [data-theme="dark"] .score-box {
            color: #cdd6f4;
            text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(205, 214, 244, 0.1);
        }
        
        /* Specific score box colors and text colors */
        .correct-score-box {
            background-color: var(--correct-bg);
            color: var(--correct-color);
            border-top: 4px solid var(--correct-color);
        }
        
        .incorrect-score-box {
            background-color: var(--incorrect-bg);
            color: var (--incorrect-color);
            border-top: 4px solid var (--incorrect-color);
        }
        
        .skipped-score-box {
            background-color: #3f3223;
            color: var(--skipped-color);
            border-top: 4px solid var(--skipped-color);
        }
        
        .restart-quiz-btn {
            background-color: var(--button-bg);
            color: var(--button-color);
            padding: 14px 22px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1rem;
            margin-top: 25px;
            font-weight: var(--font-weight-medium);
            transition: all 0.2s;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .restart-quiz-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
        }
        
        /* File upload styling */
        .upload-container {
            background-color: var(--score-container);
            padding: 25px;
            border-radius: 12px;
            margin-bottom: 25px;
            text-align: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
            border-left: 5px solid #89b4fa;
        }
        
        .upload-container h2 {
            color: var(--text-color);
            margin-bottom: 20px;
            font-size: 1.8rem;
        }
        
        .file-upload {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }
        
        .upload-btn, .sample-btn {
            background-color: #a6e3a1;
            color: #1e1e2e;
            padding: 12px 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: var (--font-weight-medium);
            font-size: 1rem;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
        .upload-btn {
            background-color: #89b4fa;
        }
        .sample-btn {
            background-color: #a6e3a1;
        }
        
        .upload-btn:hover, .sample-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
        }
        
        .hidden {
            display: none;
        }
        .json-sample {
            position: relative;
            padding-top: 45px !important;
            background-color: var(--json-sample-bg);
            border-radius: 8px;
            margin: 15px 0;
            text-align: left;
            overflow: hidden; /* Change from overflow-x to prevent scrolling over the fixed header */
            max-height: 250px;
            color: var(--text-color);
            border: 1px solid var(--option-border);
            font-family: "Montserrat";
            font-size: 0.95rem;
        }

        /* Ensure the content is scrollable */
        .json-sample pre {
            overflow-y: auto;
            max-height: 210px; /* Adjust for header space */
            padding: 8px;
            padding-top: 0;
            margin-top: 0;
        }

        .sample-actions {
            position: absolute; /* Change from sticky to absolute */
            top: 0;
            right: 0;
            left: 0;
            z-index: 10;
            display: flex;
            justify-content: flex-end;
            background-color: var(--json-sample-bg);
            padding: 8px;
            border-bottom: 1px solid var(--option-border);
        }

        /* Ensure prompt display follows the same pattern */
        #prompt-display {
            position: relative;
            padding-top: 45px !important;
            overflow: hidden;
        }

        #prompt-display pre {
            overflow-y: auto;
            max-height: 210px;
            padding: 8px;
            padding-top: 0;
            margin-top: 0;
        }

        #prompt-display .sample-actions {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
        }
        
        .error-message {
            color: var(--incorrect-color);
            font-weight: var(--font-weight-medium);
            margin: 12px 0;
            padding: 10px;
            background-color: var(--incorrect-bg);
            border-radius: 6px;
            border-left: 4px solid var(--incorrect-color);
        }
        
        /* Input method toggle */
        .input-toggle {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
            gap: 15px;
        }
        .toggle-btn {
            background-color: var(--disabled-button);
            color: var(--text-color);
            padding: 12px 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: var(--font-weight-medium);
            transition: all 0.2s;
            font-size: 1rem;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }
        .toggle-btn.active {
            background-color: #a6e3a1;
            color: #1e1e2e;
        }
        
        .toggle-btn:hover {
            transform: translateY(-2px);
        }
        
        .json-input {
            width: 100%;
            min-height: 200px;
            padding: 16px;
            border: 1px solid var(--option-border);
            border-radius: 8px;
            font-family: "Montserrat";
            font-size: 0.95rem;
            resize: vertical;
            margin-bottom: 15px;
            background-color: var(--container-bg);
            color: var(--text-color);
            box-sizing: border-box;
            max-width: 100%;
            transition: border-color 0.2s;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .json-input:focus {
            border-color: var(--button-bg);
            outline: none;
            box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.3);
        }
        
        .json-paste-container {
            margin-bottom: 20px;
            width: 100%;
        }
        .paste-actions {
            display: flex;
            justify-content: space-between;
            gap: 15px;
        }
        .json-btn {
            padding: 12px 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: var (--font-weight-medium);
            font-size: 1rem;
            transition: all 0.2s;
            background-color: var(--button-bg);
            color: var (--button-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }
        .json-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        .clear-btn {
            background-color: #f38ba8;
        }
        
        /* Copy button styling */
        .sample-actions {
            position: absolute; /* Change from sticky to absolute */
            top: 0;
            right: 0;
            left: 0;
            z-index: 10;
            display: flex;
            justify-content: flex-end;
            background-color: var(--json-sample-bg);
            padding: 8px;
            border-bottom: 1px solid var(--option-border);
        }

        .copy-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 6px 12px;
            background-color: var(--button-bg);
            color: var(--button-color);
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-size: 0.9rem;
            font-weight: var(--font-weight-medium);
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            white-space: nowrap;
        }

        .copy-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }

        .copy-btn svg {
            width: 14px;
            height: 14px;
        }

        /* Dark mode enhancements */
        [data-theme="dark"] .sample-actions {
            background-color: var(--json-sample-bg);
            border-bottom-color: var(--option-border);
        }

        [data-theme="dark"] .copy-btn {
            background-color: var(--button-bg);
            color: var(--button-color);
        }

        /* Ensure prompt display copy button stays visible */
        #prompt-display {
            position: relative;
            padding-top: 45px !important;
            overflow: hidden;
        }

        #prompt-display pre {
            overflow-y: auto;
            max-height: 210px;
            padding: 8px;
            padding-top: 0;
            margin-top: 0;
        }

        #prompt-display .sample-actions {
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
        }
        
        /* Add button styling for change quiz button */
        .change-quiz-btn {
            background-color: #cba6f7;
            color: #1e1e2e;
            padding: 12px 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: var(--font-weight-medium);
            font-size: 1rem;
            transition: all 0.2s;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
        }
        
        .change-quiz-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        /* Animation for hide/show */
        .fade-in {
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        /* Button icon styling */
        .btn-icon {
            display: inline-flex;
            align-items: center;
            gap: 10px;
        }
        .btn-icon svg {
            width: 18px;
            height: 18px;
        }
        
        /* Timer styling */
        .timer-container {
            background-color: var(--option-bg);
            padding: 16px 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
            border-left: 4px solid var(--button-bg);
        }
        
        .timer-display {
            font-size: 1.3rem;
            font-weight: var(--font-weight-bold);
            color: var(--text-color);
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .timer-warning {
            color: #fab387;
        }
        
        .timer-danger {
            color: #f38ba8;
            animation: pulse 1s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        .timer-options {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 1rem;
        }
        
        .timer-toggle {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .timer-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-weight: var(--font-weight-medium);
            font-size: 1.05rem;
        }

        .timer-label svg {
            width: 20px;
            height: 20px;
        }
        
        /* Dark mode toggle styling */
        .theme-toggle-container {
            position: absolute;
            top: 25px;
            right: 25px;
            display: flex;
            align-items: center;
            gap: 10px;
            background-color: var(--container-bg);
            padding: 8px 12px;
            border-radius: 30px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        .theme-toggle {
            position: relative;
            display: inline-block;
            width: 60px;
            height: 30px;
        }
        
        .theme-toggle input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .theme-slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #45475a;
            transition: .4s;
            border-radius: 34px;
        }
        
        .theme-slider:before {
            position: absolute;
            content: "";
            height: 22px;
            width: 22px;
            left: 4px;
            bottom: 4px;
            background-color: #f9f9fb;
            transition: .4s;
            border-radius: 50%;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        input:checked + .theme-slider {
            background-color: #89b4fa;
        }
        
        input:focus + .theme-slider {
            box-shadow: 0 0 1px #89b4fa;
        }
        
        input:checked + .theme-slider:before {
            transform: translateX(30px);
            background-color: #1e1e2e;
        }
        
        .theme-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 24px;
            width: 24px;
            color: var(--text-color);
        }
        
        select, option {
            background-color: var(--container-bg);
            color: var(--text-color);
            border: 1px solid var(--option-border);
            padding: 8px 12px;
            border-radius: 6px;
            font-family: "Montserrat";
            font-size: 1rem;
            cursor: pointer;
            transition: border-color 0.2s, box-shadow 0.2s;
        }
        
        select:focus {
            outline: none;
            border-color: var(--button-bg);
            box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.3);
        }

        /* Modern scrollbar */
        ::-webkit-scrollbar {
            width: 12px;
            height: 12px;
        }

        ::-webkit-scrollbar-track {
            background: var(--container-bg);
            border-radius: 8px;
        }

        ::-webkit-scrollbar-thumb {
            background: var(--option-border);
            border-radius: 8px;
            border: 3px solid var(--container-bg);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--button-bg);
        }
        
        /* Apply modern fonts */
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
        
        /* Other elements styling improvements */
        #file-name {
            font-weight: var(--font-weight-medium);
            padding: 6px 10px;
            background-color: var(--container-bg);
            border-radius: 6px;
            display: inline-block;
            margin-top: 5px;
        }
        
        /* Toggle switch for timer */
        .toggle-switch {
            position: relative;
            display: inline-block;
            width: 48px;
            height: 24px;
        }
        
        .toggle-switch input {
            opacity: 0;
            width: 0;
            height: 0;
        }
        
        .slider {
            position: absolute;
            cursor: pointer;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #45475a;
            transition: .4s;
            border-radius: 24px;
        }
        
        .slider:before {
            position: absolute;
            content: "";
            height: 18px;
            width: 18px;
            left: 3px;
            bottom: 3px;
            background-color: #f9f9fb;
            transition: .4s;
            border-radius: 50%;
        }
        
        input:checked + .slider {
            background-color: #a6e3a1;
        }
        
        input:checked + .slider:before {
            transform: translateX(24px);
        }

        /* Add new styles for selected answers */
        .option.correct-answer {
            background-color: var(--correct-bg) !important;
            color: var (--correct-color) !important;
            border: 2px solid var(--correct-color) !important;
            font-weight: var(--font-weight-bold);
            box-shadow: 0 0 0 1px var(--correct-color);
        }

        .option.incorrect-answer {
            background-color: var(--incorrect-bg) !important;
            color: var(--incorrect-color) !important;
            border: 2px solid var(--incorrect-color) !important;
            font-weight: var(--font-weight-bold);
            box-shadow: 0 0 0 1px var(--incorrect-color);
        }

        .option.user-selected {
            position: relative;
            padding-right: 40px;
        }

        .option.user-selected::after {
            content: "✓";
            position: absolute;
            right: 15px;
            font-weight: bold;
            font-size: 1.2rem;
        }

        .option.correct-answer.user-selected::after {
            content: "✓";
            color: var(--correct-color);
        }

        .option.incorrect-answer.user-selected::after {
            content: "✗";
            color: var (--incorrect-color);
        }

        /* Enhanced visibility for dark mode */
        [data-theme="dark"] .option.correct-answer {
            background-color: rgba(166, 227, 161, 0.25) !important;
            text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
        }

        [data-theme="dark"] .option.incorrect-answer {
            background-color: rgba(243, 139, 168, 0.25) !important;
            text-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
        }

        /* Enhanced styles for result messages with stronger contrast */
        [data-theme="dark"] .result {
            padding: 18px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }

        [data-theme="dark"] .result span.correct,
        [data-theme="dark"] .result span.incorrect {
            font-size: 1.1rem;
            font-weight: var(--font-weight-bold);
            padding: 5px 10px;
            border-radius: 4px;
            display: inline-block;
            margin-bottom: 10px;
        }

        [data-theme="dark"] .result span.correct {
            background-color: rgba(166, 227, 161, 0.2);
            color: var(--correct-color);
        }

        [data-theme="dark"] .result span.incorrect {
            background-color: rgba(243, 139, 168, 0.2);
            color: var(--incorrect-color);
        }

        /* Tutorial overlay styling */
        .tutorial-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 1000;
            display: none;
            justify-content: center;
            align-items: center;
            animation: fadeIn 0.5s ease-in-out;
        }
        
        .tutorial-container {
            width: 90%;
            max-width: 600px;
            background-color: var(--modal-bg);
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            position: relative;
        }
        
        .tutorial-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-height: 80vh;
            overflow-y: auto;
            gap: 20px;
        }
        
        .tutorial-step {
            display: none;
            text-align: center;
            animation: fadeIn 0.3s ease-in-out;
        }
        
        .tutorial-step.active {
            display: block;
        }
        
        .tutorial-image {
            width: 100%;
            max-width: 400px;
            border-radius: 8px;
            margin: 15px 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }
        
        .tutorial-navigation {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
            width: 100%;
        }
        
        .tutorial-nav-button {
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            background-color: var(--button-bg);
            color: var(--button-color);
            font-weight: var(--font-weight-bold);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: all 0.2s ease;
        }
        
        .tutorial-nav-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        }
        
        .tutorial-nav-button:disabled {
            background-color: var(--disabled-button);
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }
        
        .tutorial-progress {
            display: flex;
            gap: 8px;
            margin-top: 20px;
            justify-content: center;
        }
        
        .tutorial-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: var(--option-border);
            transition: all 0.2s ease;
        }
        
        .tutorial-dot.active {
            background-color: var(--button-bg);
            transform: scale(1.2);
        }
        
        .skip-tutorial {
            position: absolute;
            top: 10px;
            right: 10px;
            background: transparent;
            border: none;
            color: var(--text-color);
            font-size: 1rem;
            cursor: pointer;
            opacity: 0.7;
            transition: opacity 0.2s ease;
        }
        
        .skip-tutorial:hover {
            opacity: 1;
        }
        
        .tutorial-tip {
            background-color: var(--option-bg);
            padding: 12px 15px;
            border-radius: 8px;
            border-left: 4px solid var(--button-bg);
            margin: 15px 0;
            text-align: left;
        }
        
        .no-tutorial-checkbox {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
            justify-content: center;
        }
        
        /* Help button styling */
        .help-button-container {
            position: fixed;
            bottom: 25px;
            right: 25px;
            z-index: 900;
        }
        
        .help-button {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: var(--button-bg);
            color: var(--button-color);
            border: none;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
        }
        
        .help-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        /* General mobile responsiveness */
        @media (max-width: 768px) {
            body {
                padding: 15px;
                max-width: 100%;
            }

            .quiz-container, .upload-container {
                padding: 15px;
                margin: 0 auto;
                width: 95%;
                box-sizing: border-box;
            }

            h1 {
                font-size: 1.8rem;
                text-align: center;
            }

            h2 {
                font-size: 1.5rem;
                text-align: center;
            }

            .option {
                padding: 12px;
                font-size: 1rem;
                display: block;
                width: 100%;
                box-sizing: border-box;
                margin: 10px auto;
            }

            .navigation {
                flex-wrap: wrap;
                gap: 8px;
                justify-content: center;
            }

            .nav-button {
                flex: 1 1 45%;
                min-width: 120px;
                justify-content: center;
            }

            .top-actions {
                gap: 8px;
                justify-content: center;
            }

            .action-button {
                flex: 1 1 45%;
                min-width: 120px;
                justify-content: center;
            }

            .score-container {
                flex-wrap: wrap;
                gap: 10px;
                justify-content: center;
            }

            .score {
                width: 45%;
                text-align: center;
                flex: 1 1 45%;
                min-width: 120px;
            }

            .timer-container {
                flex-direction: column;
                gap: 10px;
                align-items: center;
            }

            .timer-options {
                flex-direction: column;
                gap: 8px;
                align-items: center;
            }

            .input-toggle {
                flex-wrap: wrap;
                justify-content: center;
            }

            .toggle-btn {
                flex: 1 1 100%;
                margin-bottom: 8px;
                max-width: 200px;
            }

            /* Center all buttons in flex containers */
            .paste-actions, 
            div[style*="display: flex"] {
                justify-content: center;
                flex-wrap: wrap;
            }

            /* Make buttons more visible with consistent sizing */
            .json-btn, .sample-btn, .action-button, .upload-btn, .ai-generate-btn {
                min-width: 140px;
                margin: 5px;
                justify-content: center;
            }
        }

        /* Small mobile devices */
        @media (max-width: 480px) {
            body {
                padding: 10px;
            }

            h1 {
                font-size: 1.6rem;
                margin-top: 50px; /* Make room for theme toggle */
            }

            h2 {
                font-size: 1.3rem;
            }

            .option {
                padding: 12px;
                font-size: 0.95rem;
            }

            .nav-button, .action-button {
                padding: 10px;
                font-size: 0.9rem;
                flex: 1 1 100%;
                min-width: 100%;
                margin: 5px 0;
            }

            .score {
                width: 100%;
                min-width: 100%;
                margin: 3px 0;
            }

            .theme-toggle-container {
                position: absolute;
                top: 10px;
                right: 10px;
                margin: 0;
                justify-content: center;
                width: auto;
            }

            .modal-content {
                width: 95%;
                margin: 10% auto;
                padding: 15px;
                overflow-x: hidden; /* Prevent horizontal scrolling */
            }

            .score-box {
                width: 90%;
                max-width: 250px;
                margin: 5px auto;
            }

            /* Add space between template buttons */
            #sample-button, #download-sample, #generate-prompt-button {
                margin: 5px;
                min-width: 90%;
            }

            /* Center prompt display elements */
            #prompt-modal label,
            #prompt-modal input,
            #prompt-modal textarea {
                width: 100%;
                box-sizing: border-box;
                margin-left: auto;
                margin-right: auto;
            }

            #prompt-modal .modal-content {
                padding: 15px 10px;
            }

            /* Adjust chatGPT suggestion for mobile */
            .chatgpt-suggestion {
                max-width: 100%;
                box-sizing: border-box;
            }
            
            .ai-option {
                min-width: 45%;
                margin: 3px;
                justify-content: center;
            }
        }

        /* Improve the landing page center alignment */
        @media (max-width: 768px) {
            .upload-container h2 {
                text-align: center;
            }
            
            .timer-label {
                justify-content: center;
            }
            
            .json-input {
                display: block;
                margin-left: auto;
                margin-right: auto;
            }
            
            .timer-container, .score-container {
                text-align: center;
            }
            
            .progress {
                font-weight: bold;
            }
            
            /* Fix for overflowing content */
            pre, code {
                white-space: pre-wrap;
                word-break: break-word;
            }
            
            /* Center align flex items */
            .timer-toggle {
                margin: 0 auto;
            }
        }

        /* Landscape orientation */
        @media (max-width: 768px) and (orientation: landscape) {
            body {
                padding: 5px;
            }

            .quiz-container, .upload-container {
                padding: 10px;
            }

            .option {
                padding: 8px;
            }

            .nav-button, .action-button {
                padding: 6px 8px;
            }

            .score-container {
                gap: 5px;
            }

            .navigation {
                gap: 5px;
            }

            .top-actions {
                gap: 5px;
            }
        }

        /* AI Generator Button styling */
        .ai-generate-btn {
            background: linear-gradient(135deg, #6b46c1 0%, #a78bfa 100%);
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: var(--font-weight-medium);
            font-size: 1rem;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(167, 139, 250, 0.4);
            position: relative;
            overflow: hidden;
            z-index: 1;
            animation: pulse-shadow 2s infinite;
        }
        
        /* ChatGPT suggestion notification styling - modified for inline display */
        .chatgpt-suggestion {
            position: relative;
            margin: 20px auto 0;
            background: linear-gradient(135deg, #10a37f 0%, #0a8c6a 100%);
            color: white;
            padding: 12px 20px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(16, 163, 127, 0.5);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            font-weight: var(--font-weight-medium);
            font-size: 1rem;
            transform: translateY(10px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            max-width: 90%;
            flex-wrap: wrap;
        }
        
        .chatgpt-suggestion.show {
            transform: translateY(0);
            opacity: 1;
            animation: pulse-chatgpt 2s infinite;
        }
        
        .chatgpt-suggestion .suggestion-title {
            width: 100%;
            text-align: center;
            margin-bottom: 10px;
            font-size: 1.1rem;
        }
        
        .ai-option {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 8px 16px;
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.2s;
            margin: 0 5px;
        }
        
        .ai-option:hover {
            background-color: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }
        
        .ai-option .ai-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }
        
        .gemini-option {
            background: rgba(82, 56, 156, 0.3);
        }
        
        .gemini-option:hover {
            background: rgba(82, 56, 156, 0.5);
        }
        
        @keyframes pulse-chatgpt {
            0% {
                box-shadow: 0 4px 12px rgba(16, 163, 127, 0.5);
            }
            50% {
                box-shadow: 0 4px 18px rgba(16, 163, 127, 0.8);
            }
            100% {
                box-shadow: 0 4px 12px rgba(16, 163, 127, 0.5);
            }
        }
        
        .chatgpt-suggestion .close-suggestion {
            position: absolute;
            top: -8px;
            right: -8px;
            background: rgba(0, 0, 0, 0.3);
            border-radius: 50%;
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .chatgpt-suggestion:hover .close-suggestion {
            opacity: 1;
        }
        
        [data-theme="dark"] .chatgpt-suggestion {
            box-shadow: 0 4px 15px rgba(16, 163, 127, 0.7);
        }
        
        /* Add ChatGPT suggestion notification styling */
        .chatgpt-suggestion {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: linear-gradient(135deg, #10a37f 0%, #0a8c6a 100%);
            color: white;
            padding: 10px 20px;
            border-radius: 50px;
            box-shadow: 0 4px 20px rgba(16, 163, 127, 0.5);
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: var(--font-weight-medium);
            font-size: 1rem;
            cursor: pointer;
            z-index: 1000;
            transform: translateY(100px);
            opacity: 0;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }
        
        .chatgpt-suggestion.show {
            transform: translateY(0);
            opacity: 1;
            animation: bounce 1s 0.4s;
        }
        
        .chatgpt-suggestion .chatgpt-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
        }
        
        .chatgpt-suggestion .close-suggestion {
            position: absolute;
            top: -10px;
            right: -10px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 50%;
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s;
        }
        
        .chatgpt-suggestion:hover .close-suggestion {
            opacity: 1;
        }
        
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0);
            }
            40% {
                transform: translateY(-20px);
            }
            60% {
                transform: translateY(-10px);
            }
        }

        [data-theme="dark"] .chatgpt-suggestion {
            box-shadow: 0 4px 20px rgba(16, 163, 127, 0.7);
        }
        
        /* Media queries for suggestion notification */
        @media (max-width: 768px) {
            .chatgpt-suggestion {
                bottom: 20px;
                right: 20px;
                padding: 8px 16px;
                font-size: 0.9rem;
                gap: 8px;
            }
            
            .chatgpt-suggestion .chatgpt-icon {
                width: 24px;
                height: 24px;
            }
        }
        
        @media (max-width: 480px) {
            .chatgpt-suggestion {
                bottom: 15px;
                right: 15px;
                padding: 6px 12px;
                font-size: 0.85rem;
            }
            
            .chatgpt-suggestion .chatgpt-icon {
                width: 20px;
                height: 20px;
            }
        }

        .option-btn {
  cursor: pointer;
  margin: 5px 0;
  padding: 15px 15px;
  border: 1px solid var(--option-border);
  border-radius: 4px;
  background-color: var(--option-bg);
  color: var(--text-color);
  width: 100%;
  text-align: left;
  transition: background-color 0.3s, color 0.3s, border-left 0.3s;
  font-family: "Montserrat";
  font-weight: 500;
}

.option-btn:hover:not(:disabled) {
  background-color: var(--option-hover);
}

.option-btn.selected {
  outline: 3px solid var(--button-bg);
}

.option-btn.correct {
  background-color: var(--correct-bg);
  color: var(--correct-color);
  border-left: 4px solid var(--correct-color);
}

.option-btn.incorrect {
  background-color: var(--incorrect-bg);
  color: var(--incorrect-color);
  border-left: 4px solid var(--incorrect-color);
}

.highlight {
  font-size: 15px;
  margin-bottom: 20px;
  display: inline-block; 
}

#quiz-heading {
    text-align: center;
    font-family: "Montserrat";
    font-weight: 800;
    margin-top: 20px;
    margin-bottom: 50px;
}