/* VOC2.CSS - All styles extracted from main file */

/* Header */
.main-header {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    color: #fff;
    padding: 30px 20px;
    text-align: center;
}

.main-header h1 {
    font-size: 2em;
    margin-bottom: 10px;
    font-weight: 300;
}

.main-header i {
    margin-right: 15px;
}

.subtitle {
    font-size: 1.2em;
    opacity: 0.9;
    font-weight: 300;
}

/* Filter Container */
.filter-container {
    cursor: default;
    user-select: none;
    max-width: 400px;
    margin: 0 auto;
    padding: 24px 16px;
}

.filter-section {
    margin-top: 0px;
    margin-bottom: 0px;
}

.filter-section h3 {
    color: #2c3e50;
    margin-bottom: 15px;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Category Dropdown Container - Compact for all screens */
.category-dropdown-container {
    max-width: 100%;
    margin: 0 auto;
    padding: 0px;
}

/* Custom Category Dropdown - Original Simple Design */
.custom-category-dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

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

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

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

.custom-category-dropdown .dropdown-icon-single {
    font-size: 20px;
}

.custom-category-dropdown .dropdown-label {
    flex: 1;
    text-align: left;
    font-weight: 500;
}

.custom-category-dropdown .dropdown-arrow {
    font-size: 20px;
    color: #999;
    transition: transform 0.2s ease;
}

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

.custom-category-dropdown .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.2s ease;
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

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

.custom-category-dropdown .custom-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
}

.custom-category-dropdown .custom-dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.custom-category-dropdown .custom-dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.custom-category-dropdown .custom-dropdown-item:hover {
    background: #f8f9fa;
}

.custom-category-dropdown .custom-dropdown-item.active {
    background: #e3f2fd;
    font-weight: 500;
}

.custom-category-dropdown .custom-dropdown-item span:nth-child(2) {
    flex: 1;
}

.custom-category-dropdown .check-icon {
    font-size: 18px;
    color: #3498db;
}

/* Subcategories Label */
.subcategories-label {
    font-size: 0.75em;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 32px 0 16px 0;
    text-align: center;
    position: relative;
    padding: 0 20px;
}

.subcategories-label::before,
.subcategories-label::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40px;
    height: 1px;
    background: linear-gradient(to right, transparent, #cbd5e1);
}

.subcategories-label::before {
    right: 100%;
    margin-right: 12px;
}

.subcategories-label::after {
    left: 100%;
    margin-left: 12px;
    background: linear-gradient(to left, transparent, #cbd5e1);
}

/* Subcategories List - Compact for all screens */
.subcategories-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    max-width: 100%;
    margin: 0 auto;
    background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Groups Grid - Compact single column for all screens */
.groups-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    grid-template-columns: 1fr;
}

.group-item {
    border-radius: 8px;
    padding: 6px 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
    min-width: 80px;
    white-space: nowrap;
    border: 2px solid transparent;
}

.group-item:hover {
    border-color: #3498db;
    background: #f8f9fa;
}

.group-item.active {
    background: #4ca6ff1f;
    border-bottom: 2px solid #3498db;
}

/* Define reference colors for each group item */
.group-item:nth-child(1) { color: #3498db; }
.group-item:nth-child(2) { color: #ff7373; }
.group-item:nth-child(3) { color: #00d96c; }
.group-item:nth-child(4) { color: #ffa726; }
.group-item:nth-child(5) { color: #9c27b0; }
.group-item:nth-child(6) { color: #ff5722; }
.group-item:nth-child(7) { color: #607d8b; }
.group-item:nth-child(8) { color: #e91e63; }

/* Hover state styling with reference colors for bottom border */
.group-item:nth-child(1):hover { border-color: #3498db !important; }
.group-item:nth-child(2):hover { border-color: #ff7373 !important; }
.group-item:nth-child(3):hover { border-color: #00d96c !important; }
.group-item:nth-child(4):hover { border-color: #ffa726 !important; }
.group-item:nth-child(5):hover { border-color: #9c27b0 !important; }
.group-item:nth-child(6):hover { border-color: #ff5722 !important; }
.group-item:nth-child(7):hover { border-color: #607d8b !important; }
.group-item:nth-child(8):hover { border-color: #e91e63 !important; }

/* Active state styling with reference colors */
.group-item:nth-child(1).active {
    border-color: #3498db !important;
    background-color: rgba(52, 152, 219, 0.1) !important;
}
.group-item:nth-child(2).active {
    border-color: #ff7373 !important;
    background-color: rgba(255, 115, 115, 0.1) !important;
}
.group-item:nth-child(3).active {
    border-color: #00d96c !important;
    background-color: rgba(0, 217, 108, 0.1) !important;
}
.group-item:nth-child(4).active {
    border-color: #ffa726 !important;
    background-color: rgba(255, 167, 38, 0.1) !important;
}
.group-item:nth-child(5).active {
    border-color: #9c27b0 !important;
    background-color: rgba(156, 39, 176, 0.1) !important;
}
.group-item:nth-child(6).active {
    border-color: #ff5722 !important;
    background-color: rgba(255, 87, 34, 0.1) !important;
}
.group-item:nth-child(7).active {
    border-color: #607d8b !important;
    background-color: rgba(96, 125, 139, 0.1) !important;
}
.group-item:nth-child(8).active {
    border-color: #e91e63 !important;
    background-color: rgba(233, 30, 99, 0.1) !important;
}

/* Group-specific color variables for categories and subcategories */
.item-card[data-id^="1-"], .item-card[data-id="1"] { --group-color: #e74c3c; }
.item-card[data-id^="2-"], .item-card[data-id="2"] { --group-color: #3498db; }
.item-card[data-id^="3-"], .item-card[data-id="3"] { --group-color: #2ecc71; }
.item-card[data-id^="4-"], .item-card[data-id="4"] { --group-color: #f39c12; }
.item-card[data-id^="5-"], .item-card[data-id="5"] { --group-color: #9b59b6; }
.item-card[data-id^="6-"], .item-card[data-id="6"] { --group-color: #1abc9c; }
.item-card[data-id^="7-"], .item-card[data-id="7"] { --group-color: #e67e22; }
.item-card[data-id^="8-"], .item-card[data-id="8"] { --group-color: #34495e; }

/* Active state indicator - elegant checkmark */
.item-card.active::after {
    content: "\e876";
    font-family: 'Material Symbols Rounded';
    font-variation-settings: 'FILL' 1;
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--group-color, #3498db);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: normal;
    /* box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); */
    /* animation: checkmarkPop 0.3s cubic-bezier(0.4, 0, 0.2, 1); */
}

@keyframes checkmarkPop {
    0% {
        transform: translateY(-50%) scale(0);
    }
    50% {
        transform: translateY(-50%) scale(1.2);
    }
    100% {
        transform: translateY(-50%) scale(1);
    }
}

.group-icon {
    font-size: 20px;
    margin-bottom: 5px;
    opacity: 0.8;
}

.group-title {
    font-size: 8pt;
    font-weight: 600;
    line-height: 1.1;
}

/* Items Container - Compact design for all screens */
.items-container {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 8px;
    max-width: 100%;
    margin: 0 auto;
    background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* Item Card Styling for List Layout - Compact for all screens */
.item-card {
    background: linear-gradient(135deg, #ffffff 0%, #fefeff 100%);
    /* border removed as requested */
    border-radius: 10px;
    padding: 11px 14px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #334155;
    margin-bottom: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.item-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    background: var(--group-color, #3498db);
    opacity: 0.05;
    transition: width 0.3s ease;
}

.item-card:hover::before {
    width: 100%;
}

.item-card:hover {
    border-left-color: var(--group-color, #3498db);
    border-left-width: 4px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateX(4px);
}

/* Category styling - Compact for all screens */
.item-card.item-category {
    background: none;
    font-weight: 600;
    font-size: 0.70em;
    border-left-width: 4px;
    padding: 8px 10px;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: 0;
}

.item-card.item-category:hover {
    background: #fff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

/* Subcategory styling - Compact for all screens */
.item-card.item-subcategory {
    background: none;
    margin-left: 16px;
    font-size: 0.65em;
    font-weight: 500;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    box-shadow: none;
    transition: background 0.15s;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 22px;
    gap: 2px;
    margin-bottom: 0px;
}

/* Sub-subcategory styling - Compact for all screens */
.item-card.item-subsubcategory {
    background: none;
    margin-left: 32px;
    font-size: 0.60em;
    gap: 1px;
    margin-bottom: 0;
    padding: 9px 12px;
    border-radius: 16px;
    box-shadow: none;
    transition: background 0.15s;
    position: relative;
    display: flex;
    align-items: center;
    min-height: 18px;
}

    border-radius: 20px !important;
.item-card.active {
    border-left-color: var(--group-color, #3498db) !important;
    border-left-width: 4px !important;
    background: linear-gradient(135deg, rgba(52, 152, 219, 0.08) 0%, rgba(52, 152, 219, 0.04) 100%) !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.15) !important;
}

/* Icon styling for list items - Enhanced */
.item-icon {
    font-size: 1.15em;
    opacity: 0.7;
    flex-shrink: 0;
    width: 22px;
    text-align: center;
    color: var(--group-color, #64748b);
    transition: all 0.3s ease;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
}
    border-radius: 20px !important;
.item-card:hover .item-icon {
    opacity: 1;
    transform: scale(1.1);
}

.item-card.item-subcategory .item-icon,
.item-card.item-subsubcategory .item-icon {
    font-size: 0.95em;
    opacity: 0.5;
}


.item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
}

.item-title {
    font-size: 1em;
    font-weight: inherit;
    line-height: 1.5;
    word-wrap: break-word;
    letter-spacing: 0.2px;
}

/* Action Bar */
.action-bar {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    max-width: 400px;
    margin: 0 auto;
    padding: 0px 10px;
    border-radius: 8px;
    align-content: flex-end;
    margin-top: 8px;
    margin-bottom: 20px;
}

.selection-info {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.selection-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.selection-item strong {
    color: #bdc3c7;
}

.action-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Translation peek styles */
.native-column.text-hidden,
.target-column.text-hidden,
.pt-text.text-hidden,
.pt-text2.text-hidden,
.cell-text.text-hidden {
    color: #ffffff !important;
    background: #ffffff !important;
    background-image: none !important;
    border-color: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* Removed incorrect image-hidden CSS - using correct version from dialogo_css.php below */

/* Translation peek animation */
.image-wrapper img.translation-peek {
    animation: peekFadeIn 0.3s ease-in-out !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.image-wrapper img.translation-peek.fade-out {
    animation: peekFadeOut 0.3s ease-in-out forwards !important;
}

.translation-peek {
    animation: peekFadeIn 0.3s ease-in-out;
}

@keyframes peekFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.translation-peek.fade-out {
    animation: peekFadeOut 0.3s ease-in-out forwards;
}

@keyframes peekFadeOut {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-secondary {
    background: #95a5a6;
    color: #fff;
}

.btn-secondary:hover {
    background: #7f8c8d;
}

.vocab-count {
    padding: 10px 15px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #8e8e8e;
    font-size: 11pt;
}

/* Hidden sections */
.filter-section.hidden {
    display: none;
}

/* Vocabulary Section */
.performance-notice {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
    padding: 15px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.no-vocab {
    text-align: center;
    padding: 60px;
    color: #7f8c8d;
}

.no-vocab i {
    font-size: 4em;
    margin-bottom: 20px;
    opacity: 0.5;
}

.no-vocab h3 {
    margin-bottom: 10px;
    color: #34495e;
}

/* Vocabulary Grid */
.vocab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 10px;
}

.vocab-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

/* Vocabulary List Layout */
.vocab-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0px;
}

.vocab-row-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 0px;
    gap: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Image Styles */
.vocab-image {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    margin-bottom: 8px;
}

.vocab-image-left {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50px;
    flex-shrink: 0;
    padding: 2px;
}

.image-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 50px;
    border: 4px solid #f5f8fa;
    margin-left: -5px;
    transition: all 0.3s ease;
}

/* Image hidden state */
.image-wrapper.image-hidden {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    border: 4px solid #f5f8fa !important;
}

.image-wrapper.image-hidden .vocab-image-left {
    visibility: hidden !important;
    opacity: 0 !important;
}

.image-wrapper.image-hidden:hover {
    background-color: rgba(240, 248, 255, 0.3) !important;
    border-color: rgba(76, 121, 255, 0.2) !important;
    cursor: pointer !important;
}

/* Text Styles */
.vocab-text {
    margin-bottom: 6px;
}

.vocab-text-center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.target-column {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    padding: 2px 6px !important;
    margin-left: -5px;
    background: linear-gradient(to right, transparent, #f3f8ff 0%, transparent);
    border-radius: 6px;
    width: 100% !important;
    display: block !important;
}

/* Word type specific colors for target columns - MATCHING review-vocabulary.php */
.vocab-word-noun .target-column {
    /* Nouns - Blue theme */
    color: #1565c0 !important;
    background: linear-gradient(to right, transparent, #e3f2fd 0%, transparent) !important;
}

.vocab-word-verb .target-column {
    /* Verbs - Purple theme */
    color: #7b1fa2 !important;
    background: linear-gradient(to right, transparent, #f3e5f5 0%, transparent) !important;
}

.vocab-word-other .target-column {
    /* Others - Green theme */
    color: #2e7d32 !important;
    background: linear-gradient(to right, transparent, #e8f5e8 0%, transparent) !important;
}

/* Fallback for any other word types */
.vocab-row-card:not(.vocab-word-noun):not(.vocab-word-verb):not(.vocab-word-other) .target-column {
    color: #2e7d32 !important;
    background: linear-gradient(to right, transparent, #e8f5e8 0%, transparent) !important;
}

.native-column {
    font-size: 12px;
    color: #888;
}

/* Level Filter Buttons */
.level-slider-container {
    display: flex;
    justify-content: center;
}

.level-slider {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    width: 110px;
}

.slider-section {
    display: flex;
}

.slider-track {
    position: relative;
    width: 3px;
    background: #e9ecef;
    border-radius: 2px;
    margin-right: 8px;
    margin-top: 17px;
    margin-bottom: 17px;
}

.slider-thumb {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #3498db;
    border-radius: 50%;
    left: -3.5px;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Thumb positions for 4 levels only */
.slider-thumb.level-beginner { top: -2px; }
.slider-thumb.level-intermediate { top: 26px; }
.slider-thumb.level-advanced { top: 54px; }
.slider-thumb.level-expert { top: 82px; }

/* Hide thumb for "all" level since it's separate */
.slider-thumb.level-all { display: none; }

.level-options {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.all-levels-section {
    margin-top: 0px;
    padding-top: 8px;
    border-top: 1px solid #f1f3f5;
}

.all-levels-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 28px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: #f8f9fa;
    text-decoration: none;
    color: #64748b;
    border: 1px solid #e9ecef;
    margin-left: 11px;
    user-select: none;
}

.all-levels-content {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
}

.all-levels-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    pointer-events: none;
    margin-left: 8px;
}

.all-levels-btn:hover {
    border-color: #3498db;
    background: #f1f3f5;
    color: #475569;
}

.all-levels-btn.active {
    background: #3498db;
    border-color: #3498db;
    color: white;
}

.level-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 28px;
    margin: 0.5px 0;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    color: #64748b;
    border: 0px solid #e9ecef;
    user-select: none;
}

.level-option:hover {
    border-color: #3498db;
    background: #f8f9fa;
    color: #475569;
}

.level-option.active {
    background: #3498db;
    border-color: #3498db;
    color: white;
}

.level-content {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 6px;
}

.level-text {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    pointer-events: none;
    margin-left: 8px;
}

/* Config Area Vocabulario */
.config-area-vocabulario {
    display: flex;
    padding-top: 0px;
    padding-bottom: 30px;
    background-color: #ddd;
    margin-top: 0px;
    border-radius: 24px 24px 0px 0px;
    background: linear-gradient(to bottom, #ffffff 50%, #f5f7fa 100%);
    border-bottom: 1px solid #e8e8e8;
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
    align-content: center;
    align-items: center;
    gap: 0px;
    flex-direction: column;
    color: #aeaeae;
    margin-left: -8px;
    margin-right: -8px;
}



/* Audio button styles */
.play-btn, .recordline-btn, .hear-btn, .hear-recorded-btn, .bookmark-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin-right: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #7f8c8d;
    z-index: 10;
    position: relative;
}

.play-btn:hover, .recordline-btn:hover, .hear-btn:hover, .hear-recorded-btn:hover, .bookmark-btn:hover {
    color: #3498db;
    transform: scale(1.1);
}

/* Recording animation */
@keyframes pulse {
    0% {
        transform: scale(1);
        background-color: #ffebee;
    }
    50% {
        transform: scale(1.05);
        background-color: #ffcdd2;
    }
    100% {
        transform: scale(1);
        background-color: #ffebee;
    }
}

/* Recording button states */
.recordline-btn.recording {
    animation: pulse 1.5s infinite;
    background-color: #ffebee !important;
}

.recordline-btn.recording .material-symbols-rounded {
    color: #e74c3c !important;
}

/* Hear recorded button styling */
.hear-recorded-btn {
    opacity: 0.9;
    margin-right: 4px;
    order: 3; /* Position after bookmark (order 2) and before mic (order 4) */
}

.hear-recorded-btn:hover {
    background: #e8f4fd;
    color: #2196f3;
}

/* Button ordering for proper positioning: bookmark → headphone → mic → play */
.bookmark-btn {
    order: 1;
}

.hear-recorded-btn {
    order: 2;
}

.recordline-btn {
    order: 3;
}

.play-btn {
    order: 4;
}

/* Ensure the parent container displays buttons in correct order and positioned to the right */
.vocab-text-center > div:first-child {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end; /* Position buttons to the right */
    margin-top: 8px;
}

.bookmark-btn.loading {
    opacity: 0.5;
    pointer-events: none;
}

.bookmark-filled {
    color: #ff7373 !important;
}

.bookmark-unfilled {
    color: #eaeaea !important;
}


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

.word-level-badge {
    display: none;
}



/* Section visibility */
.vocabulary-section, .flashcards-section {
    transition: opacity 0.3s ease;
}

.flashcards-section {
    margin-left: -8px;
    margin-right: -8px;
}

/* Removed media queries - using single design for all screen sizes */

/* Infinite Scroll Loading Spinner */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#infinite-scroll-loader {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 0.7; }
}

/* Word Type Labels */
.word-type {
    margin: 20px 0 12px 0;
    padding: 0;
}

.word-type-internal {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.word-type-noun {
    background-color: #e3f2fd;
    color: #1565c0;
}

.word-type-verb {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.word-type-other {
    background-color: #e8f5e8;
    color: #2e7d32;
}

/* Filter Area Styling */
.combined-filter-area {
    border-radius: 12px;
    padding: 20px;
    padding-bottom: 50px;
    margin-bottom: 20px;
}

.combined-filters {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.filter-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 200px;
    align-items: center !important;
}

.filter-label {
    font-size: 12px;
    font-weight: 600;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =================== 
   SHARED STYLES FROM dialogo_css.php
   =================== */

/* Main Tab Navigation */
.main-tab-navigation {
    display: flex;
    background-color: #f2f2f2;
    padding: 8px;
    margin: 0;
    gap: 4px;
    border-radius: 16px 16px 0px 0px;
    background: linear-gradient(to bottom, #ffffff 50%, #f5f7fa 100%);
    box-shadow: 0 1px 0px rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid #e8e8e8;
}

/* Main Tab Button */
.main-tab-button {
    flex: 1;
    padding: 12px 0px;
    border: none;
    background-color: transparent;
    color: #6c6c6c;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    border-radius: 11px;
    text-decoration: none;
}

/* Responsive design for main tab buttons */
@media (max-width: 768px) {
    .main-tab-button {
        flex-direction: column !important;
        text-align: center !important;
    }
}

/* Vocabulary Grid and List Layouts */
.vocab-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    padding: 10px;
}

.vocab-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.vocab-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0px;
}

.vocab-row-card {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 0px;
    gap: 10px;
    position: relative;
}

/* Image Styles */
.vocab-image {
    width: 100%;
    height: auto;
    max-height: 100px;
    object-fit: contain;
    margin-bottom: 8px;
}

.vocab-image-left {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 50px;
    flex-shrink: 0;
    padding: 2px;
}

.image-wrapper {
    position: relative;
    display: inline-block;
    border-radius: 50px;
    border: 4px solid #f5f8fa;
    margin-left: -5px;
}

.image-wrapper.image-hidden {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    transition: all 0.2s ease;
    border: 4px solid #f5f8fa !important;
}

.image-wrapper.image-hidden .vocab-image-left {
    visibility: hidden !important;
    opacity: 0 !important;
}

.image-wrapper.image-hidden:hover {
    background-color: rgba(240, 248, 255, 0.3) !important;
    border-color: rgba(76, 121, 255, 0.2) !important;
    cursor: pointer !important;
}

/* Text Styles */
.vocab-text {
    margin-bottom: 6px;
}

.vocab-text-center {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.target-column {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    padding: 2px 6px !important;
    margin-left: -5px;
    background: linear-gradient(to right, transparent, #f3f8ff 0%, transparent);
    border-radius: 6px;
    width: 100% !important;
    display: block !important;
}

/* Word type specific colors for target columns */
.vocab-word-noun .target-column {
    color: #1565c0 !important;
    background: linear-gradient(to right, transparent, #e3f2fd 0%, transparent) !important;
}

.vocab-word-verb .target-column {
    color: #7b1fa2 !important;
    background: linear-gradient(to right, transparent, #f3e5f5 0%, transparent) !important;
}

.vocab-word-other .target-column {
    color: #2e7d32 !important;
    background: linear-gradient(to right, transparent, #e8f5e8 0%, transparent) !important;
}

.vocab-row-card:not(.vocab-word-noun):not(.vocab-word-verb) .target-column {
    color: #2e7d32 !important;
    background: linear-gradient(to right, transparent, #e8f5e8 0%, transparent) !important;
}

.native-column {
    font-size: 12px;
    color: #888;
}

/* Audio Button Styles */
.play-btn, .recordline-btn, .hear-btn, .hear-recorded-btn, .bookmark-btn,
.dialogue-play-btn, .dialogue-recordline-btn, .dialogue-slow-play-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin: 0;
    border-radius: 50%;
    transition: all 0.2s ease;
    color: #7f8c8d;
    z-index: 10;
    position: relative;
    width: auto;
    height: auto;
    min-width: 32px;
    min-height: 32px;
}

.play-btn:hover, .recordline-btn:hover, .hear-btn:hover, .hear-recorded-btn:hover, .bookmark-btn:hover,
.dialogue-play-btn:hover, .dialogue-recordline-btn:hover, .dialogue-slow-play-btn:hover {
    color: #3498db;
    transform: scale(1.0);
}

/* Button ordering */
.bookmark-btn {
    order: 1;
}

.hear-recorded-btn,
.hear-btn {
    order: 2;
}

.recordline-btn,
.dialogue-recordline-btn {
    order: 3;
}

.dialogue-slow-play-btn {
    order: 4;
}

.play-btn,
.dialogue-play-btn {
    order: 5;
}

.vocab-text-center > div:first-child {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    margin-top: 8px;
}

/* Recording button states */
.recordline-btn.recording {
    animation: pulse 1.5s infinite;
    background-color: #ffebee !important;
}

.recordline-btn.recording .material-symbols-rounded {
    color: #e74c3c !important;
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes vocab-mic-pulse {
    0% {
        transform: scale(1);
        background-color: #ffebee;
    }
    50% {
        transform: scale(1.05);
        background-color: #ffcdd2;
    }
    100% {
        transform: scale(1);
        background-color: #ffebee;
    }
}

/* Word Type Labels */
.word-type {
    padding: 8px 0;
    margin: 10px 0 5px 0;
}

.word-type-internal {
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 4px 8px;
    border-radius: 4px;
}

.word-type-noun {
    background-color: #e3f2fd;
    color: #1565c0;
}

.word-type-verb {
    background-color: #f3e5f5;
    color: #7b1fa2;
}

.word-type-other {
    background-color: #e8f5e8;
    color: #2e7d32;
}

/* Text Hidden Styles */
.text-hidden {
    color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
    user-select: none;
    pointer-events: auto;
    cursor: pointer;
}

#vocabulary .target-column.text-hidden,
#vocabulary .native-column.text-hidden,
#vocabulary .pt-text2.text-hidden {
    color: transparent !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

#vocabulary .target-column:not(.text-hidden) {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    padding: 2px 6px !important;
    margin-left: -5px;
    background: linear-gradient(to right, transparent, #f3f8ff 0%, transparent);
    border-radius: 6px;
}

#vocabulary .native-column:not(.text-hidden),
#vocabulary .pt-text2:not(.text-hidden) {
    font-size: 12px;
    color: #888;
}

/* Bookmark Styles */
.loading {
    opacity: 0.5;
    pointer-events: none;
}

.bookmark-filled {
    color: #ff7373 !important;
}

.bookmark-unfilled {
    color: #eaeaea !important;
}

/* ===================
   HIDE CONFIG-AREA IN VOCABULARY FLASHCARD TAB
   =================== */

/* Hide the config-area only inside the flashcards-section on vocabulary page */
#vocabulary-page .flashcards-section .config-area {
    display: none !important;
}

/* =================== 
   LESSON CONTENT SECTION - MATCHING lesson.php
   =================== */

/* Lesson Content Section - Visual Separation */
.lesson-content-section {
    background: linear-gradient(to bottom, #fafafa 0%, #ffffff 100px);
    border-radius: 16px;
    margin-top: 0;
    box-shadow: 0 0px 3px rgba(0, 0, 0, 0.1);
}

/* Tab Content Containers */
#container, .vocab-section, .flashcard-section-container {
    margin-bottom: 0px;
    background: #fff;
    padding: 8px;
}

/* =================== 
   VOCABULARY PLAYER STYLES 
   =================== */

/* Vocabulary play all button container */
.vocab-play-all-container {
    text-align: center;
    padding-left: 0px;
    width: 100%;
    margin-top: 0px;
    /* Maintain space even when button is hidden */
    height: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CRITICAL FIX: Vocabulary play all button - matching dialogue play button exactly from lesson.php */
#vocab-play-pause-all-btn {
    width: 50px;
    height: 50px;
    padding: 12px;
    box-shadow: 0 0 0 6px #bfdfff;
    cursor: pointer;
    background-color: #4c79ff;
    border: 0px solid #ccc;
    border-radius: 50px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    /* Ensure button is centered in its container */
    margin: 0 auto;
    flex-shrink: 0;
    margin-top: -60px;
}

#vocab-play-pause-all-btn:hover {
    background-color: #ff7373;
    animation: pulse-shadow 1.5s infinite ease-in-out;
}

#vocab-play-pause-all-btn .material-symbols-rounded {
    vertical-align: middle;
}

/* ==============================================
   OVERLAY PLAYER STYLES
   ============================================== */

/* For overlay player items */
.overlay-audio-player .recording::before {
    top: 15px;
    right: 20px;
    font-size: 18px;
    width: 32px;
    height: 32px;
    z-index: 10001;
}

/* Recording indicator animation */
@keyframes recording-indicator {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

.highlight-active.highlight-recording {
    background-color: rgba(255, 115, 115, 0.15) !important;
    border-left-color: #ff7373 !important;
    box-shadow: 0 2px 8px rgba(255, 115, 115, 0.2) !important;
}

/* Keep larger screen overlay design as default */
.overlay-audio-player {
    padding: 10px !important;
}

.overlay-audio-player .main-mode-btn {
    gap: 8px !important;
}

.overlay-audio-player .main-mode-btn > div {
    width: 50px !important;
    height: 50px !important;
}

.overlay-audio-player .main-mode-btn .material-symbols-rounded {
    font-size: 24px !important;
}

.overlay-audio-player .main-mode-btn > span {
    font-size: 13px !important;
}

.overlay-audio-player .main-velocity-dropdown {
    width: 160px !important;
    height: 36px !important;
    font-size: 12px !important;
    padding: 8px 12px !important;
}

.overlay-audio-player button[id$="-settings"] {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
}

.overlay-audio-player [id$="-controls"] {
    padding: 8px !important;
    gap: 12px !important;
}

.overlay-audio-player [id$="-controls"] button {
    width: 48px !important;
    height: 42px !important;
    font-size: 18px !important;
}

.overlay-audio-player [id$="-play-pause"] {
    width: 58px !important;
    height: 50px !important;
    font-size: 24px !important;
}

.overlay-audio-player [id$="-text-content"] {
    height: 100% !important;
    max-height: 50vh !important;
    overflow-y: auto !important;
}

.overlay-audio-player [id$="-progress"] {
    font-size: 14px !important;
}

.overlay-audio-player .sequence-step-indicator {
    padding: 4px 10px !important;
    font-size: 12px !important;
    border-radius: 12px !important;
}

.overlay-audio-player [id$="-settings-panel"] {
    left: 40px !important;
    right: 40px !important;
    top: 80px !important;
    max-height: 70vh !important;
    padding: 20px !important;
}

.overlay-audio-player div[style*="min-width: 320px"] {
    min-width: 420px !important;
    max-width: 100vw !important;
}

.overlay-audio-player button[id$="-close"] {
    width: 44px !important;
    height: 44px !important;
    font-size: 20px !important;
    top: 15px !important;
    right: 15px !important;
}

/* Prevent rapid clicking visual feedback */
.dialogue-recordline-btn[data-processing="true"],
.dialogue-play-btn[data-processing="true"],
.dialogue-slow-play-btn[data-processing="true"],
.hear-btn[data-processing="true"] {
    opacity: 0.6 !important;
    pointer-events: none !important;
    transition: opacity 0.2s ease;
}

.dialogue-recordline-btn[data-processing="true"]::after {
    content: "";
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    background-color: #ff6b6b;
    border-radius: 50%;
    animation: processing-pulse 1s infinite;
}

@keyframes processing-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.dialogue-recordline-btn,
.dialogue-play-btn {
    position: relative;
}

.dialogue-recordline-btn,
.dialogue-play-btn,
.dialogue-slow-play-btn,
.hear-btn {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Mode button hover effects */
.main-mode-btn:hover > div {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 115, 115, 0.4) !important;
}

.main-mode-btn.active:hover > div {
    box-shadow: 0 6px 16px rgba(255, 115, 115, 0.5) !important;
}

/* UNIFIED Z-INDEX SYSTEM FOR OVERLAY PLAYER */
.overlay-audio-player {
    z-index: 10000 !important;
}

.overlay-audio-player .overlay-compact-container,
.overlay-audio-player #dialogue-overlay-player-main-mode-buttons,
.overlay-audio-player #vocabulary-overlay-player-main-mode-buttons {
    z-index: 10 !important;
    position: relative;
}

.overlay-audio-player .main-mode-btn {
    z-index: 10 !important;
    position: relative;
}

.overlay-audio-player [id$="-settings-panel"] {
    z-index: 100 !important;
}

.overlay-audio-player .overlay-close-btn,
.overlay-audio-player [id$="-close"] {
    z-index: 200 !important;
}

/* ==============================================
   SEQUENCE STEP RECORDING PULSE
   ============================================== */

@keyframes recording-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 1px 2px rgba(231, 76, 60, 0.10);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.025);
        box-shadow: 0 1px 4px rgba(231, 76, 60, 0.16);
    }
}

/* ==============================================
   RECORDING INDICATOR STYLES
   ============================================== */

/* Mic icon that appears above a card during recording */
.line.recording::before,
.vocab-row-card.recording::before,
.dialogue-content.recording::before,
.dialog-text.recording::before {
    content: 'mic';
    position: absolute;
    top: -8px;
    right: 8px;
    font-family: 'Material Symbols Rounded';
    font-size: 16px;
    color: #e74c3c;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #e74c3c;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
    animation: recording-badge-pulse 1.5s infinite;
    z-index: 1000;
    pointer-events: none;
    line-height: 1;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

.line,
.vocab-row-card,
.dialogue-content {
    position: relative;
}

@keyframes recording-badge-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(231, 76, 60, 0.4);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
        box-shadow: 0 4px 12px rgba(231, 76, 60, 0.6);
    }
}

@keyframes hear-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 4px 20px rgba(39, 174, 96, 0.6);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.1);
        box-shadow: 0 6px 25px rgba(39, 174, 96, 0.8);
    }
}

/* Recording ::after indicator on highlighted text */
#vocabulary .target-column.highlight-active.recording::after,
.dialog-highlight.highlight-active.recording::after,
.dialogue-content .highlight-active.recording::after,
span[data-word].highlight-active.recording::after {
    content: '🎙️';
    position: absolute;
    top: -25px;
    right: -8px;
    background: rgba(231, 76, 60, 0.95);
    color: white;
    padding: 3px 6px;
    border-radius: 12px;
    font-size: 12px;
    z-index: 1000;
    animation: recording-indicator 1.5s infinite ease-in-out;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    border: 2px solid white;
    min-width: 20px;
    text-align: center;
    font-weight: bold;
    pointer-events: none;
}

.dialog-highlight,
.target-column,
.dialog-text,
.dialogue-content {
    position: relative !important;
}

/* Fallback highlighting for vocab containers during playback */
.vocab-text-center.highlight-active,
.vocab-row-card.highlight-active {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 50%, #fdcb6e 100%) !important;
    border: 2px solid #fdcb6e !important;
    border-radius: 8px !important;
    padding: 4px 8px !important;
    margin: 2px 0 !important;
    transition: all 0.3s ease !important;
}

/* Vocabulary highlight-active text */
#vocabulary .target-column.highlight-active:not(.manually-hidden) {
    color: #9e8221 !important;
    background: linear-gradient(to right, transparent, #fffbe6 0%, transparent) !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
}

#vocabulary .target-column.highlight-active.text-hidden {
    color: #9e8221 !important;
    background: linear-gradient(to right, transparent, #fffbe6 0%, transparent) !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
    text-shadow: none !important;
}

/* Shadowing active state */
.target-column.shadowing-active {
    background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 50%, #fdcb6e 100%) !important;
    color: #856404 !important;
    border-radius: 6px !important;
    padding: 2px 6px !important;
    display: inline-block !important;
    animation: vocab-shadowing-pulse 2s infinite !important;
    z-index: 15 !important;
    position: relative !important;
}

/* ==============================================
   VOCABULARY RECORDING STYLES
   ============================================== */

.vocab-recording-active {
    position: relative !important;
    transition: all 0.3s ease !important;
    padding: 6px 10px !important;
    margin: 4px 0 !important;
}

/* Vocabulary button order: bookmark → headphone → mic → slow play → play */
#vocabulary .bookmark-btn {
    order: 1 !important;
}

#vocabulary .hear-btn {
    order: 2 !important;
}

#vocabulary .dialogue-recordline-btn {
    order: 3 !important;
}

#vocabulary .dialogue-slow-play-btn {
    order: 4 !important;
}

#vocabulary .dialogue-play-btn {
    order: 5 !important;
}

/* Vocabulary button container layout */
#vocabulary .vocab-text-center > div:first-child {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    margin-top: 8px !important;
    gap: 6px !important;
}

/* Vocabulary button z-index */
#vocabulary .dialogue-play-btn,
#vocabulary .dialogue-recordline-btn,
#vocabulary .hear-btn {
    position: relative;
    z-index: 15;
}

/* Mic button recording state */
#vocabulary .dialogue-recordline-btn.recording {
    background-color: #ffebee !important;
    animation: vocab-mic-pulse 1.5s infinite;
}

#vocabulary .dialogue-recordline-btn.recording .material-symbols-rounded {
    color: #e74c3c !important;
}

@keyframes vocab-mic-pulse {
    0% {
        transform: scale(1);
        background-color: #ffebee;
    }
    50% {
        transform: scale(1.05);
        background-color: #ffcdd2;
    }
    100% {
        transform: scale(1);
        background-color: #ffebee;
    }
}

/* Vocabulary hear button */
.vocab-hear-btn {
    background: none !important;
    border: none !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    padding: 4px !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
    color: #7f8c8d !important;
    z-index: 12 !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-width: 32px !important;
    min-height: 32px !important;
    order: 2 !important;
}

.vocab-hear-btn:hover {
    background: #e8f4fd !important;
    color: #2196f3 !important;
}

.vocab-hear-btn[data-has-recording="true"] {
    opacity: 1 !important;
    color: #4CAF50 !important;
}

.vocab-hear-btn[data-has-recording="true"]:hover {
    background: #e8f5e8 !important;
    color: #2e7d32 !important;
}