<style>
        body { font-family: system-ui, -apple-system, sans-serif; }

.question-text,
.option-text {
    white-space: pre-wrap;
    word-wrap: break-word;
}

        .question-text, .options, * {  /* Yoki faqat test bo'limiga qo'llang */
            user-select: none;  /* Matn belgilashni o'chirish */
            -webkit-user-select: none;  /* Safari uchun */
            -moz-user-select: none;     /* Firefox uchun */
            -ms-user-select: none;      /* IE uchun */
        }

            .fixed-bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-top: 1px solid #e5e7eb;
            padding: 1rem 0;
            z-index: 30;
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
        }
        .animate-fadeIn {
            animation: fadeIn 0.3s ease-out;
        }
        
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        

        .nav-buttons {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 4rem; 
        }
.question-number {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    /* Hover uchun joy */
    margin: 1px;
}

 .question-number:hover {
            transform: scale(1.1);
        }
.question-unanswered {
    background: #f3f4f6;
    color: #6b7280;
    border-color: #e5e7eb;
}


.question-unanswered:hover {
    background: #e5e7eb;
    border-color: #d1d5db;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 10;
}

.question-answered {
    background: #dcfce7;
    color: #16a34a;
    border-color: #86efac;
}

.question-answered:hover {
    background: #bbf7d0;
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    z-index: 10;
}

.question-current {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    border-color: #1d4ed8;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.5);
    transform: scale(1.08);
    z-index: 5;
}

.question-current:hover {
    transform: scale(1.12);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.6);
    z-index: 10;
}

.overflow-y-auto::-webkit-scrollbar {
    width: 8px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: #f9fafb;
    border-radius: 10px;
}
.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

        .timer-warning {
            animation: pulse 1s infinite;
        }

        .content-with-sticky-footer {
            padding-bottom: 100px;
        }   



        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        /* Modal animatsiyalari */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideIn {
            from { 
                opacity: 0;
                transform: translateY(-20px) scale(0.95);
            }
            to { 
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

    </style>