:root {
    --primary: #0284c7; --primary-dark: #0369a1; --success: #10b981; --danger: #ef4444; 
    --bg-color: #f8fafc; --card-bg: #ffffff; --text-dark: #0f172a; --text-muted: #64748b; 
    --border-color: #e2e8f0; --switch-bg: #e2e8f0; --streak-bg: #ffedd5; --streak-text: #ea580c;
}

body.dark-mode {
    --primary: #38bdf8; --primary-dark: #7dd3fc; --success: #34d399; --danger: #f87171;
    --bg-color: #0f172a; --card-bg: #1e293b; --text-dark: #f1f5f9; --text-muted: #94a3b8; 
    --border-color: #334155; --switch-bg: #334155; --streak-bg: #431407; --streak-text: #fdba74;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-color); color: var(--text-dark); display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 20px; transition: 0.3s; }

header { width: 100%; max-width: 400px; margin-bottom: 20px; display: flex; flex-direction: column; align-items: center; }
.header-top { display: flex; justify-content: space-between; align-items: center; width: 100%; }
header h1 { color: var(--primary); font-size: 1.8rem; }
header p { color: var(--text-muted); font-size: 0.9rem; }

.theme-btn { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 50%; width: 40px; height: 40px; font-size: 1.2rem; cursor: pointer; display: flex; justify-content: center; align-items: center; }

.search-container { width: 100%; margin-top: 10px; }
#searchInput { width: 100%; padding: 12px; border-radius: 50px; border: 2px solid var(--border-color); background: var(--card-bg); color: var(--text-dark); outline: none; transition: 0.3s; }
#searchInput:focus { border-color: var(--primary); }

.mode-switch { display: flex; background: var(--switch-bg); border-radius: 12px; padding: 5px; width: 100%; max-width: 400px; margin-bottom: 20px; }
.mode-btn { flex: 1; padding: 10px; border: none; background: transparent; font-weight: 600; color: var(--text-muted); border-radius: 8px; cursor: pointer; transition: 0.3s; font-size: 0.9rem;}
.mode-btn.active { background: var(--card-bg); color: var(--primary); box-shadow: 0 2px 4px rgba(0,0,0,0.1); }

.dashboard { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 400px; background: var(--card-bg); padding: 15px; border-radius: 12px; margin-bottom: 20px; }
select { padding: 8px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-dark); font-weight: 600; }

.stats-container { display: flex; gap: 10px; align-items: center; }
.streak { color: var(--streak-text); background: var(--streak-bg); padding: 5px 10px; border-radius: 20px; font-weight: 700; font-size: 0.9rem; }
.progress { color: var(--success); font-weight: 700; font-size: 0.85rem; }

#flashcardSection, #quizSection { width: 100%; max-width: 400px; display: flex; flex-direction: column; align-items: center; }
#quizSection { display: none; }

.flashcard-container { width: 100%; height: 220px; perspective: 1000px; cursor: pointer; margin-bottom: 20px; }
.flashcard { width: 100%; height: 100%; position: relative; transition: transform 0.6s; transform-style: preserve-3d; }
.flashcard.is-flipped { transform: rotateY(180deg); }
.card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 20px; padding: 20px; text-align: center; border: 2px solid var(--border-color); background: var(--card-bg); }
.card-back { background-color: var(--primary); color: white; transform: rotateY(180deg); border-color: var(--primary); }

.word-german { font-size: 2rem; font-weight: 700; margin-bottom: 5px; }
.card-back .word-turkish { font-size: 1.8rem; font-weight: 700; color: white; margin-bottom: 10px; }
.card-back .example-sentence { font-size: 0.95rem; font-style: italic; opacity: 0.9; color: white; }
.word-type { font-size: 0.8rem; color: var(--text-muted); text-transform: uppercase; }

.learned-badge { position: absolute; top: 10px; right: 10px; color: var(--success); font-size: 1.2rem; display: none; }
#backBadge { color: white; }

.btn-speak { background: var(--switch-bg); border: none; border-radius: 50%; width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer; margin-bottom: 10px; color: var(--text-dark); }

.controls { display: flex; gap: 10px; width: 100%; justify-content: space-between; }
button.action-btn { flex: 1; padding: 12px; font-size: 0.9rem; font-weight: 600; border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); color: var(--primary); cursor: pointer; transition: 0.2s; }
.btn-learn { border: 2px solid var(--success); color: var(--success); }
.btn-learn.active { background: var(--success); color: white; }

.quiz-card { background: var(--card-bg); width: 100%; padding: 20px; border-radius: 20px; border: 1px solid var(--border-color); text-align: center; }
.quiz-question { font-size: 1.6rem; font-weight: 700; color: var(--primary); margin-bottom: 20px; }
.quiz-options { display: flex; flex-direction: column; gap: 10px; }
.quiz-option { padding: 15px; background: var(--switch-bg); border: 2px solid var(--border-color); border-radius: 12px; font-weight: 600; cursor: pointer; color: var(--text-dark); transition: 0.2s; text-align: left;}
.quiz-option.correct { background: var(--success); color: white; border-color: var(--success); }
.quiz-option.wrong { background: var(--danger); color: white; border-color: var(--danger); }
.quiz-feedback { margin-top: 15px; font-weight: 700; height: 20px; }
.btn-next-quiz { background: var(--primary); color: white; display: none; margin-top: 15px; border: none; padding: 12px; border-radius: 12px; width: 100%; font-weight: bold; cursor: pointer; }