@media (max-width: 640px) {
    .filter-controls-row {
        flex-wrap: wrap;
        gap: 8px;
    }
    #theme-toggle {
        top: 8px;
        left: 8px;
        width: 36px;
        height: 36px;
        padding: 6px;
    }
    #share-btn {
        top: 8px;
        right: 8px;
        width: 36px;
        height: 36px;
        padding: 6px;
    }
    #preview-title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #module-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 140px;
    }
    .hide-completed-text {
        display: none;
    }
    .list-box {
        max-height: 240px;
    }
    #next-btn-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 40;
        background: var(--card-bg);
        padding: 12px 16px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
        border-top: 1px solid rgba(148, 163, 184, 0.15);
        transform: translateY(100%);
        transition: transform 0.3s ease;
        margin: 0;
        justify-content: center;
    }
    #next-btn-wrapper.visible {
        transform: translateY(0);
    }
}

/* Force light-mode Tailwind colors when data-theme="light" even if system prefers dark */
@media (prefers-color-scheme: dark) {
  html[data-theme="light"] .dark\:text-slate-400 { color: #64748b }
  html[data-theme="light"] .dark\:text-slate-300 { color: #475569 }
  html[data-theme="light"] .dark\:text-orange-400 { color: #ea580c }
  html[data-theme="light"] .dark\:text-emerald-300 { color: #065f46 }
  html[data-theme="light"] .dark\:text-indigo-400 { color: #4f46e5 }
  html[data-theme="light"] .dark\:text-indigo-300 { color: #3730a3 }
  html[data-theme="light"] .dark\:text-slate-900 { color: #fff }

  html[data-theme="light"] .dark\:bg-blue-900\/20 { background-color: #eff6ff }
  html[data-theme="light"] .dark\:bg-orange-900\/20 { background-color: #fff7ed }
  html[data-theme="light"] .dark\:bg-slate-800\/50 { background-color: #f1f5f9 }
  html[data-theme="light"] .dark\:bg-slate-700 { background-color: #e2e8f0 }
  html[data-theme="light"] .dark\:bg-slate-800 { background-color: #fff }
  html[data-theme="light"] .dark\:bg-emerald-900\/20 { background-color: #ecfdf5 }
  html[data-theme="light"] .dark\:bg-indigo-900\/20 { background-color: #eef2ff }
  html[data-theme="light"] .dark\:bg-white { background-color: #0f172a }

  html[data-theme="light"] .dark\:border-orange-800 { border-color: #fed7aa }
  html[data-theme="light"] .dark\:border-slate-700 { border-color: #e2e8f0 }
  html[data-theme="light"] .dark\:border-slate-600 { border-color: #cbd5e1 }
  html[data-theme="light"] .dark\:border-emerald-800 { border-color: #d1fae5 }
  html[data-theme="light"] .dark\:border-indigo-800 { border-color: #c7d2fe }

  html[data-theme="light"] .dark\:hover\:bg-slate-600:hover { background-color: #cbd5e1 }
  html[data-theme="light"] .dark\:hover\:bg-slate-800:hover { background-color: #f8fafc }
}