/* glulando.de — Course Production Styles v1.1 — Light/Dark fix + Kontrast */

.cp-page { max-width: 800px; margin: 0 auto; padding: 16px; padding-bottom: 40px; }
.cp-header { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.cp-header h1 { font-size: 20px; margin: 0; color: var(--text-primary, #1e293b); }
.cp-back { background: none; border: none; font-size: 22px; cursor: pointer; padding: 4px 8px; color: var(--text-secondary, #64748b); }
.cp-back:hover { color: var(--text-primary, #1e293b); }
.cp-loading { display: flex; justify-content: center; padding: 60px; }

/* Status Card */
.cp-status-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.06); border: 1px solid #e2e8f0; margin-bottom: 16px; }
.cp-niche { font-size: 18px; font-weight: 700; margin-bottom: 14px; color: #1e293b; }
.cp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.cp-stat strong { display: block; font-size: 22px; color: #1e293b; }
.cp-stat span { font-size: 11px; color: #64748b; display: block; margin-top: 2px; }

/* Progress Bar */
.cp-progress { margin-top: 16px; }
.cp-prog-bar { height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.cp-prog-fill { height: 100%; background: linear-gradient(90deg, #6366f1, #8b5cf6); border-radius: 4px; transition: width .5s ease; }
.cp-prog-label { font-size: 12px; color: #64748b; margin-top: 6px; text-align: center; }

/* Voice Card */
.cp-voice-card { background: #fff; border-radius: 14px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.06); border: 1px solid #e2e8f0; margin-bottom: 16px; }
.cp-voice-card h3 { font-size: 16px; margin: 0 0 12px; color: #1e293b; }
.cp-voice-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 16px; }
.cp-voice-btn { padding: 12px; border: 2px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; font-size: 14px; transition: all .2s; text-align: center; color: #334155; }
.cp-voice-btn:hover { border-color: #6366f1; background: #f8fafc; }
.cp-voice-active { border-color: #6366f1; background: rgba(99,102,241,.08); color: #4f46e5; }
.cp-voice-btn small { color: #94a3b8; font-size: 11px; }

/* Start Button */
.cp-start-btn { width: 100%; padding: 14px; border: none; border-radius: 12px; background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .15s, opacity .15s; }
.cp-start-btn:hover { opacity: .92; }
.cp-start-btn:active { transform: scale(.97); }
.cp-start-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Actions */
.cp-actions { display: flex; gap: 8px; margin-bottom: 16px; }
.cp-action-btn { flex: 1; padding: 10px; border: 2px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; font-size: 13px; color: #334155; }
.cp-btn-pause:hover { border-color: #f59e0b; background: #fffbeb; }
.cp-btn-retry:hover { border-color: #6366f1; background: rgba(99,102,241,.06); }

/* Course List */
.cp-section-title { font-size: 15px; font-weight: 600; margin: 20px 0 10px; color: #1e293b; }
.cp-course-list { display: flex; flex-direction: column; gap: 6px; }
.cp-course-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #fff; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,.05); border: 1px solid #e2e8f0; cursor: pointer; transition: border-color .15s; }
.cp-course-item:hover { border-color: #6366f1; }
.cp-course-icon { font-size: 16px; flex-shrink: 0; width: 28px; text-align: center; color: #6366f1; }
.cp-course-info { flex: 1; min-width: 0; }
.cp-course-title { font-size: 14px; font-weight: 500; color: #1e293b; }
.cp-course-meta { font-size: 11px; color: #94a3b8; }
.cp-course-status { font-size: 11px; color: #94a3b8; }

/* Done Banner */
.cp-done-banner { text-align: center; padding: 24px; background: linear-gradient(135deg, rgba(99,102,241,.08), rgba(139,92,246,.08)); border: 1px solid rgba(99,102,241,.2); border-radius: 14px; margin-top: 20px; font-size: 16px; color: #1e293b; }
.cp-btn-courses { display: inline-block; margin-top: 12px; padding: 10px 24px; border: none; border-radius: 10px; background: #6366f1; color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.cp-btn-courses:hover { background: #4f46e5; }

/* Dark Mode — nur per .dark Klasse, NICHT prefers-color-scheme */
.dark .cp-status-card,
.dark .cp-voice-card { background: #1e293b; border-color: #334155; }
.dark .cp-niche,
.dark .cp-stat strong,
.dark .cp-voice-card h3,
.dark .cp-section-title,
.dark .cp-course-title,
.dark .cp-header h1 { color: #f1f5f9; }
.dark .cp-stat span,
.dark .cp-prog-label,
.dark .cp-course-meta,
.dark .cp-course-status { color: #94a3b8; }
.dark .cp-voice-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .cp-voice-btn:hover { border-color: #6366f1; background: #263048; }
.dark .cp-voice-active { background: rgba(99,102,241,.15); }
.dark .cp-action-btn { background: #1e293b; border-color: #334155; color: #e2e8f0; }
.dark .cp-course-item { background: #1e293b; border-color: #334155; }
.dark .cp-prog-bar { background: #334155; }
.dark .cp-done-banner { color: #f1f5f9; }
.dark .cp-back { color: #94a3b8; }