/* =================================================================
   DECK BUILDER MODULE STYLES
   Version 3.2 - November 2025
   ================================================================= */

.module-deck-builder {
    max-width: 100%;
    width: 100%;
    padding: 20px;
}

/* Deck Header */
.deck-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.deck-title h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.deck-description {
    font-size: 14px;
    color: var(--text-secondary);
    margin: 0;
}

.deck-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Deck Controls */
.deck-controls {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 12px;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filter-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

.filter-group.search-group {
    flex: 1;
    min-width: 150px;
}

.filter-group.search-group input {
    flex: 1;
    max-width: 300px;
}

.stats-mini {
    margin-left: auto;
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
}

.unsaved-indicator {
    background: var(--warning);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
}

.unsaved-indicator.hidden {
    display: none;
}

/* Deck Summary */
.deck-summary {
    background: #ecf0f1;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}

[data-theme="dark"] .deck-summary {
    background: var(--bg-secondary);
}

.deck-summary .summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
}

.deck-summary .stat-box {
    background: white;
    padding: 16px;
    border-radius: 8px;
    text-align: center;
    border-left: 4px solid #3498db;
}

[data-theme="dark"] .deck-summary .stat-box {
    background: var(--bg-primary);
}

.deck-summary .stat-box .number {
    font-size: 32px;
    font-weight: bold;
    color: #2c3e50;
}

[data-theme="dark"] .deck-summary .stat-box .number {
    color: var(--primary);
}

.deck-summary .stat-box .label {
    color: #7f8c8d;
    font-size: 14px;
    margin-top: 5px;
}

[data-theme="dark"] .deck-summary .stat-box .label {
    color: var(--text-secondary);
}

/* Deck Legend */
.deck-legend {
    margin: 16px 0;
    padding: 12px;
    background: #ecf0f1;
    border-radius: 6px;
    font-size: 13px;
}

[data-theme="dark"] .deck-legend {
    background: var(--bg-secondary);
}

.deck-legend strong {
    color: var(--text-primary);
    margin-right: 12px;
}

.deck-legend .legend-item {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 8px;
}

/* Deck Table Container */
.deck-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    max-height: 600px;
    /* Force scrollbars to always show */
    overflow: scroll;
    /* Firefox scrollbar styling */
    scrollbar-width: auto;
    scrollbar-color: #888 #f1f1f1;
}

/* Custom scrollbar styling - thicker and always visible */
.deck-table-container::-webkit-scrollbar {
    width: 14px;
    height: 14px;
}

.deck-table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 7px;
}

.deck-table-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 7px;
    border: 2px solid #f1f1f1;
}

.deck-table-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

.deck-table-container::-webkit-scrollbar-corner {
    background: #f1f1f1;
}

[data-theme="dark"] .deck-table-container {
    background: var(--bg-primary);
    scrollbar-color: #666 var(--bg-secondary);
}

[data-theme="dark"] .deck-table-container::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] .deck-table-container::-webkit-scrollbar-thumb {
    background: #666;
    border-color: var(--bg-secondary);
}

[data-theme="dark"] .deck-table-container::-webkit-scrollbar-thumb:hover {
    background: #888;
}

[data-theme="dark"] .deck-table-container::-webkit-scrollbar-corner {
    background: var(--bg-secondary);
}

/* Deck Table */
.deck-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.deck-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.deck-table th {
    background: #34495e;
    color: white;
    padding: 12px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    border-bottom: 2px solid #2c3e50;
}

[data-theme="dark"] .deck-table th {
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-color);
}

.deck-table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    vertical-align: middle;
}

[data-theme="dark"] .deck-table td {
    border-bottom: 1px solid var(--border-color);
}

.deck-table tr:hover {
    background: #f8f9fa;
}

[data-theme="dark"] .deck-table tr:hover {
    background: var(--bg-secondary);
}

.deck-table tr.edited-row {
    background: rgba(79, 70, 229, 0.05);
    border-left: 3px solid var(--primary);
}

[data-theme="dark"] .deck-table tr.edited-row {
    background: rgba(99, 102, 241, 0.1);
}

/* Sortable Header Styles */
.sortable-header {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.sortable-header:hover {
    background: #2c3e50 !important;
}

/* Word columns - flexible width to show full words */
.deck-table th.word-column,
.deck-table td.word-column {
    min-width: 180px;
    width: auto;
}

/* Actions cell styling */
.deck-table .actions-cell {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.deck-table .actions-cell .btn-icon {
    padding: 4px 6px;
}

.deck-table .actions-cell .add-below-btn {
    color: var(--success);
}

.deck-table .actions-cell .delete-card-btn {
    color: var(--danger);
}

/* Lesson Group Header Rows */
.lesson-header-row {
    background: linear-gradient(135deg, var(--primary) 0%, #6366f1 100%);
    cursor: pointer;
    user-select: none;
}

.lesson-header-row:hover {
    background: linear-gradient(135deg, #5558e8 0%, #5558dd 100%);
}

.lesson-header-cell {
    padding: 12px 16px !important;
}

.lesson-header {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    font-weight: 600;
}

.lesson-chevron {
    transition: transform 0.3s ease;
    font-size: 12px;
}

.lesson-header-row:not(.collapsed) .lesson-chevron {
    transform: rotate(90deg);
}

.lesson-title {
    font-size: 15px;
}

.lesson-count {
    font-size: 12px;
    opacity: 0.85;
    font-weight: 400;
    margin-left: auto;
}

/* Review Lesson Styles */
.lesson-header-row.review-lesson {
    background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
}

.lesson-header-row.review-lesson:hover {
    background: linear-gradient(135deg, #9d72f7 0%, #b69df5 100%);
}

[data-theme="dark"] .lesson-header-row.review-lesson {
    background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
}

[data-theme="dark"] .lesson-header-row.review-lesson:hover {
    background: linear-gradient(135deg, #8b4cf7 0%, #9b6cf9 100%);
}

.lesson-review-badge {
    background: rgba(255, 255, 255, 0.2);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 500;
}

.lesson-review-badge i {
    margin-right: 4px;
}

.lesson-reviews {
    font-size: 12px;
    opacity: 0.9;
    font-weight: 400;
}

/* Add Lesson Button on Header */
.add-lesson-btn {
    margin-left: auto;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 12px;
}

.add-lesson-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.05);
}

.add-lesson-btn i {
    font-size: 14px;
}

/* Hidden card rows when lesson is collapsed */
.lesson-card-row.hidden {
    display: none;
}

/* Dark theme adjustments for lesson headers */
[data-theme="dark"] .lesson-header-row {
    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
}

[data-theme="dark"] .lesson-header-row:hover {
    background: linear-gradient(135deg, #5558e8 0%, #7c7ce8 100%);
}

[data-theme="dark"] .sortable-header:hover {
    background: var(--bg-primary) !important;
}

.sort-icon {
    margin-left: 6px;
    opacity: 0.5;
    font-size: 11px;
}

.sort-icon.active {
    opacity: 1;
    color: #3498db;
}

/* Lesson Range Input Styles */
.lesson-range-input {
    width: 70px !important;
    text-align: center;
}

/* Word Cell Container with Notes */
.word-cell-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.word-cell-container .word-input {
    flex: 1;
}

/* Notes Button Styles */
.notes-btn {
    padding: 4px 6px;
    border: none;
    background: var(--bg-secondary);
    border-radius: 4px;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 12px;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 2px;
    position: relative;
}

.notes-btn:hover {
    background: var(--primary);
    color: white;
}

.notes-btn.has-note {
    background: #27ae60;
    color: white;
}

.notes-btn.has-note:hover {
    background: #219a52;
}

.note-check {
    font-size: 8px;
    position: absolute;
    top: -2px;
    right: -2px;
    background: white;
    color: #27ae60;
    border-radius: 50%;
    padding: 1px;
}

/* Notes Modal Styles */
#notesModal .modal-content {
    max-width: 500px;
}

#notesModal textarea {
    resize: vertical;
    min-height: 100px;
}

#notesModal .action-buttons {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

#notesModal .btn-warning {
    background: #f39c12;
}

#notesModal .btn-warning:hover {
    background: #e67e22;
}

/* Cell Inputs */
.cell-input,
.cell-select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
}

.cell-input:focus,
.cell-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.cell-input[type="number"] {
    width: 60px;
}

.cell-select {
    cursor: pointer;
    padding: 6px 4px;
}

/* File Upload Badges */
.file-upload-badge-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.audio-badges-container {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.file-badge.upload-trigger {
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid transparent;
}

.file-badge.upload-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    border-color: rgba(0,0,0,0.1);
}

.file-badge.has-file {
    background: #1abc9c;
    color: white;
}

.file-badge.no-file {
    background: #95a5a6;
    color: white;
    opacity: 0.7;
}

.file-badge.no-file:hover {
    opacity: 1;
    background: #7f8c8d;
}

.file-badge.png {
    background: #1abc9c;
}

.file-badge.gif {
    background: #e67e22;
}

.file-badge.audio.has-file {
    background: #9b59b6;
}

.file-badge.audio.no-file {
    background: #bdc3c7;
}

.file-badge i {
    font-size: 10px;
}

/* Format icons for multi-format files */
.format-icon {
    display: inline-block;
    padding: 2px 4px;
    margin-left: 3px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

/* Status Badges */
.status {
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.status-complete-animated {
    background: #27ae60;
    color: white;
}

.status-complete-static {
    background: #2ecc71;
    color: white;
}

.status-gif-only {
    background: #f39c12;
    color: white;
}

.status-image-only {
    background: #e67e22;
    color: white;
}

.status-audio-only {
    background: #9b59b6;
    color: white;
}

.status-partial {
    background: #e74c3c;
    color: white;
}

.status-missing {
    background: #95a5a6;
    color: white;
}

/* Type Badges */
.type-badge {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: bold;
    display: inline-block;
}

.type-badge.new {
    background: #27ae60;
    color: white;
}

.type-badge.review {
    background: #f39c12;
    color: white;
}

/* Lesson Badge */
.lesson-badge {
    background: #3498db;
    color: white;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
    display: inline-block;
}

/* Action Buttons */
.delete-card-btn {
    color: var(--error);
    padding: 6px;
    border-radius: 4px;
    transition: all 0.2s;
}

.delete-card-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    transform: scale(1.1);
}

.add-below-btn {
    color: var(--success) !important;
    font-size: 16px;
}

.add-below-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success) !important;
    transform: scale(1.1);
}

/* Categories Button */
.categories-btn {
    background: var(--primary);
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
    width: 100%;
    white-space: nowrap;
}

.categories-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

/* =================================================================
   CATEGORIES MODAL
   ================================================================= */

#categoriesModal .modal-content {
    max-width: 600px;
}

#categoriesModal .modal-body {
    padding: 24px;
    max-height: 60vh;
    overflow-y: auto;
}

#categoriesModal .form-group {
    margin-bottom: 20px;
}

#categoriesModal .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    font-size: 14px;
}

#categoriesModal .form-label i {
    color: var(--primary);
    font-size: 14px;
}

#categoriesModal .form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s;
}

#categoriesModal .form-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

#categoriesModal .form-input::placeholder {
    color: var(--text-secondary);
    opacity: 0.6;
}

#categoriesModal .action-buttons {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.card-num-input {
    font-weight: 700;
    color: var(--primary);
}

.card-num-input:focus {
    background: rgba(79, 70, 229, 0.05);
    border-color: var(--primary);
}

/* Current File Preview */
.current-file-preview {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.current-file-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
}

.current-file-header strong {
    color: var(--text-primary);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.current-file-header i {
    color: var(--primary);
}

.current-file-name {
    color: var(--text-secondary);
    font-size: 13px;
    font-family: monospace;
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Linked Files List */
.linked-files-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.linked-file-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    background: var(--bg-primary);
    border-radius: 4px;
}

.linked-file-item .format-badge {
    display: inline-block;
    padding: 2px 6px;
    background: var(--primary);
    color: white;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    min-width: 45px;
    text-align: center;
}

.linked-file-item .file-name {
    color: var(--text-secondary);
    font-size: 12px;
    font-family: monospace;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.current-file-display {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
}

.no-current-file {
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
}

.no-current-file i {
    font-size: 48px;
    opacity: 0.3;
    margin-bottom: 12px;
    display: block;
}

.no-current-file p {
    margin: 0;
    font-size: 14px;
}

.current-image-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 6px;
}

.current-audio-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.audio-preview-icon {
    font-size: 48px;
    color: var(--primary);
}

.audio-preview-icon i {
    opacity: 0.7;
}

#playCurrentAudio {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* =================================================================
   FILE SELECTION MODAL
   ================================================================= */

.file-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    backdrop-filter: blur(4px);
}

.file-selection-content {
    background: var(--bg-primary);
    border-radius: 12px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
    animation: modalSlideIn 0.3s ease;
}

.file-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
}

.file-selection-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 10px;
}

.close-modal-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.2s;
}

.close-modal-btn:hover {
    background: var(--gray-100);
    color: var(--text-primary);
}

.file-selection-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

.file-selection-tabs .tab-btn {
    flex: 1;
    padding: 14px 20px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.file-selection-tabs .tab-btn:hover {
    background: var(--bg-primary);
}

.file-selection-tabs .tab-btn.active {
    background: var(--bg-primary);
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.file-selection-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tab-content {
    display: none;
    flex: 1;
    overflow: hidden;
    flex-direction: column;
}

.tab-content.active {
    display: flex;
}

/* File Browser Controls */
.file-browser-controls {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.file-browser-controls .form-input {
    flex: 1;
}

.file-browser-controls .select-control {
    width: 150px;
}

/* File Browser Grid */
.file-browser-grid {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px;
    align-content: start;
}

.file-browser-item {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 160px;
}

.file-browser-item:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.file-browser-item:hover .file-select-overlay {
    opacity: 1;
}

.file-preview {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    overflow: hidden;
}

.file-preview.audio-preview {
    height: 60px;
}

.file-preview.audio-preview i {
    font-size: 32px;
}

.file-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.file-preview i {
    font-size: 48px;
    color: var(--text-secondary);
    opacity: 0.5;
}

.file-info {
    padding: 8px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.file-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: normal;
    word-break: break-word;
    margin-bottom: 4px;
    line-height: 1.3;
    min-height: 32px;
}

.file-name.audio-filename {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary);
    text-align: center;
    padding: 4px;
    background: var(--bg-secondary);
    border-radius: 4px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

[data-theme="dark"] .file-name.audio-filename {
    background: var(--bg-primary);
    color: var(--primary);
}

.file-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: var(--text-secondary);
}

.audio-play-btn {
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
    color: var(--success);
    font-weight: 600;
}

.audio-play-btn:hover {
    background: var(--success);
    color: white;
}

.file-select-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(79, 70, 229, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.file-select-overlay .btn {
    pointer-events: none;
}

/* Loading/Error/Empty States */
.loading-files,
.error-message,
.empty-message {
    grid-column: 1 / -1;
    text-align: center;
    padding: 60px 20px;
    color: var(--text-secondary);
}

.loading-files i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    color: var(--primary);
}

.error-message i,
.empty-message i {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    opacity: 0.3;
}

.error-message {
    color: var(--error);
}

.error-message code {
    background: var(--bg-secondary);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12px;
}

/* Upload Zone */
.upload-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
}

.upload-zone i {
    font-size: 64px;
    color: var(--primary);
    margin-bottom: 20px;
    opacity: 0.5;
}

.upload-zone h4 {
    font-size: 20px;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.upload-zone p {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

/* Empty State for Deck Builder */
.module-deck-builder .empty-state {
    padding: 60px 20px;
    text-align: center;
}

.module-deck-builder .empty-state i {
    font-size: 64px;
    color: var(--text-secondary);
    opacity: 0.3;
    margin-bottom: 20px;
}

.module-deck-builder .empty-state h2 {
    font-size: 24px;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.module-deck-builder .empty-state p {
    font-size: 16px;
    color: var(--text-secondary);
}

/* Loading state */
.deck-table-container.loading {
    position: relative;
    min-height: 200px;
}

.deck-table-container.loading::after {
    content: 'Loading cards...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--bg-primary);
    padding: 20px 40px;
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    color: var(--text-primary);
    font-weight: 600;
}

/* Success/Error indicators */
.save-success {
    animation: flashSuccess 1s ease;
}

@keyframes flashSuccess {
    0%, 100% { background: transparent; }
    50% { background: rgba(39, 174, 96, 0.2); }
}

.save-error {
    animation: flashError 1s ease;
}

@keyframes flashError {
    0%, 100% { background: transparent; }
    50% { background: rgba(239, 68, 68, 0.2); }
}

/* Highlight animation for new cards */
@keyframes highlightNew {
    0%, 100% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(79, 70, 229, 0.2);
    }
}

/* =================================================================
   VERSION 4.0 ADDITIONS - Language Selector & Independent Lessons
   ================================================================= */

/* Deck Builder - Language Selector (Primary Control) */
.deck-language-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    border-radius: 12px;
    margin-bottom: 16px;
    color: white;
}

.deck-language-selector label {
    font-size: 14px;
    font-weight: 500;
}

.deck-language-selector .select-lg {
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 600;
    min-width: 180px;
    border-radius: 8px;
    border: 2px solid rgba(255,255,255,0.3);
    background: rgba(255,255,255,0.95);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
}

.deck-language-selector .select-lg:hover {
    border-color: rgba(255,255,255,0.6);
}

.deck-language-selector .select-lg:focus {
    border-color: white;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.2);
}

.language-card-count {
    margin-left: auto;
    background: rgba(255,255,255,0.2);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}

/* =================================================================
   MOBILE RESPONSIVE
   ================================================================= */

@media (max-width: 1024px) {
    .deck-header {
        flex-direction: column;
        align-items: stretch;
    }

    .deck-actions {
        width: 100%;
        justify-content: space-between;
    }

    .deck-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-group {
        width: 100%;
    }

    .stats-mini {
        margin-left: 0;
        justify-content: space-between;
    }

    .deck-table-container {
        font-size: 12px;
    }

    .cell-input,
    .cell-select {
        font-size: 12px;
        padding: 4px 6px;
    }
    
    .lesson-range-input {
        width: 60px !important;
    }
    
    .filter-group.search-group {
        flex-basis: 100%;
        order: 10;
    }
    
    .filter-group.search-group input {
        max-width: none;
    }
    
    .deck-controls .btn-success {
        order: 11;
    }
    
    .word-cell-container {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }
    
    .notes-btn {
        align-self: flex-end;
    }
}

@media (max-width: 768px) {
    .deck-title h1 {
        font-size: 22px;
    }

    .deck-actions {
        flex-direction: column;
    }

    .deck-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .deck-summary .summary-grid {
        grid-template-columns: 1fr 1fr;
    }

    .deck-legend {
        font-size: 11px;
    }

    .deck-legend .legend-item {
        display: block;
        margin-bottom: 8px;
    }

    .deck-table {
        font-size: 11px;
    }

    .file-badge {
        font-size: 9px;
        padding: 3px 6px;
    }

    .audio-badges-container {
        flex-direction: column;
    }
    
    /* Controls bar on mobile */
    .deck-controls {
        gap: 10px;
    }
    
    .deck-controls .btn-success {
        width: 100%;
        justify-content: center;
    }
    
    .stats-mini {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }
    
    /* Deck Language Selector Mobile */
    .deck-language-selector {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 12px 16px;
    }
    
    .deck-language-selector .select-lg {
        min-width: auto;
        width: 100%;
    }
    
    .language-card-count {
        margin-left: 0;
        text-align: center;
    }
    
    .file-selection-content {
        width: 100%;
        max-width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }

    .file-browser-grid {
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 12px;
        padding: 12px;
    }

    .file-preview {
        height: 80px;
    }

    .file-browser-controls {
        flex-direction: column;
    }

    .file-browser-controls .select-control {
        width: 100%;
    }

    .file-selection-tabs .tab-btn {
        font-size: 12px;
        padding: 12px;
    }
    
    .categories-btn {
        padding: 5px 8px;
        font-size: 10px;
    }
    
    #categoriesModal .modal-content {
        width: 95%;
        max-width: none;
    }
    
    #categoriesModal .modal-body {
        padding: 16px;
        max-height: 50vh;
    }
    
    #categoriesModal .form-group {
        margin-bottom: 16px;
    }
    
    #categoriesModal .action-buttons {
        flex-direction: column;
        padding: 12px 16px;
        gap: 8px;
    }
    
    #categoriesModal .action-buttons .btn {
        width: 100%;
        justify-content: center;
    }
    
    .current-file-preview {
        padding: 12px;
    }
    
    .current-file-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .current-file-name {
        font-size: 11px;
        word-break: break-all;
    }
    
    .current-image-preview img {
        max-height: 150px !important;
    }
}

/* =================================================================
   AUDIO RECORDER STYLES
   ================================================================= */

/* Record Container */
.record-container {
    padding: 20px;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Recording View */
.record-view {
    text-align: center;
    width: 100%;
}

.record-status {
    margin-bottom: 24px;
}

.record-status i {
    font-size: 48px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    display: block;
}

.record-status p {
    font-size: 16px;
    color: var(--text-secondary);
}

.record-status .recording-pulse {
    color: #ef4444;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Countdown Display */
.countdown-display {
    margin-bottom: 24px;
}

.countdown-number {
    font-size: 72px;
    font-weight: bold;
    color: var(--primary);
    display: block;
    animation: countdownPop 1s ease;
}

@keyframes countdownPop {
    0% { transform: scale(0.5); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

/* Record/Stop Buttons */
.btn-record {
    background: #ef4444;
    color: white;
    padding: 16px 32px;
    font-size: 18px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-record:hover {
    background: #dc2626;
    transform: scale(1.05);
}

.btn-stop {
    background: #6b7280;
    color: white;
    padding: 16px 32px;
    font-size: 18px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-stop:hover {
    background: #4b5563;
}

/* Editor View */
.editor-view {
    width: 100%;
}

/* Waveform Container */
.waveform-container {
    position: relative;
    background: #1e293b;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

.waveform-container canvas {
    display: block;
    width: 100%;
    height: 150px;
}

/* Markers */
.marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    cursor: ew-resize;
    z-index: 10;
    /* Larger touch target for mobile */
    padding: 0 15px;
    margin-left: -15px;
    touch-action: none;
}

.marker::before {
    /* Invisible touch area for better mobile interaction */
    content: '';
    position: absolute;
    top: -10px;
    bottom: -10px;
    left: 0;
    right: 0;
}

.marker::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.marker-start {
    background: #22c55e;
}

.marker-start::after {
    background: #22c55e;
}

.marker-end {
    background: #ef4444;
}

.marker-end::after {
    background: #ef4444;
}

/* Playhead - moving indicator during playback */
.playhead {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: white;
    z-index: 15;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.5);
}

.playhead.active {
    opacity: 1;
}

/* Time Display */
.editor-time-display {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 16px;
}

/* Editor Controls */
.editor-controls {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.editor-controls .btn {
    min-width: 40px;
}

.editor-controls .btn-warning {
    background: #f59e0b;
}

.editor-controls .btn-warning:hover {
    background: #d97706;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .waveform-container canvas {
        height: 100px;
    }
    
    .countdown-number {
        font-size: 56px;
    }
    
    .btn-record,
    .btn-stop {
        padding: 12px 24px;
        font-size: 16px;
    }
    
    .editor-controls {
        gap: 6px;
    }
    
    .editor-controls .btn {
        padding: 8px 12px;
        font-size: 12px;
    }
}

/* =================================================================
   FILENAME DIALOG STYLES
   ================================================================= */

.filename-dialog-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10001;
}

.filename-dialog {
    background: var(--bg-primary);
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 90%;
    max-width: 450px;
    overflow: hidden;
}

.filename-dialog-header {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
}

.filename-dialog-header h3 {
    margin: 0;
    font-size: 18px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.filename-dialog-header h3 i {
    color: var(--primary);
}

.filename-dialog-body {
    padding: 20px;
}

.filename-dialog-body .form-group {
    margin-bottom: 12px;
}

.filename-dialog-body .form-input {
    width: 100%;
    font-family: monospace;
    font-size: 14px;
}

.filename-preview {
    text-align: center;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.filename-preview img {
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
    border-radius: 4px;
}

.filename-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.filename-hint i {
    color: var(--primary);
}

.filename-dialog-footer {
    padding: 16px 20px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

@media (max-width: 768px) {
    .filename-dialog {
        width: 95%;
    }
    
    .filename-dialog-footer {
        flex-direction: column;
    }
    
    .filename-dialog-footer .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Dark mode specific */
[data-theme="dark"] .categories-btn {
    background: var(--primary);
}

[data-theme="dark"] .categories-btn:hover {
    background: var(--primary-dark);
}

[data-theme="dark"] #categoriesModal .form-input:focus {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .current-file-preview {
    border-color: var(--border-color);
}

[data-theme="dark"] .current-image-preview {
    background: rgba(0, 0, 0, 0.2);
}

/* =================================================================
   ROLE-BASED ACCESS STYLES
   ================================================================= */

/* Voice Recorder Mode Badge */
.role-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    margin-left: 12px;
    vertical-align: middle;
}

.role-badge.voice-recorder {
    background: linear-gradient(135deg, #8b5cf6, #6366f1);
    color: white;
}

.role-badge.deck-manager {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
}

.role-badge.editor {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
}

.role-badge i {
    font-size: 10px;
}

/* Disabled/Read-only fields for voice recorder - text should be readable */
.readonly-field {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    cursor: default !important;
    border-color: transparent !important;
}

.readonly-field:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Disabled badge styling */
.disabled-badge {
    cursor: not-allowed !important;
    opacity: 0.5;
}

.disabled-badge:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Text muted for empty action cells */
.text-muted {
    color: var(--text-secondary);
    opacity: 0.5;
}

/* Language restriction lock indicator */
.language-locked-hint {
    margin-left: 6px;
    color: var(--text-secondary);
    font-size: 12px;
}

.language-locked-hint i {
    opacity: 0.7;
}

/* Disabled select styling */
select.select-control:disabled {
    background-color: var(--bg-secondary);
    cursor: not-allowed;
    opacity: 0.8;
}

/* =================================================================
   DECK BUILDER - CSV & MEDIA UPLOAD SECTIONS
   ================================================================= */

.deck-section {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.deck-section .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Collapsible section styles */
.deck-section.collapsible .section-title {
    cursor: pointer;
    user-select: none;
    padding: 12px 16px;
    margin: 0 -16px 16px -16px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.deck-section.collapsible .section-title:hover {
    background-color: var(--bg-secondary);
}

.deck-section.collapsible .section-title:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.deck-section .section-title i {
    color: var(--primary);
}

/* Chevron icon for collapsible sections */
.deck-section .section-chevron {
    margin-left: auto;
    font-size: 14px;
    transition: transform 0.3s ease;
    color: var(--text-secondary);
}

.deck-section.collapsed .section-chevron {
    transform: rotate(-90deg);
}

/* Section content wrapper for collapse animation */
.deck-section .section-content {
    overflow: hidden;
    max-height: 2000px;
    transition: max-height 0.4s ease-out, opacity 0.3s ease;
    opacity: 1;
}

.deck-section.collapsed .section-content {
    max-height: 0;
    opacity: 0;
}

/* Remove bottom margin when collapsed */
.deck-section.collapsed .section-title {
    margin-bottom: 0;
}

.deck-section .section-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
}

.deck-section .section-description {
    margin: 0 0 20px 0;
    color: var(--text-secondary);
    font-size: 14px;
}

.deck-section .section-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.deck-section .section-hint {
    margin-top: 12px;
    font-size: 13px;
    color: var(--text-secondary);
}

.deck-section .section-hint i {
    color: var(--primary);
    margin-right: 4px;
}

/* =================================================================
   NESTED SECTION GROUPS - Build Word/Sentence Lessons
   ================================================================= */

.deck-section-group {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

.deck-section-group > .group-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
    margin-bottom: 8px;
}

.deck-section-group > .group-header:hover {
    background: var(--bg-tertiary, var(--bg-secondary));
    border-color: var(--primary);
}

.deck-section-group > .group-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.deck-section-group > .group-header h2 i {
    font-size: 16px;
    color: var(--primary);
}

.deck-section-group > .group-header .group-chevron {
    margin-left: auto;
    font-size: 14px;
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.deck-section-group.collapsed > .group-header .group-chevron {
    transform: rotate(-90deg);
}

.deck-section-group.collapsed > .group-header {
    margin-bottom: 0;
}

.deck-section-group > .group-content {
    overflow: hidden;
    max-height: 10000px;
    transition: max-height 0.4s ease-out, opacity 0.3s ease;
    opacity: 1;
    display: flex;
    flex-direction: column;
}

/* Sentence section ordering - using order property for proper sequence */
#buildSentenceLessonsGroup #sentencePoolSection { order: 1; }
#buildSentenceLessonsGroup #sentenceReviewSection { order: 2; }
#buildSentenceLessonsGroup #storyZoneSection { order: 3; }
#buildSentenceLessonsGroup #conversationZoneSection { order: 4; }
#buildSentenceLessonsGroup #sentenceWordsSection { order: 5; }

.deck-section-group.collapsed > .group-content {
    max-height: 0;
    opacity: 0;
}

/* Nested sections inside groups - preserve original styling, just adjust spacing */
.deck-section-group .deck-section {
    /* Keep original full-width styling */
}

.deck-section-group .deck-section:first-child {
    margin-top: 0;
    padding-top: 16px;
    border-top: none;
}

/* Global rescan button in header */
.deck-header .rescan-global-btn {
    background: var(--warning);
    color: white;
    border: none;
}

.deck-header .rescan-global-btn:hover {
    background: #e67e22;
}

/* Rescan button styling in sections */
.rescan-section-btn {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    transition: all 0.2s ease;
}

.rescan-section-btn:hover {
    background: var(--warning);
    border-color: var(--warning);
    color: white;
}

.rescan-section-btn i {
    margin-right: 6px;
}

/* Reuse admin upload styles */
.deck-section .csv-upload-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.deck-section .upload-options {
    background: var(--bg-primary);
    padding: 16px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.deck-section .radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.deck-section .radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.deck-section .radio-option:hover {
    border-color: var(--primary);
    background: var(--bg-primary);
}

.deck-section .radio-option input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.deck-section .radio-option input[type="radio"]:checked + span {
    font-weight: 600;
    color: var(--primary);
}

.deck-section .radio-option:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background: var(--bg-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.deck-section .file-upload-container {
    background: var(--bg-primary);
    padding: 20px;
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    transition: all 0.2s;
}

.deck-section .file-upload-container:hover {
    border-color: var(--primary);
    background: rgba(79, 70, 229, 0.02);
}

.deck-section .file-upload-label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.deck-section .file-upload-label i {
    color: var(--primary);
    margin-right: 8px;
}

.deck-section .file-hint {
    font-size: 12px;
    font-weight: normal;
    color: var(--text-secondary);
    font-style: italic;
}

.deck-section .file-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    cursor: pointer;
    font-size: 14px;
}

.deck-section .file-input:hover {
    border-color: var(--primary);
}

.deck-section .file-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.deck-section .file-status {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.deck-section .language-uploads {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .deck-section .section-actions {
        flex-direction: column;
    }

    .deck-section .section-actions .btn {
        width: 100%;
    }

    .deck-section .language-uploads {
        grid-template-columns: 1fr;
    }
}

body.mobile-phone .deck-section .section-actions {
    flex-direction: column;
}

body.mobile-phone .deck-section .section-actions .btn {
    width: 100%;
}

body.mobile-phone .deck-section .language-uploads {
    grid-template-columns: 1fr;
}

/* Dark mode */
[data-theme="dark"] .deck-section .radio-option:has(input[type="radio"]:checked) {
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

[data-theme="dark"] .deck-section .file-upload-container:hover {
    background: rgba(99, 102, 241, 0.05);
}

/* =================================================================
   GRAMMAR MANAGEMENT STYLES
   ================================================================= */

.grammar-upload-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.grammar-upload-row .filter-group {
    margin-bottom: 0;
}

/* Grammar Report Container */
.grammar-report-container {
    margin-top: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.grammar-report-container.hidden {
    display: none;
}

.grammar-report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--primary);
    color: white;
}

.grammar-report-header h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.grammar-report-header .btn {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    padding: 4px 8px;
}

.grammar-report-header .btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

#grammarReportContent {
    padding: 16px;
}

/* Report Summary */
.grammar-report-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.grammar-report-summary .summary-stat {
    flex: 1;
    min-width: 120px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}

.grammar-report-summary .stat-value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 4px;
}

.grammar-report-summary .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Language Report Cards */
.grammar-report-languages {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.language-report-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 16px;
}

.language-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.language-header h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.coverage-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.coverage-badge.high {
    background: #d1fae5;
    color: #065f46;
}

.coverage-badge.medium {
    background: #fef3c7;
    color: #92400e;
}

.coverage-badge.low {
    background: #fee2e2;
    color: #991b1b;
}

.language-stats {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.lessons-list {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    margin-bottom: 8px;
}

.lessons-list .list-label {
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 120px;
}

.lessons-list .lesson-numbers {
    color: var(--text-secondary);
    word-break: break-word;
}

.lessons-list.missing .lesson-numbers {
    color: var(--error);
}

.report-footer {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    text-align: right;
    color: var(--text-secondary);
}

/* Dark mode for grammar report */
[data-theme="dark"] .coverage-badge.high {
    background: rgba(16, 185, 129, 0.2);
    color: #6ee7b7;
}

[data-theme="dark"] .coverage-badge.medium {
    background: rgba(245, 158, 11, 0.2);
    color: #fcd34d;
}

[data-theme="dark"] .coverage-badge.low {
    background: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

/* Responsive */
@media (max-width: 768px) {
    .grammar-upload-row {
        flex-direction: column;
    }

    .grammar-report-summary {
        flex-direction: column;
    }

    .lessons-list {
        flex-direction: column;
        gap: 4px;
    }

    .lessons-list .list-label {
        min-width: auto;
    }
}

/* =================================================================
   SENTENCE WORDS PREVIEW MODAL
   ================================================================= */

.sentence-preview-modal {
    z-index: 1100;
}

.sentence-preview-modal .preview-modal-content {
    max-width: 900px;
    width: 95%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.sentence-preview-modal .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: 12px 12px 0 0;
}

.sentence-preview-modal .modal-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sentence-preview-modal .close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.sentence-preview-modal .close-btn:hover {
    opacity: 1;
}

/* Preview Summary */
.preview-summary {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 24px;
    background: var(--bg-primary);
    border-radius: 8px;
    min-width: 100px;
}

.summary-item .summary-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
}

.summary-item .summary-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
}

.summary-item.success .summary-value {
    color: var(--success);
}

.summary-item.error .summary-value {
    color: var(--error);
}

/* Warning/Success messages */
.preview-warning,
.preview-success {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    margin: 0;
}

.preview-warning {
    background: rgba(245, 158, 11, 0.1);
    color: #d97706;
    border-left: 4px solid #f59e0b;
}

.preview-success {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
    border-left: 4px solid #10b981;
}

.preview-warning i,
.preview-success i {
    font-size: 20px;
}

/* Tabs */
.preview-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 24px 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border);
}

.preview-tab {
    padding: 10px 20px;
    border: none;
    background: var(--bg-secondary);
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: 8px 8px 0 0;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s;
}

.preview-tab:hover {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

.preview-tab.active {
    background: var(--primary);
    color: white;
}

.preview-tab .tab-stats {
    display: flex;
    align-items: center;
}

.preview-tab .error-count {
    background: var(--error);
    color: white;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
}

.preview-tab.has-errors:not(.active) {
    border: 1px solid var(--error);
    border-bottom: none;
}

/* Panels */
.preview-panels {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    background: var(--bg-primary);
}

.preview-panel {
    display: none;
}

.preview-panel.active {
    display: block;
}

/* Stats bar */
.preview-stats-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    font-size: 14px;
}

.preview-stats-bar span {
    display: flex;
    align-items: center;
    gap: 6px;
}

.text-success {
    color: var(--success);
}

.text-error {
    color: var(--error);
}

/* Preview sections */
.preview-section {
    margin-bottom: 24px;
}

.preview-section h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.preview-section h4.collapsible {
    cursor: pointer;
    user-select: none;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    transition: background 0.2s;
}

.preview-section h4.collapsible:hover {
    background: var(--bg-tertiary);
}

.collapse-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: auto;
}

.unmatched-section h4 {
    color: var(--error);
}

/* Preview table */
.preview-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.preview-table th,
.preview-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.preview-table th {
    background: var(--bg-secondary);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    font-size: 11px;
}

.preview-table tbody tr:hover {
    background: var(--bg-secondary);
}

.unmatched-row {
    background: rgba(239, 68, 68, 0.05);
}

.unmatched-row.corrected {
    background: rgba(16, 185, 129, 0.1);
}

.unmatched-row.corrected .original-word {
    text-decoration: line-through;
    opacity: 0.6;
}

.original-word {
    font-weight: 600;
    color: var(--text-primary);
}

.matched-card {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--success);
    font-weight: 500;
}

/* Card select dropdown */
.card-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
}

.card-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.card-select optgroup {
    font-weight: 600;
    color: var(--text-secondary);
}

.card-select option {
    padding: 8px;
}

/* Modal footer */
.sentence-preview-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    border-radius: 0 0 12px 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .sentence-preview-modal .preview-modal-content {
        width: 100%;
        max-height: 100vh;
        border-radius: 0;
    }

    .preview-summary {
        flex-wrap: wrap;
    }

    .summary-item {
        flex: 1;
        min-width: 80px;
        padding: 8px 12px;
    }

    .summary-item .summary-value {
        font-size: 20px;
    }

    .preview-tabs {
        flex-wrap: wrap;
    }

    .preview-table {
        font-size: 12px;
    }

    .preview-table th,
    .preview-table td {
        padding: 8px;
    }

    .card-select {
        font-size: 12px;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .preview-warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

[data-theme="dark"] .preview-success {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
}

[data-theme="dark"] .unmatched-row {
    background: rgba(239, 68, 68, 0.1);
}

[data-theme="dark"] .unmatched-row.corrected {
    background: rgba(16, 185, 129, 0.15);
}
/* =================================================================
   SENTENCE WORDS EDITOR STYLES
   ================================================================= */

/* Tab Navigation */
.sentence-words-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0;
}

.sw-tab-btn {
    padding: 12px 20px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: -2px;
}

.sw-tab-btn:hover {
    color: var(--text-primary);
    background: var(--bg-secondary);
}

.sw-tab-btn.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
    background: transparent;
}

.sw-tab-content {
    display: none;
}

.sw-tab-content.active {
    display: block;
}

/* Editor Controls */
.sw-editor-controls {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sw-editor-selects {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.sw-editor-actions {
    display: flex;
    gap: 8px;
}

/* Editor Content */
.sw-editor-content {
    min-height: 200px;
}

.sw-editor-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: var(--text-secondary);
    text-align: center;
    gap: 12px;
}

.sw-editor-empty i {
    font-size: 48px;
    opacity: 0.5;
}

/* Collapsible Lessons List */
.sw-lessons-list {
    min-height: 200px;
    max-height: 600px;
    overflow-y: auto;
}

.sw-lesson-item {
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.sw-lesson-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s;
}

.sw-lesson-header:hover {
    background: var(--bg-tertiary);
}

.sw-lesson-header .expand-icon {
    color: var(--primary);
    font-size: 1rem;
}

.sw-lesson-header .lesson-title {
    font-weight: 600;
    flex: 1;
}

.sw-lesson-header .word-type-count {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.sw-lesson-header .edited-badge {
    background: var(--warning);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
}

.sw-lesson-content {
    padding: 0 16px 16px;
}

.sw-lesson-content.hidden {
    display: none;
}

.sw-no-word-types {
    color: var(--text-secondary);
    font-style: italic;
    padding: 12px 0;
    text-align: center;
}

.sw-word-types-list {
    padding-left: 8px;
}

/* Word Type Sections */
.sw-word-type-section {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.sw-type-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
}

.sw-collapse-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.sw-word-type-section.collapsed .sw-collapse-btn i {
    transform: rotate(-90deg);
}

.sw-word-type-section.collapsed .sw-type-body {
    display: none;
}

.sw-type-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
}

.sw-type-count {
    color: var(--text-secondary);
    font-size: 13px;
}

.sw-type-delete {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.2s;
}

.sw-type-delete:hover {
    color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.sw-type-body {
    padding: 16px;
}

/* Word Chips */
.sw-word-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.sw-word-chip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px 6px 12px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    font-size: 13px;
    transition: all 0.2s;
}

.sw-word-chip.valid {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.sw-word-chip.invalid {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.sw-word-chip:hover {
    box-shadow: var(--shadow-sm);
}

.sw-chip-text {
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.sw-chip-text:hover {
    background: var(--bg-secondary);
}

.sw-chip-delete {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 50%;
    transition: all 0.2s;
}

.sw-chip-delete:hover {
    color: var(--error);
    background: rgba(239, 68, 68, 0.2);
}

.sw-add-word-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px dashed var(--border-color);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    transition: all 0.2s;
}

.sw-add-word-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: rgba(99, 102, 241, 0.1);
}

/* Card Preview Tooltip */
.sw-card-preview {
    position: fixed;
    z-index: 1000;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    display: flex;
    gap: 12px;
    align-items: center;
    max-width: 280px;
    pointer-events: none;
}

.sw-card-preview.hidden {
    display: none;
}

.sw-preview-image {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sw-preview-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sw-preview-info {
    flex: 1;
    min-width: 0;
}

.sw-preview-word {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.sw-preview-english {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .sw-editor-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .sw-editor-selects {
        flex-direction: column;
    }

    .sw-editor-actions {
        justify-content: flex-end;
    }

    .sw-tab-btn {
        padding: 10px 14px;
        font-size: 13px;
    }
}

/* =================================================================
   EXPORT CSV MODAL
   ================================================================= */

#exportCSVModal .modal-content {
    max-width: 500px;
}

#exportCSVModal .modal-body {
    padding: 24px;
}

.export-option-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.export-option-btn:hover {
    border-color: var(--primary);
    background: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.export-option-btn:active {
    transform: translateY(0);
}

.export-option-btn i {
    font-size: 24px;
    color: var(--primary);
    width: 32px;
    text-align: center;
    flex-shrink: 0;
}

.export-option-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.export-option-text strong {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 600;
}

.export-option-text small {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Dark mode adjustments */
[data-theme="dark"] .export-option-btn {
    background: var(--bg-tertiary);
}

[data-theme="dark"] .export-option-btn:hover {
    background: var(--bg-secondary);
}

/* =================================================================
   SENTENCE BUILDER - CARD LINK MODAL
   ================================================================= */

.sw-card-link-modal .modal-content {
    max-width: 600px;
    max-height: 85vh;
    overflow-y: auto;
}

.sw-card-link-modal .modal-header h2 {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.25rem;
}

.sw-card-link-modal .modal-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Current link section */
.sw-current-link {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
}

.sw-current-link h4 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sw-current-picture {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sw-current-picture img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.sw-current-picture span {
    font-weight: 500;
    color: var(--text-primary);
}

/* No link state */
.sw-no-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    color: var(--text-secondary);
}

.sw-no-link i {
    font-size: 2rem;
    opacity: 0.5;
}

/* Search section */
.sw-search-section h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px 0;
    font-size: 0.95rem;
    color: var(--text-primary);
}

.sw-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.sw-search-bar input {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.95rem;
    background: var(--bg-primary);
    color: var(--text-primary);
}

.sw-search-bar input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1);
}

/* Card grid */
.sw-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}

.sw-card-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    background: var(--bg-secondary);
    border: 2px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sw-card-option:hover {
    border-color: var(--primary);
    background: var(--bg-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sw-card-option img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
}

.sw-card-option .no-image {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}

.sw-card-option .card-word {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

.sw-card-option .card-english {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Modal actions */
.sw-modal-actions {
    display: flex;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.sw-modal-actions .btn {
    flex: 1;
}

/* Make word chips show pointer cursor */
.sw-word-chip {
    cursor: pointer;
}

.sw-word-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sw-chip-text {
    cursor: pointer;
}

/* =================================================================
   CARD-SENTENCE SYNC MODAL STYLES
   ================================================================= */

.sentence-sync-modal .modal-content {
    max-width: 600px;
}

.sentence-sync-modal .modal-content.modal-lg {
    max-width: 900px;
}

.sentence-sync-modal .modal-header.warning-header {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-bottom: 2px solid #F59E0B;
}

.sentence-sync-modal .modal-header.warning-header h2 {
    color: #92400E;
}

.sentence-sync-modal .modal-header.warning-header h2 i {
    color: #F59E0B;
}

/* Summary section */
.sync-warning-summary {
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 20px;
}

.sync-warning-summary p {
    margin-bottom: 12px;
    font-weight: 500;
}

.sync-stats {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sync-stats li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border-color);
}

.sync-stats li:last-child {
    border-bottom: none;
}

.sync-stats li i {
    width: 20px;
    text-align: center;
}

.sync-stat-deleted i {
    color: var(--error);
}

.sync-stat-changed i {
    color: var(--warning);
}

.sync-stat-sentences i {
    color: var(--primary);
}

/* Recommendation section */
.sync-recommendation {
    padding: 16px;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    margin-bottom: 20px;
}

.sync-recommendation h4 {
    color: #1E40AF;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sync-recommendation h4 i {
    color: #F59E0B;
}

.sync-recommendation p {
    margin: 0;
    color: #1E40AF;
}

/* Actions */
.sync-actions {
    display: flex;
    gap: 12px;
    flex-direction: column;
}

.sync-actions .btn-lg {
    padding: 16px 24px;
    font-size: 16px;
}

/* Results summary cards */
.sync-results-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.sync-result-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
}

.sync-result-card.auto-fix {
    background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
    border: 2px solid #10B981;
}

.sync-result-card.auto-fix i {
    color: #059669;
    font-size: 24px;
    margin-bottom: 8px;
}

.sync-result-card.needs-review {
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border: 2px solid #F59E0B;
}

.sync-result-card.needs-review i {
    color: #D97706;
    font-size: 24px;
    margin-bottom: 8px;
}

.sync-result-card .count {
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 4px;
}

.sync-result-card.auto-fix .count {
    color: #059669;
}

.sync-result-card.needs-review .count {
    color: #D97706;
}

.sync-result-card .label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* Sync sections */
.sync-section {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.sync-section h4 {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.sync-section .section-desc {
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: 14px;
}

/* Sync items list */
.sync-items-list {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

.sync-item {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
}

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

.sync-item:hover {
    background: var(--bg-tertiary);
}

.sync-item.deleted {
    background: #FEF2F2;
}

.sync-item.changed {
    background: #FFFBEB;
}

.sync-item-action {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--success);
    font-weight: 500;
}

.sync-item-word {
    font-weight: 600;
    color: var(--text-primary);
}

.sync-item-sentence {
    color: var(--text-secondary);
    font-style: italic;
}

.sync-item-message {
    width: 100%;
    font-size: 12px;
    color: var(--text-secondary);
    padding-top: 4px;
}

.sync-item-message.has-suggestion {
    color: #059669;
}

.sync-item-message.no-match {
    color: #DC2626;
}

/* Needs review item details */
.sync-item-icon {
    width: 24px;
    text-align: center;
}

.sync-item-details {
    flex: 1;
}

.sync-item-location {
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.sync-item-word-info {
    margin-bottom: 4px;
}

.sync-item-sentence-text {
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

/* Empty state */
.sync-empty-state {
    text-align: center;
    padding: 40px 20px;
}

.sync-empty-state i {
    font-size: 48px;
    color: var(--success);
    margin-bottom: 16px;
}

.sync-empty-state h4 {
    color: var(--success);
    margin-bottom: 8px;
}

/* Modal footer */
.sentence-sync-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    padding: 16px 24px;
    border-top: 1px solid var(--border-color);
    background: var(--bg-secondary);
}

/* Text color utilities */
.text-danger {
    color: var(--error) !important;
}

.text-warning {
    color: var(--warning) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .sync-results-summary {
        flex-direction: column;
    }

    .sync-actions {
        flex-direction: column;
    }
}

/* =================================================================
   CONVERSATION ZONE BUILDER STYLES
   ================================================================= */

/* CSV Upload Area */
.cz-csv-upload-area,
.sz-csv-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 16px 0;
}

.cz-csv-upload-area:hover,
.sz-csv-upload-area:hover,
.cz-csv-upload-area.dragover,
.sz-csv-upload-area.dragover {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), 0.05);
}

.cz-csv-upload-area i,
.sz-csv-upload-area i {
    font-size: 48px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.cz-csv-file-input,
.sz-csv-file-input {
    display: none;
}

.cz-csv-file-info,
.sz-csv-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin: 16px 0;
}

.cz-csv-file-info i,
.sz-csv-file-info i {
    color: var(--success);
    font-size: 24px;
}

.cz-csv-remove-btn,
.sz-csv-remove-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--error);
    cursor: pointer;
    padding: 4px 8px;
}

.cz-import-actions,
.sz-import-actions {
    margin-top: 12px;
}

/* Preview Sections */
.cz-builder-preview,
.sz-builder-preview {
    margin: 20px 0;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

/* Scrollable preview content */
#szPreviewContent,
#czPreviewContent {
    max-height: 60vh;
    overflow-y: auto;
    margin-bottom: 16px;
    padding-right: 8px;
}

.cz-preview-conversation,
.sz-preview-story {
    margin: 12px 0;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 6px;
    border: 1px solid var(--border-color);
}

.cz-preview-header,
.sz-preview-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.cz-preview-header .pair-count,
.sz-preview-header .sentence-count {
    margin-left: auto;
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    padding: 2px 8px;
    border-radius: 4px;
}

.cz-preview-pairs,
.sz-preview-sentences {
    font-size: 13px;
}

.cz-preview-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    border-bottom: 1px solid var(--border-color);
}

.cz-preview-pair:last-child {
    border-bottom: none;
}

.pair-q {
    color: var(--primary);
}

.pair-a {
    color: var(--success);
    padding-left: 16px;
}

.sz-preview-sentence {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--border-color);
}

.sz-preview-sentence:last-child {
    border-bottom: none;
}

.sz-preview-sentence .position {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 24px;
}

.cz-preview-actions,
.sz-preview-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* Conversations/Stories List */
.cz-conversations-list,
.sz-stories-list {
    margin: 16px 0;
}

.cz-conversation-item,
.sz-story-item {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 12px;
    overflow: hidden;
}

.cz-conversation-header,
.sz-story-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: background 0.2s ease;
}

.cz-conversation-header:hover,
.sz-story-header:hover {
    background: var(--bg-tertiary);
}

.cz-conversation-header .expand-icon,
.sz-story-header .expand-icon {
    color: var(--text-secondary);
}

.cz-conversation-header .conv-title,
.sz-story-header .story-title {
    font-weight: 600;
    flex: 1;
}

.cz-conversation-header .conv-lesson,
.sz-story-header .story-lesson {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-primary);
    padding: 2px 8px;
    border-radius: 4px;
}

.cz-conversation-header .pair-count,
.sz-story-header .sentence-count {
    font-size: 12px;
    color: var(--text-secondary);
}

.sz-story-header .form-type-badge {
    font-size: 11px;
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 500;
}

.sz-story-header .blanks-info {
    font-size: 11px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    padding: 2px 8px;
    border-radius: 4px;
}

.sz-preview-header .form-type-badge {
    font-size: 11px;
    background: var(--primary);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}

.form-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 4px;
    font-style: italic;
}

.edited-badge {
    font-size: 11px;
    background: var(--warning);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
}

.cz-conversation-content,
.sz-story-content {
    padding: 16px;
    background: var(--bg-primary);
}

.cz-empty-state,
.sz-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.cz-empty-state i,
.sz-empty-state i {
    font-size: 48px;
    margin-bottom: 12px;
}

/* Q&A Pairs List */
.cz-pairs-list {
    margin-bottom: 12px;
}

.cz-pair-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.cz-pair-item:last-of-type {
    border-bottom: none;
}

.cz-pair-num {
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 24px;
}

.cz-pair-content {
    flex: 1;
}

.cz-pair-question,
.cz-pair-answer {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.cz-pair-question .pair-label {
    font-weight: 600;
    color: var(--primary);
    min-width: 24px;
}

.cz-pair-answer .pair-label {
    font-weight: 600;
    color: var(--success);
    min-width: 24px;
}

.cz-pair-question .pair-text,
.cz-pair-answer .pair-text {
    flex: 1;
}

.cz-pair-question .pair-num,
.cz-pair-answer .pair-num {
    font-size: 11px;
    color: var(--text-secondary);
}

.cz-pair-actions {
    display: flex;
    gap: 4px;
}

.cz-add-pair {
    margin-top: 12px;
}

/* Story Sentences List */
.sz-sentences-list {
    margin-bottom: 12px;
}

.sz-sentence-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--bg-primary);
    transition: box-shadow 0.2s ease;
}

.sz-sentence-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sz-sentence-item.sortable-ghost {
    opacity: 0.5;
    background: var(--primary-light);
}

.sz-drag-handle {
    cursor: grab;
    color: var(--text-secondary);
    padding: 4px;
}

.sz-drag-handle:active {
    cursor: grabbing;
}

.sz-position {
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 24px;
}

.sz-sentence-text {
    flex: 1;
}

.sz-sentence-num {
    font-size: 11px;
    color: var(--text-secondary);
}

.sz-remove-sentence {
    opacity: 0.5;
}

.sz-sentence-item:hover .sz-remove-sentence {
    opacity: 1;
}

.sz-add-sentence {
    margin-top: 12px;
}

/* Pair Editor Modal */
.cz-pair-modal .modal-content {
    max-width: 600px;
}

.cz-pair-modal .form-group {
    margin-bottom: 16px;
}

.cz-pair-modal .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.cz-pair-modal .mt-2 {
    margin-top: 8px;
}

/* Sentence Picker Modal */
.sz-sentence-modal .modal-content {
    max-width: 700px;
}

.sz-sentence-options {
    max-height: 300px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    margin-top: 8px;
}

.sz-sentence-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.sz-sentence-option:last-child {
    border-bottom: none;
}

.sz-sentence-option:hover {
    background: var(--bg-secondary);
}

.sz-sentence-option.selected {
    background: var(--primary-light);
    border-color: var(--primary);
}

.sz-sentence-option .num {
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 40px;
}

.sz-sentence-option .text {
    flex: 1;
}

.sz-sentence-option .type {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 4px;
}

.sz-sentence-modal .mt-3 {
    margin-top: 16px;
}

/* Import description */
.import-description {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.preview-summary {
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

/* No pairs/sentences message */
.cz-no-pairs,
.sz-no-sentences {
    text-align: center;
    padding: 20px;
    color: var(--text-secondary);
    font-style: italic;
}

/* ============================================
   SENTENCE POOL BUILDER STYLES
   ============================================ */

/* CSV Upload (reuse existing patterns) */
.sp-csv-upload-area {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-bottom: 16px;
}

.sp-csv-upload-area:hover,
.sp-csv-upload-area.dragover {
    border-color: var(--primary);
    background: var(--primary-light);
}

.sp-csv-upload-area i {
    font-size: 32px;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.sp-csv-file-input {
    display: none;
}

.sp-csv-file-info {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 6px;
    margin-bottom: 16px;
}

.sp-csv-file-info i {
    color: var(--success);
    font-size: 24px;
}

.sp-csv-remove-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--danger);
    cursor: pointer;
    padding: 4px 8px;
}

.sp-import-actions {
    margin-top: 16px;
}

/* Preview Section */
.sp-builder-preview {
    background: var(--bg-secondary);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.sp-preview-list {
    max-height: 300px;
    overflow-y: auto;
}

.sp-preview-item {
    display: grid;
    grid-template-columns: 60px 1fr 150px 80px 60px;
    gap: 12px;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 13px;
    align-items: center;
}

.sp-preview-item:last-child {
    border-bottom: none;
}

.sp-preview-item.new {
    background: rgba(40, 167, 69, 0.1);
}

.sp-preview-item.update {
    background: rgba(255, 193, 7, 0.1);
}

.sp-preview-item .preview-num {
    font-weight: 600;
    color: var(--text-secondary);
}

.sp-preview-item .preview-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-preview-item .preview-english {
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sp-preview-item .preview-type {
    font-size: 11px;
    background: var(--bg-tertiary);
    padding: 2px 8px;
    border-radius: 4px;
    text-align: center;
}

.sp-preview-item .preview-status {
    font-size: 11px;
    font-weight: 600;
}

.sp-preview-item.new .preview-status {
    color: var(--success);
}

.sp-preview-item.update .preview-status {
    color: var(--warning);
}

.sp-preview-actions {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

/* Filter Bar */
.sp-filter-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.sp-filter-bar input {
    flex: 1;
}

.sp-filter-bar select {
    width: 150px;
}

/* Sentences List */
.sp-sentences-list {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.sp-sentence-item {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.sp-sentence-item:last-child {
    border-bottom: none;
}

.sp-sentence-item:hover {
    background: var(--bg-secondary);
}

/* Header row with sentence number, type, usage, actions, and meta on far right */
.sp-sentence-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.sp-sentence-num {
    font-weight: 600;
    color: var(--primary);
    min-width: 40px;
}

/* Body section with text and word-pictures layout */
.sp-sentence-body {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.sp-sentence-text-block {
    margin-bottom: 8px;
}

.sp-sentence-text {
    font-weight: 500;
    margin-bottom: 4px;
}

.sp-sentence-english {
    font-size: 13px;
    color: var(--text-secondary);
}

.sp-sentence-english em {
    font-style: italic;
    color: var(--text-tertiary);
}

.sp-sentence-type {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    text-align: center;
    font-weight: 500;
}

.sp-sentence-type.type-question {
    background: rgba(0, 123, 255, 0.15);
    color: var(--info);
}

.sp-sentence-type.type-answer {
    background: rgba(40, 167, 69, 0.15);
    color: var(--success);
}

.sp-sentence-type.type-statement {
    background: rgba(108, 117, 125, 0.15);
    color: var(--text-secondary);
}

.sp-sentence-usage {
    font-size: 12px;
    color: var(--text-secondary);
}

.sp-sentence-status {
    display: flex;
    gap: 6px;
}

.sp-sentence-status .badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

.sp-sentence-status .badge-new {
    background: var(--success);
    color: white;
}

.sp-sentence-status .badge-edited {
    background: var(--warning);
    color: #333;
}

.sp-sentence-actions {
    display: flex;
    gap: 6px;
}

/* Empty State */
.sp-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-secondary);
}

.sp-empty-state i {
    font-size: 32px;
    margin-bottom: 12px;
    color: var(--text-tertiary);
}

/* Sentence Count */
.sp-sentence-count {
    font-weight: normal;
    color: var(--text-secondary);
    margin-left: 8px;
}

/* Sentence Editor Modal */
.sp-sentence-modal .modal-content {
    max-width: 600px;
}

.sp-sentence-modal .form-group {
    margin-bottom: 16px;
}

.sp-sentence-modal .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.sp-sentence-modal .form-group label .required {
    color: var(--danger);
}

.sp-sentence-modal textarea {
    resize: vertical;
}

/* Create New Sentence Section in Picker Modals */
.create-new-sentence-section {
    text-align: center;
    padding: 16px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.create-new-sentence-section .btn-block {
    width: 100%;
    padding: 12px;
    font-size: 15px;
}

.create-new-sentence-section .create-hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text-secondary);
}

/* Section Divider */
.section-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
    color: var(--text-secondary);
    font-size: 13px;
}

.section-divider::before,
.section-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border-color);
}

.section-divider span {
    padding: 0 16px;
}

/* Empty Pool Message */
.empty-pool-message {
    text-align: center;
    padding: 30px 20px;
    background: var(--bg-secondary);
    border-radius: 8px;
    color: var(--text-secondary);
}

.empty-pool-message i {
    font-size: 24px;
    margin-bottom: 8px;
    display: block;
}

/* Sentence Select Row (for conversation zone) */
.sentence-select-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sentence-select-row select {
    flex: 1;
}

.sentence-select-row .btn-sm {
    flex-shrink: 0;
}

.no-sentences-hint {
    flex: 1;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border-radius: 6px;
    color: var(--text-secondary);
    font-style: italic;
}

/* Create Sentence Modal (for story/conversation) */
.sz-create-sentence-modal .modal-content,
.cz-create-sentence-modal .modal-content {
    max-width: 550px;
}

.sz-create-sentence-modal .form-group,
.cz-create-sentence-modal .form-group {
    margin-bottom: 16px;
}

.sz-create-sentence-modal .form-group label,
.cz-create-sentence-modal .form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.sz-create-sentence-modal .form-group label .required,
.cz-create-sentence-modal .form-group label .required {
    color: var(--danger);
}

/* Responsive */
@media (max-width: 768px) {
    .cz-conversation-header,
    .sz-story-header {
        flex-wrap: wrap;
    }

    .cz-pair-item {
        flex-direction: column;
    }

    .cz-pair-actions {
        align-self: flex-end;
    }

    .sp-sentence-item {
        padding: 10px 12px;
    }

    .sp-sentence-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .sp-sentence-meta {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }

    .sp-preview-item {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .sp-filter-bar {
        flex-direction: column;
    }

    .sp-filter-bar select {
        width: 100%;
    }

    .sentence-select-row {
        flex-direction: column;
        align-items: stretch;
    }

    .sentence-select-row .btn-sm {
        align-self: flex-start;
    }
}

/* =================================================================
   STORY ZONE - FUZZY MATCH PREVIEW & FORM SEQUENCE STYLES
   ================================================================= */

/* Preview Summary with Warnings */
.preview-summary .fuzzy-warning {
    color: var(--warning);
    margin-left: 12px;
    font-size: 13px;
}

.preview-summary .not-found-warning {
    color: var(--error);
    margin-left: 12px;
    font-size: 13px;
}

/* Form Sequence Preview */
.sz-preview-form-sequence {
    padding: 8px 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    margin: 8px 0;
    font-size: 13px;
}

.sz-preview-form-sequence code {
    background: var(--bg-secondary);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 12px;
}

/* Fuzzy Matches Section */
.sz-fuzzy-matches-section {
    margin: 12px 0;
    padding: 12px;
    background: #FEF3C7;
    border: 1px solid var(--warning);
    border-radius: 8px;
}

.sz-fuzzy-matches-section h5 {
    margin: 0 0 8px 0;
    color: #B45309;
    font-size: 13px;
}

.sz-fuzzy-match-item {
    padding: 8px;
    margin: 6px 0;
    background: white;
    border-radius: 4px;
    font-size: 12px;
}

.sz-fuzzy-match-item .fuzzy-input {
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.sz-fuzzy-match-item .fuzzy-matched {
    color: var(--text-primary);
}

.sz-fuzzy-match-item .similarity {
    color: var(--warning);
    font-weight: 600;
}

/* Sentence Match Status Icons */
.sz-preview-sentence .status {
    min-width: 20px;
    text-align: center;
}

.sz-preview-sentence.exact-match .status i {
    color: var(--success);
}

.sz-preview-sentence.fuzzy-match .status i {
    color: var(--warning);
}

.sz-preview-sentence.not-found .status i {
    color: var(--error);
}

.sz-preview-sentence.not-found {
    opacity: 0.6;
    text-decoration: line-through;
}

.sz-preview-sentence.verified-match .status i {
    color: var(--success);
}

.sz-preview-sentence.number-match .status i {
    color: var(--primary);
}

.sz-preview-sentence.needs-resolution {
    background: #FEF3C7;
    border: 1px solid var(--warning);
}

.sz-preview-sentence.needs-resolution .status i {
    color: var(--warning);
}

.sz-preview-sentence .sentence-num {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    padding: 2px 6px;
    border-radius: 3px;
}

.sz-preview-sentence .sentence-num.mismatch {
    background: #FEF3C7;
    color: var(--warning);
}

.sz-preview-sentence .sentence-num.missing {
    background: #FEE2E2;
    color: var(--error);
}

.sz-preview-sentence .resolution-reason {
    width: 100%;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    padding-left: 25px;
}

.sz-preview-sentence .sz-resolve-sentence {
    margin-left: 8px;
}

/* Resolution count in header */
.resolution-count {
    color: var(--warning);
    font-size: 12px;
    margin-left: 8px;
}

/* Text Mismatches Section */
.sz-mismatches-section {
    margin: 12px 0;
    padding: 12px;
    background: #FEE2E2;
    border: 1px solid var(--error);
    border-radius: 8px;
}

.sz-mismatches-section h5 {
    margin: 0 0 8px 0;
    color: #DC2626;
    font-size: 13px;
}

.sz-mismatch-item {
    padding: 8px;
    margin: 6px 0;
    background: white;
    border-radius: 4px;
    font-size: 12px;
}

.mismatch-row {
    padding: 4px 0;
}

.mismatch-row .label {
    font-weight: 600;
    margin-right: 6px;
}

.mismatch-row.csv-row {
    color: var(--text-secondary);
}

.mismatch-row.db-row {
    color: var(--text-primary);
}

.mismatch-row .similarity {
    color: var(--warning);
    font-weight: 600;
    margin-left: 8px;
}

/* Preview Summary Badges */
.preview-summary .resolution-warning {
    color: var(--warning);
    margin-left: 12px;
}

.preview-summary .mismatch-warning {
    color: var(--error);
    margin-left: 12px;
}

/* Resolution Modal */
.sz-resolution-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.sz-resolution-content {
    background: var(--bg-primary);
    border-radius: 12px;
    max-width: 600px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.sz-resolution-content .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border);
}

.sz-resolution-content .modal-header h3 {
    margin: 0;
    font-size: 18px;
}

.sz-resolution-content .modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

.sz-resolution-content .modal-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Resolution Context */
.resolution-context {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.resolution-context p {
    margin: 4px 0;
    font-size: 13px;
}

/* Resolution Options */
.resolution-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.resolution-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.resolution-option:hover {
    background: var(--bg-tertiary);
}

.resolution-option input[type="radio"] {
    margin-top: 3px;
}

.resolution-option label {
    flex: 1;
    cursor: pointer;
}

.resolution-option label strong {
    display: block;
    margin-bottom: 4px;
}

.resolution-option .option-detail {
    font-size: 12px;
    color: var(--text-secondary);
}

.resolution-option .option-note {
    font-size: 11px;
    color: var(--success);
    margin-top: 4px;
}

/* Resolution Picker */
.resolution-picker {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.resolution-picker input {
    margin-bottom: 10px;
}

.resolution-sentences-list {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 6px;
}

.resolution-sentence-option {
    display: flex;
    gap: 10px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.resolution-sentence-option:last-child {
    border-bottom: none;
}

.resolution-sentence-option:hover {
    background: var(--bg-secondary);
}

.resolution-sentence-option.selected {
    background: var(--primary-light);
    border-color: var(--primary);
}

.resolution-sentence-option .sentence-num {
    font-weight: 600;
    color: var(--primary);
    min-width: 50px;
}

.resolution-sentence-option .sentence-text {
    flex: 1;
    color: var(--text-primary);
}

.resolution-picker .no-results {
    padding: 16px;
    text-align: center;
    color: var(--text-secondary);
}

/* Forms Preview in Settings Modal */
.sz-forms-preview {
    padding: 12px;
    background: var(--bg-tertiary);
    border-radius: 6px;
    font-size: 14px;
    color: var(--text-primary);
    min-height: 40px;
}

/* Form hint code blocks */
.form-hint code {
    background: var(--bg-tertiary);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
    font-family: monospace;
}

/* Seed Badge - indicates consistent randomness */
.seed-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    cursor: help;
}

.seed-badge:hover {
    background: var(--primary);
    color: white;
}

/* =================================================================
   SENTENCE POOL - TENSE & FOCUS FIELDS
   ================================================================= */

/* Form row for side-by-side inputs */
.form-row {
    display: flex;
    gap: 16px;
}

.form-group.half {
    flex: 1;
}

/* Sentence tense/focus badges - styled similar to type badge */
.sp-sentence-tense,
.sp-sentence-focus {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 4px;
    font-weight: 500;
    white-space: nowrap;
}

.sp-sentence-tense {
    background: rgba(156, 39, 176, 0.15);
    color: #9C27B0;
}

.sp-sentence-focus {
    background: rgba(255, 152, 0, 0.15);
    color: #F57C00;
}

/* Preview tense/focus columns */
.preview-tense,
.preview-focus {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 80px;
}

/* Type badges for Command and Conversation */
.sp-sentence-type.type-command {
    background: #7C3AED;
    color: white;
}

.sp-sentence-type.type-conversation {
    background: #0891B2;
    color: white;
}

/* =================================================================
   SECTION LANGUAGE SELECTORS
   ================================================================= */

.section-language-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
    border-radius: 8px;
    margin-bottom: 16px;
}

.section-language-selector label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.section-language-selector label i {
    color: var(--primary);
}

.section-language-selector select {
    flex: 1;
    max-width: 200px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
}

.section-language-selector select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* =================================================================
   SENTENCE POOL - WORD-TO-PICTURE DISPLAY
   ================================================================= */

.sp-sentence-audio-controls {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.sp-sentence-audio-controls .btn-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.sp-record-btn {
    background: #EF4444;
    color: white;
}

.sp-record-btn:hover {
    background: #DC2626;
    transform: scale(1.1);
}

.sp-play-btn {
    background: var(--primary);
    color: white;
}

.sp-play-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.1);
}

/* Sentence Pool - Bubble Layout with Connection Lines */
.sp-bubble-layout {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding: 8px 0;
    min-height: 100px;
}

.sp-bubbles-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 0;
    align-items: center;
    z-index: 2;
}

.sp-word-bubble {
    position: relative;
    min-width: 50px;
    max-width: 150px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--bg-tertiary);
    border: 2px solid var(--primary);
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    justify-content: center;
}

.sp-word-bubble:hover {
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
    border-color: var(--primary-dark, #4a47a3);
    transform: translateY(-2px);
}

.sp-word-bubble.function-word {
    background: var(--bg-tertiary);
    border-style: dashed;
    border-color: var(--border-color);
    color: var(--text-secondary);
    font-style: italic;
}

.sp-word-bubble.function-word:hover {
    border-color: var(--text-secondary);
}

.sp-word-bubble.has-card {
    background: #DCFCE7;
    border-color: #22C55E;
    border-style: solid;
}

.sp-word-bubble.fuzzy-match {
    background: #FEF3C7;
    border-color: #F59E0B;
    border-style: solid;
}

.sp-word-bubble.fuzzy-match:hover {
    background: #FDE68A;
    border-color: #D97706;
}

.sp-word-bubble.needs-resolution {
    border-color: var(--warning, #f59e0b);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}

.sp-bubble-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sp-word-bubble .fuzzy-indicator {
    font-size: 11px;
    color: #F59E0B;
    margin-left: 2px;
}

.sp-bubble-warning {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 12px;
}

/* Bubble Action Buttons */
.sp-bubble-actions {
    position: absolute;
    top: -10px;
    right: -10px;
    display: flex;
    gap: 2px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 10;
}

.sp-word-bubble:hover .sp-bubble-actions {
    opacity: 1;
}

.sp-bubble-actions button {
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    transition: all 0.15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sp-bubble-edit-btn {
    background: var(--primary);
    color: white;
}

.sp-bubble-edit-btn:hover {
    background: var(--primary-dark, #4a47a3);
    transform: scale(1.1);
}

.sp-bubble-link-btn {
    background: var(--success, #22c55e);
    color: white;
}

.sp-bubble-link-btn:hover {
    background: #16a34a;
    transform: scale(1.1);
}

.sp-bubble-delete-btn {
    background: var(--error, #e53935);
    color: white;
}

.sp-bubble-delete-btn:hover {
    background: #c62828;
    transform: scale(1.1);
}

/* SVG Connection Lines */
.sp-connection-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.sp-connection-line {
    stroke: var(--primary);
    stroke-width: 2;
    stroke-opacity: 0.4;
    transition: stroke-opacity 0.2s;
}

/* Pictures Row - aligned with bubbles row */
.sp-pictures-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 8px 0;
    align-items: flex-start;
    z-index: 2;
}

.sp-picture-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    justify-content: flex-start;
}

/* Empty slots for duplicate cards or function words */
.sp-picture-slot.empty,
.sp-picture-slot.function-word {
    min-height: 50px;
}

.sp-slot-card {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid var(--primary);
    background: var(--bg-secondary);
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sp-slot-card:hover {
    border-color: var(--primary-dark, #4a47a3);
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.sp-slot-card img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.sp-multi-link-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    background: var(--primary);
    color: white;
    font-size: 10px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.sp-no-words {
    color: var(--text-muted);
    font-size: 13px;
    padding: 8px 0;
}

.sp-no-pictures {
    color: var(--text-muted);
    font-size: 12px;
    font-style: italic;
    padding: 8px;
}

/* Legacy support - keep for backward compatibility */
.sp-words-section {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border-light);
}

.sp-word-bubbles {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.sp-word-pictures {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-picture-card {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--border);
    background: var(--bg-secondary);
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
}

.sp-picture-card:hover {
    border-color: var(--primary);
    transform: scale(1.05);
}

.sp-picture-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sp-picture-card .card-number {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 10px;
    text-align: center;
    padding: 2px;
}

/* =================================================================
   SENTENCE POOL - PICTURE LINK MODAL
   ================================================================= */

.sp-picture-link-modal .modal-content {
    max-width: 600px;
    max-height: 85vh;
}

.sp-picture-link-modal .modal-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Current Link Section */
.sp-current-link {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid var(--primary);
}

.sp-current-link h4 {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.sp-current-picture {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sp-current-picture img {
    width: 50px;
    height: 65px;
    object-fit: contain;
    border-radius: 6px;
    border: 2px solid var(--primary);
    background: white;
}

.sp-current-picture span {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Quick Link Section */
.sp-quick-link-section {
    background: var(--bg-secondary);
    padding: 12px;
    border-radius: 8px;
    border-left: 4px solid var(--warning, #f59e0b);
}

.sp-quick-link-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.sp-quick-link-section h4 i {
    color: var(--warning, #f59e0b);
    margin-right: 6px;
}

.sp-quick-link-options {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-quick-link-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--bg-primary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.sp-quick-link-option:hover {
    border-color: var(--primary);
    background: var(--primary-light, rgba(79, 70, 229, 0.05));
}

.sp-quick-link-option img {
    width: 40px;
    height: 52px;
    object-fit: contain;
    border-radius: 4px;
    background: white;
}

.sp-quick-link-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sp-quick-link-word {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sp-quick-link-card {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* Search Section */
.sp-search-section h4 {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.sp-search-section h4 i {
    margin-right: 6px;
}

.sp-search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.sp-search-bar input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 0.9rem;
}

.sp-search-bar input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

/* Pic Grid */
.sp-pic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px;
}

.sp-pic-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 8px;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.sp-pic-option:hover {
    border-color: var(--primary);
    background: var(--primary-light, rgba(79, 70, 229, 0.05));
}

.sp-pic-option img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 4px;
    margin-bottom: 4px;
    background: white;
}

.sp-pic-option .no-image {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: 4px;
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
}

.sp-pic-option .card-word {
    font-weight: 500;
    font-size: 0.8rem;
    text-align: center;
}

.sp-pic-option .card-english {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-align: center;
}

.sp-pic-grid .no-results,
.sp-pic-grid .hint-text {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--text-secondary);
    padding: 20px;
}

/* Remove Link Section */
.sp-remove-link-section {
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.sp-remove-link-section .btn-outline-danger {
    width: 100%;
    padding: 10px;
    border: 2px solid var(--error, #e53935);
    background: transparent;
    color: var(--error, #e53935);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.sp-remove-link-section .btn-outline-danger:hover {
    background: var(--error, #e53935);
    color: white;
}

.sp-remove-link-section .btn-outline-danger.hidden {
    display: none;
}

/* Legacy card grid styles (keep for backward compat) */
.sp-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
    padding: 4px;
}

.sp-card-option {
    border: 2px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--bg-primary);
}

.sp-card-option:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sp-no-card-option {
    border: 2px dashed var(--border);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text-secondary);
}

.sp-no-card-option:hover {
    border-color: #EF4444;
    background: #FEF2F2;
    color: #EF4444;
}

.sp-no-card-option i {
    display: block;
    font-size: 24px;
    margin-bottom: 8px;
}

/* =================================================================
   SENTENCE RECORDING MODAL
   ================================================================= */

.sentence-record-modal .modal-content {
    max-width: 500px;
}

.sentence-to-record {
    background: var(--bg-tertiary);
    padding: 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    text-align: center;
}

.sentence-text-display {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
}

.sentence-english-display {
    font-size: 14px;
    color: var(--text-secondary);
    font-style: italic;
}

.sentence-record-view {
    text-align: center;
}

.sentence-record-btn-container {
    margin-bottom: 20px;
}

.sentence-record-start-btn {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: none;
    background: #EF4444;
    color: white;
    font-size: 32px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.sentence-record-start-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 20px rgba(239, 68, 68, 0.5);
}

.sentence-record-start-btn.recording {
    animation: pulse-red 1s ease-in-out infinite;
}

@keyframes pulse-red {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
    }
    50% {
        box-shadow: 0 4px 30px rgba(239, 68, 68, 0.8);
    }
}

.sentence-visualizer-container {
    height: 80px;
    background: var(--bg-secondary);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 16px;
}

#sentenceVisualizerCanvas {
    width: 100%;
    height: 100%;
}

.sentence-recording-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 14px;
}

.sentence-recording-status i {
    color: #EF4444;
}

.sentence-recording-status.recording i {
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Sentence Editor View (after recording) */
.sentence-editor-view {
    display: none;
}

.sentence-editor-view.active {
    display: block;
}

.sentence-record-view.hidden {
    display: none;
}

.sentence-waveform-container {
    height: 120px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-bottom: 16px;
    position: relative;
}

#sentenceWaveformCanvas {
    width: 100%;
    height: 100%;
}

.sentence-playback-controls {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.sentence-playback-controls button {
    padding: 10px 20px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.2s;
}

.sentence-play-btn {
    background: var(--primary);
    color: white;
}

.sentence-play-btn:hover {
    background: var(--primary-dark);
}

.sentence-rerecord-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border) !important;
}

.sentence-rerecord-btn:hover {
    background: var(--bg-secondary);
}

.sentence-save-section {
    background: var(--bg-tertiary);
    padding: 16px;
    border-radius: 8px;
}

.sentence-save-section label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-primary);
}

.sentence-filename-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-family: monospace;
    margin-bottom: 12px;
}

.sentence-save-btn {
    width: 100%;
    padding: 12px;
    background: #22C55E;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.sentence-save-btn:hover {
    background: #16A34A;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sp-sentence-audio-controls {
        align-self: flex-end;
    }

    .sp-card-grid {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }

    .sentence-text-display {
        font-size: 18px;
    }

    .sp-bubbles-row {
        gap: 6px;
    }

    .sp-word-bubble {
        padding: 4px 8px;
        font-size: 12px;
    }

    .sp-slot-card {
        width: 40px;
        height: 40px;
    }
}

/* =================================================================
   RESCAN CONFLICT RESOLUTION MODAL
   ================================================================= */

.rescan-conflict-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.rescan-conflict-content {
    background: var(--bg-primary);
    border-radius: 16px;
    width: 100%;
    max-width: 1000px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.rescan-conflict-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border);
    background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
    border-radius: 16px 16px 0 0;
}

.rescan-conflict-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #92400E;
    display: flex;
    align-items: center;
    gap: 12px;
}

.rescan-conflict-header h2 i {
    color: #F59E0B;
    font-size: 24px;
}

.rescan-conflict-header .close-btn {
    background: none;
    border: none;
    font-size: 28px;
    color: #92400E;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: opacity 0.2s;
}

.rescan-conflict-header .close-btn:hover {
    opacity: 0.7;
}

.rescan-conflict-summary {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
}

.rescan-conflict-summary .summary-stat {
    flex: 1;
    text-align: center;
    padding: 12px;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 1px solid var(--border);
}

.rescan-conflict-summary .stat-number {
    display: block;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 4px;
}

.rescan-conflict-summary .stat-number.conflict {
    color: #F59E0B;
}

.rescan-conflict-summary .stat-number.new {
    color: #22C55E;
}

.rescan-conflict-summary .stat-number.unchanged {
    color: var(--text-secondary);
}

.rescan-conflict-summary .stat-label {
    font-size: 12px;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.rescan-conflict-actions-global {
    display: flex;
    gap: 12px;
    padding: 16px 24px;
    background: var(--bg-tertiary);
    border-bottom: 1px solid var(--border);
}

.rescan-conflict-actions-global .btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 14px;
}

.rescan-conflict-actions-global .keep-all-btn {
    background: #E0F2FE;
    color: #0369A1;
    border: 1px solid #7DD3FC;
}

.rescan-conflict-actions-global .keep-all-btn:hover {
    background: #BAE6FD;
}

.rescan-conflict-actions-global .overwrite-all-btn {
    background: #FEE2E2;
    color: #DC2626;
    border: 1px solid #FCA5A5;
}

.rescan-conflict-actions-global .overwrite-all-btn:hover {
    background: #FECACA;
}

.rescan-conflict-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}

.rescan-conflict-body .conflict-table {
    width: 100%;
    border-collapse: collapse;
}

.rescan-conflict-body .conflict-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

.rescan-conflict-body .conflict-table th {
    background: var(--bg-tertiary);
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    border-bottom: 2px solid var(--border);
}

.rescan-conflict-body .conflict-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
    font-size: 14px;
}

.rescan-conflict-body .conflict-table tr:hover {
    background: var(--bg-secondary);
}

.rescan-conflict-body .card-info {
    min-width: 180px;
}

.rescan-conflict-body .card-word {
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.rescan-conflict-body .card-meta {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
}

.rescan-conflict-body .asset-icon {
    color: var(--primary);
    margin-left: 6px;
    font-size: 12px;
}

.rescan-conflict-body .field-name {
    font-weight: 500;
    color: var(--text-secondary);
    min-width: 100px;
}

.rescan-conflict-body .manifest-value {
    background: #ECFDF5;
    color: #047857;
    padding: 8px 12px;
    border-radius: 6px;
    max-width: 200px;
    word-wrap: break-word;
}

.rescan-conflict-body .manifest-value em {
    color: #6B7280;
    font-style: italic;
}

.rescan-conflict-body .csv-value {
    background: #FEF2F2;
    color: #B91C1C;
    padding: 8px 12px;
    border-radius: 6px;
    max-width: 200px;
    word-wrap: break-word;
}

.rescan-conflict-body .csv-value em {
    color: #6B7280;
    font-style: italic;
}

.rescan-conflict-body .action-cell {
    min-width: 130px;
}

.rescan-conflict-body .resolution-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
}

.rescan-conflict-body .resolution-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.rescan-conflict-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    background: var(--bg-secondary);
    border-radius: 0 0 16px 16px;
}

.rescan-conflict-footer .btn {
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
}

.rescan-conflict-footer .cancel-btn {
    background: var(--bg-primary);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.rescan-conflict-footer .cancel-btn:hover {
    background: var(--bg-tertiary);
}

.rescan-conflict-footer .apply-btn {
    background: var(--primary);
    color: white;
    border: none;
}

.rescan-conflict-footer .apply-btn:hover {
    background: var(--primary-dark);
}

/* Responsive adjustments for conflict modal */
@media (max-width: 768px) {
    .rescan-conflict-content {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 12px;
    }

    .rescan-conflict-summary {
        flex-direction: column;
        gap: 8px;
    }

    .rescan-conflict-actions-global {
        flex-direction: column;
    }

    .rescan-conflict-body .conflict-table {
        font-size: 12px;
    }

    .rescan-conflict-body .conflict-table th,
    .rescan-conflict-body .conflict-table td {
        padding: 8px 10px;
    }

    .rescan-conflict-body .manifest-value,
    .rescan-conflict-body .csv-value {
        max-width: 120px;
        padding: 6px 8px;
        font-size: 12px;
    }

    .rescan-conflict-footer {
        flex-direction: column-reverse;
    }

    .rescan-conflict-footer .btn {
        width: 100%;
    }
}