/* Soft Brutalist Theme Override for Exam Tool */
/* Design system: SmarterGerman staging (sg-head.php) */

/* ===================== VARIABLES ===================== */
:root {
    --orange: #F04E23;
    --dark-green: #0F2F21;
    --paper-white: #F9F7F2;
    --pencil: #333333;
    --highlighter: #FFD54F;
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --font-hand: 'Caveat', cursive;
    --border-thick: 2px solid var(--pencil);
    --shadow-hard: 6px 6px 0px var(--pencil);
    --shadow-hover: 10px 10px 0px var(--pencil);
    --cyan-old: #00BCD4;
    --success: #4CAF50;
    --danger: #E91E63;
}

/* ===================== FONTS ===================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Caveat:wght@400;700&display=swap');

/* ===================== BASE ===================== */
body {
    font-family: var(--font-main);
    background-color: var(--paper-white);
    background-image: url("/images/natural-paper.webp");
    padding: 24px;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1300px;
    background: white;
    border: var(--border-thick);
    box-shadow: var(--shadow-hard);
    border-radius: 0;
    transition: all 0.2s ease;
}

.container.test-mode {
    box-shadow: 6px 6px 0px var(--danger);
    border-color: var(--danger);
}

/* ===================== HEADER ===================== */
.header-top {
    background: var(--pencil);
    padding: 16px 24px;
    border-radius: 0;
    border-bottom: var(--border-thick);
}

.exam-dropdown {
    background: var(--paper-white);
    color: var(--pencil);
    border: var(--border-thick);
    border-radius: 0;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: var(--font-main);
    font-size: 0.85rem;
    padding: 10px 16px;
    box-shadow: 3px 3px 0px rgba(255,255,255,0.3);
}

.exam-dropdown:after {
    content: '\25BC';
    font-size: 9px;
}

.exam-menu-inner {
    background: var(--paper-white);
    backdrop-filter: none;
    border-radius: 0;
    box-shadow: var(--shadow-hard);
    border: var(--border-thick);
    padding: 12px;
}

.exam-menu-item {
    background: white;
    color: var(--pencil);
    border: var(--border-thick);
    border-radius: 0;
    font-weight: 800;
    font-family: var(--font-main);
    transition: all 0.15s ease;
}

.exam-menu-item.active {
    background: var(--orange);
    color: white;
    border-color: var(--pencil);
    box-shadow: 3px 3px 0 var(--pencil);
}

.exam-menu-item:hover:not(.active):not(.unavailable) {
    background: var(--highlighter);
    transform: translate(-2px, -2px);
    box-shadow: 3px 3px 0 var(--pencil);
}

.exam-menu-item.unavailable {
    opacity: 0.35;
    border-color: #aaa;
    color: #999;
}

/* Exam type toggle */
.exam-type-toggle {
    background: rgba(255,255,255,0.15);
    border-radius: 0;
    padding: 3px;
    border: 1px solid rgba(255,255,255,0.2);
}

.exam-type-btn {
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    letter-spacing: 1px;
}

.exam-type-btn.active {
    background: var(--orange);
    color: white;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

/* Level selector */
.level-selector {
    border-radius: 0;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.2);
}

.level-btn {
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
}

.level-btn.active {
    background: var(--highlighter);
    color: var(--pencil);
}

/* Nav tabs */
.nav-tab {
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 0;
    font-size: 0.85rem;
}

.nav-tab.active {
    background: var(--orange);
}

.nav-tab:hover {
    background: rgba(255,255,255,0.2);
}

.mega-menu-inner {
    background: var(--pencil);
    backdrop-filter: none;
    border-radius: 0;
    box-shadow: var(--shadow-hard);
    border: var(--border-thick);
    padding: 10px;
}

.mega-menu-item {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
}

.mega-menu-item.active {
    border-color: var(--orange);
    background: rgba(240, 78, 35, 0.2);
}

.mega-menu-item:hover:not(.active) {
    border-color: var(--highlighter);
    transform: translateX(4px);
}

/* Progress inside mega menu items */
.mega-menu-item.has-progress .progress-fill-bg {
    background: var(--orange);
}

.mega-menu-item.completed .progress-fill-bg {
    background: var(--success);
}

/* Header right buttons */
.icon-mode-btn {
    border-radius: 0;
    border: var(--border-thick);
    font-family: var(--font-main);
    font-weight: 800;
    box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}

.icon-mode-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
}

#modeBtn.testen {
    background: var(--danger);
    border-color: var(--pencil);
}

.icon-mode-btn.eval-btn {
    background: var(--success);
    border-color: var(--pencil);
}

.reset-btn {
    background: var(--highlighter);
    border-radius: 0;
    border: var(--border-thick);
    font-family: var(--font-main);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}

.reset-btn:hover {
    background: #E0B000;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
}

.eval-header-btn {
    border-radius: 0;
    border: var(--border-thick);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.2);
}

.eval-header-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(0,0,0,0.2);
}

/* Floating timer */
.floating-timer {
    background: var(--pencil);
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: var(--shadow-hard);
    font-family: var(--font-main);
    font-weight: 800;
    letter-spacing: 2px;
}

/* Floating mode button */
.floating-mode-btn {
    border-radius: 0;
    border: var(--border-thick);
    box-shadow: var(--shadow-hard);
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.floating-mode-btn.ueben {
    background: var(--highlighter);
    color: var(--pencil);
}

.floating-mode-btn.testen {
    background: var(--danger);
}

.floating-mode-btn:hover {
    transform: translate(-3px, -3px);
    box-shadow: 10px 10px 0 var(--pencil);
}

/* Progress bar */
.progress-bar-container {
    height: 4px;
    background: rgba(0,0,0,0.15);
}

.progress-bar-fill {
    background: var(--orange);
}

.progress-bar-fill.complete {
    background: var(--success);
}

/* ===================== CURRENT PART HEADER ===================== */
.current-part {
    background: var(--paper-white);
    padding: 20px 30px;
    border-bottom: var(--border-thick);
}

.badge {
    background: var(--pencil);
    color: white;
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 900;
    border: var(--border-thick);
}

.part-title {
    font-family: var(--font-main);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    color: var(--pencil);
}

.part-subtitle {
    font-family: var(--font-main);
    color: var(--pencil);
    opacity: 0.6;
}

.score {
    color: var(--orange);
    font-family: var(--font-main);
    font-weight: 900;
}

.progress-bar {
    background: #e0e0e0;
    border-radius: 0;
    height: 6px;
}

.progress-fill {
    background: var(--orange);
    border-radius: 0;
}

/* ===================== MAIN CONTENT ===================== */
.main-content {
    padding: 30px;
}

/* ===================== LEFT PANEL ===================== */
.left-panel {
    background: var(--paper-white);
    border-radius: 0;
    border: var(--border-thick);
    padding: 24px;
}

/* Audio pill */
.audio-pill {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--pencil);
    padding: 14px 16px;
}

.play-btn {
    background: var(--orange);
    border-radius: 0;
    border: var(--border-thick);
    box-shadow: 3px 3px 0 var(--pencil);
    width: 48px;
    height: 48px;
}

.play-btn:hover {
    background: #d4421c;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.speed-btn-cycle {
    border-radius: 0;
    border: var(--border-thick);
    box-shadow: 3px 3px 0 var(--pencil);
    font-family: var(--font-main);
    font-weight: 800;
}

.speed-btn-cycle:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.speed-btn-cycle.speed-slow { background: var(--highlighter); color: var(--pencil); }
.speed-btn-cycle.speed-normal { background: var(--success); }
.speed-btn-cycle.speed-fast { background: var(--danger); }

.rewind-btn {
    border-radius: 0;
    background: var(--pencil);
    border: var(--border-thick);
    box-shadow: 3px 3px 0 rgba(0,0,0,0.3);
}

.rewind-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(0,0,0,0.3);
}

/* Tabs */
.tabs {
    gap: 6px;
}

.tab {
    background: var(--paper-white);
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.8rem;
    color: var(--pencil);
    transition: all 0.15s ease;
}

.tab:hover {
    background: var(--highlighter);
}

.tab.active {
    background: var(--pencil);
    color: white;
    box-shadow: 3px 3px 0 var(--pencil);
}

.tab-content {
    border: var(--border-thick);
    border-radius: 0;
    background: white;
}

/* Instructions */
.instructions {
    background: var(--highlighter);
    border: var(--border-thick);
    box-shadow: var(--shadow-hard);
    border-radius: 0;
    transform: none;
    padding: 18px;
    padding-top: 40px;
    position: relative;
}

.instructions::before {
    content: "ANLEITUNG";
    background: var(--pencil);
    color: white;
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    letter-spacing: 1px;
    padding: 6px 14px;
}

.instructions p {
    font-family: var(--font-main);
    color: var(--pencil);
}

.instructions li::before {
    color: var(--pencil);
}

/* Transcript */
.transcript {
    font-family: var(--font-main);
}

.transcript-item {
    background: white;
    border-radius: 0;
    border: var(--border-thick);
    box-shadow: 4px 4px 0 var(--pencil);
    margin-bottom: 16px;
}

.speaker {
    color: var(--orange);
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Text content */
.text-content {
    font-family: var(--font-main);
    color: var(--pencil);
}

/* ===================== RIGHT PANEL - QUESTIONS ===================== */
.question-column {
    padding: 24px;
}

.question-box {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--pencil);
    padding: 16px;
    transition: all 0.15s ease;
}

.question-box:hover {
    transform: translate(-2px, -2px);
    box-shadow: 8px 8px 0 var(--pencil);
}

.question-box.beispiel {
    background: var(--highlighter);
    border: var(--border-thick);
    box-shadow: var(--shadow-hard);
    transform: none;
    padding-top: 36px;
}

.question-box.beispiel::before {
    content: "BEISPIEL";
    background: var(--pencil);
    color: white;
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    letter-spacing: 1px;
}

.question-box.correct {
    border-color: var(--success);
    background: #F1F8F4;
}

.question-box.incorrect {
    border-color: var(--danger);
    background: #FCE4EC;
}

.question-label {
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--pencil);
    opacity: 0.5;
    font-size: 0.7rem;
}

.question-text {
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--pencil);
}

/* Evidence */
.evidence {
    background: var(--highlighter);
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
}

.evidence strong {
    color: var(--pencil);
}

/* Answer buttons */
.answer-btn {
    border: var(--border-thick);
    background: white;
    color: var(--pencil);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.15s ease;
    box-shadow: 3px 3px 0 var(--pencil);
}

.answer-btn:hover {
    background: var(--paper-white);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.answer-btn.selected {
    background: var(--pencil);
    color: white;
    border-color: var(--pencil);
    box-shadow: 3px 3px 0 var(--pencil);
}

.answer-btn.correct-answer {
    background: var(--success);
    color: white;
    border-color: var(--pencil);
    box-shadow: 3px 3px 0 var(--pencil);
}

.answer-btn.incorrect-answer {
    background: var(--danger);
    color: white;
    border-color: var(--pencil);
    box-shadow: 3px 3px 0 var(--pencil);
}

/* Choice buttons */
.choice-btn {
    border: var(--border-thick);
    background: white;
    color: var(--pencil);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 600;
    transition: all 0.15s ease;
    box-shadow: 3px 3px 0 var(--pencil);
}

.choice-btn:hover {
    background: var(--paper-white);
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.choice-btn.selected {
    background: var(--pencil);
    color: white;
    border-color: var(--pencil);
}

.choice-btn.correct-answer {
    background: var(--success);
    color: white;
    border-color: var(--pencil);
}

.choice-btn.incorrect-answer {
    background: var(--danger);
    color: white;
    border-color: var(--pencil);
}

/* Nav buttons */
.nav-buttons {
    background: var(--paper-white);
    border-radius: 0;
    border: var(--border-thick);
    border-top: none;
}

.nav-btn {
    background: var(--orange);
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 3px 3px 0 var(--pencil);
    transition: all 0.15s ease;
}

.nav-btn:hover {
    background: #d4421c;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.nav-btn:disabled {
    background: #ccc;
    box-shadow: none;
    opacity: 0.4;
    border-color: #aaa;
}

.nav-btn.next-section-btn {
    background: var(--success);
    box-shadow: 3px 3px 0 var(--pencil);
}

.nav-btn.next-section-btn:hover {
    background: #43A047;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

/* ===================== CONTEXT MENU ===================== */
.context-menu {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: var(--shadow-hard);
    padding: 6px 0;
}

.context-menu-item {
    font-family: var(--font-main);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--pencil);
}

.context-menu-item:hover {
    background: var(--highlighter);
}

/* ===================== COMPLETION OVERLAY ===================== */
.completion-screen {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: var(--shadow-hard);
    padding: 50px 40px;
}

.completion-title {
    font-family: var(--font-main);
    font-weight: 900;
    color: var(--pencil);
    text-transform: uppercase;
    letter-spacing: -1px;
    font-size: 28px;
}

.completion-stats {
    background: var(--paper-white);
    border: var(--border-thick);
    border-radius: 0;
    padding: 24px;
}

.stat-row {
    font-family: var(--font-main);
    border-bottom: 1px solid rgba(51,51,51,0.1);
}

.stat-label {
    color: var(--pencil);
    opacity: 0.6;
    font-weight: 600;
}

.stat-value {
    font-weight: 800;
    color: var(--orange);
}

.completion-btn {
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 3px 3px 0 var(--pencil);
    transition: all 0.15s ease;
}

.completion-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.btn-cyan {
    background: var(--orange);
    color: white;
}

.btn-yellow {
    background: var(--highlighter);
    color: var(--pencil);
}

/* ===================== PROMPT OVERLAY ===================== */
.prompt-box {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: var(--shadow-hard);
}

.prompt-box h2 {
    color: var(--pencil);
    font-family: var(--font-main);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.prompt-box p {
    font-family: var(--font-main);
}

.prompt-content {
    background: var(--paper-white);
    border: var(--border-thick);
    border-radius: 0;
    font-family: 'Courier New', monospace;
}

.copy-btn {
    background: var(--success);
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 3px 3px 0 var(--pencil);
}

.copy-btn:hover {
    background: #43A047;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.copy-btn.copied {
    background: var(--pencil);
}

/* ===================== EVALUATION MODAL ===================== */
.eval-modal {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: var(--shadow-hard);
}

.eval-header {
    background: var(--pencil);
    border-bottom: var(--border-thick);
}

.eval-title-group h2 {
    font-family: var(--font-main);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.eval-title-group p {
    font-family: var(--font-main);
}

.eval-total-badge {
    background: var(--orange);
    color: white;
    border-radius: 0;
    border: 2px solid rgba(255,255,255,0.3);
    font-family: var(--font-main);
    font-weight: 800;
}

.eval-body {
    font-family: var(--font-main);
}

.eval-section-title {
    color: var(--pencil);
    font-family: var(--font-main);
    font-weight: 800;
    letter-spacing: 1px;
}

.eval-progress-bar {
    border-radius: 0;
    border: 1px solid rgba(51,51,51,0.1);
    box-shadow: none;
}

.eval-progress-fill {
    background: var(--orange);
    box-shadow: none;
}

.eval-result-badge {
    border-radius: 0;
    border: var(--border-thick);
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 4px 4px 0 var(--pencil);
}

.eval-result-badge.passed {
    background: var(--success);
}

.eval-result-badge.failed {
    background: var(--danger);
}

.eval-chatgpt-btn {
    background: var(--success);
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 3px 3px 0 var(--pencil);
}

.eval-chatgpt-btn:hover {
    background: #43A047;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.eval-back-btn {
    background: var(--orange);
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 3px 3px 0 var(--pencil);
}

.eval-back-btn:hover {
    background: #d4421c;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.eval-close-btn {
    border-radius: 0;
}

.eval-points-badge {
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    box-shadow: 3px 3px 0 var(--pencil);
}

.eval-points-badge:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 var(--pencil);
}

.eval-show-btn {
    background: var(--highlighter);
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    box-shadow: 3px 3px 0 var(--pencil);
}

.eval-show-btn:hover {
    background: #E0B000;
    transform: translate(-2px, -2px);
}

.eval-input-section {
    border: var(--border-thick);
    border-radius: 0;
}

.eval-input-header {
    background: var(--paper-white);
    font-family: var(--font-main);
}

.eval-input-title {
    font-family: var(--font-main);
    font-weight: 800;
}

.eval-input-badge {
    background: var(--pencil);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
}

.eval-input-toggle {
    color: var(--pencil);
}

.eval-textarea {
    border: var(--border-thick);
    border-radius: 0;
    font-family: 'Courier New', monospace;
    background: white;
}

.eval-textarea:focus {
    border-color: var(--orange);
}

.eval-parse-result {
    border-radius: 0;
    border: 2px solid var(--success);
    font-family: var(--font-main);
}

.eval-parse-error {
    border-radius: 0;
    border: 2px solid var(--danger);
    font-family: var(--font-main);
}

/* ===================== HIGHLIGHTS ===================== */
.highlight-correct {
    background: var(--highlighter);
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.highlight-wrong {
    background: #FFEBEE;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.beispiel-highlight {
    background: var(--highlighter);
    border-radius: 0;
    box-shadow: none;
    border: none;
}

/* Remove left borders on inline highlights within text */
.transcript .highlight-correct,
.transcript .highlight-wrong,
.transcript .beispiel-highlight,
.text-content .highlight-correct,
.text-content .highlight-wrong,
.text-content .beispiel-highlight {
    border-left: none;
}

/* ===================== DROPDOWNS ===================== */
.dropdown-select {
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 600;
}

.dropdown-select:hover {
    border-color: var(--orange);
}

.dropdown-select:focus {
    border-color: var(--orange);
    box-shadow: 3px 3px 0 var(--pencil);
}

.dropdown-select.correct {
    border-color: var(--success);
}

.dropdown-select.incorrect {
    border-color: var(--danger);
}

.dropdown-feedback.correct {
    color: var(--success);
    font-family: var(--font-main);
    font-weight: 800;
}

.dropdown-feedback.incorrect {
    color: var(--danger);
    font-family: var(--font-main);
    font-weight: 800;
}

/* ===================== SCHREIBEN ===================== */
.writing-textarea {
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    box-shadow: inset 3px 3px 0 rgba(51,51,51,0.05);
}

.writing-textarea:focus {
    border-color: var(--orange);
    box-shadow: inset 3px 3px 0 rgba(51,51,51,0.05);
}

.word-count {
    font-family: var(--font-main);
    font-weight: 700;
}

.word-count.warning {
    color: var(--danger);
}

.word-count.good {
    color: var(--success);
}

.deepl-btn {
    background: var(--pencil);
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 3px 3px 0 rgba(51,51,51,0.3);
}

.deepl-btn:hover {
    background: #444;
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0 rgba(51,51,51,0.3);
}

.redemittel-panel {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--pencil);
}

.redemittel-panel h3 {
    color: var(--pencil);
    font-family: var(--font-main);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.5px;
}

.redemittel-section strong {
    color: var(--orange);
    font-family: var(--font-main);
    font-weight: 800;
}

.redemittel-section li::before {
    color: var(--orange);
}

.redemittel-section li {
    font-family: var(--font-main);
}

/* ===================== SPRACHBAUSTEINE ===================== */
.sb-instructions {
    background: var(--paper-white);
    border: var(--border-thick);
    border-radius: 0;
    color: var(--pencil);
    font-family: var(--font-main);
}

.sb-advertisement {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: 4px 4px 0 var(--pencil);
}

.sb-ad-title {
    color: var(--pencil);
    font-family: var(--font-main);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sb-text-content {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: var(--shadow-hard);
    font-family: var(--font-main);
}

.sb-dropdown {
    border: var(--border-thick);
    border-radius: 0;
    font-family: var(--font-main);
    font-weight: 600;
}

.sb-dropdown.correct {
    border-color: var(--success);
    background: #F1F8F4;
}

.sb-dropdown.incorrect {
    border-color: var(--danger);
    background: #FFEBEE;
}

.sb-info-btn.correct {
    color: var(--success);
}

.sb-info-btn.incorrect {
    color: var(--danger);
}

.sb-feedback-card {
    background: white;
    border: var(--border-thick);
    border-radius: 0;
    box-shadow: var(--shadow-hard);
    font-family: var(--font-main);
}

.sb-feedback-card.correct {
    border-color: var(--success);
}

.sb-feedback-card.incorrect {
    border-color: var(--danger);
}

.sb-feedback-card::before {
    border-bottom-color: var(--pencil);
}

.sb-feedback-card.correct::before {
    border-bottom-color: var(--success);
}

.sb-feedback-card.incorrect::before {
    border-bottom-color: var(--danger);
}

.sb-status.correct {
    color: var(--success);
}

.sb-status.incorrect {
    color: var(--danger);
}

/* ===================== ANIMATIONS ===================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { transform: translateY(16px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
    body {
        padding: 12px;
    }

    .header-top {
        padding: 12px 16px;
    }

    .main-content {
        padding: 16px;
        gap: 20px;
    }

    .left-panel {
        padding: 16px;
    }

    .question-column {
        padding: 16px;
    }

    .completion-screen {
        padding: 30px 20px;
    }

    .redemittel-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================== SCROLLBAR ===================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--paper-white);
}

::-webkit-scrollbar-thumb {
    background: var(--pencil);
    border: 1px solid var(--paper-white);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--orange);
}