/* ================================================================
   DARK MODE - Comprehensive Site-Wide Overrides
   Applied when <html> has class="dark"
   Uses !important to override template-inline <style> blocks
   ================================================================ */

/* ===== Universal Inline Style Overrides ===== */
html.dark [style*="background: white"],
html.dark [style*="background:white"],
html.dark [style*="background-color: white"],
html.dark [style*="background-color:white"],
html.dark [style*="background: #fff"],
html.dark [style*="background:#fff"],
html.dark [style*="background-color: #fff"],
html.dark [style*="background-color:#fff"] {
    background: #1e1e2e !important;
}

html.dark [style*="background: #f0f9ff"],
html.dark [style*="background: #f8fafc"],
html.dark [style*="background: #f3f4f6"],
html.dark [style*="background: #f9fafb"],
html.dark [style*="background: #f1f5f9"],
html.dark [style*="background: #fafbfc"],
html.dark [style*="background: #fafafa"],
html.dark [style*="background: #f5f5f7"],
html.dark [style*="background-color: #f3f4f6"],
html.dark [style*="background-color: #f9fafb"],
html.dark [style*="background-color: white"],
html.dark [style*="background: #e0f2fe"] {
    background: #252535 !important;
}

html.dark [style*="background: #fef2f2"],
html.dark [style*="background: #fff1f2"] {
    background: #2a1a1a !important;
}

html.dark [style*="background: #f0fdf4"] {
    background: #1a2a1a !important;
}

html.dark [style*="background: #fffbeb"] {
    background: #2a2518 !important;
}

html.dark [style*="color: #1f2937"],
html.dark [style*="color: #1e1e1e"],
html.dark [style*="color: #111827"],
html.dark [style*="color: #374151"],
html.dark [style*="color:#1f2937"],
html.dark [style*="color:#1e1e1e"] {
    color: #e0e0e0 !important;
}

html.dark [style*="color: #6b7280"],
html.dark [style*="color: #9ca3af"],
html.dark [style*="color: #4b5563"],
html.dark [style*="color: #4a4a4a"],
html.dark [style*="color:#6b7280"],
html.dark [style*="color:#9ca3af"] {
    color: #9ca3af !important;
}

html.dark [style*="border: 1px solid #e5e7eb"],
html.dark [style*="border: 1px solid #E5E7EB"],
html.dark [style*="border-color: #e5e7eb"] {
    border-color: #2d2d3d !important;
}

html.dark [style*="border-bottom: 1px solid #f3f4f6"] {
    border-bottom-color: #2d2d3d !important;
}

html.dark [style*="background: #e5e7eb"],
html.dark [style*="background: #e5e8eb"] {
    background: #3d3d4d !important;
}

/* ===== HOME PAGE ===== */

/* Hero Section */
html.dark .hero-section {
    background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html.dark .hero-section::before {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(34, 197, 94, 0.05) 0%, transparent 40%),
        radial-gradient(ellipse at 20% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 40%) !important;
}

html.dark .hero-title {
    color: #e0e8f0 !important;
}

html.dark .hero-subtitle {
    color: #94a3b8 !important;
}

html.dark .search-form,
html.dark .hero-section .search-form {
    background: rgba(30, 30, 46, 0.9) !important;
    border-color: #3d3d5c !important;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

@media (max-width: 767px) {

    html.dark .search-form,
    html.dark .hero-section .search-form {
        background: #1e1e2e !important;
        border-color: #3d3d5c !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }

    html.dark .search-input-wrapper {
        background: #2a2a3a !important;
        border-color: #3d3d4d !important;
    }

    html.dark .search-input-wrapper:focus-within {
        background: #333344 !important;
        border-color: #60a5fa !important;
        box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.15) !important;
    }

    html.dark .hero-section {
        background: linear-gradient(180deg, #1a1a2e 0%, #16162a 100%) !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    html.dark .hero-title {
        color: #e0e8f0 !important;
    }

    html.dark .hero-subtitle {
        color: #94a3b8 !important;
    }

    html.dark .continue-btn {
        background: rgba(96, 165, 250, 0.08) !important;
        border-color: #3b82f6 !important;
        color: #60a5fa !important;
    }

    html.dark .continue-btn:hover,
    html.dark .continue-btn:active {
        background: rgba(96, 165, 250, 0.15) !important;
        border-color: #60a5fa !important;
    }

    html.dark .continue-btn::after {
        color: #60a5fa !important;
    }

    html.dark .card-footer {
        background: #1a1a28 !important;
    }

    html.dark .section-title {
        color: #e0e0e0 !important;
    }

    html.dark .section-link {
        color: #60a5fa !important;
    }

    html.dark .workbook-card {
        border-color: #2d2d3d !important;
    }

    html.dark .page-header {
        background: #1e1e2e !important;
        border-bottom-color: #2d2d3d !important;
    }

    html.dark .page-header-modern {
        background: #1e1e2e !important;
        border-bottom-color: #2d2d3d !important;
    }

    html.dark .stat-card {
        background: #1e1e2e !important;
        border-color: #2d2d3d !important;
    }

    html.dark .stat-card.action-card {
        background: #1e1e2e !important;
        border-color: #2d2d3d !important;
    }

    html.dark .action-btn.history {
        background: #1e1e2e !important;
        color: #818cf8 !important;
        border-color: #312e81 !important;
    }

    html.dark .wrong-answer-card {
        border-color: #2d2d3d !important;
    }

    html.dark .empty-state {
        background: #1e1e2e !important;
        border-color: #2d2d3d !important;
    }

    html.dark .wrong-practice-btn {
        background: #252535 !important;
        color: #60a5fa !important;
        border-color: #3b5998 !important;
    }

    html.dark .btn-create-new {
        background: #252535 !important;
    }

    html.dark .topic-btn {
        background: #2a2a3a !important;
        color: #c0c0d0 !important;
        border-color: #3d3d4d !important;
    }

    html.dark .topic-btn.active {
        background: var(--primary-color, #3b82f6) !important;
        color: white !important;
    }

    html.dark .topic-filter-section {
        border-bottom-color: #2d2d3d !important;
    }

    html.dark .pagination {
        border-color: #2d2d3d !important;
    }
}

html.dark .continue-btn {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}

html.dark .search-form:focus-within {
    background: rgba(35, 35, 55, 0.95) !important;
    border-color: #60a5fa !important;
}

html.dark .search-input {
    color: #e0e0e0 !important;
}

html.dark .search-input::placeholder {
    color: #6b7280 !important;
}

html.dark .search-icon {
    color: #6b7280 !important;
}

html.dark .search-input-wrapper {
    background: transparent !important;
}

/* Section titles */
html.dark .section-title {
    color: #e0e0e0 !important;
}

html.dark .section-link {
    color: #60a5fa !important;
}

/* Workbook Cards (Home, List, etc.) */
html.dark .workbook-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .workbook-card:hover {
    border-color: #60a5fa !important;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4) !important;
}

html.dark .card-title a {
    color: #e0e0e0 !important;
}

html.dark .card-title a:hover {
    color: #60a5fa !important;
}

html.dark .card-description {
    color: #9ca3af !important;
}

html.dark .card-footer {
    background: #1a1a28 !important;
    border-top-color: #252535 !important;
}

html.dark .card-author {
    color: #7a7a8a !important;
}

html.dark .card-btn.outline {
    background: transparent !important;
    border-color: #3d3d5c !important;
    color: #60a5fa !important;
}

html.dark .card-btn.outline:hover {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: #60a5fa !important;
}

/* Topic tags */
html.dark .topic-tag {
    background: #252535 !important;
    color: #9ca3af !important;
    border-color: #3d3d4d !important;
}

/* Scrap buttons/counts */
html.dark .scrap-btn {
    background: #252535 !important;
    border-color: #3d3d4d !important;
    color: #9ca3af !important;
}

html.dark .scrap-btn:hover,
html.dark .scrap-btn.active {
    background: #2a1a1a !important;
    border-color: #5c2626 !important;
    color: #f87171 !important;
}

html.dark .scrap-count {
    background: #2a1a1a !important;
    border-color: #5c2626 !important;
    color: #f87171 !important;
}

/* Visibility badges */
html.dark .visibility-badge.public {
    background: #1a2a1a !important;
    color: #4ade80 !important;
}

html.dark .visibility-badge.protected {
    background: #2a2518 !important;
    color: #fbbf24 !important;
}

html.dark .visibility-badge.private {
    background: #252535 !important;
    color: #9ca3af !important;
}

/* Category cards */
html.dark .category-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .category-card:hover {
    border-color: #60a5fa !important;
}

html.dark .category-name {
    color: #e0e0e0 !important;
}

html.dark .category-desc {
    color: #9ca3af !important;
}

/* Empty state */
html.dark .empty-state {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .empty-title {
    color: #e0e0e0 !important;
}

html.dark .empty-desc {
    color: #9ca3af !important;
}

/* Login CTA */
html.dark .login-cta {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .login-cta h3 {
    color: #e0e0e0 !important;
}

html.dark .login-cta p {
    color: #9ca3af !important;
}

/* ===== DASHBOARD ===== */

/* Page header */
html.dark .page-header {
    background: #1e1e2e !important;
    border-bottom-color: #2d2d3d !important;
    border-color: #2d2d3d !important;
}

html.dark .page-header h1 {
    color: #e0e0e0 !important;
}

html.dark .page-header .text-muted {
    color: #9ca3af !important;
}

/* Stat cards */
html.dark .stat-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark .stat-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

html.dark .stat-value.monthly,
html.dark .stat-value.total {
    color: #e0e0e0 !important;
}

html.dark .stat-label {
    color: #9ca3af !important;
}

/* Stat icons in mobile (light backgrounds become dark) */
html.dark .stat-icon.monthly {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
}

html.dark .stat-icon.total {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}

/* Action card (풀이 기록) */
html.dark .stat-card.action-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .action-btn.history {
    background: #1e1e2e !important;
    color: #818cf8 !important;
    border-color: #312e81 !important;
}

/* Wrong answers section */
html.dark .wrong-answers-section {
    color: #e0e0e0 !important;
}

html.dark .wrong-answer-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark .wrong-answer-card:hover {
    border-color: #3b82f6 !important;
}

html.dark .attempt-date {
    color: #7a7a8a !important;
}

html.dark .retry-link {
    color: #60a5fa !important;
}

html.dark .question-text {
    color: #e0e0e0 !important;
}

/* Answer boxes */
html.dark .my-answer {
    background: rgba(225, 29, 72, 0.1) !important;
    border-color: rgba(225, 29, 72, 0.25) !important;
}

html.dark .my-answer .answer-label {
    color: #f87171 !important;
}

html.dark .correct-answer {
    background: rgba(14, 165, 233, 0.1) !important;
    border-color: rgba(14, 165, 233, 0.25) !important;
}

html.dark .correct-answer .answer-label {
    color: #38bdf8 !important;
}

html.dark .answer-text {
    color: #c0c0d0 !important;
}

/* No retry badge */
html.dark .no-retry-badge {
    background: rgba(3, 105, 161, 0.15) !important;
    color: #38bdf8 !important;
}

/* Explanation */
html.dark .explanation {
    background: rgba(14, 165, 233, 0.08) !important;
    border-color: rgba(14, 165, 233, 0.2) !important;
    color: #7dd3fc !important;
}

/* Smart review btn */
html.dark .wrong-practice-btn {
    background: #252535 !important;
    color: #60a5fa !important;
    border-color: #3b5998 !important;
}

/* Pagination */
html.dark .pagination {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark .page-link {
    color: #c0c0d0 !important;
}

html.dark .page-link:hover {
    background: #252535 !important;
    color: #60a5fa !important;
}

html.dark .page-link.disabled {
    color: #4a4a5a !important;
}

html.dark .page-num {
    color: #c0c0d0 !important;
}

html.dark .page-num:hover {
    background: #252535 !important;
    color: #60a5fa !important;
}

html.dark .page-num.active {
    background: #0ea5e9 !important;
    color: white !important;
}

/* ===== WORKBOOK LIST ===== */

/* Topic filter buttons */
html.dark .topic-filter-btn,
html.dark .category-btn,
html.dark .filter-tag,
html.dark .topic-btn {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #c0c0d0 !important;
}

html.dark .topic-filter-btn.active,
html.dark .category-btn.active,
html.dark .filter-tag.active,
html.dark .topic-btn.active {
    background: var(--primary-color, #3b82f6) !important;
    border-color: var(--primary-color, #3b82f6) !important;
    color: white !important;
}

html.dark .topic-filter-btn:hover,
html.dark .category-btn:hover {
    background: #333344 !important;
    border-color: #4d4d5d !important;
}

/* Create workbook card */
html.dark .create-workbook-card,
html.dark .add-workbook-card,
html.dark .btn-create {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    color: #60a5fa !important;
}

/* Search section */
html.dark .search-section {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .search-section input,
html.dark .search-container input {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

/* Progress bar track */
html.dark [style*="background: #f3f4f6; border-radius: 3px"] {
    background: #3d3d4d !important;
}

/* ===== WORKBOOK DETAIL ===== */

html.dark .workbook-header,
html.dark .workbook-detail-header {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2) !important;
}

html.dark .workbook-title {
    color: #e0e0e0 !important;
}

html.dark .workbook-description {
    color: #9ca3af !important;
}

html.dark .text-tag {
    color: #60a5fa !important;
}

/* Meta info */
html.dark .workbook-meta-info {
    border-top-color: #2d2d3d !important;
}

html.dark .meta-row.minimalist {
    color: #9ca3af !important;
}

html.dark .meta-text {
    color: #c0c0d0 !important;
}

html.dark .meta-divider {
    color: #4d4d5d !important;
}

html.dark .author-link {
    color: #c0c0d0 !important;
}

html.dark .author-link:hover {
    color: #60a5fa !important;
}

/* Visibility badges */
html.dark .visibility-badge.public {
    background: #1a2a1a !important;
    color: #4ade80 !important;
}

html.dark .visibility-badge.private {
    background: #252535 !important;
    color: #9ca3af !important;
}

html.dark .visibility-badge.protected {
    background: #2a2518 !important;
    color: #fbbf24 !important;
}

/* Header toggles */
html.dark .header-toggles {
    border-color: #2d2d3d !important;
}

html.dark .setting-toggle-wrapper {
    background: #252535 !important;
    border-color: #3d3d4d !important;
}

html.dark .setting-toggle-wrapper:has(input:checked) {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

html.dark .toggle-label {
    color: #9ca3af !important;
}

html.dark .setting-toggle-wrapper:has(input:checked) .toggle-label {
    color: #4ade80 !important;
}

html.dark .slider {
    background-color: #4d4d5d !important;
}

/* Header action buttons */
html.dark .action-btn.edit {
    background: #252535 !important;
    color: #c0c0d0 !important;
}

html.dark .action-btn.edit:hover {
    background: #333344 !important;
    color: #60a5fa !important;
}

html.dark .action-btn.delete {
    background: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
}

html.dark .action-btn.delete:hover {
    background: rgba(239, 68, 68, 0.2) !important;
}

html.dark .action-btn.scrap {
    background: #252535 !important;
    color: #9ca3af !important;
    border-color: #3d3d4d !important;
}

html.dark .action-btn.scrap:hover {
    background: rgba(248, 113, 113, 0.1) !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark .action-btn.scraped {
    background: rgba(248, 113, 113, 0.1) !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark .action-btn.scraped:hover {
    background: rgba(248, 113, 113, 0.2) !important;
}

/* Practice buttons */
html.dark .practice-btn.sequential {
    background: linear-gradient(135deg, #d97706, #ea580c) !important;
    color: white !important;
}

html.dark .practice-btn.batch {
    background: #252535 !important;
    color: #60a5fa !important;
    border-color: #3b5998 !important;
}

html.dark .practice-btn.batch:hover {
    background: #333344 !important;
    border-color: #60a5fa !important;
}

html.dark .practice-btn.smart-review {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    color: white !important;
}

html.dark .practice-btn.print {
    background: #252535 !important;
    color: #c0c0d0 !important;
    border-color: #3d3d4d !important;
}

html.dark .practice-btn.print:hover {
    background: #333344 !important;
    color: #60a5fa !important;
}

html.dark .practice-btn.disabled {
    background: #2a2a3a !important;
    color: #5a5a6a !important;
    border-color: #3d3d4d !important;
}

/* Progress Section */
html.dark .progress-section {
    border-top-color: #2d2d3d !important;
}

html.dark .progress-label {
    color: #9ca3af !important;
}

html.dark .progress-text {
    color: #60a5fa !important;
}

html.dark .progress-bar-bg,
html.dark .progress-track {
    background: #2a2a3a !important;
}

/* Content Section */
html.dark .workbook-content-section {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .content-title {
    color: #e0e0e0 !important;
}

html.dark .problem-count {
    color: #9ca3af !important;
}

/* Search bar in content header */
html.dark .search-input-group-sm {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
}

html.dark .search-input-sm {
    background: transparent !important;
    color: #e0e0e0 !important;
}

html.dark .search-icon-xs {
    color: #6b7280 !important;
}

/* Problem Cards */
html.dark .problem-card {
    background: #252535 !important;
    border-color: #2d2d3d !important;
}

html.dark .problem-card:hover {
    border-color: #60a5fa !important;
}

html.dark .problem-number {
    color: #60a5fa !important;
}

html.dark .problem-text {
    color: #e0e0e0 !important;
}

html.dark .problem-type.mcq {
    background: rgba(96, 165, 250, 0.15) !important;
    color: #60a5fa !important;
}

html.dark .problem-type.short {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
}

html.dark .problem-type.flash {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}

html.dark .problem-details {
    border-top-color: #3d3d4d !important;
}

html.dark .detail-label {
    color: #7a7a8a !important;
}

html.dark .options-list {
    color: #c0c0d0 !important;
}

html.dark .answer-value {
    color: #60a5fa !important;
}

html.dark .prob-action.edit {
    color: #9ca3af !important;
}

html.dark .prob-action.edit:hover {
    color: #60a5fa !important;
}

/* Empty state */
html.dark .empty-problems {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .empty-problems p {
    color: #9ca3af !important;
}

/* Access Lock */
html.dark .access-lock-section {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .access-lock-section h2 {
    color: #e0e0e0 !important;
}

html.dark .access-lock-section p {
    color: #9ca3af !important;
}

html.dark .access-input {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

/* Topic / Owner badges */
html.dark .topic-badge {
    background: #252535 !important;
    color: #c0c0d0 !important;
    border-color: #3d3d4d !important;
}

html.dark .tag-badge {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
}

html.dark .owner-badge {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
}

/* Problem image border */
html.dark .problem-image-preview img {
    border-color: #3d3d4d !important;
}

/* Pagination container */
html.dark .pagination-container {
    background: transparent !important;
}

/* Mobile-specific workbook detail dark overrides */
@media (max-width: 768px) {
    html.dark .workbook-detail-header {
        background: #1e1e2e !important;
        border-bottom-color: #2d2d3d !important;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
    }

    html.dark .practice-btn.sequential {
        background: rgba(96, 165, 250, 0.12) !important;
        color: #60a5fa !important;
        border-color: rgba(96, 165, 250, 0.3) !important;
    }

    html.dark .practice-btn.batch {
        background: #252535 !important;
        color: #c0c0d0 !important;
        border-color: #3d3d4d !important;
    }

    html.dark .practice-btn.smart-review {
        background: linear-gradient(135deg, #059669, #10b981) !important;
        color: white !important;
    }

    html.dark .setting-toggle-wrapper {
        background: #252535 !important;
        border-color: #3d3d4d !important;
    }

    html.dark .setting-toggle-wrapper:has(input:checked) {
        background: rgba(34, 197, 94, 0.12) !important;
        border-color: rgba(34, 197, 94, 0.3) !important;
    }

    html.dark .workbook-meta-info {
        border-top-color: #2d2d3d !important;
    }

    html.dark .progress-section {
        border-top-color: #2d2d3d !important;
    }

    html.dark .workbook-content-section {
        background: #1e1e2e !important;
        border-color: #2d2d3d !important;
    }

    html.dark .problem-card {
        background: #252535 !important;
    }
}

/* ===== WORKBOOK PRACTICE ===== */

html.dark .practice-container,
html.dark .practice-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .choice-item,
html.dark .option-item {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

html.dark .choice-item:hover,
html.dark .option-item:hover {
    background: #333344 !important;
    border-color: #60a5fa !important;
}

html.dark .choice-item.selected,
html.dark .option-item.selected {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: #60a5fa !important;
}

html.dark .choice-item.correct,
html.dark .option-item.correct {
    background: rgba(34, 197, 94, 0.12) !important;
    border-color: #22c55e !important;
}

html.dark .choice-item.incorrect,
html.dark .option-item.incorrect {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: #ef4444 !important;
}

html.dark .practice-progress-bar {
    background: #2a2a3a !important;
}

html.dark .answer-input {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

/* Question card */
html.dark .question-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

html.dark .question-text {
    color: #e0e0e0 !important;
}

/* Option text */
html.dark .option-text {
    color: #e0e0e0 !important;
}

/* Quiz buttons */
html.dark .quiz-btn-outline {
    background: #252535 !important;
    color: #60a5fa !important;
    border-color: #3d3d4d !important;
}

html.dark .quiz-btn-outline:hover {
    background: #333344 !important;
    border-color: #60a5fa !important;
}

html.dark .quiz-btn-check {
    background: #252535 !important;
    color: #f59e0b !important;
    border-color: #b45309 !important;
}

html.dark .quiz-btn-check:hover {
    background: rgba(245, 158, 11, 0.1) !important;
    border-color: #f59e0b !important;
}

/* Feedback card */
html.dark .result-feedback-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html.dark .result-feedback-card.correct {
    border-left-color: #059669 !important;
    background: #1e1e2e !important;
}

html.dark .result-feedback-card.incorrect {
    border-left-color: #dc2626 !important;
    background: #1e1e2e !important;
}

html.dark .feedback-header {
    border-bottom-color: #2d2d3d !important;
}

html.dark .feedback-body {
    color: #c0c0d0 !important;
}

html.dark .feedback-row .label {
    color: #9ca3af !important;
}

html.dark .feedback-divider {
    background: #2d2d3d !important;
}

html.dark .feedback-explanation .exp-label {
    color: #c0c0d0 !important;
}

html.dark .feedback-explanation .exp-text {
    color: #e0e0e0 !important;
}

/* Grade buttons */
html.dark .grade-btn-modern.grade-o {
    background-color: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
}

html.dark .grade-btn-modern.grade-x {
    background-color: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

html.dark .btn-grade-correct {
    background: #252535 !important;
    color: #4ade80 !important;
    border-color: #059669 !important;
}

html.dark .btn-grade-correct:hover {
    background: #059669 !important;
    color: white !important;
}

html.dark .btn-grade-incorrect {
    background: #252535 !important;
    color: #f87171 !important;
    border-color: #ef4444 !important;
}

html.dark .btn-grade-incorrect:hover {
    background: #dc2626 !important;
    color: white !important;
}

/* Flashcard */
html.dark .flashcard-front {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
    border-color: #3d3d4d !important;
}

html.dark .flashcard-back {
    background: linear-gradient(135deg, #1a2a4a, #1e3a5f) !important;
    color: #60a5fa !important;
    border-color: #3b5998 !important;
}

/* Warning message */
html.dark .warning-message {
    background-color: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

/* Page header in practice */
html.dark .page-header h1 {
    color: #e0e0e0 !important;
}

html.dark .page-header p {
    color: #9ca3af !important;
}

/* Form control input (text answer) */
html.dark .form-control {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

html.dark .form-control:focus {
    background: #333344 !important;
    border-color: #60a5fa !important;
}

html.dark .form-control::placeholder {
    color: #6b7280 !important;
}

/* Progress bar background (inline styled) */
html.dark [style*="background-color: #E5E7EB"] {
    background-color: #2a2a3a !important;
}

/* Stat items (mobile pill badges) */
html.dark .stat-item {
    background: #252535 !important;
    color: #c0c0d0 !important;
}

html.dark .stat-value {
    color: #e0e0e0 !important;
}

/* Grading self-assessment text */
html.dark .grading-buttons p {
    color: #c0c0d0 !important;
}

/* ===== WORKBOOK RESULT ===== */

html.dark .result-container {
    background: transparent !important;
}

html.dark .result-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .result-header {
    color: #e0e0e0 !important;
}

html.dark .result-score {
    color: #e0e0e0 !important;
}

html.dark .result-detail {
    background: #252535 !important;
    border-color: #2d2d3d !important;
}

html.dark .result-question {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

/* ===== FORM PAGES ===== */

html.dark .form-container,
html.dark .form-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .form-group label {
    color: #c0c0d0 !important;
}

html.dark .form-control,
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="url"],
html.dark select,
html.dark textarea {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

/* ===== AUTH PAGES ===== */

html.dark .auth-container,
html.dark .login-container,
html.dark .signup-container,
html.dark .auth-card,
html.dark .login-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

html.dark .auth-header h1,
html.dark .auth-header h2,
html.dark .login-title {
    color: #e0e0e0 !important;
}

html.dark .social-login-btn,
html.dark .btn-social {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

html.dark .social-login-btn:hover,
html.dark .btn-social:hover {
    background: #333344 !important;
}

html.dark .auth-divider,
html.dark .divider-text {
    color: #7a7a8a !important;
}

html.dark .auth-divider::before,
html.dark .auth-divider::after {
    background: #2d2d3d !important;
}

html.dark .auth-footer {
    color: #9ca3af !important;
}

html.dark .auth-footer a {
    color: #60a5fa !important;
}

/* ===== BADGE PAGES ===== */

html.dark .badge-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .badge-name {
    color: #e0e0e0 !important;
}

html.dark .badge-description {
    color: #9ca3af !important;
}

html.dark .badge-detail-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .badge-requirements {
    background: #252535 !important;
    border-color: #2d2d3d !important;
}

/* ===== HISTORY PAGE ===== */

html.dark .history-item {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .history-date {
    color: #9ca3af !important;
}

html.dark .history-score {
    color: #e0e0e0 !important;
}

/* ===== TEST PAGES ===== */

html.dark .test-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .test-title {
    color: #e0e0e0 !important;
}

html.dark .test-description {
    color: #9ca3af !important;
}

html.dark .test-session-container {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .test-result-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

/* ===== MODALS ===== */

html.dark .modal-container,
html.dark .modal-content,
html.dark .modal-dialog {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .modal-header {
    border-bottom-color: #2d2d3d !important;
}

html.dark .modal-header h2,
html.dark .modal-header h3,
html.dark .modal-title {
    color: #e0e0e0 !important;
}

html.dark .modal-body {
    color: #c0c0d0 !important;
}

html.dark .modal-footer {
    border-top-color: #2d2d3d !important;
}

html.dark .modal-close {
    color: #9ca3af !important;
}

/* ===== SEQUENTIAL / FLASHCARD PRACTICE ===== */

html.dark .flashcard-container,
html.dark .flashcard {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .flashcard-front,
html.dark .flashcard-back {
    background: #1e1e2e !important;
    color: #e0e0e0 !important;
}

/* ===== TABLES ===== */

html.dark table {
    border-color: #2d2d3d !important;
}

html.dark th {
    background: #252535 !important;
    border-color: #2d2d3d !important;
    color: #e0e0e0 !important;
}

html.dark td {
    border-color: #2d2d3d !important;
    color: #c0c0d0 !important;
}

html.dark tr:hover td {
    background: #2a2a3a !important;
}

/* ===== ALERTS ===== */

html.dark .alert-success {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.25) !important;
}

html.dark .alert-error,
html.dark .alert-danger {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.25) !important;
}

html.dark .alert-info {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
}

html.dark .alert-warning {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.25) !important;
}

/* ===== UPLOAD ZONES ===== */

html.dark .bulk-upload-container,
html.dark .upload-zone,
html.dark .image-upload-zone {
    background: #1e1e2e !important;
    border-color: #3d3d4d !important;
}

/* ===== MISC UTILITY ===== */

html.dark hr {
    border-color: #2d2d3d !important;
}

html.dark .text-muted {
    color: #9ca3af !important;
}

html.dark .guide-modal-content {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    color: #c0c0d0 !important;
}

html.dark .guide-modal-header {
    border-bottom-color: #2d2d3d !important;
}

html.dark .guide-modal-header h3 {
    color: #e0e0e0 !important;
}

/* Scrollbar */
html.dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

html.dark ::-webkit-scrollbar-track {
    background: #121218;
}

html.dark ::-webkit-scrollbar-thumb {
    background: #3d3d4d;
    border-radius: 4px;
}

html.dark ::-webkit-scrollbar-thumb:hover {
    background: #4d4d5d;
}

html.dark ::selection {
    background: rgba(96, 165, 250, 0.3);
    color: #e0e0e0;
}

/* ===== STUDY CALENDAR ===== */

html.dark .study-calendar {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .calendar-header {
    color: #e0e0e0 !important;
}

html.dark .calendar-day {
    color: #c0c0d0 !important;
    border-color: #2d2d3d !important;
}

html.dark .calendar-day:hover {
    background: #2a2a3a !important;
}

html.dark .calendar-day.today {
    border-color: #60a5fa !important;
}

html.dark .calendar-day.has-activity {
    background: rgba(96, 165, 250, 0.1) !important;
}

/* ===== FOLLOW / NOTICE / ABOUT / TERMS ===== */

html.dark .follow-item,
html.dark .notice-item,
html.dark .access-item {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .notice-title,
html.dark .follow-name {
    color: #e0e0e0 !important;
}

html.dark .notice-date {
    color: #9ca3af !important;
}

html.dark .about-container,
html.dark .terms-container,
html.dark .privacy-container,
html.dark .static-page {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    color: #c0c0d0 !important;
}

/* Delete confirmation */
html.dark .delete-confirm-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .delete-warning {
    background: #2a1a1a !important;
    border-color: #5c2626 !important;
    color: #f87171 !important;
}

/* Tooltip */
html.dark .tooltip-content {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

/* Tag / Chip */
html.dark .tag,
html.dark .chip {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #c0c0d0 !important;
}

/* ===== WORKBOOK LIST PAGE (workbook_list.html exact classes) ===== */

/* Page header modern */
html.dark .page-header-modern {
    background: #1e1e2e !important;
    border-bottom-color: #2d2d3d !important;
}

html.dark .page-title {
    color: #e0e0e0 !important;
}

html.dark .page-subtitle {
    color: #9ca3af !important;
}

html.dark .btn-create-new {
    background: #252535 !important;
    color: #60a5fa !important;
    border-color: #3b5998 !important;
}

html.dark .btn-create-new:hover {
    background: #333344 !important;
    border-color: #60a5fa !important;
}

/* Search form on workbook list page */
html.dark .search-form-page {
    background: #1e1e2e !important;
    border-color: #3d3d4d !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark .search-input-page {
    color: #e0e0e0 !important;
}

html.dark .search-input-page::placeholder {
    color: #6b7280 !important;
}

html.dark .search-icon-sm {
    color: #6b7280 !important;
}

/* Topic filter section */
html.dark .topic-filter-section {
    border-bottom-color: #2d2d3d !important;
}

/* Workbook items (card format on list page) */
html.dark .workbook-item {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .workbook-item:hover {
    border-color: #60a5fa !important;
    box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.4) !important;
}

html.dark .workbook-item-title a {
    color: #e0e0e0 !important;
}

html.dark .workbook-item-title a:hover {
    color: #60a5fa !important;
}

html.dark .workbook-item-desc {
    color: #9ca3af !important;
}

html.dark .workbook-item-footer {
    background: #1a1a28 !important;
    border-top-color: #252535 !important;
}

html.dark .workbook-item-body {
    background: #1e1e2e !important;
}

/* Visibility tags (workbook list uses .visibility-tag not .visibility-badge) */
html.dark .visibility-tag.public {
    background: #1a2a1a !important;
    color: #4ade80 !important;
}

html.dark .visibility-tag.private {
    background: #252535 !important;
    color: #9ca3af !important;
}

html.dark .visibility-tag.protected {
    background: #2a2518 !important;
    color: #fbbf24 !important;
}

/* Action buttons on workbook list page */
html.dark .btn-action.primary {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark .btn-action.primary:hover {
    background: rgba(96, 165, 250, 0.2) !important;
}

html.dark .btn-action.outline {
    background: transparent !important;
    color: #60a5fa !important;
    border-color: #3b5998 !important;
}

html.dark .btn-action.outline:hover {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: #60a5fa !important;
}

html.dark .btn-action.disabled {
    background: #2a2a3a !important;
    color: #5a5a6a !important;
    border-color: #3d3d4d !important;
}

/* Meta info */
html.dark .meta-author {
    color: #c0c0d0 !important;
}

html.dark .meta-date {
    color: #7a7a8a !important;
}

/* Empty state page */
html.dark .empty-state-page {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    color: #9ca3af !important;
}

/* Tag spans with inline styles (workbook tags) */
html.dark [style*="color: #0284c7; background: #e0f2fe"] {
    color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.12) !important;
}

/* Progress label inline styles */
html.dark [style*="color: #6b7280; font-weight: 500"] {
    color: #9ca3af !important;
}

html.dark [style*="color: #3b82f6; font-weight: 700"] {
    color: #60a5fa !important;
}

/* Progress bar background */
html.dark [style*="height: 6px; background: #f3f4f6"] {
    background: #3d3d4d !important;
}

/* ===== WORKBOOK LIST - additional generic selectors ===== */

html.dark .workbook-list-item {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .workbook-list-item:hover {
    border-color: #60a5fa !important;
}

html.dark .my-workbook-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

/* ===== CATEGORY DETAIL ===== */

html.dark .category-header {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .category-description {
    color: #9ca3af !important;
}

/* Exam columns (white → dark) */
html.dark .exam-column {
    background: #1e1e2e !important;
    border: 1px solid #2d2d3d !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2) !important;
}

/* Exam title */
html.dark .exam-title {
    color: #60a5fa !important;
    border-bottom-color: #2d2d3d !important;
}

/* Subject rows (white → dark) */
html.dark .subject-row {
    background: #252535 !important;
    border-color: #3d3d4d !important;
}

html.dark .subject-row:hover {
    border-color: #60a5fa !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html.dark .subject-row.vocab {
    background: rgba(96, 165, 250, 0.08) !important;
    border-left-color: #60a5fa !important;
}

/* Subject title text */
html.dark .subject-title {
    color: #e0e0e0 !important;
}

/* Subject item links (generic) */
html.dark .subject-item a {
    background: #252535 !important;
    color: #e0e0e0 !important;
    border-color: #3d3d4d !important;
}

html.dark .subject-item a:hover {
    background: #60a5fa !important;
    color: white !important;
}

html.dark .subject-item.vocab a {
    background: rgba(96, 165, 250, 0.1) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    color: #60a5fa !important;
}

/* Row action buttons */
html.dark .row-btn.scrap {
    background: #2a2a3a !important;
    color: #9ca3af !important;
    border-color: #3d3d4d !important;
}

html.dark .row-btn.scrap:hover {
    background: rgba(248, 113, 113, 0.1) !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark .row-btn.scrap.active {
    background: rgba(248, 113, 113, 0.1) !important;
    color: #f87171 !important;
    border-color: rgba(248, 113, 113, 0.3) !important;
}

html.dark .row-btn.detail {
    background: #252535 !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

html.dark .row-btn.detail:hover {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: #60a5fa !important;
}

html.dark .row-btn.solve {
    background: rgba(96, 165, 250, 0.1) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
}

html.dark .row-btn.solve:hover {
    background: rgba(96, 165, 250, 0.2) !important;
    border-color: #60a5fa !important;
}

html.dark .row-btn.disabled {
    background: #1e1e2e !important;
    color: #6b7280 !important;
    border-color: #2d2d3d !important;
}

/* Breadcrumb */
html.dark .breadcrumb {
    color: #9ca3af !important;
}

html.dark .breadcrumb a {
    color: #60a5fa !important;
}

/* Generic grid cards (exam_detail.html) */
html.dark .grid .card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    color: #e0e0e0 !important;
}

html.dark .grid .card:hover {
    border-color: #60a5fa !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

html.dark .grid .card h3 {
    color: #e0e0e0 !important;
}

html.dark .grid .card p {
    color: #9ca3af !important;
}

/* ===== PORTAL HERO OVERRIDE ===== */

html.dark .portal-hero {
    background: linear-gradient(135deg, #1e3a5f 0%, #1a3550 100%) !important;
}

/* ===== RECOMMENDATION ===== */

html.dark .recommendation-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

/* ===== SUBJECT PRACTICE ===== */

html.dark .subject-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

/* ===== PROBLEM FORM ===== */

html.dark .problem-form-container {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

/* ================================================================
   BUTTON TEXT COLOR FIXES
   Ensure buttons with colored backgrounds have white text in dark mode
   ================================================================ */

html.dark .top-nav-cta,
html.dark .add-problem-btn,
html.dark .add-first-btn,
html.dark .browse-badges-btn {
    color: white !important;
}

/* ================================================================
   HISTORY / SOLUTION RECORD PAGE
   ================================================================ */

html.dark .history-table-wrapper {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

html.dark .history-table th {
    background: #252535 !important;
    color: #e0e0e0 !important;
    border-bottom-color: #2d2d3d !important;
}

html.dark .history-table td {
    border-bottom-color: #2d2d3d !important;
    color: #e0e0e0 !important;
}

html.dark .history-table tr:hover {
    background: #2a2a3a !important;
}

html.dark .date-cell {
    color: #9ca3af !important;
}

html.dark .workbook-cell a {
    color: #e0e0e0 !important;
}

html.dark .workbook-cell a:hover {
    color: #60a5fa !important;
}

html.dark .count-cell {
    color: #9ca3af !important;
}

html.dark .count-badge {
    color: #60a5fa !important;
}

html.dark .empty-state {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    color: #9ca3af !important;
}

/* ================================================================
   BADGE LIST PAGE
   ================================================================ */

html.dark .page-header-modern {
    border-bottom-color: #2d2d3d !important;
}

html.dark .page-title {
    color: #e0e0e0 !important;
}

html.dark .page-subtitle {
    color: #9ca3af !important;
}

html.dark .stats-card-modern {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .stat-icon-circle {
    background: linear-gradient(135deg, #1e3a8a, #1d4ed8) !important;
    color: #93c5fd !important;
}

html.dark .current-count {
    color: #e0e0e0 !important;
}

html.dark .divider {
    color: #4b5563 !important;
}

html.dark .category-header {
    border-bottom-color: #2d2d3d !important;
}

html.dark .category-title {
    color: #e0e0e0 !important;
}

html.dark .category-count {
    background: #252535 !important;
    color: #9ca3af !important;
}

html.dark .badge-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .badge-card.locked {
    background: #252535 !important;
    border-color: #2d2d3d !important;
}

html.dark .badge-info .badge-name {
    color: #e0e0e0 !important;
}

html.dark .badge-card.locked .badge-name {
    color: #6b7280 !important;
}

html.dark .badge-condition {
    color: #9ca3af !important;
}

html.dark .badge-icon-wrapper {
    background: #2a2a3a !important;
}

/* Badge Tiers in Dark Mode */
html.dark .badge-card.earned.tier-bronze {
    background: #2a1b15 !important;
    border-color: #7c2d12 !important;
}

html.dark .badge-card.earned.tier-silver {
    background: #1e293b !important;
    border-color: #475569 !important;
}

html.dark .badge-card.earned.tier-gold {
    background: #2a2215 !important;
    border-color: #b45309 !important;
}

html.dark .badge-card.earned.tier-platinum {
    background: #132a2a !important;
    border-color: #0f766e !important;
}

html.dark .badge-card.earned.tier-diamond {
    background: #201a30 !important;
    border-color: #7c3aed !important;
}

/* Tier Tags */
html.dark .badge-tier-tag.tier-bronze {
    background: #431407 !important;
    color: #fdba74 !important;
    border-color: #7c2d12 !important;
}

html.dark .badge-tier-tag.tier-silver {
    background: #0f172a !important;
    color: #94a3b8 !important;
    border-color: #334155 !important;
}

html.dark .badge-tier-tag.tier-gold {
    background: #451a03 !important;
    color: #fcd34d !important;
    border-color: #b45309 !important;
}

html.dark .badge-tier-tag.tier-platinum {
    background: #042f2e !important;
    color: #5eead4 !important;
    border-color: #115e59 !important;
}

html.dark .badge-tier-tag.tier-diamond {
    background: #2e1065 !important;
    color: #d8b4fe !important;
    border-color: #7c3aed !important;
}

/* ================================================================
   UI REFINEMENTS - HEADERS & BORDERS
   Make headers blend in with background, remove sharp borders
   ================================================================ */

/* General Page Headers */
html.dark .page-header,
html.dark .page-header-modern {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

html.dark .workbook-detail-header {
    background: #1e1e2e !important;
    border: 1px solid #2d2d3d !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Badge Collection & Stats */
html.dark .stats-card-modern {
    background: #1e1e2e !important;
    /* Keep card background but soften border */
    border: 1px solid #2d2d3d !important;
    border-radius: 24px !important;
    /* More rounded */
}

html.dark .category-header {
    border-bottom: 2px solid #2d2d3d !important;
    /* Keep a subtle divider */
}

/* Solution History Table container */
html.dark .history-table-wrapper {
    border: 1px solid #2d2d3d !important;
    border-radius: 20px !important;
    /* Rounded corners */
    overflow: hidden !important;
}

/* Tab Navigation (if any) */
html.dark .nav-tabs {
    border-bottom-color: #2d2d3d !important;
}

html.dark .nav-link.active {
    background: #1e1e2e !important;
    border-color: #2d2d3d #2d2d3d #1e1e2e !important;
    color: #e0e0e0 !important;
}

/* Input Fields & Search Bars - soften borders */
html.dark input[type="text"],
html.dark input[type="search"],
html.dark .form-control {
    border-radius: 12px !important;
}

/* Cards general rounding */
html.dark .card,
html.dark .workbook-card,
html.dark .problem-card {
    border-radius: 16px !important;
}

/* ================================================================
   BADGE LIST REFINEMENTS (SEAMLESS HEADERS)
   ================================================================ */

html.dark .category-header {
    border-bottom: none !important;
    padding-bottom: 8px !important;
    margin-bottom: 16px !important;
}

html.dark .category-count {
    background: transparent !important;
    color: #6b7280 !important;
    border: none !important;
    padding: 0 !important;
    /* Make it look like just text */
    font-weight: 500 !important;
}

/* Also refine User Profile Badge Count if present */
html.dark .badge-count-chip {
    background: transparent !important;
    border: 1px solid #2d2d3d !important;
    color: #60a5fa !important;
}

/* ================================================================
   BADGE LIST REFINEMENTS (TRANSPARENT HEADERS)
   ================================================================ */

/* Ensure the entire category header container is transparent */
html.dark .category-header {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Ensure the title itself has no background if applied elsewhere */
html.dark .category-title {
    background: transparent !important;
    background-color: transparent !important;
}

/* Specific targeted rule incase of specificity issues */
html.dark .badge-category-section .category-header {
    background: transparent !important;
    box-shadow: none !important;
}

/* ================================================================
   WORKBOOK DETAIL SEARCH BAR FIX
   ================================================================ */

html.dark .search-input-group-sm {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
}

html.dark .search-input-group-sm:focus-within {
    background: #1e1e2e !important;
    /* Slightly darker on focus */
    border-color: #3b82f6 !important;
}

html.dark .search-input-sm {
    color: #e0e0e0 !important;
}

html.dark .search-input-sm::placeholder {
    color: #6a6a7a !important;
}

/* ================================================================
   SHARE BUTTON DARK MODE FIX
   ================================================================ */

html.dark .action-btn.share {
    background: #2a2a3a !important;
    color: #e0e0e0 !important;
    border-color: #3d3d4d !important;
}

html.dark .action-btn.share:hover {
    background: #333344 !important;
    color: #ffffff !important;
    border-color: #4d4d5d !important;
}

/* ================================================================
   WORKBOOK RESULT PAGE DARK MODE
   ================================================================ */

html.dark .result-summary-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

html.dark .result-title {
    color: #e0e0e0 !important;
}

html.dark .score-overlay {
    color: #e0e0e0 !important;
}

html.dark .score-count {
    color: #e0e0e0 !important;
}

html.dark .score-text {
    color: #9ca3af !important;
}

html.dark .circle-bg {
    stroke: #3d3d4d !important;
}

html.dark .result-message {
    color: #c0c0d0 !important;
}

html.dark .quiz-btn-solid {
    color: white !important;
}

html.dark .quiz-btn-outline {
    background: #252535 !important;
    color: #c0c0d0 !important;
    border-color: #3d3d4d !important;
}

html.dark .quiz-btn-outline:hover {
    background: #333344 !important;
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

html.dark .review-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .review-card.correct {
    border-left-color: #10b981 !important;
}

html.dark .review-card.incorrect {
    border-left-color: #ef4444 !important;
}

html.dark .review-question {
    color: #e0e0e0 !important;
}

html.dark .q-num {
    color: #60a5fa !important;
}

html.dark .answer-row .label {
    color: #9ca3af !important;
}

html.dark .answer-row .value {
    color: #c0c0d0 !important;
}

html.dark .answer-row .value.text-success {
    color: #4ade80 !important;
}

html.dark .answer-row .value.text-error {
    color: #f87171 !important;
}

html.dark .answer-row .value.text-muted {
    color: #6b7280 !important;
}

html.dark .badge-success {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #4ade80 !important;
}

html.dark .badge-error {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
}

html.dark .explanation-box {
    background: #252535 !important;
    border-color: #2d2d3d !important;
}

html.dark .exp-title {
    color: #c0c0d0 !important;
}

html.dark .exp-content {
    color: #b0b0c0 !important;
}

html.dark .result-details-section .section-title {
    color: #e0e0e0 !important;
}

html.dark .problem-image-result img {
    border-color: #3d3d4d !important;
}

/* ================================================================
   TEST RESULT PAGE DARK MODE
   ================================================================ */

html.dark .card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
}

html.dark .card-body {
    background: #1e1e2e !important;
}

html.dark .bg-light {
    background: #252535 !important;
}

html.dark .card .rounded-circle.bg-light {
    background: #252535 !important;
}

html.dark h2.fw-bold.text-primary {
    color: #60a5fa !important;
}

html.dark h3.fw-bold {
    color: #e0e0e0 !important;
}

html.dark .btn-outline-secondary {
    background: #252535 !important;
    color: #c0c0d0 !important;
    border-color: #3d3d4d !important;
}

html.dark .btn-outline-secondary:hover {
    background: #333344 !important;
    color: #60a5fa !important;
    border-color: #60a5fa !important;
}

html.dark .btn-light {
    background: #252535 !important;
    color: #c0c0d0 !important;
    border-color: #3d3d4d !important;
}

html.dark .btn-light:hover {
    background: #333344 !important;
}

html.dark .border-top {
    border-top-color: #2d2d3d !important;
}

/* ================================================================
   PROBLEM FORM PAGE DARK MODE (추가/수정 페이지)
   ================================================================ */

html.dark .form-container {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}

html.dark .form-title {
    color: #e0e0e0 !important;
}

html.dark .form-subtitle {
    color: #9ca3af !important;
}

html.dark .form-label {
    color: #c0c0d0 !important;
}

html.dark .text-help {
    color: #7a7a8a !important;
}

/* Image Upload Zone */
html.dark #imageUploadZone {
    background: #252535 !important;
    border-color: #3d3d4d !important;
}

html.dark #imageUploadZone:hover {
    background: #2a2a3a !important;
    border-color: #60a5fa !important;
}

html.dark .upload-icon-circle {
    background: #2a2a3a !important;
}

html.dark .delete-icon-circle {
    background: rgba(239, 68, 68, 0.12) !important;
}

html.dark #noImageGroup div {
    color: #c0c0d0 !important;
}

html.dark .btn-danger-soft {
    background: #252535 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
    color: #f87171 !important;
}

html.dark .btn-danger-soft:hover {
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.5) !important;
}

html.dark .btn-primary-soft {
    background: #252535 !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
    color: #60a5fa !important;
}

html.dark .btn-primary-soft:hover {
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.5) !important;
}

html.dark .btn-undo-soft {
    background: #252535 !important;
    border-color: #3d3d4d !important;
    color: #c0c0d0 !important;
}

html.dark .btn-undo-soft:hover {
    background: #333344 !important;
    border-color: #4d4d5d !important;
    color: #e0e0e0 !important;
}

html.dark .btn-text-cancel {
    color: #9ca3af !important;
}

html.dark .btn-text-cancel:hover {
    color: #e0e0e0 !important;
}

/* Warning message (save reminder) */
html.dark #saveWarningMsg {
    background-color: rgba(251, 191, 36, 0.1) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

/* Button overrides for form */
html.dark .btn-custom.secondary {
    background: #3d3d5c !important;
    color: #c0c0d0 !important;
}

html.dark .btn-custom.secondary:hover {
    background: #4d4d6d !important;
    color: #e0e0e0 !important;
}

html.dark .btn-custom.primary {
    background: #3b82f6 !important;
    color: white !important;
}

/* Option row inputs */
html.dark .obj-input {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

html.dark .obj-input::placeholder {
    color: #6b7280 !important;
}

/* Existing image preview border */
html.dark #currentImagePreview {
    border-color: #3d3d4d !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* ================================================================
   BULK PROBLEM ADD PAGE DARK MODE (workbook_add_bulk.html)
   ================================================================ */

html.dark .bulk-manage-container .page-title {
    color: #e0e0e0 !important;
}

html.dark .bulk-manage-container .page-subtitle {
    color: #9ca3af !important;
}

/* Cards */
html.dark .manage-card {
    background: #1e1e2e !important;
    border-color: #2d2d3d !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3) !important;
}

html.dark .card-header-row {
    background: #252535 !important;
}

html.dark .card-header-row:hover {
    background: #2a2a3a !important;
}

html.dark .header-left h3 {
    color: #e0e0e0 !important;
}

html.dark .toggle-icon {
    color: #9ca3af !important;
}

/* Import content section */
html.dark .import-content {
    background: #1e1e2e !important;
    border-top-color: #2d2d3d !important;
}

html.dark .import-description {
    color: #c0c0d0 !important;
}

html.dark .tip-box {
    background: #252535 !important;
    color: #9ca3af !important;
}

html.dark .tip-box .code {
    background: #3d3d4d !important;
    color: #e0e0e0 !important;
}

/* Textareas */
html.dark .modern-textarea {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

html.dark .modern-textarea:focus {
    background: #333344 !important;
    border-color: #60a5fa !important;
}

html.dark .modern-textarea::placeholder {
    color: #6b7280 !important;
}

/* Select */
html.dark .modern-select {
    background-color: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

html.dark .option-group label {
    color: #c0c0d0 !important;
}

/* Modern input fields */
html.dark .modern-input {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

html.dark .modern-input:focus {
    background: #333344 !important;
    border-color: #60a5fa !important;
}

html.dark .modern-input::placeholder {
    color: #6b7280 !important;
}

html.dark .modern-input-sm {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
    color: #e0e0e0 !important;
}

/* List Card */
html.dark .list-header {
    border-bottom-color: #2d2d3d !important;
}

html.dark .list-header h3 {
    color: #e0e0e0 !important;
}

html.dark .list-header-row {
    background: #252535 !important;
    border-bottom-color: #2d2d3d !important;
    color: #9ca3af !important;
}

html.dark .btn-secondary-sm {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #60a5fa !important;
}

html.dark .btn-secondary-sm:hover {
    background: rgba(96, 165, 250, 0.2) !important;
}

html.dark .btn-secondary-xs {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #60a5fa !important;
}

/* Bulk rows */
html.dark .bulk-row {
    background: #1e1e2e !important;
    border-bottom-color: #2d2d3d !important;
}

html.dark .mcq-row {
    background: #1e1e2e !important;
}

/* MCQ Badge */
html.dark .badge-mcq {
    background: rgba(96, 165, 250, 0.12) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
}

html.dark .mcq-term-text {
    color: #e0e0e0 !important;
}

html.dark .mcq-def-text {
    color: #c0c0d0 !important;
}

html.dark .mcq-exp-text {
    color: #9ca3af !important;
}

/* Action buttons */
html.dark .btn-icon-action {
    background: #252535 !important;
    color: #9ca3af !important;
    border-color: #3d3d4d !important;
}

html.dark .btn-icon-action:hover {
    background: #333344 !important;
    color: #e0e0e0 !important;
}

html.dark .btn-delete-icon:hover {
    color: #f87171 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

html.dark .btn-edit-icon:hover {
    color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.12) !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

/* Upload button in row */
html.dark .btn-upload-img {
    background: #252535 !important;
    border-color: #3d3d4d !important;
}

html.dark .btn-upload-img:hover {
    background: #2a2a3a !important;
    border-color: #60a5fa !important;
}

html.dark .btn-upload-img.active {
    background: rgba(16, 185, 129, 0.12) !important;
    color: #4ade80 !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
}

/* MCQ Drop Zone */
html.dark .mcq-drop-zone {
    background: #252535 !important;
    border-color: #3d3d4d !important;
}

html.dark .mcq-drop-zone:hover {
    background: #2a2a3a !important;
    border-color: #60a5fa !important;
}

html.dark .mcq-drop-zone span {
    color: #c0c0d0 !important;
}

/* MCQ Image Preview */
html.dark #mcqImgPreview {
    background: #252535 !important;
    border-color: #2d2d3d !important;
}

/* Dashed add row button */
html.dark .btn-dashed {
    background: #1e1e2e !important;
    border-color: #3d3d4d !important;
    color: #9ca3af !important;
}

html.dark .btn-dashed:hover {
    background: #2a2a3a !important;
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}

/* Add option button */
html.dark .btn-add-option {
    background: #1e1e2e !important;
    border-color: #3d3d4d !important;
    color: #9ca3af !important;
}

html.dark .btn-add-option:hover {
    background: #2a2a3a !important;
    border-color: #60a5fa !important;
    color: #60a5fa !important;
}

/* Footer action area */
html.dark .list-footer-action {
    background: #1a1a28 !important;
}

/* Cancel button */
html.dark .btn-cancel {
    color: #9ca3af !important;
}

html.dark .btn-cancel:hover {
    color: #e0e0e0 !important;
}

/* Checkbox indicator */
html.dark .check-indicator {
    background: #2a2a3a !important;
    border-color: #3d3d4d !important;
}

html.dark .mcq-check-wrapper:hover .check-indicator {
    border-color: #60a5fa !important;
    background: rgba(96, 165, 250, 0.1) !important;
    color: rgba(96, 165, 250, 0.3) !important;
}

/* Form check switch label */
html.dark .form-check-label {
    color: #c0c0d0 !important;
}

/* Drag highlight */
html.dark .col-action.highlight {
    background-color: rgba(74, 222, 128, 0.08) !important;
    border-color: #4ade80 !important;
}

/* Conflict message */
html.dark .conflict-msg {
    color: #fbbf24 !important;
}