/* =================== 
   GLOBAL RESET & BODY STYLES
   =================== */

*,*::after,*::before {
    box-sizing: border-box;
    vertical-align: middle;
}

/* ===================
   ENHANCED SPEAKING PRACTICE AUDIO BUTTONS
   NEW: Audio playback controls with normal and slow speed
   =================== */

/* Audio buttons container */
.audio-buttons-container {
    display: none;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: transparent;
    border-radius: 8px;
}

.audio-buttons-container.visible {
    display: flex;
    opacity: 1;
}

/* Individual audio play buttons */
.audio-play-btn {
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    min-width: 80px;
    justify-content: center;
    position: relative;
    overflow: hidden;
    font-family: inherit;
    outline: none;
    user-select: none;
	min-width: 70px;
}

.audio-play-btn:focus {
    outline: 2px solid rgba(255, 255, 255, 0.5);
    outline-offset: 2px;
}

/* Disabled state for audio buttons */
.audio-play-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
    box-shadow: none !important;
}

/* Playing state (when audio is being played) */
.audio-play-btn.playing {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    animation: audio-pulse 1.5s infinite;
}

/* Button text styling */
.audio-play-btn .btn-text {
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 0.5px;
}

/* Material icons in audio buttons */
.audio-play-btn .material-symbols-rounded {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Clickable mic icon styling */
.functional-status[style*="cursor: pointer"] {
    transition: all 0.3s ease !important;
    border-radius: 8px;
    padding: 4px 8px;
}

.functional-status[style*="cursor: pointer"]:hover {
    background: rgba(0, 123, 255, 0.1) !important;
    transform: scale(1.1) !important;
}

/* Audio button animations */
@keyframes audio-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(255, 193, 7, 0.6);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
    }
}

/* Responsive design for audio buttons */
@media (max-width: 768px) {

    

    
    .audio-play-btn .material-symbols-rounded {
        font-size: 16px;
    }
    
    .audio-play-btn .btn-text {
        font-size: 11px;
    }
}

@media (max-width: 480px) {

    

    
    .audio-play-btn .material-symbols-rounded {
        font-size: 16px;
    }
    
    .audio-play-btn .btn-text {
        font-size: 10px;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .audio-normal-btn {
        background: #0000FF !important;
        border: 2px solid #FFFFFF !important;
        color: #FFFFFF !important;
    }
    
    .audio-slow-btn {
        background: #008000 !important;
        border: 2px solid #FFFFFF !important;
        color: #FFFFFF !important;
    }
    
    .audio-play-btn.playing {
        background: #FFD700 !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .audio-play-btn {
        transition: background-color 0.2s ease;
    }
    
    .audio-play-btn:hover {
        transform: none;
    }
    
    .audio-play-btn.playing {
        animation: none;
    }
    
    .functional-status[style*="cursor: pointer"]:hover {
        transform: none !important;
    }
}

/* Print styles */
@media print {
    .audio-buttons-container {
        display: none !important;
    }
    
    .functional-status[style*="cursor: pointer"] {
        cursor: default !important;
        background: transparent !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .audio-buttons-container {
        background: rgba(0, 0, 0, 0.1);
    }
    
    .functional-status[style*="cursor: pointer"]:hover {
        background: rgba(255, 255, 255, 0.1) !important;
    }
}

/* =================== 
   END OF AUDIO BUTTONS STYLES
   =================== */

body {
    font-family: system-ui, sans-serif;
    background: #F5F8FA;
    margin: 0;
    padding: 0;
    color: #212529;
    text-align: left;
}

body, html, .App {
    width: 100%;
    height: 100%;
}

/* =================== 
   FLASHCARD CORE STYLES - UNIFIED for all types including learning
   =================== */

.flashcard-section {
    padding: 0px !important;
    border-radius: 12px;
    box-shadow: none !important;
    margin-bottom: 30px;
    margin-top: 0px !important;
    position: relative;
    min-height: 300px;
    transition: all 0.3s ease;
}

.flashcard-section.hidden {
    display: none !important;
}

.flashcard-section.active {
    display: block;
}

.flashcard-titulo {
    display: none !important;
    /* REMOVED: flashcard-titulo divs are no longer used */
}

/* REMOVED: flashcard-titulo material icons - no longer used */

/* =================== 
   CHUNK TABS 
   =================== */

.chunk-tabs {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
    margin-top: 5px;
    gap: 3px;
    max-width: 150px;
    margin-left: auto;
    margin-right: auto;
}

.chunk-tab {
    background: #d9edff;
    border: none;
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: white;
    transition: all 0.2s ease;
    white-space: nowrap;
    text-align: center;
}

.chunk-tab:hover {
    background: #b3d9ff;
}

.chunk-tab.active {
    background: #4ca6ff !important;
    color: white !important;
    border: none !important;
    box-shadow: none !important;
}

/* =================== 
   FLASHCARD CONTAINER - UNIFIED
   =================== */

.flashcard-container {
    display: flex;
    justify-content: center;
    position: relative;
    margin-top: 18px;
    align-items: center;
    margin-bottom: 0px;
}

.flashcard {
    width: 100%;
    cursor: default;
    user-select: none;
	/*
    display: block;
	*/
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    border-radius: 12px;
    padding: 0px 0px 0px 0px;
    min-width: 250px;
    max-width: 400px;
    text-align: center;
    transition: all 0.3s ease;
}

.flashcard.hidden {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    pointer-events: none;
    position: absolute;
}

/* =================== 
   FLASHCARD CONTENT - UNIFIED for all types including learning
   =================== */

.flashcard-front {
    min-width: 220px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 4px solid #ddd;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 20px #f3f3f3;
    font-size: 1.2em;
    color: #333;
    user-select: none;
    padding-left: 16px;
    padding-right: 16px;
    margin-top: 50px;
    width: fit-content;
    margin: 0px auto 0 auto;
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.4;
    word-break: break-word;
    transition: all 0.4s ease;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* ENHANCED: Learning flashcard specific content inside standard flashcard-front */
.learning-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    padding: 10px;
    /* Override the standard flashcard-front constraints for learning */
    height: auto;
    min-height: auto;
    white-space: normal;
    text-overflow: initial;
    overflow: visible;
}

/* ENHANCED: Learning image section with show/hide and space preservation */
.learning-image-section {
    display: flex;
    justify-content: center;
    width: 100%;
	/*
    margin-bottom: 10px;
	*/
    min-height: 104px; /* Consistent height for space preservation */
    align-items: center;
    position: relative;
    /* REMOVED: transition to prevent brightness-like changes on hover */
    /* transition: all 0.3s ease; */
}

.learning-image-section img.learning-image {
    max-width: 150px;
    max-height: 100px;
    border-radius: 50%;
    object-fit: cover;
	/*
    border: 2px solid #e9ecef;
	*/
    /* REMOVED: transition to prevent brightness-like changes on hover */
    /* transition: all 0.3s ease; */
    display: block;
}


/* REMOVED: Image scale effect on hover */
/*
.learning-image-section img.learning-image:hover {
    transform: scale(1.05);
}
*/






/* Image visibility control based on data attributes */
.learning-image-section[data-show-images="true"] .learning-image {
    display: block;
}

.learning-image-section[data-show-images="true"] .learning-image-placeholder {
    display: none;
}

.learning-image-section[data-show-images="false"] .learning-image {
    display: none;
}

.learning-image-section[data-show-images="false"] .learning-image-placeholder {
    display: flex;
}

/* When no image is available but space preservation is on */
.learning-image-section[data-has-image="false"] .learning-image-placeholder {
    border-style: dotted;
    background: #fafbfc;
}

.learning-image-section[data-has-image="false"] .learning-image-placeholder::after {
    content: 'No Image';
}

/* Learning word display - matches standard flashcard text styling */
.learning-word-display {
    font-size: 24px;
    font-weight: 600;
    color: #2c3e50;
    text-align: center;
    line-height: 1.2;
    word-break: break-word;
    min-height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
}

/* Learning audio button - styled like standard play buttons */
/*
.learning-audio-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
    margin-top: 8px;
}

.learning-audio-btn:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.learning-audio-btn:active {
    transform: scale(0.95);
}
*/

/* =================== 
   FLASHCARD HIGHLIGHT STATES - UNIFIED for all types including learning
   =================== */

/* Correct Answer Highlight (Green) - WORKS FOR ALL TYPES */
.flashcard-front.flashcard-correct {
    background-color: rgba(46, 204, 113, 0.1);
    color: #2e7d32;
    border: 4px solid rgba(46, 204, 113, 0.4);
    box-shadow: 0 0 10px rgba(46, 204, 113, 0.4);
}

/* Incorrect Answer Highlight (Red) - WORKS FOR ALL TYPES */
.flashcard-front.flashcard-incorrect {
    background-color: rgba(231, 76, 60, 0.1);
    border: 4px solid rgba(231, 76, 60, 0.4);
    color: #c62828;
    box-shadow: 0 0 10px rgba(231, 76, 60, 0.4);
}

/* Show Answer Highlight (Yellow) - WORKS FOR ALL TYPES */
.flashcard-front.flashcard-reveal {
    background-color: rgba(241, 196, 15, 0.1);
    border: 4px solid rgba(241, 196, 15, 0.4);
    color: #846b09;
    box-shadow: 0 0 10px rgba(241, 196, 15, 0.4);
}

/* Ensure learning content inherits highlight colors */
.flashcard-front.flashcard-correct .learning-word-display,
.flashcard-front.flashcard-incorrect .learning-word-display,
.flashcard-front.flashcard-reveal .learning-word-display {
    color: inherit;
}

/* =================== 
   FLASHCARD BACK (KEPT FOR COMPATIBILITY)
   =================== */

.flashcard-back {
    text-align: center;
    color: #2ecc71;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    margin-bottom: 70px;
    vertical-align: middle;
    width: 100%;
    font-size: 20px;
    color: #7f8c8d;
    font-weight: 500;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #ecf0f1;
    line-height: 1.3;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-50%) translateY(10px);
}

.flashcard-back.hidden {
    display: none;
}

.flashcard-back:not(.hidden) {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* =================== 
   ENHANCED LEARNING CONTROLS - Complete redesign with new features
   =================== */

/* Keep existing learning-controls container but update layout */
.learning-controls {
    display: flex;
    flex-direction: column;
	/*
    gap: 15px;
    padding: 16px 20px;
	*/
	/*
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid #e9ecef;
	*/
    border-radius: 12px;
    align-items: center;
    gap: 12px;
	/*
    margin-bottom: 20px;
	*/
	/*
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	*/
}

/* Learning Progress Display */
.learning-progress-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
    width: 100%;
    gap: 6px;
}

.learning-progress-bar {
    width: 100%;
    max-width: 200px;
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    overflow: hidden;
    border: 1px solid #dee2e6;
}

.learning-progress-fill {
    height: 100%;
    background: linear-gradient(135deg, #ff7373 0%, #ff9696 100%);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.learning-progress-text {
    font-size: 12px;
    font-weight: 600;
    color: #6c757d;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid #dee2e6;
    min-width: 50px;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* NEW: Config toggles container - matches vocabulary page */
.learning-config-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.learning-btn-container {
    display: flex;
}
/*
.learning-controls:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}
*/

/* NEW: When learning-control-btn also has toggle-btn class, style like vocabulary */
/*
.learning-control-btn.toggle-btn {
    background: #fff;
    border: 1px solid #e9ecef;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 16px;
    min-width: 90px;
    height: 40px;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
}

.learning-control-btn.toggle-btn:hover {
    border-color: #3498db;
    background: #f8f9fa;
    color: #3498db;
}
*/
/*
.learning-control-btn.toggle-btn.active {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
}

.learning-control-btn.toggle-btn .material-symbols-rounded {
    font-size: 20px;
}
*/


/* Learning controls rows */
.learning-controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.learning-controls-main {
    padding-bottom: 8px;
    border-bottom: 1px solid #f1f3f4;
}

.learning-controls-secondary {
    padding-top: 4px;
}

/* Progress wrapper and progress bar styles removed */


.learning-config-wheel {
	text-align: center;
}

.config-gear-btn {
	border-radius: 100px;
    border: 0px;
    padding: 3px;
}

.config-wheel-buttons {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
}

.config-wheel-buttons.hidden {
    display: none;
}




/* UPDATED: Learning control buttons - add toggle-btn styling but keep existing classes */
/*
.learning-control-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-width: 50px;
    height: 36px;
    position: relative;
    overflow: hidden;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
*/
/*
.learning-control-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}
*/

/*
.learning-control-btn:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.learning-control-btn:hover::before {
    left: 100%;
}

.learning-control-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
*/
/* ENHANCED: Active state for toggle buttons with better visual feedback */
/*
.learning-control-btn.learning-control-active {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.4);
    transform: scale(1.05);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.learning-control-btn.learning-control-active:hover {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%) !important;
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.6);
}

.learning-control-btn.learning-control-active::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: active-pulse 2s infinite;
}
*/
/* NEW: Specific button type styling */

/*
.learning-autoplay-btn {
    min-width: 60px;
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
}

.learning-autoplay-btn:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%) !important;
}
*/

/*
.learning-speed-btn {
    min-width: 60px;
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
}

.learning-speed-btn:hover {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%) !important;
}

.learning-image-btn {
    background: linear-gradient(135deg, #fd7e14 0%, #e8650e 100%) !important;
}

.learning-image-btn:hover {
    background: linear-gradient(135deg, #e8650e 0%, #dc5a0b 100%) !important;
}

.learning-peek-btn {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
    color: #212529 !important;
}

.learning-peek-btn:hover {
    background: linear-gradient(135deg, #e0a800 0%, #d39e00 100%) !important;
}

.learning-shuffle-btn {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%) !important;
}

.learning-shuffle-btn:hover {
    background: linear-gradient(135deg, #5a32a3 0%, #4e2a8e 100%) !important;
}
*/

.control-text {
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

/* =================== 
   NAVIGATION CONTROLS - UNIFIED for all types
   =================== */

.flashcard-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 25px;
    flex-wrap: wrap;
    max-width: 100%;
}

.flashcard-nav button {
    padding: 10px;
    cursor: pointer;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    flex: 1 1 70px;
    max-width: 70px;
    min-width: 70px;
    background: #6c757d;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* Specific button colors - WORKS FOR ALL TYPES INCLUDING LEARNING */
.remember-btn {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    border: none;
}

.remember-btn:hover {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
}

.forget-btn {
    background: linear-gradient(135deg, #e74c3c 0%, #c0392b 100%) !important;
    border: none;
}

.forget-btn:hover {
    background: linear-gradient(135deg, #c0392b 0%, #a93226 100%) !important;
}

.show-answer-btn {
    background: #f1c40f !important;
}

.show-answer-btn:hover {
    background: linear-gradient(135deg, #d4ac0d 0%, #b7950b 100%) !important;
}

.record-btn {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    border: none;
}

.record-btn:hover {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%) !important;
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
    transform: scale(1.1);
}

.record-btn.recording {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%) !important;
    animation: pulse-record 1.5s infinite;
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.6);
}

.replay-btn {
    background: linear-gradient(135deg, #f1c40f 0%, #d4ac0d 100%) !important;
    color: #212529 !important;
    border: none;
}

.replay-btn:hover {
    background: linear-gradient(135deg, #d4ac0d 0%, #b7950b 100%) !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    transform: scale(1.1);
}

.compare-btn {
    background: linear-gradient(135deg, #f1c40f 0%, #d4ac0d 100%) !important;
    color: #212529 !important;
    border: none;
}

.compare-btn:hover {
    background: linear-gradient(135deg, #d4ac0d 0%, #b7950b 100%) !important;
    box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
    transform: scale(1.1);
}

/* Button icon styles */
.remember-btn span.material-symbols-rounded, 
.forget-btn span.material-symbols-rounded {
    font-weight: 600;
}

 /* ===================
    FLASHCARD RESET CONTROLS
    =================== */

/* Reset wrapper - positioned like sequence controls */
.flashcard-reset-wrapper {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

/* Flashcard reset button styled exactly like sequence game replay button */
.flashcard-replay-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: linear-gradient(to bottom, #ffffff 50%, #f5f7fa 100%);
    color: #ff7373;
    border: 1px solid #dedede !important;
    border-top: 1px solid #eaeaea !important;
    border-right: 1px solid #eaeaea !important;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
}

.flashcard-replay-btn:hover {
    background: #e9ecef;
    border-color: #adb5bd;
}

.flashcard-replay-btn:active {
    transform: scale(0.95);
}

.flashcard-replay-btn .material-symbols-rounded {
    font-size: 24px;
}

/* Legacy reset button style - for backward compatibility with old flashcard code */
.reset-btn {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-size: 16px;
}

.reset-btn:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%) !important;
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.reset-button {
    font-size: 18px !important;
}

/*
.reset-btn {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: white;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    font-size: 16px;
}


.reset-btn:hover {
    background: linear-gradient(135deg, #5a6268 0%, #495057 100%) !important;
    transform: scale(1.1);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.reset-button {
    font-size: 18px !important;
}
*/
/* =================== 
   WORD LIST & PROGRESS - UNIFIED for all types including learning
   =================== */

.word-list {
    padding: 8px;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border: 2px dotted #dddddd !important;
    background-color: #f6f6f6;
    justify-content: center;
    margin-top: 10px;
}

.word-list span {
    padding: 6px 10px 8px 10px; /* Add bottom padding for symbols below */
    font-size: 12px;
    border-radius: 6px;
    font-size: 0.9em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    display: inline-flex;
    flex-direction: column-reverse; /* Vertical layout: word then symbols below */
    align-items: center;
    position: relative;
    background: #ffffff;
    border: 0px solid #dee2e6;
    cursor: pointer;
    font-weight: normal;
    text-align: center;
}

.word-list span.neutral {
    color: #6c757d;
    border-color: #dee2e6;
    background: #e9e9e9;
    color: #949494;
}

.word-list span.correct {
    background: #c8e6c9;
    background-color: rgba(46, 204, 113, 0.1);
    color: #2e7d32;
}

.word-list span.incorrect {
    background: #ef9a9a;
    background: rgba(231, 76, 60, 0.1);
    color: #c62828;
}

/* =================== 
   MASTERY STYLES - UNIFIED for all types
   =================== */

.word-list span.mastered {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
    color: #ffffff !important;
    transform: none !important;
}

.word-list span.mastered:hover {
    background: linear-gradient(135deg, #27ae60 0%, #229954 100%) !important;
    transform: none !important;
    border-color: #27ae60 !important;
}

/* =================== 
   WORD LIST TEMPORARY HIGHLIGHTS - UNIFIED
   =================== */

.temp-highlight {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.8) 0%, rgba(255, 193, 7, 0.6) 100%) !important;
    color: #533f03 !important;
    border-color: rgba(255, 193, 7, 0.9) !important;
}

.word-list span.mastered.temp-highlight {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.9) 0%, rgba(255, 193, 7, 0.7) 100%) !important;
    color: #533f03 !important;
    font-weight: 600 !important;
    border-color: rgba(255, 193, 7, 0.9) !important;
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.6) !important;
    transform: scale(1.1) translateY(-3px) !important;
}

.temp-progress-fill {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.7) 0%, rgba(255, 193, 7, 0.5) 100%) !important;
    transition: all 0.3s ease;
    animation: progress-glow 0.6s ease-in-out;
}

/* =================== 
   SYMBOL PROGRESS - NEW 3 CIRCLES SYSTEM
   =================== */

/* Symbol Progress Container - positioned below word, horizontal layout */
.symbol-progress {
    position: static; /* Not absolute - stays in normal flow */
    display: flex;
    flex-direction: row; /* Horizontal layout - side by side */
    gap: 2px;
    margin-top: 4px; /* Space between word and symbols - below the word */
    margin-right: 0; /* Remove right margin */
    align-items: center;
    justify-content: center;
    padding: 0px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    z-index: auto;
    width: 100%; /* Full width to allow centering */
}

/* Individual Symbol Styling - Circles */
.symbol {
    width: 5px;
    height: 5px; /* Make it a circle */
    border-radius: 50%; /* Perfect circle */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}

/* Empty Symbol */
.symbol.empty {
    background: #f8f9fa;
    border-color: #dee2e6;
}

/* Correct Progress Symbol */
.symbol.correct {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border-color: #28a745;
	/*
    box-shadow: 0 0 4px rgba(40, 167, 69, 0.3);
	*/
}

/* Wrong/Incorrect Symbol */
.symbol.wrong {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-color: #dc3545;
	/*
    box-shadow: 0 0 4px rgba(220, 53, 69, 0.3);
	*/
}

/* Complete/Mastered Symbols */
.symbol.complete {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-color: #ffd700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
    animation: mastery-pulse 2s infinite;
}

/* Mastery pulse animation */
@keyframes mastery-pulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 6px rgba(255, 215, 0, 0.5);
    }
    50% { 
        transform: scale(1.1); 
        box-shadow: 0 0 12px rgba(255, 215, 0, 0.8);
    }
}

/* =================== 
   AUDIO CONTROLS - UNIFIED for all types
   =================== */

/*
.play-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    color: white;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 2px 8px rgba(0, 123, 255, 0.2);
}

.play-btn:hover {
    background: linear-gradient(135deg, #0056b3 0%, #004085 100%);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

.play-btn:active {
    transform: scale(0.95);
}
*/

/* =================== 
   FLASHCARD LABELS & TITLES - DESIGN G MODIFIED: WHITE ICON BACKGROUND + RED ICONS
   =================== */

.flashcard-label-wrapper {
    position: relative;
    margin-bottom: 30px;
    margin-left: 25px; /* Space for the extended circle */
    margin-top: 30px;
}

.flashcard-label {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: bold;
    color: #ffffff;
    background-color: #ff7373;
    border-radius: 0 6px 6px 0; /* Rounded on right side only */
    width: 100%;
    min-height: 20px;
    position: relative;
    z-index: 1;
    /* Subtle glow on text div */
    box-shadow: 0 0 6px rgba(255, 115, 115, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
}

.flashcard-label-icon {
    position: absolute;
    left: -25px; /* Extends beyond the left edge */
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #ffffff; /* WHITE BACKGROUND */
    border-radius: 10px;
    z-index: 2;
    flex-shrink: 0;
    /* White background + red outline + subtle glow */
    border: 3px solid #ffffff;
    box-shadow: 
        0 0 0 2px #ff7373,
        0 0 5px rgba(255, 115, 115, 0.2),
        0 2px 8px rgba(0, 0, 0, 0.2);
}



.flashcard-label-text {
    padding: 6px 6px 6px 20px; /* Extra left padding for the extended circle */
    line-height: 1.3;
    flex: 1;
}

/* =================== 
   MAIN TAB STYLES
   =================== */

 /*
.main-tab-container {
    width: 100%;
    margin: 20px 0;
}
*/

.main-tab-navigation {
    display: flex;
    justify-content: center;
}

/*
.main-tab-button {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: none;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: 600;
    color: #6c757d;
    border-radius: 8px 8px 0 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    position: relative;
    overflow: hidden;
}

.main-tab-button:hover {
    background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%);
    color: #495057;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.main-tab-button.active {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    color: #ff7373;
    border-bottom-color: #ff7373;
    transform: translateY(1px);
    box-shadow: 0 -2px 8px rgba(255, 115, 115, 0.2);
}


.main-tab-content {
    background: #ffffff;
    border-radius: 0 0 8px 8px;
    padding: 20px;
}
*/

.main-tab-pane {
    display: none;
}

.main-tab-pane.active {
    display: block;
	/*
    animation: tab-fade-in 0.4s ease-out;
	*/
}

/* ===================
   CONFIG AREA STYLES
   =================== */

.config-area-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Level filter area - same styling as word type filter */
.level-filter-area {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #e9ecef;
    border-radius: 8px;
}

/* Filter label - smaller gray text matching review_grupos_css.php */
.filter-label {
    font-size: 0.85em;
    font-weight: 600;
    color: #7f8c8d;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Combined filter area - both dropdowns in same container */
.combined-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    align-content: center;
    text-align: left;
    margin-top: 15px;
}

.combined-filters .filter-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 220px;
}

/* Filter group label - very light styling */
.filter-group label {
    font-size: 12px;
    font-weight: 100;
    color: #aeaeae;
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    text-align: left;
    width: 100%;
}

.config-text {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

/* Filter dropdown styles - matching review_grupos_css.php */
.filter-dropdown-wrapper {
    display: flex;
}

.level-filter-dropdown,
.word-type-filter-dropdown {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9em;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.level-filter-dropdown:hover,
.word-type-filter-dropdown:hover {
    border-color: #3498db;
}

.level-filter-dropdown:focus,
.word-type-filter-dropdown:focus {
    outline: none;
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

/* Custom Level Dropdown with Material Icons */
.custom-level-dropdown,
.custom-word-type-dropdown,
.custom-sort-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

.custom-dropdown-toggle {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e0e0e0;
    border-radius: 6px;
    background: #fff;
    font-size: 0.9em;
    color: #333;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 10px;
    outline: none;
}

.custom-dropdown-toggle:hover {
    border-color: #3498db;
}

.custom-dropdown-toggle.active {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.dropdown-icon-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.dropdown-icon-wrapper .icon-bg {
    position: absolute;
    font-size: 18px;
    opacity: 0.25;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.dropdown-icon-wrapper .icon-fg {
    position: relative;
    z-index: 1;
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.dropdown-icon-single {
    font-size: 18px;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.dropdown-label {
    flex: 1;
	text-align: left;
}

.dropdown-arrow {
    margin-left: auto;
    font-size: 20px;
    transition: transform 0.3s ease;
    color: #666;
}

.custom-dropdown-toggle.active .dropdown-arrow {
    transform: rotate(180deg);
}

.custom-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    border: 1px solid #e9ecef;
    overflow: hidden;
}

.custom-dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.custom-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #2c3e50;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f8f9fa;
    font-size: 14px;
    font-weight: 500;
}

.custom-dropdown-item:last-child {
    border-bottom: none;
}

.custom-dropdown-item:hover {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.08) 0%, rgba(44, 62, 80, 0.05) 100%);
    padding-left: 20px;
}

.custom-dropdown-item.active {
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.12) 0%, rgba(44, 62, 80, 0.08) 100%);
    color: #3498db;
    font-weight: 600;
}

.custom-dropdown-item .check-icon {
    margin-left: auto;
    color: #51cf66;
    font-size: 18px;
}

/* ===================
   TAB BUTTONS
   =================== */

.tab-buttons {
    gap: 4px;
    justify-content: center;
    flex-wrap: nowrap;
    font-size: 12px;
    display: flex;
    width: 100%;
    padding-top: 5px;
}

.tab-button {
    display: block;
    padding: 8px 12px;
    border: 1px solid #dedede;
    border-top: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    cursor: pointer;
    color: #858585;
    font-weight: bold;
    background: linear-gradient(to bottom, #ffffff 50%, #f5f7fa 100%);
    border-radius: 8px;
    justify-content: center;
    margin-bottom: 3px;
    font-size: 13px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.tab-button:hover {

    background: linear-gradient(to bottom, #f8f9fa 50%, #e9ecef 100%);
}

.tab-button.active {
    background: linear-gradient(to bottom, #fff9f9 80%, #ffe7e7 100%);
    color: #ff7373 !important;
    border: 1px solid #ff8888 !important;
    box-shadow: 0 2px 8px rgba(255, 115, 115, 0.2);
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
	margin-left: 8px;
	margin-right: 8px;
	
	/*
    animation: tab-content-slide 0.4s ease-out;
	*/
}

/* =================== 
   MATERIAL ICONS & SYMBOLS
   =================== */

/*
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    font-size: 20px!important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'liga';
}

.material-symbols-rounded,
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-size: 12pt;
    margin-top: -4px;
    color: #ff7373;
    transition: all 0.3s ease;
}
*/

/*
.material-symbols-rounded,
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-size: 12pt;
    margin-top: -4px;
    transition: all 0.3s ease;
}
*/

/* Color modifiers */
.white {
    color: #fff !important;
}

.azul {
    color: #6993c4 !important;
}

.black {
    color: #000 !important;
}

/* =================== 
   ENHANCED KEYFRAME ANIMATIONS - Including new learning features
   =================== */

@keyframes mastery-glow {
    0% { 
        box-shadow: inset 0 0 5px rgba(46, 204, 113, 0.3);
        filter: brightness(1);
    }
    50% { 
        box-shadow: inset 0 0 15px rgba(46, 204, 113, 0.8);
        filter: brightness(1.2);
    }
    100% { 
        box-shadow: inset 0 0 5px rgba(46, 204, 113, 0.3);
        filter: brightness(1);
    }
}

@keyframes progress-glow {
    0% { 
        box-shadow: inset 0 0 5px rgba(255, 193, 7, 0.3);
    }
    50% { 
        box-shadow: inset 0 0 10px rgba(255, 193, 7, 0.6);
    }
    100% { 
        box-shadow: inset 0 0 5px rgba(255, 193, 7, 0.3);
    }
}

@keyframes pulse-record {
    0% { 
        transform: scale(1); 
        box-shadow: 0 0 20px rgba(220, 53, 69, 0.4);
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 30px rgba(220, 53, 69, 0.6);
    }
    100% { 
        transform: scale(1); 
        box-shadow: 0 0 20px rgba(220, 53, 69, 0.4);
    }
}

@keyframes tab-fade-in {
    0% { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes tab-content-slide {
    0% { opacity: 0; transform: translateX(-10px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* NEW: Enhanced learning-specific animations */
@keyframes progress-shine {
    0% { left: -100%; }
    50% { left: 0%; }
    100% { left: 100%; }
}

@keyframes active-pulse {
    0% { 
        opacity: 0.8; 
        transform: scale(1);
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2);
    }
    100% { 
        opacity: 0.8; 
        transform: scale(1);
    }
}

@keyframes learning-button-bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-4px);
    }
    60% {
        transform: translateY(-2px);
    }
}

@keyframes image-placeholder-fade {
    0% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* =================== 
   ENHANCED RESPONSIVE DESIGN - Optimized for learning features
   =================== */

@media (max-width: 768px) {
    .flashcard-section {
        padding: 15px;
        margin: 5px 0;
    }
    



    

    

    
    .flashcard {
        min-width: 200px;
        max-width: 300px;
    }
    
    .flashcard-front {
        font-size: 20px;
        min-width: 180px;
        padding: 12px 16px;
    }
    
    /* ENHANCED: Learning flashcard responsive design */
    .learning-content-wrapper {
        gap: 10px;
        padding: 8px;
    }
    
    .learning-image-section {
        min-height: 84px; /* Smaller on mobile */
		/*
        margin-bottom: 8px;
		*/
    }
    
    .learning-progress-bar {
        max-width: 150px;
        height: 5px;
    }
    
    .learning-progress-text {
        font-size: 11px;
        padding: 3px 6px;
        min-width: 45px;
    }
	
    .learning-config-toggles {
        flex-direction: column;
        gap: 8px;
    }
    
	/*
    .learning-control-btn.toggle-btn {
        width: 100%;
        justify-content: center;
        padding: 8px 16px;
        font-size: 13px;
    }
	*/
    
    /* Learning progress bar removed */
    

    
    .learning-image-placeholder {
        width: 120px;
        height: 80px;
    }
    
    .learning-word-display {
        font-size: 20px;
    }
    
    .learning-audio-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
    
    /* ENHANCED: Learning controls responsive */
    .learning-controls {
        padding: 12px 15px;
        gap: 10px;
    }
    
    
    .learning-controls-main {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        padding-bottom: 6px;
    }
    

    /* Learning progress bar styles removed */
    
    .learning-autoplay-btn,
    .learning-speed-btn {
        min-width: 50px;
    }
    

    
    .flashcard-nav {
        gap: 8px;
    }
    
    .flashcard-nav button {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
    
    .chunk-tabs {
        gap: 3px;
        flex-direction: column;
    }
    
    .chunk-tab {
        padding: 6px 12px;
        font-size: 11px;
    }
    
    .word-list {
        gap: 6px;
        padding: 10px;
    }
    
    .word-list span {
        padding: 4px 8px 6px 8px;
        font-size: 11px;
    }
    /*
    .main-tab-button {
        padding: 8px 12px;
        font-size: 12px;
        flex-direction: column;
        gap: 4px;
    }
	*/
}

@media (max-width: 480px) {
    .flashcard {
        min-width: 180px;
        max-width: 280px;
    }
    


    

    

    
    .flashcard-front {
        font-size: 18px;
        min-width: 160px;
    }
    
    /* ENHANCED: Learning flashcard extra small mobile */
    .learning-image-section {
        min-height: 64px;
		/*
        margin-bottom: 6px;
		*/
    }
    

    
    .learning-image-placeholder {
        width: 100px;
        height: 60px;
        font-size: 10px;
    }
    
    .learning-image-placeholder::before {
        font-size: 20px;
        margin-bottom: 2px;
    }
    
    .learning-word-display {
        font-size: 18px;
        min-height: 25px;
    }
    
    .learning-progress-bar {
        max-width: 120px;
        height: 4px;
    }
    
    .learning-progress-text {
        font-size: 10px;
        padding: 2px 5px;
        min-width: 40px;
    }
    
    .learning-audio-btn {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .learning-controls {
        padding: 8px 10px;
        gap: 8px;
    }
    
    .learning-controls-row {
        gap: 6px;
    }
    


    
    .learning-control-btn {
        min-width: 40px;
        height: 28px;
        padding: 2px 6px;
        font-size: 8px;
        gap: 1px;
    }
    
    .learning-autoplay-btn,
    .learning-speed-btn {
        min-width: 42px;
    }
    
    
    .flashcard-nav button {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
    
    .chunk-tab {
        padding: 5px 8px;
        font-size: 10px;
    }
    /*
    .reset-btn {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
	*/
    
	/*
    .main-tab-button {
        padding: 6px 8px;
        font-size: 10px;
    }
    
    .tab-button {
        padding: 6px 8px;
        font-size: 11px;
    }
	*/
}

/* =================== 
   ENHANCED ACCESSIBILITY & FOCUS STATES
   =================== */


/* High contrast mode support */
@media (prefers-contrast: high) {
    .flashcard-front.flashcard-correct {
        background-color: #e8f5e8 !important;
        color: #1b5e20 !important;
        border: 3px solid #2e7d32 !important;
    }
    
    .flashcard-front.flashcard-incorrect {
        background-color: #ffebee !important;
        color: #b71c1c !important;
        border: 3px solid #d32f2f !important;
    }
    
    .flashcard-front.flashcard-reveal {
        background-color: #fffde7 !important;
        color: #f57f17 !important;
        border: 3px solid #fbc02d !important;
    }
    
    .word-list span.mastered {
        background: #228B22 !important;
        border: 2px solid #ffffff !important;
        color: #ffffff !important;
    }
    
    .learning-control-btn {
        background: #000000 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
    }
    
    .learning-control-btn.learning-control-active {
        background: #008000 !important;
        border: 2px solid #ffffff !important;
    }
    
    .learning-image-placeholder {
        border: 3px solid #000000 !important;
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    .learning-progress-bar {
        border: 2px solid #000000 !important;
        background: #ffffff !important;
    }
    
    .learning-progress-fill {
        background: #000000 !important;
    }
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .flashcard-front,
    .word-list span,
    .progress-bar-fill,
    .learning-control-btn,
    .learning-audio-btn,
    .main-tab-button,
    .tab-button,
    .learning-image-section,
    .learning-progress-fill {
        animation: none !important;
        transition: none !important;
    }
    
    .flashcard-front.flashcard-correct,
    .flashcard-front.flashcard-incorrect,
    .flashcard-front.flashcard-reveal {
        animation: none !important;
    }
    
    .word-list span.mastered {
        animation: none !important;
    }
    
    .progress-bar-fill.mastered {
        animation: none !important;
    }
    
    .learning-control-btn.learning-control-active::after {
        animation: none !important;
    }
    
    .learning-progress-fill::after {
        animation: none !important;
    }
}

/* =================== 
   PRINT STYLES
   =================== */

@media print {
     .flashcard-nav,
     .chunk-tabs,
     .reset-btn,
     .bottom-right-wrapper,
     .flashcard-reset-wrapper,
     .main-tab-navigation,
     .config-area,
     .learning-controls {
         display: none !important;
     }
    
    .flashcard-section {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
        margin: 20px 0;
        padding: 20px;
    }
    
    .flashcard {
        box-shadow: none;
        border: 1px solid #ddd;
        background: white;
    }
    
    .flashcard-front {
        background: white !important;
        color: black !important;
        border: 2px solid #333 !important;
    }
    
    .learning-word-display {
        color: black !important;
    }
    
    .learning-image-section img.learning-image {
		/*
        border: 1px solid #999 !important;
		*/
    }
    
    .learning-image-placeholder {
        border: 1px solid #999 !important;
        background: white !important;
        color: black !important;
    }
    
    .main-tab-pane {
        display: block !important;
    }
    
    .tab-pane {
        display: block !important;
        page-break-before: always;
    }
    
    .word-list {
        background: white;
        border: 1px solid #ccc;
    }
    
    .word-list span {
        background: white !important;
        color: black !important;
        border: 1px solid #999 !important;
    }
}

/* =================== 
   FLASHCARD BOOKMARK STYLES
   =================== */

/* Container for the bookmark button positioned on the right side */
.flashcard-bookmark-container {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    transition: all 0.3s ease;
}

/* Bookmark button styling */
.flashcard-bookmark-btn {
	background: rgb(255 255 255);
    border: 0px solid #e9ecef;
    border-radius: 50%;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	/*
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	*/
    backdrop-filter: blur(10px);
}

.flashcard-bookmark-btn:hover {
    transform: scale(1.1);
	background: #f5f5f5;
    border-color: #ff7373;
}

.flashcard-bookmark-btn .material-symbols-rounded {
    font-size: 24px;
    transition: all 0.3s ease;
}

.flashcard-bookmark-btn .bookmark-filled {
    color: #ff7373 !important;
    animation: bookmark-pulse 0.6s ease-out;
}

.flashcard-bookmark-btn .bookmark-unfilled {
    color: #adb5bd !important;
}

.flashcard-bookmark-btn:hover .bookmark-unfilled {
    color: #ff7373 !important;
}

.flashcard-bookmark-btn.loading {
    opacity: 0.6;
    pointer-events: none;
    animation: bookmark-loading 1s infinite;
}

/* Bookmark animations */
@keyframes bookmark-pulse {
    0% {
        transform: scale(1);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.2);
        filter: brightness(1.3);
    }
    100% {
        transform: scale(1);
        filter: brightness(1);
    }
}

@keyframes bookmark-loading {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(180deg);
    }
}




/* =================== 
   FLASHCARD COMPLETION UI
   =================== */

.flashcard-completion-ui {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem;
    min-height: 200px;
}

.restart-set-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: transparent;
    color: #6c757d;
    border: none;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 60px;
    height: 60px;
}

.restart-set-btn:hover {
    background: rgba(108, 117, 125, 0.1);
    color: #495057;
    transform: scale(1.1);
}

.restart-set-btn .material-symbols-rounded {
    font-size: 2rem;
}

/* =================== 
   UTILITY CLASSES
   =================== */

.hidden-style {
    display: none !important;
}

.visible-style {
    display: block !important;
}

.loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* NEW: Learning-specific utility classes */
.learning-images-hidden .learning-image-section[data-show-images="false"] .learning-image {
    display: none !important;
}

.learning-images-hidden .learning-image-section[data-show-images="false"] .learning-image-placeholder {
    display: flex !important;
    animation: image-placeholder-fade 0.3s ease-out;
}

.learning-peek-active .learning-control-btn.learning-peek-btn {
    animation: learning-button-bounce 1s infinite;
}

.learning-shuffle-active .learning-control-btn.learning-shuffle-btn {
    background: linear-gradient(135deg, #6f42c1 0%, #5a32a3 100%) !important;
    box-shadow: 0 0 15px rgba(111, 66, 193, 0.4);
}

.learning-autoplay-active .learning-control-btn.learning-autoplay-btn {
    background: linear-gradient(135deg, #007bff 0%, #0056b3 100%) !important;
    box-shadow: 0 0 15px rgba(0, 123, 255, 0.4);
}

/* NEW: Progress bar states */
.learning-progress-complete .learning-progress-fill {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    animation: progress-shine 1s ease-in-out;
}

.learning-progress-halfway .learning-progress-fill {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%) !important;
}

.learning-progress-starting .learning-progress-fill {
    background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
}

/* NEW: Enhanced button interaction states */
/*
.learning-control-btn:active:not(.learning-control-active) {
    transform: scale(0.95);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.learning-control-btn.learning-control-active:active {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.6), inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
 */
/* NEW: Image section hover effects - DISABLED per user request */

/* .learning-image-section:hover .learning-image { */
/*     filter: brightness(1.05); */
/* } */

/* .learning-image-section:hover .learning-image-placeholder { */
/*     border-color: #adb5bd; */
/*     background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); */
/* } */

/* NEW: Progress text animations */
.learning-progress-text {
    transition: all 0.3s ease;
}

/*
.learning-progress-wrapper:hover .learning-progress-text {
    transform: scale(1.05);
    font-weight: 700;
}
*/

/* NEW: Speed button special effects */
.learning-speed-btn .control-text {
    transition: all 0.2s ease;
}

.learning-speed-btn:hover .control-text {
    transform: scale(1.1);
    text-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

/* NEW: Auto-play button pulse effect when active */
/*
.learning-control-btn.learning-autoplay-btn.learning-control-active {
    animation: active-pulse 2s infinite;
}
*/
/* NEW: Shuffle button rotation effect */
/*
.learning-shuffle-btn:hover .material-symbols-rounded {
    transform: rotate(180deg);
    transition: transform 0.3s ease;
}

.learning-shuffle-btn.learning-control-active .material-symbols-rounded {
    animation: spin 2s linear infinite;
}
*/
/* NEW: Image toggle button effect */

.learning-image-btn .material-symbols-rounded {
    transition: all 0.3s ease;
}
/*
.learning-image-btn:hover .material-symbols-rounded {
    transform: scale(1.2);
}

.learning-image-btn.learning-control-active .material-symbols-rounded {
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}
*/

/* NEW: Peek button eye blink effect */
/*
.learning-peek-btn.learning-control-active .material-symbols-rounded {
    animation: eye-blink 3s infinite;
}
*/


[data-tipo="learning"] .flashcard-front {
    height: 250px !important;
}




@keyframes eye-blink {
    0%, 90%, 100% { transform: scaleY(1); }
    95% { transform: scaleY(0.1); }
}

/* =================== 
   ENHANCED DARK MODE SUPPORT (if needed)
   =================== */

@media (prefers-color-scheme: dark) {
    /* Optional dark mode styles for learning controls */
    .learning-controls {
        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
        border-color: #495057;
        color: #ffffff;
    }
    
    .learning-progress-bar {
        background: #495057;
    }
    
    .learning-progress-text {
        color: #ffffff;
        background: linear-gradient(135deg, #ffffff 0%, #e9ecef 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
    
    .learning-image-placeholder {
        background: linear-gradient(135deg, #495057 0%, #6c757d 100%);
        border-color: #6c757d;
        color: #ffffff;
    }
    
    .learning-image-placeholder::after {
        color: #adb5bd;
    }
}


/* =================== 
   ENHANCED LEARNING CONTROLS - Updated for direction toggle and auto-play move
   =================== */

/* REMOVED: Image section hover effects (brightness and scale) */

/* .learning-image-section:hover .learning-image { */
/*     filter: brightness(1.05); */
/* } */

/* .learning-image-section:hover .learning-image-placeholder { */
/*     border-color: #adb5bd; */
/*     background: linear-gradient(135deg, #e9ecef 0%, #dee2e6 100%); */
/* } */


.learning-direction-btn:hover {
    background: linear-gradient(135deg, #c82333 0%, #bd2130 100%) !important;
}

.learning-direction-btn.learning-control-active {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.4);
}

.learning-direction-btn.learning-control-active:hover {
    background: linear-gradient(135deg, #218838 0%, #1e7e34 100%) !important;
}
*/

/* Direction toggle icon animation */
/*
.learning-direction-btn .material-symbols-rounded {
    transition: all 0.3s ease;
}

.learning-direction-btn:hover .material-symbols-rounded {
    transform: rotate(180deg);
}

.learning-direction-btn.learning-control-active .material-symbols-rounded {
    animation: direction-flip 2s infinite;
}
*/

@keyframes direction-flip {
    0%, 50%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(180deg); }
    75% { transform: rotate(-180deg); }
}

/* =================== 
   ENHANCED NAVIGATION CONTROLS - Auto-play moved here
   =================== */

/* AUTO-PLAY BUTTON IN NAVIGATION - Styled like record-btn (blue) */
.flashcard-nav .learning-autoplay-btn {
    background: linear-gradient(135deg, #17a2b8 0%, #138496 100%) !important;
    border: none;
    border-radius: 5px;
    padding: 10px;
    cursor: pointer;
    color: white;
    font-size: 1em;
    font-weight: bold;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
    flex: 1 1 70px;
    max-width: 70px;
    min-width: 70px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.flashcard-nav .learning-autoplay-btn:hover {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%) !important;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(23, 162, 184, 0.4);
}

.flashcard-nav .learning-autoplay-btn.learning-control-active {
    background: linear-gradient(135deg, #138496 0%, #117a8b 100%) !important;
    box-shadow: 0 0 15px rgba(23, 162, 184, 0.4);
    animation: autoplay-pulse 2s infinite;
}

.flashcard-nav .learning-autoplay-btn.learning-control-active:hover {
    background: linear-gradient(135deg, #117a8b 0%, #0e6674 100%) !important;
    box-shadow: 0 0 20px rgba(23, 162, 184, 0.6);
}

@keyframes autoplay-pulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 0 0 15px rgba(23, 162, 184, 0.4);
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 0 0 25px rgba(23, 162, 184, 0.6);
    }
}

/* =================== 
   ENHANCED IMAGE ERROR HANDLING
   =================== */

/* Better styling for broken image placeholders */
/*
.learning-image-section .learning-image[style*="display: none"] + .learning-image-placeholder {
    border: 2px dashed #dc3545;
    background: linear-gradient(135deg, #f8d7da 0%, #f5c6cb 100%);
    color: #721c24;
}

.learning-image-section .learning-image[style*="display: none"] + .learning-image-placeholder::before {
    content: '❌';
    font-size: 20px;
    display: block;
    margin-bottom: 2px;
}

.learning-image-section .learning-image[style*="display: none"] + .learning-image-placeholder::after {
    content: 'Image Error';
    font-size: 9px;
    color: #721c24;
}
*/



/* =================== 
   RESPONSIVE DESIGN UPDATES
   =================== */

@media (max-width: 768px) {
    /* Direction toggle responsive */
    .learning-direction-btn {
        min-width: 45px;
    }
    
    /* Auto-play in nav responsive */
    .flashcard-nav .learning-autoplay-btn {
        width: 45px;
        height: 45px;
    }
}

@media (max-width: 480px) {
    /* Extra small mobile adjustments */
    .learning-direction-btn {
        min-width: 40px;
        height: 28px;
    }
    
    .flashcard-nav .learning-autoplay-btn {
        width: 40px;
        height: 40px;
    }
}

/* =================== 
   HIGH CONTRAST MODE UPDATES
   =================== */

@media (prefers-contrast: high) {
    .learning-direction-btn {
        background: #8B0000 !important;
        border: 2px solid #ffffff !important;
        color: #ffffff !important;
    }
    
    .learning-direction-btn.learning-control-active {
        background: #008000 !important;
        border: 2px solid #ffffff !important;
    }
    
    .flashcard-nav .learning-autoplay-btn {
        background: #00A2B8 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
    }
    
    .flashcard-nav .learning-autoplay-btn.learning-control-active {
        background: #00A2B8 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
    }
    
    .compare-btn {
        background: #FFD700 !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }
    
    .compare-btn:hover {
        background: #FFD700 !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }
}

/* =================== 
   REDUCED MOTION UPDATES
   =================== */

@media (prefers-reduced-motion: reduce) {
    .learning-direction-btn .material-symbols-rounded,
    .learning-direction-btn.learning-control-active .material-symbols-rounded,
    .flashcard-nav .learning-autoplay-btn.learning-control-active {
        animation: none !important;
        transition: none !important;
    }
    
    .learning-direction-btn:hover .material-symbols-rounded {
        transform: none !important;
    }
}

/* =================== 
   PRINT STYLES UPDATES
   =================== */

@media print {
    .learning-direction-btn,
    .flashcard-nav .learning-autoplay-btn,
    .compare-btn {
        display: none !important;
    }
}

/* =================== 
   UTILITY CLASSES UPDATES
   =================== */

/* NEW: Direction toggle utility classes */
.learning-direction-active .learning-control-btn.learning-direction-btn {
    animation: direction-flip 2s infinite;
}

.learning-direction-toggled .learning-word-display {
    border-left: 3px solid #dc3545;
    padding-left: 8px;
}

/* Auto-play moved to nav utility */
.flashcard-nav .learning-autoplay-btn.learning-control-active {
    position: relative;
}

.flashcard-nav .learning-autoplay-btn.learning-control-active::after {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    animation: active-pulse 2s infinite;
}



/* =================== 
   ENHANCED ERROR HANDLING STYLES
   =================== */

/* Image loading error states */
/*
.learning-image-section.image-loading .learning-image {
    opacity: 0.5;
    filter: grayscale(100%);
}

.learning-image-section.image-error .learning-image-placeholder {
    display: flex !important;
    border-color: #dc3545;
    background: #f8d7da;
    color: #721c24;
}

.learning-image-section.image-error .learning-image {
    display: none !important;
}
*/

/* Better visual feedback for broken images */
/*
.learning-image-section[data-has-image="true"] .learning-image[style*="display: none"] ~ .learning-image-placeholder {
    border-style: solid;
    border-width: 2px;
    background: repeating-linear-gradient(
        45deg,
        #f8d7da,
        #f8d7da 10px,
        #f5c6cb 10px,
        #f5c6cb 20px
    );
}

.toggle-btn.material-symbols-rounded {
    font-size: 24px !important;
    padding-right: 2px !important;
}
*/




/* =================== 
   ENHANCED TOGGLE BUTTON STYLES WITH MATERIAL ICONS
   Add after line ~450 (after learning controls section)
   =================== */

/* Enhanced Toggle Button Styles */
/*
.learning-control-btn.toggle-btn {
    background: #fff;
    border: 1px solid #e9ecef;
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    padding: 8px 16px;
    min-width: 90px;
    height: 40px;
    text-transform: none;
    letter-spacing: normal;
    box-shadow: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
}
*/
.learning-control-btn.toggle-btn {
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    overflow: hidden;
}
/*
.learning-control-btn.toggle-btn:hover {
    border-color: #3498db;
    background: #f8f9fa;
    color: #3498db;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.learning-control-btn.toggle-btn.learning-control-active {
    background: #3498db;
    border-color: #3498db;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.learning-control-btn.toggle-btn.learning-control-active:hover {
    background: #2980b9;
    border-color: #2980b9;
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}
*/
/* Material Icons in Learning Controls */
.learning-control-btn .material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    transition: all 0.3s ease;
}

/* Enhanced Click Effects for DIR and Speed buttons */
.learning-direction-btn,
.learning-speed-btn {
    position: relative;
}

.learning-direction-btn::before,
.learning-speed-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(255,255,255,0.6) 0%, rgba(255,255,255,0.3) 50%, transparent 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.learning-direction-btn.click-effect::before,
.learning-speed-btn.click-effect::before {
    animation: clickRipple 0.6s ease-out;
}

/* Icon popup effect for DIR button */
.learning-direction-btn::after {
    content: 'swap_horiz';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    color: #e74c3c;
    background: white;
    padding: 8px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.learning-direction-btn.click-effect::after {
    animation: iconPopup 0.6s ease-out;
}

/* Icon popup effect for Speed button */
.learning-speed-btn::after {
    content: 'bolt';
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    color: #f39c12;
    background: white;
    padding: 8px;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.learning-speed-btn.click-effect::after {
    animation: iconPopup 0.6s ease-out;
}

/* Special styling for DIR button when active */
.learning-direction-btn.learning-control-active {
    background: #e74c3c !important;
    border-color: #e74c3c !important;
    color: #fff !important;
}

.learning-direction-btn.learning-control-active:hover {
    background: #c0392b !important;
    border-color: #c0392b !important;
}

/* Special styling for Speed button */
/*
.learning-speed-btn {
    background: #f39c12 !important;
    border-color: #f39c12 !important;
    color: #fff !important;
}

.learning-speed-btn:hover {
    background: #e67e22 !important;
    border-color: #e67e22 !important;
}
*/
/* =================== 
   LEARNING WORD TRACKING STYLES
   Add after word list section around line ~800
   =================== */

/* New class for words that have been shown in learning mode */
.word-list span.learning-shown {
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%) !important;
    color: #2e7d32 !important;
    border-color: #c3e6cb !important;

}


/* Animation when a word gets marked as shown */
.word-list span.learning-shown {
    animation: wordShown 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Special styling when word is currently being displayed */
/*
.word-list span.learning-current {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
    color: #856404 !important;
    border-color: #ffeaa7 !important;
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.6) !important;
    transform: scale(1.1) !important;
    font-weight: 700 !important;
    z-index: 5 !important;
    position: relative !important;
}

.word-list span.learning-current:hover {
    background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%) !important;
    color: #533f03 !important;
}
*/

/* Animation for current word highlight */


/* Reset animation when starting new round */
.word-list span.learning-reset {
    animation: wordReset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Progress bar for shown words in learning mode */
.word-list span.learning-shown .progress-bar-fill {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%) !important;
    width: 100% !important;
    box-shadow: inset 0 0 5px rgba(40, 167, 69, 0.3) !important;
}

/* Enhanced styling for learning mode word list */
/*
[data-tipo="learning"] .word-list {
    border: 2px dotted #28a745 !important;
    background: linear-gradient(135deg, #f8fff9 0%, #f1f8e9 100%) !important;
}
*/


/* =================== 
   NEW KEYFRAME ANIMATIONS
   Add to animations section around line ~1200
   =================== */

/* Click effect animations */
@keyframes clickRipple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }
    50% {
        width: 100px;
        height: 100px;
        opacity: 0.4;
    }
    100% {
        width: 120px;
        height: 120px;
        opacity: 0;
    }
}

@keyframes iconPopup {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(10px) scale(0.8);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px) scale(1.1);
    }
    100% {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px) scale(0.9);
    }
}

/* Word tracking animations */
@keyframes wordShown {
    0% {
        background: #ffffff;
        color: #6c757d;
        transform: scale(1);
    }
    30% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(21, 87, 36, 0.3);
    }
    100% {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #2e7d32;
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(21, 87, 36, 0.1);
    }
}



@keyframes wordReset {
    0% {
        background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
        color: #2e7d32;
        transform: scale(1);
    }
    50% {
        background: #f8f9fa;
        color: #495057;
        transform: scale(0.95);
    }
    100% {
        background: #e9e9e9;
        color: #949494;
        transform: scale(1);
    }
}

/* =================== 
   RESPONSIVE DESIGN UPDATES
   Add to mobile responsive sections around line ~1300
   =================== */

@media (max-width: 768px) {


    
    /* Adjust popup position for mobile */
    .learning-direction-btn::after,
    .learning-speed-btn::after {
        top: -35px;
        font-size: 20px;
        padding: 6px;
    }

    
    [data-tipo="learning"] .word-list::before {
        font-size: 10px;
        padding: 3px 6px;
    }
}

@media (max-width: 480px) {

    
    /* Smaller popup for mobile */
    .learning-direction-btn::after,
    .learning-speed-btn::after {
        top: -30px;
        font-size: 18px;
        padding: 4px;
    }

}

/* =================== 
   ACCESSIBILITY AND REDUCED MOTION UPDATES
   Add to accessibility section around line ~1400
   =================== */


@media (prefers-reduced-motion: reduce) {
    /* Symbol progress reduced motion */
    .symbol {
        transition: none !important;
    }
    
    .symbol.complete {
        animation: none !important;
    }
    
    .learning-direction-btn::before,
    .learning-speed-btn::before,
    .learning-direction-btn::after,
    .learning-speed-btn::after {
        animation: none !important;
    }
    
    .learning-control-btn.toggle-btn {
        transition: none !important;
    }
    
    .word-list span.learning-shown,
    .word-list span.learning-current,
    .word-list span.learning-reset {
        animation: none !important;
        transition: none !important;
    }
    
    .word-list span.learning-current {
        transform: scale(1.05) !important;
    }
}

@media (prefers-contrast: high) {
    /* Symbol progress high contrast */
    .symbol.correct {
        background: #228B22 !important;
        border: 2px solid #ffffff !important;
    }
    
    .symbol.complete {
        background: #FFD700 !important;
        border: 2px solid #000000 !important;
    }
    
    .symbol.empty {
        background: #ffffff !important;
        border: 2px solid #000000 !important;
    }
    
    .symbol.wrong {
        background: #DC143C !important;
        border: 2px solid #ffffff !important;
    }
    
    .word-list span.learning-shown {
        background: #228B22 !important;
        color: #ffffff !important;
        border: 2px solid #ffffff !important;
    }
    
    .word-list span.learning-current {
        background: #FFD700 !important;
        color: #000000 !important;
        border: 2px solid #000000 !important;
    }
    
    [data-tipo="learning"] .word-list::before {
        color: #000000 !important;
        background: #f0f0f0 !important;
        border: 1px solid #000000 !important;
    }
}

/* =================== 
   PRINT STYLES UPDATES
   Add to print section around line ~1600
   =================== */

@media print {
    .word-list span.learning-shown {
        background: #e8f5e8 !important;
        color: #2d5a2d !important;
        border: 1px solid #2d5a2d !important;
    }
    
    .word-list span.learning-current {
        background: #fff3cd !important;
        color: #856404 !important;
        border: 1px solid #856404 !important;
    }
    
    .learning-progress-bar {
        background: #f0f0f0 !important;
        border: 1px solid #000000 !important;
    }
    
    .learning-progress-fill {
        background: #000000 !important;
    }
    
    .learning-progress-text {
        color: #000000 !important;
        background: #f0f0f0 !important;
        border: 1px solid #000000 !important;
    }
    
    [data-tipo="learning"] .word-list::before {
        color: #000000 !important;
        background: #f0f0f0 !important;
        border: 1px solid #000000 !important;
    }
}






























/* ===== ENHANCED SPEAKING PRACTICE STATUS STYLES =====
 * Complete CSS for Speaking Flashcards with Status Display System
 * Compatible with both old and new FlashcardManager systems
 */

/* ===== MAIN SPEAKING CONTAINER ===== */
.speaking-practice-front {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding: 20px;
    min-height: 200px;
    justify-content: center;
}

/* ===== STATUS DISPLAY MESSAGES ===== */
.status-neutral,
.status-recording,
.status-compare,
.status-correct,
.status-incorrect,
.status-error {
    font-size: 1rem;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
    font-weight: 500;
    width: 100%;
    max-width: 350px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    line-height: 1.4;
}

/* Neutral State - Default */
.status-neutral {
    background-color: #f8f9fa;
    color: #495057;
    border-left: 4px solid #6c757d;
    border: 1px solid #e9ecef;
}

/* Recording State - Red with pulse animation */
.status-recording {
    background-color: #fff5f5;
    color: #e03131;
    border-left: 4px solid #ff6b6b;
    border: 1px solid #ffcdd2;
    animation: pulse 1.5s infinite;
}

/* Compare State - Blue for comparison */
.status-compare {
    background-color: #e3fafc;
    color: #0c8599;
    border-left: 4px solid #3bc9db;
    border: 1px solid #b3f3ff;
}

/* Correct State - Green with success animation */
.status-correct {
    background-color: #ebfbee;
    color: #2b8a3e;
    border-left: 4px solid #51cf66;
    border: 1px solid #c3fac8;
    animation: success-fade 0.5s ease-in-out;
}

/* Incorrect State - Orange for encouragement */
.status-incorrect {
    background-color: #fff4e6;
    color: #e8590c;
    border-left: 4px solid #ff922b;
    border: 1px solid #ffe4cc;
}

/* Error State - Red for errors */
.status-error {
    background-color: #fff5f5;
    color: #e03131;
    border-left: 4px solid #ff6b6b;
    border: 1px solid #ffcdd2;
}

/* ===== WORD DISPLAY ===== */
.speaking-practice-word {
    font-size: 2rem;
    font-weight: 600;
    color: #2c3e50;
    margin: 10px 0;
    text-align: center;
    letter-spacing: 0.5px;
}

/* ===== ANSWER DISPLAY ===== */
.speaking-answer {
    font-size: 1.2rem;
    margin: 15px 0;
    text-align: center;
    font-weight: 500;
    color: #6c757d;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fa;
    border: 1px dashed #dee2e6;
    max-width: 300px;
    transition: opacity 0.3s ease;
}

.speaking-answer.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ===== COMPARISON DISPLAY ===== */
.comparison-display {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    background-color: #f8f9fa;
    width: 100%;
    max-width: 350px;
    text-align: center;
    color: #6c757d;
    border: 1px solid #e9ecef;
    transition: opacity 0.3s ease;
}

.comparison-display.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ===== BUTTON ENHANCEMENTS FOR SPEAKING ===== */

/* Record Button States */
.record-btn {
    background-color: #4dabf7 !important;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.record-btn:hover {
    background-color: #1a8fe3 !important;
    transform: scale(1.05);
}

.record-btn.preparing {
    background-color: #ffd43b !important;
    animation: rotate 1.5s infinite linear;
}

.record-btn.preparing .material-symbols-rounded {
    color: white;
}

.record-btn.recording {
    background-color: #ff6b6b !important;
    animation: pulse 1.5s infinite;
    transform: scale(1.05);
}

.record-btn.disabled {
    background-color: #ddd !important;
    color: #999 !important;
    cursor: not-allowed;
    box-shadow: none !important;
    transform: none !important;
}

.record-btn.disabled:hover {
    transform: none !important;
    background-color: #ddd !important;
}

/* Replay Button States */
.replay-btn {
    background-color: #f1c40f !important;
    color: white !important;
    transition: all 0.3s ease;
}

.replay-btn:hover {
    background-color: #d4ac0d !important;
    transform: scale(1.05);
}

.replay-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: #ddd !important;
    color: #999 !important;
    box-shadow: none !important;
    transform: none !important;
}

.replay-btn.highlight-replay {
    background-color: #f39c12 !important;
    box-shadow: 0 0 15px rgba(243, 156, 18, 0.6) !important;
    transform: scale(1.08);
    animation: pulse-replay 1.5s infinite;
}

/* Remember/Forget Buttons for Speaking */
.flashcard-nav .remember-btn,
.flashcard-nav .forget-btn {
    transition: all 0.2s ease;
}

.flashcard-nav .remember-btn:hover {
    background-color: #28a745 !important;
    transform: scale(1.05);
}

.flashcard-nav .forget-btn:hover {
    background-color: #dc3545 !important;
    transform: scale(1.05);
}

/* ===== SPEAKING PRACTICE SPECIFIC LAYOUTS ===== */

/* Speaking Practice Navigation */
.speaking-practice-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 20px;
    flex-wrap: wrap;
}

.speaking-practice-nav .record-btn,
.speaking-practice-nav .replay-btn,
.speaking-practice-nav .remember-btn,
.speaking-practice-nav .forget-btn {
    min-width: 50px;
    min-height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    font-size: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* ===== RECORDING PROGRESS INDICATORS ===== */
.recording-progress {
    width: 100%;
    max-width: 300px;
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    margin-top: 10px;
    overflow: hidden;
    transition: opacity 0.3s ease;
}

.recording-progress-bar {
    height: 100%;
    background-color: #ff6b6b;
    transition: width 0.1s linear;
    border-radius: 2px;
}

.recording-countdown {
    font-size: 1.5rem;
    font-weight: bold;
    margin-top: 10px;
    color: #ff6b6b;
    text-align: center;
}

/* ===== WAVEFORM VISUALIZATION ===== */
.waveform-container {
    width: 100%;
    max-width: 300px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e9ecef;
}

.waveform-bars {
    display: flex;
    align-items: end;
    gap: 2px;
    height: 40px;
}

.waveform-bar {
    width: 3px;
    background-color: #3498db;
    border-radius: 1px;
    transition: height 0.1s ease;
}

/* ===== ANIMATIONS ===== */

/* Pulse animation for recording state */
@keyframes pulse {
    0% { 
        transform: scale(1); 
        opacity: 1; 
        box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
    }
    50% { 
        transform: scale(1.02); 
        opacity: 0.8; 
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.6);
    }
    100% { 
        transform: scale(1); 
        opacity: 1; 
        box-shadow: 0 0 10px rgba(255, 107, 107, 0.3);
    }
}

/* Rotation animation for preparing state */
@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Success fade animation for correct answers */
@keyframes success-fade {
    0% { 
        opacity: 0; 
        transform: scale(0.9); 
        background-color: #d4edda; 
    }
    50% { 
        opacity: 1; 
        transform: scale(1.02); 
        background-color: #d1ecf1; 
    }
    100% { 
        opacity: 1; 
        transform: scale(1); 
        background-color: #ebfbee; 
    }
}

/* Replay button pulse */
@keyframes pulse-replay {
    0% { 
        box-shadow: 0 0 10px rgba(243, 156, 18, 0.5); 
    }
    50% { 
        box-shadow: 0 0 20px rgba(243, 156, 18, 0.8); 
    }
    100% { 
        box-shadow: 0 0 10px rgba(243, 156, 18, 0.5); 
    }
}

/* Glow effect for active elements */
@keyframes glow {
    0% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
    50% { box-shadow: 0 0 20px rgba(52, 152, 219, 0.8); }
    100% { box-shadow: 0 0 5px rgba(52, 152, 219, 0.5); }
}

/* ===== FLASHCARD TRANSITIONS ===== */
.speaking-practice .flashcard {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.speaking-practice .flashcard.hidden {
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;
}

.speaking-practice .flashcard:not(.hidden) {
    opacity: 1;
    transform: translateY(0);
}

/* ===== UTILITIES ===== */
.hidden-style {
    display: none !important;
}

.visible-style {
    display: block !important;
}

/* Temporary highlight for word swapping */
.temp-highlight {
    background-color: rgba(241, 196, 15, 0.6) !important;
    color: #846b09 !important;
    font-weight: normal !important;
    transition: all 0.3s ease;
}

.temp-progress-fill {
    background-color: rgba(241, 196, 15, 0.4) !important;
    transition: all 0.3s ease;
}

/* ===== RESPONSIVE DESIGN ===== */

/* Tablet styles */
@media (max-width: 768px) {
    .speaking-practice-front {
        padding: 15px;
        gap: 12px;
    }
    
    .speaking-practice-word {
        font-size: 1.8rem;
    }
    
    .status-neutral,
    .status-recording,
    .status-compare,
    .status-correct,
    .status-incorrect,
    .status-error {
        font-size: 0.95rem;
        padding: 12px 18px;
        max-width: 320px;
    }
    
    .speaking-practice-nav {
        gap: 12px;
        padding: 15px;
    }
    
    .speaking-practice-nav .record-btn,
    .speaking-practice-nav .replay-btn,
    .speaking-practice-nav .remember-btn,
    .speaking-practice-nav .forget-btn {
        min-width: 45px;
        min-height: 45px;
        font-size: 20px;
    }
}

/* Mobile styles */
@media (max-width: 600px) {
    .speaking-practice-front {
        padding: 12px;
        gap: 10px;
        min-height: 150px;
    }
    
    .speaking-practice-word {
        font-size: 1.5rem;
        margin: 8px 0;
    }
    
    .status-neutral,
    .status-recording,
    .status-compare,
    .status-correct,
    .status-incorrect,
    .status-error {
        font-size: 0.9rem;
        padding: 10px 15px;
        max-width: 280px;
        margin-bottom: 12px;
    }
    
    .speaking-answer {
        font-size: 1.1rem;
        margin: 12px 0;
        padding: 12px;
        max-width: 260px;
    }
    
    .comparison-display {
        padding: 12px;
        max-width: 280px;
        margin-top: 15px;
    }
    
    .speaking-practice-nav {
        gap: 10px;
        padding: 12px;
    }
    
    .speaking-practice-nav .record-btn,
    .speaking-practice-nav .replay-btn,
    .speaking-practice-nav .remember-btn,
    .speaking-practice-nav .forget-btn {
        min-width: 40px;
        min-height: 40px;
        font-size: 18px;
    }
    
    .recording-progress {
        max-width: 250px;
    }
    
    /* Learning progress bar removed from mobile view */
    
    .waveform-container {
        max-width: 250px;
        height: 50px;
    }
    
    .recording-countdown {
        font-size: 1.3rem;
    }
}

/* Extra small mobile */
@media (max-width: 480px) {
    .speaking-practice-word {
        font-size: 1.3rem;
    }
    
    .status-neutral,
    .status-recording,
    .status-compare,
    .status-correct,
    .status-incorrect,
    .status-error {
        font-size: 0.85rem;
        padding: 8px 12px;
        max-width: 260px;
    }
    
    .speaking-practice-nav .record-btn,
    .speaking-practice-nav .replay-btn,
    .speaking-practice-nav .remember-btn,
    .speaking-practice-nav .forget-btn {
        min-width: 38px;
        min-height: 38px;
        font-size: 16px;
    }
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */


/* High contrast mode support */
@media (prefers-contrast: high) {
    .status-neutral,
    .status-recording,
    .status-compare,
    .status-correct,
    .status-incorrect,
    .status-error {
        border: 2px solid currentColor;
    }
    
    .speaking-practice-word {
        color: #000;
        font-weight: 700;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .status-recording,
    .record-btn.recording,
    .replay-btn.highlight-replay {
        animation: none;
    }
    
    .speaking-practice .flashcard {
        transition: none;
    }
    
    .record-btn,
    .replay-btn {
        transition: background-color 0.2s ease;
    }
}

/* ===== DARK MODE SUPPORT ===== */
@media (prefers-color-scheme: dark) {
    .status-neutral {
        background-color: #2d3748;
        color: #e2e8f0;
        border-left-color: #718096;
        border-color: #4a5568;
    }
    
    .speaking-practice-word {
        color: #f7fafc;
    }
    
    .speaking-answer {
        background-color: #2d3748;
        color: #e2e8f0;
        border-color: #4a5568;
    }
    
    .comparison-display {
        background-color: #2d3748;
        color: #e2e8f0;
        border-color: #4a5568;
    }
    
    .waveform-container {
        background-color: rgba(255, 255, 255, 0.05);
        border-color: #4a5568;
    }
    
    .recording-progress {
        background-color: #4a5568;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .speaking-practice-nav,
    .record-btn,
    .replay-btn,
    .recording-progress,
    .waveform-container {
        display: none !important;
    }
    
    .status-neutral,
    .status-recording,
    .status-compare,
    .status-correct,
    .status-incorrect,
    .status-error {
        border: 1px solid #000 !important;
        background: white !important;
        color: black !important;
        box-shadow: none !important;
    }
    
    .speaking-practice-word {
        color: black !important;
    }
}



.status-neutral { background: #f0f0f0; border-color: #ddd; color: #333; }
.status-playing { background: #e3f2fd; border-color: #2196f3; color: #1976d2; }
.status-listening { background: #fff3e0; border-color: #ff9800; color: #f57c00; }
.status-recording { background: #ffebee; border-color: #f44336; color: #d32f2f; }
.status-compare { background: #f3e5f5; border-color: #9c27b0; color: #7b1fa2; }
.status-correct { background: #e8f5e8; border-color: #4caf50; color: #2e7d32; }
.status-incorrect { background: #ffebee; border-color: #f44336; color: #c62828; }
.status-error { background: #fff3e0; border-color: #ff9800; color: #ef6c00; }

/* =================== 
   FLASHCARD MESSAGE BACKGROUND & PADDING REMOVAL
   Fix for speaking practice messages overlaying parent container
   Added: Message content background and padding removal
   =================== */

/* Remove background and padding from all status messages */
.functional-status,
.status-neutral,
.status-recording,
.status-compare,
.status-correct,
.status-incorrect,
.status-error,
.status-playing,
.status-listening,
.status-countdown {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 24px !important;
    line-height: 24px !important;
}

/* Remove background from any div inside speaking practice containers */
.speaking-practice-front div,
.speaking-practice-front .functional-status {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Target specific functional-status elements with inline styles */
div[id*="functional-status"] {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove backgrounds from any elements with 'status' in their class name */
[class*="status"] {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Additional catch-all for any message containers */
.speaking-practice-front [style*="background"],
.speaking-practice-front [style*="padding"] {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* Ensure text color remains visible - allow inline styles to override */
.functional-status,
.status-neutral,
.status-recording,
.status-compare,
.status-correct,
.status-incorrect,
.status-error,
.status-playing,
.status-listening,
.status-countdown {
    background: transparent !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    font-size: 24px !important;
    line-height: 24px !important;
    /* color: inherit !important; */
}

/* Force countdown circles to use single color (no color changes during countdown) */
.status-countdown .countdown-circle {
    /* color: inherit !important; */
    transition: none !important;
    animation: none !important;
}

/* Prevent any color changes during countdown */
.status-countdown {
    /* color: inherit !important; */
    transition: none !important;
    animation: none !important;
}



/* Optional: Add subtle text styling to maintain readability */
.functional-status {
    font-size: 24px !important;
    line-height: 24px !important;
}

/* Force icons in functional-status to inherit color */
.functional-status .material-symbols-rounded {
    /* color: inherit !important; */
    font-size: inherit !important;
}

/* Prevent white class from overriding icon colors */
.functional-status .material-symbols-rounded.white {
    color: inherit !important;
}

/* Countdown circle styling - force size and prevent inheritance */
.countdown-circle {
    margin: 0 2px !important;
    display: inline-block !important;
    font-size: 16px !important;
    line-height: 16px !important;
    color: #3498db !important;
}

/* Ensure icon inside countdown circle is always small */
.countdown-circle.material-symbols-rounded,
.countdown-circle .material-symbols-rounded {
    font-size: 16px !important;
    line-height: 16px !important;
}

/* Empty circles - lower opacity and FILL 0 */
.countdown-circle.empty {
    opacity: 0.3 !important;
    font-variation-settings: 'FILL' 0, 'wght' 400 !important;
}

/* Filled circles - full opacity and FILL 1 */
.countdown-circle.filled {
    opacity: 1 !important;
    font-variation-settings: 'FILL' 1, 'wght' 400 !important;
}

/* Evaluate icon individual colors */
.evaluate-close {
    color: #dc3545 !important; /* Red - like forget button */
}

.evaluate-help {
    color: #3498db !important; /* Blue - as requested */
}

.evaluate-check {
    color: #28a745 !important; /* Green - like remember button */
}

/* Empty circles - lower opacity */
.countdown-circle.empty {
    opacity: 0.2 !important;
    color: inherit !important;
}

/* Filled circles - full opacity */
.countdown-circle:not(.empty) {
    opacity: 1 !important;
    color: inherit !important;
}

/******** REMOVE DUPLICATE/CONFLICTING COUNTDOWN CIRCLE RULES BELOW THIS LINE ********/

/* Flashcard Type Navigation Buttons */
.flashcard-type-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 25px 0px 0px 0px;
    overflow-x: hidden;
    width: 100%;
}

.flashcard-type-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px 16px;
    background: #f5f5f5;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 12px;
    font-weight: 500;
    color: #666;
    white-space: nowrap;
    min-width: 80px;
}

.flashcard-type-button:hover {
    background: #e8e8e8;
    color: #4ca6ff;
}

.flashcard-type-button.active {
    background: #4ca6ff;
    color: white;
    box-shadow: 0 4px 12px rgba(76, 166, 255, 0.3);
}

.flashcard-type-button.active:hover {
    background: #4ca6ff;
    color: white;
}

.flashcard-type-icon {
    display: block;
    font-size: 24px;
    line-height: 1;
}

.flashcard-type-button:hover .flashcard-type-icon {
    color: #4ca6ff;
}

.flashcard-type-button.active .flashcard-type-icon {
    color: white;
}

.flashcard-type-label {
    display: block;
    text-align: center;
    line-height: 1.2;
    font-size: 12px;
}

.flashcard-type-content {
    width: 100%;
}

.flashcard-type-pane {
    display: none;
}

.flashcard-type-pane.active {
    display: block;
}


/* ===================
   CHUNK CHECKBOX STYLE
   Chunk navigation buttons styled as checkboxes that mark completion
   =================== */

.chunk-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.chunk-checkbox-icon {
    font-size: 20px;
    color: white;
    transition: all 0.3s ease;
}

.chunk-checkbox.active .chunk-checkbox-icon {
    color: white;
}

.chunk-checkbox.completed {
    background: linear-gradient(135deg, #51cf66 0%, #40c057 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(81, 207, 102, 0.3);
}

.chunk-checkbox.completed .chunk-checkbox-icon {
    color: white;
}

.chunk-checkbox.completed .chunk-checkbox-icon::before {
    content: 'check_box';
}

.chunk-checkbox:not(.completed) .chunk-checkbox-icon::before {
    content: 'check_box_outline_blank';
}

.chunk-checkbox.completed:hover {
    background: linear-gradient(135deg, #40c057 0%, #37b24d 100%) !important;
}