.video-quiz-embed {
    /* This is the main container */
    width: 100%;
    
    /* (a) Set default panel color - new mid-grey */
    --vqz-panel-color: #4A5568;
    
    /* (d) This is the new container layout */
    background-color: var(--vqz-panel-color, #4A5568);
    border-radius: 8px;
    /* (d) Padding creates the "frame" */
    padding: 10px;
    box-sizing: border-box;
    
    /* Define Lucide icon SVGs as CSS variables for reuse. */
    --vqz-icon-pending: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-map-pin'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
    --vqz-icon-correct: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-check'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --vqz-icon-incorrect: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-x'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
    --vqz-icon-assisted: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-check-check'%3E%3Cpath d='M18 6 7 17l-5-5'/%3E%3Cpath d='m22 10-7.5 7.5L13 16'/%3E%3C/svg%3E");
    --vqz-icon-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-play-circle'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolygon points='10 8 16 12 10 16 10 8'/%3E%3C/svg%3E");
    --vqz-icon-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-pause-circle'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='10' y1='15' x2='10' y2='9'/%3E%3Cline x1='14' y1='15' x2='14' y2='9'/%3E%3C/svg%3E");
}

/* --- Timeline & Bottom Controls Bar --- */
.video-quiz-embed .vqz-timeline-container,
.video-quiz-embed .vqz-controls-container {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-top: 8px;
    padding-bottom: 8px;
    transition: opacity 0.3s ease; /* For dimming */
}

.video-quiz-embed .vqz-timeline-container {
    padding-bottom: 20px; /* Space above video */
    padding-top: 12px;
    padding-left: 15px; /* Inset track */
    padding-right: 15px; /* Inset track */
}

/* --- NEW: Grid layout for controls --- */
.video-quiz-embed .vqz-controls-container {
    padding-top: 10px; /* Space below video */
    padding-bottom: 0px;
    padding-left: 0px; /* Padding is handled by the frame */
    padding-right: 0px; /* Padding is handled by the frame */
    
    display: grid;
    grid-template-columns: auto 1fr auto; /* [Volume] [Timer] [Play] */
    align-items: center;
}

.video-quiz-embed .vqz-timeline-track {
    width: 100%;
    height: 20px; 
    background-color: #718096; 
    position: relative;
    border-radius: 10px; 
}

.video-quiz-embed .vqz-timeline-progress {
    width: 0%;
    height: 100%;
    background-color: #3B82F6; /* Brighter blue */
    transition: width 0.1s linear;
    border-radius: 10px; 
    position: absolute; 
    top: 0;
    left: 0;
    z-index: 1; /* --- Behind ticks --- */
}

.video-quiz-embed .vqz-timeline-tick {
    position: absolute;
    top: 16%; 
    width: 24px; 
    height: 24px; 
    border-radius: 50%;
    background-color: #fff; /* Default pending color */
    border: 2px solid #888;
    transform: translate(-50%, -50%); /* Center on position */
    box-sizing: border-box;
    z-index: 2; /* --- In front of progress --- */
    cursor: pointer;
    transition: all 0.2s ease;
    background-image: var(--vqz-icon-pending);
    background-size: 14px 14px; /* --- Smaller icon --- */
    background-position: center;
    background-repeat: no-repeat;
}

.video-quiz-embed .vqz-timeline-tick:hover {
    transform: translate(-50%, -50%) scale(1.1); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.video-quiz-embed .vqz-timeline-tick[data-status="correct"] {
    background-color: var(--vqz-correct-color, #28a745);
    border-color: var(--vqz-correct-color, #28a745);
    background-image: var(--vqz-icon-correct);
}
.video-quiz-embed .vqz-timeline-tick[data-status="incorrect"] {
    background-color: var(--vqz-incorrect-color, #dc3545);
    border-color: var(--vqz-incorrect-color, #dc3545);
    background-image: var(--vqz-icon-incorrect);
}
.video-quiz-embed .vqz-timeline-tick[data-status="assisted"] {
    background-color: #ffc107; /* Yellow for multi-attempt */
    border-color: #ffc107;
    background-image: var(--vqz-icon-assisted);
}

/* --- Question Preview Popup --- */
.video-quiz-embed .vqz-question-preview {
    position: absolute;
    bottom: 36px; 
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.9rem;
    width: max-content;
    max-width: 250px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.video-quiz-embed .vqz-question-preview::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #333;
}

.video-quiz-embed .vqz-timeline-tick:hover .vqz-question-preview {
    opacity: 1;
    visibility: visible;
}

/* --- Player Wrapper --- */
.video-quiz-embed .vqz-player-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* Default 16:9 aspect ratio */
    background-color: #000;
    overflow: hidden;
    border-radius: 4px; 
}

.video-quiz-embed iframe,
.video-quiz-embed .vqz-player-wrapper video { /* Target <video> tag */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-quiz-embed .vqz-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* Below quiz overlay, above player */
    cursor: pointer;
    transition: opacity 0.3s ease;
}
/* YouTube API handles its own click-to-play */
.video-quiz-embed[data-player-type="youtube"] .vqz-click-overlay {
    display: none;
}

/* --- Quiz & Summary Overlays --- */
.video-quiz-embed .vqz-overlay,
.video-quiz-embed .vqz-summary-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 10;
    border-radius: 4px;
    overflow-y: auto; /* For summary table */
}

.video-quiz-embed .vqz-overlay.vqz-visible,
.video-quiz-embed .vqz-summary-overlay.vqz-visible {
    opacity: 1;
    visibility: visible;
}

.video-quiz-embed .vqz-question-text {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 24px;
    text-align: center;
    max-width: 90%;
}

.video-quiz-embed .vqz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 400px;
}

.video-quiz-embed .vqz-option-btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    padding: 14px 20px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 6px;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.video-quiz-embed .vqz-option-btn:hover:not(:disabled) {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
}

.video-quiz-embed .vqz-option-btn.vqz-correct {
    background-color: var(--vqz-correct-color, #28a745);
    border-color: var(--vqz-correct-color, #28a745);
    color: #fff;
}

.video-quiz-embed .vqz-option-btn.vqz-incorrect {
    background-color: var(--vqz-incorrect-color, #dc3545);
    border-color: var(--vqz-incorrect-color, #dc3545);
    color: #fff;
    animation: vqz-shake 0.5s ease;
}

.video-quiz-embed .vqz-option-btn:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

@keyframes vqz-shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-8px); }
    40%, 80% { transform: translateX(8px); }
}

/* --- Summary Overlay Styles --- */
.video-quiz-embed .vqz-summary-title {
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 24px;
}

.video-quiz-embed .vqz-summary-table {
    width: 100%;
    max-width: 600px;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 24px;
}

.video-quiz-embed .vqz-summary-table th,
.video-quiz-embed .vqz-summary-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.video-quiz-embed .vqz-summary-table th {
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: 500;
}

.video-quiz-embed .vqz-summary-table td:last-child {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.video-quiz-embed .vqz-summary-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.video-quiz-embed .vqz-summary-score {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 24px;
    text-align: center;
}

.video-quiz-embed .vqz-restart-btn {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    padding: 12px 24px;
    background-color: #3B82F6;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.video-quiz-embed .vqz-restart-btn:hover {
    background-color: #2563EB;
}

/* --- Custom Controls --- */

.video-quiz-embed .vqz-volume-container {
    display: flex;
    align-items: center;
    background: #2D3748; 
    border-radius: 6px;
    padding: 2px 8px;
    justify-self: start; /* Pin to left of grid cell */
}

.video-quiz-embed .vqz-volume-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-quiz-embed .vqz-volume-btn svg {
    width: 24px;
    height: 24px;
    stroke: #ffffff; 
}

.video-quiz-embed .vqz-volume-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 5px;
    background: #718096; /* Match timeline track */
    border-radius: 5px;
    outline: none;
    transition: width 0.2s ease, opacity 0.2s ease;
    margin-left: 5px;
    cursor: pointer;
}

.video-quiz-embed .vqz-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #ffffff; 
    border-radius: 50%;
    cursor: pointer;
}

.video-quiz-embed .vqz-volume-slider::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

/* --- Timer Display (user tweaked) --- */
.video-quiz-embed .vqz-timer-display {
    color: white;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 1.4rem;
    text-align: right;
    user-select: none; /* Prevent selecting text */
    padding-right:20px;
}

.video-quiz-embed .vqz-play-btn {
    background: #2D3748; /* Match volume container */
    border: none;
    border-radius: 6px;
    padding: 6px; /* Slightly more padding */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0; /* Fix icon alignment */
    justify-self: end; /* Pin to right of grid cell */
}

.video-quiz-embed .vqz-play-btn:hover {
    opacity: 0.8;
}

.video-quiz-embed .vqz-play-btn span {
    width: 32px;
    height: 32px;
    display: block;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.video-quiz-embed .vqz-play-icon {
    background-image: var(--vqz-icon-play);
}
.video-quiz-embed .vqz-pause-icon {
    background-image: var(--vqz-icon-pause);
}

/* --- Dim controls when quiz is active --- */
.video-quiz-embed.vqz-quiz-active .vqz-controls-container,
.video-quiz-embed.vqz-quiz-active .vqz-click-overlay {
    opacity: 0.4; /* Dim the controls */
    pointer-events: none; /* Keep them unclickable */
}