.hero-section {
    background: linear-gradient(135deg, #0078d4 0%, #005a9e 100%);
    color: white;
}

.hero-section h1 {
    color: white !important;
}

.exam-interface {
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
}

.questions-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.drag-item {
    cursor: move;
    border: 2px dashed #ccc;
    border-radius: 0.25rem;
}

.drop-zone {
    min-height: 50px;
    border: 2px dashed #007bff;
    border-radius: 0.25rem;
}

.drag-item.dragging {
    opacity: 0.5;
}

.hotspot-image {
    position: relative;
    cursor: crosshair;
}

.hotspot-area {
    position: absolute;
    background: rgba(0, 123, 255, 0.3);
    border: 2px solid #007bff;
}

.timer-container {
    font-size: 1.2rem;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
    .questions-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}