/* ═══════════════════════════════════════════════════════════════════
       FLUNCY 2026 DESIGN SYSTEM - Light/Dark Mode
       Modern, Clean, Accessible
       Brand Colors aligned with Logo (v3.0)
    ═══════════════════════════════════════════════════════════════════ */
    
    :root {
      /* ─── Brand Colors (from Logo Gradient) ─── */
      --brand-coral: #FF7A59;
      --brand-coral-dark: #E8654A;
      --brand-coral-light: #FF9A7F;
      
      --brand-pink: #F48FB1;
      --brand-pink-dark: #EC407A;
      --brand-pink-light: #F8BBD9;
      
      --brand-mint: #80CBC4;
      --brand-mint-dark: #4DB6AC;
      --brand-mint-light: #B2DFDB;
      
      --brand-sky: #64B5F6;
      --brand-sky-dark: #42A5F5;
      --brand-sky-light: #90CAF9;
      
      /* ─── Primary = Coral (CTA, wichtige Aktionen) ─── */
      --brand-primary: #FF7A59;
      --brand-primary-dark: #E8654A;
      --brand-primary-light: #FF9A7F;
      
      /* ─── Secondary = Mint (Erfolg, positiv) ─── */
      --brand-secondary: #80CBC4;
      --brand-secondary-dark: #4DB6AC;
      
      /* ─── Accent = Sky (Info, Links) ─── */
      --brand-accent: #64B5F6;
      
      /* ─── Legacy mappings ─── */
      --primary: #FF7A59;
      --primary-dark: #E8654A;
      --primary-light: #FF9A7F;
      --secondary: #80CBC4;
      --secondary-dark: #4DB6AC;
      --accent: #64B5F6;
      --success: #4DB6AC;
      --warning: #F59E0B;
      --danger: #EF4444;
      --error: #EF4444;
      
      /* ─── Brand Gradients (matching Logo) ─── */
      --gradient-logo: linear-gradient(135deg, #FF7A59 0%, #F48FB1 35%, #80CBC4 65%, #64B5F6 100%);
      --gradient-brand: linear-gradient(135deg, #FF7A59 0%, #F48FB1 35%, #80CBC4 65%, #64B5F6 100%);
      --gradient-warm: linear-gradient(135deg, #FF7A59 0%, #F48FB1 100%);
      --gradient-cool: linear-gradient(135deg, #80CBC4 0%, #64B5F6 100%);
      --gradient-coral-sky: linear-gradient(135deg, #FF7A59 0%, #64B5F6 100%);
      --gradient-sky-mint: linear-gradient(135deg, #64B5F6 0%, #80CBC4 100%);
      
      /* ─── Spacing Scale ─── */
      --space-1: 4px;
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-7: 32px;
      --space-8: 40px;
      
      /* ─── Border Radius ─── */
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --radius-2xl: 24px;
      --radius-full: 9999px;
      
      /* ─── Transitions ─── */
      --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
      --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
      --duration-fast: 150ms;
      --duration-normal: 250ms;
      --duration-slow: 400ms;
    }
    
    /* ═══════════════════════════════════════════════════════════════════
       LIGHT THEME (Default)
    ═══════════════════════════════════════════════════════════════════ */
    [data-theme="light"] {
      --bg-app: #F8FAFC;
      --bg-primary: #FFFFFF;
      --bg-secondary: #F1F5F9;
      --bg-tertiary: #E2E8F0;
      --bg-elevated: #FFFFFF;
      --bg-card: #FFFFFF;
      --bg-input: #F8FAFC;
      --bg-input-hover: #FFFFFF;
      
      --text-primary: #0F172A;
      --text-secondary: #475569;
      --text-tertiary: #64748B;
      --text-muted: #94A3B8;
      --text-inverse: #FFFFFF;
      
      --border-light: #E2E8F0;
      --border-default: #CBD5E1;
      --border-strong: #94A3B8;
      
      /* Legacy gray mappings */
      --gray-50: #f8fafc;
      --gray-100: #f1f5f9;
      --gray-200: #e2e8f0;
      --gray-300: #cbd5e1;
      --gray-400: #94a3b8;
      --gray-500: #64748b;
      --gray-600: #475569;
      --gray-700: #334155;
      --gray-800: #1e293b;
      --gray-900: #0f172a;
      --dark: #0f172a;
      
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
      --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
      --shadow-glow: 0 0 20px rgba(255, 107, 53, 0.12);
      --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02);
      
      --header-bg: linear-gradient(135deg, #1F2937 0%, #374151 100%);
      --gradient-hero: linear-gradient(135deg, #FF7A59 0%, #6EC1E4 50%, #6EE7B7 100%);
      --gradient-warm: linear-gradient(135deg, #FF7A59 0%, #FF9A7F 100%);
      --gradient-cool: linear-gradient(135deg, #6EC1E4 0%, #6EE7B7 100%);
      
      --success-bg: #ECFDF5;
      --success-light: #ECFDF5;
      --warning-bg: #FFFBEB;
      --warning-light: #FFFBEB;
      --danger-light: #FEF2F2;
      
      color-scheme: light;
    }
    
    /* ═══════════════════════════════════════════════════════════════════
       DARK THEME
    ═══════════════════════════════════════════════════════════════════ */
    [data-theme="dark"] {
      --bg-app: #0C0F14;
      --bg-primary: #151921;
      --bg-secondary: #1C2029;
      --bg-tertiary: #252A35;
      --bg-elevated: #1C2029;
      --bg-card: #1C2029;
      --bg-input: #252A35;
      --bg-input-hover: #2D333F;
      
      --text-primary: #F8FAFC;
      --text-secondary: #CBD5E1;
      --text-tertiary: #94A3B8;
      --text-muted: #64748B;
      --text-inverse: #0F172A;
      
      --border-light: #252A35;
      --border-default: #334155;
      --border-strong: #475569;
      
      /* Legacy gray mappings (inverted) */
      --gray-50: #1C2029;
      --gray-100: #252A35;
      --gray-200: #334155;
      --gray-300: #475569;
      --gray-400: #64748B;
      --gray-500: #94A3B8;
      --gray-600: #CBD5E1;
      --gray-700: #E2E8F0;
      --gray-800: #F1F5F9;
      --gray-900: #F8FAFC;
      --dark: #F8FAFC;
      
      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
      --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
      --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.3);
      --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 8px 10px -6px rgba(0, 0, 0, 0.4);
      --shadow-glow: 0 0 30px rgba(255, 107, 53, 0.2);
      --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
      
      --header-bg: linear-gradient(135deg, #151921 0%, #1C2029 100%);
      --gradient-hero: linear-gradient(135deg, #151921 0%, #1C2029 100%);
      --gradient-warm: linear-gradient(135deg, #FF6B35 0%, #FF8F5C 100%);
      --gradient-cool: linear-gradient(135deg, #10B981 0%, #059669 100%);
      
      --success-bg: rgba(16, 185, 129, 0.15);
      --success-light: rgba(16, 185, 129, 0.15);
      --warning-bg: rgba(245, 158, 11, 0.15);
      --warning-light: rgba(245, 158, 11, 0.15);
      --danger-light: rgba(239, 68, 68, 0.15);
      
      color-scheme: dark;
    }

    /* ═══════════════════════════════════════════════════════════════════
       BASE STYLES
    ═══════════════════════════════════════════════════════════════════ */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }

    html, body {
      height: 100%;
      overflow: hidden;
    }

    body {
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      background: var(--bg-app);
      color: var(--text-primary);
      touch-action: manipulation;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      transition: background-color var(--duration-normal) var(--ease-out),
                  color var(--duration-normal) var(--ease-out);
    }

    body.rtl { direction: rtl; }
    .arabic-text { font-family: 'Noto Sans Arabic', sans-serif; line-height: 1.8; }

    .app {
      max-width: 100%;
      width: 100%;
      height: 100%;
      margin: 0 auto;
      background: var(--bg-primary);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      transition: background-color var(--duration-normal) var(--ease-out);
    }

    @media (min-width: 480px) {
      .app { 
        max-width: 430px; 
        border-radius: var(--radius-2xl);
        box-shadow: var(--shadow-xl);
        margin: 20px auto;
        height: calc(100% - 40px);
      }
    }

    .screen {
      display: none;
      flex-direction: column;
      height: 100%;
      overflow: hidden;
    }
    .screen.active { display: flex; }

    /* ═══════════════════════════════════════════════════════════════════
       ONBOARDING
    ═══════════════════════════════════════════════════════════════════ */
    .onboarding-screen {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      padding: 30px;
      padding-bottom: 100px;
      text-align: center;
      color: white;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .onboarding-progress {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 20px;
    }

    .onboarding-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
    }
    .onboarding-dot.active { background: white; }
    .onboarding-dot.done { background: var(--success); }

    .onboarding-icon {
      font-size: 3.5rem;
      margin-bottom: 16px;
    }

    .onboarding-title {
      font-size: 1.5rem;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .onboarding-subtitle {
      font-size: 1rem;
      opacity: 0.9;
      margin-bottom: 24px;
      line-height: 1.4;
    }

    .onboarding-input {
      width: 100%;
      padding: 18px;
      border: none;
      border-radius: 16px;
      font-size: 1.2rem;
      text-align: center;
      margin-bottom: 24px;
    }
    .onboarding-input:focus { outline: 3px solid rgba(255,255,255,0.5); }

    .onboarding-btn {
      width: 100%;
      padding: 18px;
      background: white;
      color: var(--primary);
      border: none;
      border-radius: 16px;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
    }
    .onboarding-btn:active { transform: scale(0.98); }
    .onboarding-btn:disabled { opacity: 0.5; }

    /* Language Selection */
    .language-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 24px;
    }

    .lang-option {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: rgba(255,255,255,0.15);
      border: 2px solid transparent;
      border-radius: 12px;
      cursor: pointer;
      transition: all 0.2s;
      text-align: left;
    }
    .lang-option:active { transform: scale(0.98); }
    .lang-option.selected {
      background: rgba(255,255,255,0.25);
      border-color: white;
    }
    .lang-option-flag { font-size: 1.5rem; }
    .lang-option-name { font-size: 1rem; font-weight: 600; }
    .lang-option-native { font-size: 0.85rem; opacity: 0.8; }
    
    /* Sticky Button für Onboarding */
    .onboarding-btn-container {
      position: sticky;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px 0;
      background: linear-gradient(transparent, var(--primary-dark) 30%);
      margin-top: 20px;
    }

    /* Trainer Selection */
    .trainer-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
      margin-bottom: 24px;
    }

    .trainer-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 16px 8px;
      background: rgba(255,255,255,0.15);
      border: 2px solid transparent;
      border-radius: 16px;
      cursor: pointer;
    }
    .trainer-option:active { transform: scale(0.95); }
    .trainer-option.selected {
      background: rgba(255,255,255,0.25);
      border-color: white;
    }
    .trainer-avatar {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: white;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      margin-bottom: 8px;
      overflow: hidden;
    }
    .trainer-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .trainer-name { font-weight: 600; font-size: 0.95rem; }

    /* Video Greeting */
    .video-container {
      width: 200px;
      height: 200px;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 auto 24px;
      background: rgba(255,255,255,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .video-container video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .video-placeholder {
      font-size: 4rem;
    }

    /* ═══════════════════════════════════════════════════════════
       TUTORIAL OVERLAY
    ═══════════════════════════════════════════════════════════ */
    .tutorial-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.85);
      z-index: 9999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.3s ease;
    }
    .tutorial-overlay.active { display: flex; }
    
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

    .tutorial-card {
      background: var(--bg-card);
      border-radius: 24px;
      max-width: 380px;
      width: 100%;
      max-height: calc(100vh - 80px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      animation: slideUp 0.4s ease;
    }
    
    @keyframes slideUp {
      from { transform: translateY(30px); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .tutorial-header {
      background: var(--gradient-hero);
      padding: 24px;
      text-align: center;
      color: white;
      flex-shrink: 0;
    }
    
    .tutorial-avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      margin: 0 auto 16px;
      background: var(--bg-card);
      overflow: hidden;
      border: 4px solid rgba(255,255,255,0.3);
    }
    .tutorial-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .tutorial-trainer-name {
      font-size: 1.1rem;
      opacity: 0.9;
      margin-bottom: 8px;
    }
    
    .tutorial-title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .tutorial-step-indicator {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 16px;
    }
    .tutorial-step-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.3);
      transition: all 0.3s;
    }
    .tutorial-step-dot.active {
      background: white;
      width: 24px;
      border-radius: 4px;
    }
    .tutorial-step-dot.done {
      background: var(--success);
    }

    .tutorial-content {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
      -webkit-overflow-scrolling: touch;
      background: var(--bg-card);
    }
    
    .tutorial-footer {
      padding: 16px 24px 24px;
      background: var(--bg-card);
      flex-shrink: 0;
      border-top: 1px solid var(--border-light);
    }
    
    .tutorial-text {
      font-size: 1rem;
      line-height: 1.6;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }
    
    .tutorial-highlight {
      background: var(--bg-secondary);
      border-radius: 16px;
      padding: 16px;
      margin-bottom: 20px;
    }
    
    .tutorial-highlight-title {
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .tutorial-highlight-text {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .tutorial-modes-preview {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 20px;
    }
    
    .tutorial-mode-mini {
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 12px 8px;
      text-align: center;
      transition: all 0.2s;
      color: var(--text-primary);
    }
    .tutorial-mode-mini.highlighted {
      background: var(--primary);
      color: white;
      transform: scale(1.05);
    }
    .tutorial-mode-mini-icon {
      font-size: 1.3rem;
      margin-bottom: 4px;
    }
    .tutorial-mode-mini-name {
      font-size: 0.65rem;
      font-weight: 500;
    }

    .tutorial-box-system {
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .tutorial-box {
      flex: 1;
      text-align: center;
      padding: 12px 4px;
      border-radius: 12px;
      margin: 0 2px;
      transition: all 0.3s;
      color: var(--text-primary);
    }
    /* Light mode Box colors */
    [data-theme="light"] .tutorial-box.box-1 { background: #fee2e2; }
    [data-theme="light"] .tutorial-box.box-2 { background: #fef3c7; }
    [data-theme="light"] .tutorial-box.box-3 { background: #d1fae5; }
    [data-theme="light"] .tutorial-box.box-4 { background: #dbeafe; }
    [data-theme="light"] .tutorial-box.box-5 { background: #e9d5ff; }
    /* Dark mode Box colors */
    [data-theme="dark"] .tutorial-box.box-1 { background: rgba(239, 68, 68, 0.25); }
    [data-theme="dark"] .tutorial-box.box-2 { background: rgba(245, 158, 11, 0.25); }
    [data-theme="dark"] .tutorial-box.box-3 { background: rgba(16, 185, 129, 0.25); }
    [data-theme="dark"] .tutorial-box.box-4 { background: rgba(59, 130, 246, 0.25); }
    [data-theme="dark"] .tutorial-box.box-5 { background: rgba(139, 92, 246, 0.25); }
    .tutorial-box.highlighted {
      transform: scale(1.1);
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    .tutorial-box-num {
      font-weight: 700;
      font-size: 1.1rem;
      margin-bottom: 2px;
    }
    .tutorial-box-label {
      font-size: 0.6rem;
      opacity: 0.8;
    }

    .tutorial-progress-demo {
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 20px;
    }
    .tutorial-progress-header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 8px;
    }
    .tutorial-progress-bar {
      height: 8px;
      background: var(--bg-tertiary);
      border-radius: 4px;
      overflow: hidden;
    }
    .tutorial-progress-fill {
      height: 100%;
      background: var(--success);
      border-radius: 4px;
      transition: width 0.5s ease;
    }
    .tutorial-progress-stats {
      display: flex;
      justify-content: space-between;
      margin-top: 8px;
      font-size: 0.8rem;
      color: var(--text-tertiary);
    }

    .tutorial-buttons {
      display: flex;
      gap: 12px;
    }
    
    .tutorial-btn {
      flex: 1;
      padding: 14px 20px;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    .tutorial-btn-skip {
      background: var(--bg-tertiary);
      color: var(--text-secondary);
    }
    .tutorial-btn-next {
      background: var(--success);
      color: white;
    }
    .tutorial-btn-next:active {
      transform: scale(0.98);
    }

    .tutorial-tip {
      background: var(--warning-bg);
      border-radius: 12px;
      padding: 12px 16px;
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .tutorial-tip-icon {
      font-size: 1.2rem;
    }
    .tutorial-tip-text {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    /* Zwei Lernmethoden Karten */
    .tutorial-two-methods {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 20px;
    }
    .tutorial-method-card {
      background: var(--bg-secondary);
      border-radius: 16px;
      padding: 16px 12px;
      text-align: center;
      border: 2px solid transparent;
      transition: all 0.3s;
    }
    .tutorial-method-card.classic {
      background: rgba(255, 107, 53, 0.15);
      border-color: var(--primary-light);
    }
    .tutorial-method-card.natural {
      background: rgba(16, 185, 129, 0.15);
      border-color: var(--success);
    }
    .tutorial-method-icon {
      font-size: 2rem;
      margin-bottom: 8px;
    }
    .tutorial-method-title {
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 4px;
      color: var(--text-primary);
    }
    .tutorial-method-desc {
      font-size: 0.75rem;
      color: var(--text-secondary);
      line-height: 1.3;
    }

    /* Sprint mini highlight */
    .tutorial-mode-mini.sprint-mini {
      background: var(--warning-bg);
    }

    /* Natürliche Methode 4 Schritte */
    .tutorial-natural-steps {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-bottom: 20px;
    }
    .tutorial-natural-step {
      display: flex;
      align-items: center;
      gap: 12px;
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 12px;
      border-left: 4px solid var(--success);
    }
    .tutorial-step-num {
      width: 32px;
      height: 32px;
      background: var(--success);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.9rem;
      flex-shrink: 0;
    }
    .tutorial-step-info {
      flex: 1;
    }
    .tutorial-step-name {
      font-weight: 600;
      font-size: 0.9rem;
      color: var(--text-primary);
      margin-bottom: 2px;
    }
    .tutorial-step-detail {
      font-size: 0.75rem;
      color: var(--text-tertiary);
    }

    /* ═══════════════════════════════════════════════════════════
       MODUL-TUTORIALS (Mini-Tutorials für jeden Lernmodus)
    ═══════════════════════════════════════════════════════════ */
    .module-tutorial-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.9);
      z-index: 10000;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.3s ease;
    }
    .module-tutorial-overlay.active { display: flex; }

    .module-tutorial-card {
      background: var(--bg-card);
      border-radius: 24px;
      max-width: 360px;
      width: 100%;
      max-height: calc(100vh - 80px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      animation: slideUp 0.4s ease;
    }

    .module-tutorial-header {
      padding: 24px;
      text-align: center;
      color: white;
      flex-shrink: 0;
    }
    .module-tutorial-header.flashcard { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
    .module-tutorial-header.quiz { background: linear-gradient(135deg, #ef4444, #f97316); }
    .module-tutorial-header.write { background: linear-gradient(135deg, #f59e0b, #eab308); }
    .module-tutorial-header.picture { background: linear-gradient(135deg, #22c55e, #10b981); }
    .module-tutorial-header.sentence { background: linear-gradient(135deg, #06b6d4, #0ea5e9); }
    .module-tutorial-header.listen { background: linear-gradient(135deg, #8b5cf6, #a855f7); }
    .module-tutorial-header.memory { background: linear-gradient(135deg, #ec4899, #f43f5e); }
    .module-tutorial-header.sprint { background: linear-gradient(135deg, #f59e0b, #f97316); }
    .module-tutorial-header.gapfill { background: linear-gradient(135deg, #10b981, #059669); }
    .module-tutorial-header.natural { background: linear-gradient(135deg, var(--success), #059669); }

    .module-tutorial-icon {
      font-size: 4rem;
      margin-bottom: 12px;
    }

    .module-tutorial-title {
      font-size: 1.5rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .module-tutorial-subtitle {
      font-size: 0.9rem;
      opacity: 0.9;
    }

    .module-tutorial-content {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
      -webkit-overflow-scrolling: touch;
      background: var(--bg-card);
    }

    .module-tutorial-footer {
      padding: 16px 24px 24px;
      flex-shrink: 0;
      border-top: 1px solid var(--border-light);
      background: var(--bg-card);
    }

    .module-tutorial-steps {
      margin-bottom: 20px;
    }

    .module-tutorial-step {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--border-light);
    }
    .module-tutorial-step:last-child { border-bottom: none; }

    .module-step-num {
      width: 28px;
      height: 28px;
      background: var(--bg-tertiary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 0.85rem;
      color: var(--text-secondary);
      flex-shrink: 0;
    }

    .module-step-text {
      flex: 1;
      font-size: 0.95rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .module-tutorial-tip {
      background: var(--warning-bg);
      border-radius: 12px;
      padding: 12px 16px;
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .module-tutorial-tip-icon { font-size: 1.2rem; }
    .module-tutorial-tip-text {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .module-tutorial-buttons {
      display: flex;
      gap: 12px;
    }

    .module-tutorial-btn {
      flex: 1;
      padding: 14px 20px;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    .module-tutorial-btn-skip {
      background: var(--bg-tertiary);
      color: var(--text-secondary);
    }
    .module-tutorial-btn-start {
      background: var(--success);
      color: white;
    }
    .module-tutorial-btn-start:active { transform: scale(0.98); }

    .module-tutorial-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid var(--border-light);
    }
    .module-tutorial-checkbox input {
      width: 18px;
      height: 18px;
      cursor: pointer;
    }
    .module-tutorial-checkbox label {
      font-size: 0.85rem;
      color: var(--text-tertiary);
      cursor: pointer;
    }

    /* ═══════════════════════════════════════════════════════════
       HILFE-ICON IN LERNMODI
    ═══════════════════════════════════════════════════════════ */
    .mode-card {
      position: relative;
    }
    
    .mode-help-btn {
      position: absolute;
      top: 6px;
      right: 6px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: none;
      color: var(--text-tertiary);
      font-size: 0.75rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      z-index: 10;
    }
    .mode-help-btn:hover {
      background: var(--primary);
      color: white;
    }
    .mode-help-btn:active {
      transform: scale(0.9);
    }

    .natural-step {
      position: relative;
    }
    
    .natural-help-btn {
      position: absolute;
      top: 50%;
      right: 40px;
      transform: translateY(-50%);
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: none;
      color: var(--text-tertiary);
      font-size: 0.8rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.2s;
      z-index: 10;
    }
    .natural-help-btn:hover {
      background: var(--success);
      color: white;
    }

    /* ═══════════════════════════════════════════════════════════
       DIDAKTIK-MODAL (erweiterte Hilfe)
    ═══════════════════════════════════════════════════════════ */
    .didaktik-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.9);
      z-index: 10001;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.3s ease;
    }
    .didaktik-overlay.active { display: flex; }

    .didaktik-card {
      background: var(--bg-card);
      border-radius: 24px;
      max-width: 400px;
      width: 100%;
      max-height: calc(100vh - 80px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.4);
      animation: slideUp 0.4s ease;
    }

    .didaktik-header {
      padding: 24px;
      text-align: center;
      color: white;
      flex-shrink: 0;
    }

    .didaktik-icon {
      font-size: 3.5rem;
      margin-bottom: 12px;
    }

    .didaktik-title {
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .didaktik-content {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
      -webkit-overflow-scrolling: touch;
      background: var(--bg-card);
    }

    .didaktik-section {
      margin-bottom: 20px;
    }

    .didaktik-section-title {
      font-weight: 700;
      font-size: 1rem;
      color: var(--text-primary);
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .didaktik-section-text {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.6;
    }

    .didaktik-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    .didaktik-list li {
      padding: 8px 0;
      padding-left: 24px;
      position: relative;
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .didaktik-list li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--success);
      font-weight: 700;
    }

    .didaktik-tip {
      background: var(--success-bg);
      border-radius: 12px;
      padding: 14px 16px;
      margin-top: 20px;
    }
    .didaktik-tip-title {
      font-weight: 600;
      color: var(--success);
      margin-bottom: 4px;
      font-size: 0.9rem;
    }
    .didaktik-tip-text {
      font-size: 0.85rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }

    .didaktik-close-btn {
      width: 100%;
      padding: 16px;
      background: var(--bg-tertiary);
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-primary);
      cursor: pointer;
      margin-top: 16px;
    }
    .didaktik-close-btn:active { transform: scale(0.98); }

    /* ═══════════════════════════════════════════════════════════
       ANIMIERTER AVATAR (wenn Video nicht verfügbar)
    ═══════════════════════════════════════════════════════════ */
    .animated-avatar-container {
      position: relative;
      width: 150px;
      height: 150px;
      margin: 0 auto;
    }
    
    .animated-avatar {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
      border: 4px solid rgba(255,255,255,0.3);
      animation: avatarPulse 2s ease-in-out infinite;
    }
    
    @keyframes avatarPulse {
      0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255,0.4); }
      50% { transform: scale(1.03); box-shadow: 0 0 20px 10px rgba(255,255,255,0.2); }
    }
    
    .avatar-speaking-indicator {
      position: absolute;
      bottom: 5px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 4px;
      padding: 6px 12px;
      background: rgba(0,0,0,0.6);
      border-radius: 20px;
    }
    
    .speaking-bar {
      width: 4px;
      height: 16px;
      background: var(--success);
      border-radius: 2px;
      animation: speakingWave 0.8s ease-in-out infinite;
    }
    .speaking-bar:nth-child(1) { animation-delay: 0s; }
    .speaking-bar:nth-child(2) { animation-delay: 0.1s; }
    .speaking-bar:nth-child(3) { animation-delay: 0.2s; }
    .speaking-bar:nth-child(4) { animation-delay: 0.3s; }
    .speaking-bar:nth-child(5) { animation-delay: 0.4s; }
    
    @keyframes speakingWave {
      0%, 100% { height: 6px; }
      50% { height: 18px; }
    }
    
    .avatar-wave-hand {
      position: absolute;
      top: 10px;
      right: -10px;
      font-size: 2rem;
      animation: waveHand 1.5s ease-in-out infinite;
    }
    
    @keyframes waveHand {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(20deg); }
      50% { transform: rotate(-10deg); }
      75% { transform: rotate(20deg); }
    }

    /* ═══════════════════════════════════════════════════════════════════
       AUTH SCREEN - 2026 Design mit Light/Dark Support
    ═══════════════════════════════════════════════════════════════════ */
    .auth-screen {
      background: linear-gradient(145deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
      justify-content: center;
      align-items: center;
      padding: var(--space-6);
      position: relative;
      overflow: hidden;
    }
    
    .auth-screen::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -30%;
      width: 80%;
      height: 80%;
      background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
      pointer-events: none;
    }

    .auth-card {
      background: var(--bg-card);
      border-radius: var(--radius-2xl);
      padding: var(--space-8) var(--space-6);
      width: 100%;
      max-width: 380px;
      box-shadow: var(--shadow-xl);
      border: 1px solid var(--border-light);
      position: relative;
      z-index: 1;
      transition: background-color var(--duration-normal) var(--ease-out),
                  border-color var(--duration-normal) var(--ease-out);
    }

    .auth-logo { 
      text-align: center; 
      margin-bottom: var(--space-2);
    }
    
    .auth-logo img {
      width: 80px;
      height: 80px;
      object-fit: contain;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
    }
    
    .auth-title { 
      text-align: center; 
      font-size: 2.5rem; 
      font-weight: 800; 
      margin-bottom: var(--space-2);
      letter-spacing: -0.02em;
    }
    .auth-title span:first-child { color: var(--text-primary); }
    .auth-title span:last-child { color: var(--brand-primary); }
    
    .auth-tagline {
      text-align: center;
      font-size: 1rem;
      color: var(--text-tertiary);
      margin-bottom: var(--space-7);
    }

    .form-group { margin-bottom: var(--space-4); }
    .form-group label {
      display: block;
      font-size: 0.875rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: var(--space-2);
      padding-left: 2px;
    }
    
    .form-input {
      width: 100%;
      padding: var(--space-4) var(--space-4);
      border: 2px solid var(--border-default);
      border-radius: var(--radius-md);
      font-size: 1rem;
      font-family: inherit;
      background: var(--bg-input);
      color: var(--text-primary);
      transition: all var(--duration-fast) var(--ease-out);
    }
    .form-input::placeholder {
      color: var(--text-muted);
    }
    .form-input:hover {
      border-color: var(--border-strong);
      background: var(--bg-input-hover);
    }
    .form-input:focus { 
      outline: none; 
      border-color: var(--brand-primary);
      background: var(--bg-input-hover);
      box-shadow: 0 0 0 4px rgba(255, 107, 53, 0.15);
    }

    .btn {
      width: 100%;
      padding: var(--space-4) var(--space-6);
      border: none;
      border-radius: var(--radius-md);
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all var(--duration-normal) var(--ease-out);
      font-family: inherit;
    }
    .btn-primary { 
      background: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);
      color: white; 
      box-shadow: 0 4px 14px rgba(255, 107, 53, 0.35);
    }
    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
    }
    .btn-primary:active { 
      transform: translateY(0) scale(0.98); 
      box-shadow: 0 2px 10px rgba(255, 107, 53, 0.3);
    }
    .btn-secondary {
      background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-secondary-dark) 100%);
      color: white;
      box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
    }

    .auth-switch { 
      text-align: center; 
      margin-top: var(--space-6); 
      color: var(--text-tertiary); 
      font-size: 0.9rem; 
    }
    .auth-switch a { 
      color: var(--brand-primary); 
      font-weight: 600; 
      text-decoration: none;
      padding: var(--space-1) var(--space-2);
      border-radius: var(--radius-sm);
      transition: all var(--duration-fast);
    }
    .auth-switch a:hover {
      background: rgba(255, 107, 53, 0.1);
    }

    /* ═══════════════════════════════════════════════════════════════════
       HOME SCREEN - 2026 Design
    ═══════════════════════════════════════════════════════════════════ */
    .home-screen {
      background: var(--header-bg);
    }

    .home-header {
      padding: var(--space-5);
      color: white;
    }

    .home-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }

    .trainer-badge {
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
    }
    .trainer-badge-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: var(--bg-card);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      overflow: hidden;
    }
    .trainer-badge-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .trainer-badge-info { line-height: 1.3; }
    .trainer-badge-name { font-weight: 600; font-size: 0.95rem; }
    .trainer-badge-lang { font-size: 0.8rem; opacity: 0.9; }

    .language-switch {
      background: rgba(255,255,255,0.2);
      padding: 8px 14px;
      border-radius: 20px;
      font-size: 1.3rem;
      cursor: pointer;
    }

    .stats-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
    }

    .stat-bubble {
      background: rgba(255,255,255,0.15);
      padding: 8px 12px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 0.9rem;
    }

    .home-content {
      flex: 1;
      background: var(--bg-secondary);
      border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
      padding: var(--space-6) var(--space-5);
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      transition: background-color var(--duration-normal) var(--ease-out);
    }

    /* Daily Goal Ring */
    .daily-goal {
      display: flex;
      align-items: center;
      gap: var(--space-4);
      background: linear-gradient(135deg, #78350f, #92400e);
      border-radius: var(--radius-xl);
      padding: var(--space-5);
      color: white;
      margin-bottom: var(--space-5);
      box-shadow: var(--shadow-lg);
    }

    .goal-ring {
      position: relative;
      width: 70px;
      height: 70px;
      flex-shrink: 0;
    }

    .goal-ring svg {
      transform: rotate(-90deg);
      width: 70px;
      height: 70px;
    }

    .goal-ring-bg {
      fill: none;
      stroke: rgba(255,255,255,0.3);
      stroke-width: 6;
    }

    .goal-ring-progress {
      fill: none;
      stroke: white;
      stroke-width: 6;
      stroke-linecap: round;
      stroke-dasharray: 188.5; /* 2 * PI * 30 */
      stroke-dashoffset: 188.5;
      transition: stroke-dashoffset 0.5s ease;
    }

    .goal-ring-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 1.1rem;
      font-weight: 800;
    }

    .goal-info { flex: 1; }
    .goal-title { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
    .goal-subtitle { font-size: 0.85rem; opacity: 0.9; }

    /* Learn CTA */
    .learn-cta {
      background: linear-gradient(135deg, var(--brand-secondary-dark), var(--brand-secondary));
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      text-align: center;
      color: white;
      margin-bottom: var(--space-5);
      cursor: pointer;
      box-shadow: 0 8px 25px rgba(16, 185, 129, 0.3);
      transition: all var(--duration-normal) var(--ease-out);
    }
    .learn-cta:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 30px rgba(16, 185, 129, 0.35);
    }
    .learn-cta:active { transform: scale(0.98); }
    .learn-cta-icon { font-size: 2.5rem; margin-bottom: var(--space-2); }
    .learn-cta-title { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-1); }
    .learn-cta-subtitle { opacity: 0.95; font-size: 0.9rem; }
    .learn-cta-count {
      display: inline-block;
      background: rgba(255,255,255,0.2);
      padding: var(--space-2) var(--space-3);
      border-radius: var(--radius-full);
      margin-top: var(--space-3);
      font-weight: 600;
      font-size: 0.85rem;
    }

    /* Mode Grid */
    .section-title {
      font-size: 0.8rem;
      font-weight: 700;
      color: var(--text-tertiary);
      margin-bottom: var(--space-3);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* ═══ SPRACHRICHTUNGS-AUSWAHL ═══ */
    .direction-selector {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      padding: 12px 16px;
      margin-bottom: 16px;
      border: 1px solid var(--border-light);
    }
    
    .direction-label {
      font-size: 0.75rem;
      color: var(--text-tertiary);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      margin-bottom: 8px;
    }
    
    .direction-options {
      display: flex;
      gap: 8px;
    }
    
    .direction-btn {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 10px 8px;
      background: var(--bg-secondary);
      border: 2px solid var(--border-light);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .direction-btn:hover {
      border-color: var(--primary);
      background: var(--bg-tertiary);
    }
    
    .direction-btn.active {
      border-color: var(--primary);
      background: rgba(255, 107, 53, 0.1);
    }
    
    .direction-btn .dir-icon {
      font-size: 1.1rem;
    }
    
    .direction-btn .dir-text {
      font-size: 0.7rem;
      font-weight: 600;
      color: var(--text-secondary);
    }
    
    .direction-btn.active .dir-text {
      color: var(--primary);
    }

    .mode-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--space-3);
      margin-bottom: var(--space-5);
    }
    
    .mode-grid.expanded {
      grid-template-columns: repeat(4, 1fr);
    }

    .mode-card {
      background: var(--bg-card);
      border: 2px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: var(--space-3) var(--space-2);
      text-align: center;
      cursor: pointer;
      transition: all var(--duration-fast) var(--ease-out);
      box-shadow: var(--shadow-card);
    }
    .mode-card:active { 
      transform: scale(0.95); 
      border-color: var(--brand-primary); 
    }
    .mode-card:hover { 
      border-color: var(--brand-primary); 
      box-shadow: var(--shadow-md), var(--shadow-glow);
      transform: translateY(-2px);
    }
    [data-theme="light"] .mode-card:hover {
      background: #FFF5F0;
    }
    [data-theme="dark"] .mode-card:hover {
      background: rgba(255, 107, 53, 0.1);
    }
    .mode-card.sprint { 
      background: linear-gradient(135deg, var(--warning-bg), rgba(245, 158, 11, 0.2)); 
      border-color: var(--brand-accent); 
    }
    
    .mode-card.gapfill {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.2));
      border-color: var(--brand-secondary);
      position: relative;
    }
    
    /* NEU Badge für neue Features */
    .mode-badge {
      position: absolute;
      top: -6px;
      right: -6px;
      font-size: 0.6rem;
      font-weight: 700;
      padding: 2px 6px;
      border-radius: 10px;
      text-transform: uppercase;
      z-index: 1;
    }
    .mode-badge.new {
      background: var(--brand-secondary);
      color: white;
      animation: badgePulse 2s ease-in-out infinite;
    }
    @keyframes badgePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
    
    /* ═══ GAPFILL MODUL STYLES ═══ */
    .gapfill-area {
      padding: 20px;
      text-align: center;
    }
    
    .gapfill-instruction {
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }
    
    .gapfill-sentence {
      font-size: 1.4rem;
      line-height: 2.5;
      padding: 20px;
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      margin-bottom: 20px;
    }
    
    .gapfill-input {
      display: inline-block;
      width: 120px;
      padding: 8px 12px;
      font-size: 1.2rem;
      text-align: center;
      border: 2px solid var(--primary);
      border-radius: var(--radius-md);
      background: var(--bg-secondary);
      color: var(--text-primary);
      margin: 0 4px;
      transition: all 0.2s;
    }
    
    .gapfill-input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
    }
    
    .gapfill-input.correct {
      border-color: var(--success);
      background: rgba(16, 185, 129, 0.1);
      color: var(--success);
    }
    
    .gapfill-input.wrong {
      border-color: var(--error);
      background: rgba(239, 68, 68, 0.1);
      color: var(--error);
    }
    
    .gapfill-hints {
      margin-bottom: 16px;
    }
    
    .gapfill-hint {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      font-size: 0.85rem;
      color: var(--text-tertiary);
      padding: 6px;
    }
    
    .gapfill-translation {
      padding: 12px;
      background: var(--bg-secondary);
      border-radius: var(--radius-md);
      margin-bottom: 16px;
      font-size: 0.9rem;
    }
    
    .translation-label {
      color: var(--text-tertiary);
      margin-right: 8px;
    }
    
    .translation-text {
      color: var(--text-secondary);
    }
    
    .gapfill-feedback {
      padding: 12px 20px;
      border-radius: var(--radius-md);
      margin-bottom: 16px;
      font-weight: 600;
    }
    
    .gapfill-feedback.correct {
      background: rgba(16, 185, 129, 0.15);
      color: var(--success);
    }
    
    .gapfill-feedback.wrong {
      background: rgba(239, 68, 68, 0.15);
      color: var(--error);
    }
    
    /* ═══ WHAT'S NEW POPUP ═══ */
    .whats-new-modal {
      max-width: 380px;
    }
    
    .whats-new-header {
      text-align: center;
      margin-bottom: 20px;
    }
    
    .whats-new-version {
      display: inline-block;
      padding: 4px 12px;
      background: var(--primary);
      color: white;
      border-radius: 20px;
      font-size: 0.75rem;
      font-weight: 600;
      margin-bottom: 12px;
    }
    
    .whats-new-title {
      font-size: 1.3rem;
      font-weight: 700;
      margin: 0 0 8px 0;
    }
    
    .whats-new-item {
      display: flex;
      gap: 12px;
      padding: 12px;
      background: var(--bg-secondary);
      border-radius: var(--radius-md);
      margin-bottom: 10px;
      text-align: left;
    }
    
    .whats-new-icon {
      font-size: 1.5rem;
      flex-shrink: 0;
    }
    
    .whats-new-content h4 {
      margin: 0 0 4px 0;
      font-size: 0.95rem;
      color: var(--text-primary);
    }
    
    .whats-new-content p {
      margin: 0;
      font-size: 0.8rem;
      color: var(--text-secondary);
      line-height: 1.4;
    }
    
    /* ═══ GESPERRTE MODULE ═══ */
    .mode-card.mode-locked,
    .natural-step.step-locked {
      opacity: 0.5;
      cursor: not-allowed;
      position: relative;
    }
    .mode-card.mode-locked:hover,
    .natural-step.step-locked:hover {
      transform: none;
      border-color: var(--border-light);
      box-shadow: var(--shadow-card);
    }
    .mode-card.mode-locked:active,
    .natural-step.step-locked:active {
      transform: none;
    }
    .lock-badge {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 16px;
      opacity: 0.8;
    }
    
    /* ═══ UNLOCK CELEBRATION ═══ */
    .unlock-celebration {
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .unlock-celebration.show {
      opacity: 1;
    }
    .unlock-modal {
      max-width: 320px;
      text-align: center;
      padding: 32px 24px;
      animation: unlock-bounce 0.5s ease-out;
    }
    @keyframes unlock-bounce {
      0% { transform: scale(0.5); opacity: 0; }
      50% { transform: scale(1.1); }
      100% { transform: scale(1); opacity: 1; }
    }
    .unlock-confetti {
      font-size: 40px;
      margin-bottom: 8px;
      animation: confetti-shake 0.5s ease infinite;
    }
    @keyframes confetti-shake {
      0%, 100% { transform: rotate(-5deg); }
      50% { transform: rotate(5deg); }
    }
    .unlock-icon {
      font-size: 64px;
      margin-bottom: 16px;
      animation: unlock-pulse 1s ease infinite;
    }
    @keyframes unlock-pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
    .unlock-title {
      font-size: 18px;
      color: var(--text-secondary);
      margin: 0 0 8px 0;
      font-weight: 500;
    }
    .unlock-module-name {
      font-size: 28px;
      color: var(--brand-primary);
      margin: 0 0 8px 0;
      font-weight: 700;
    }
    .unlock-desc {
      color: var(--text-secondary);
      margin: 0 0 16px 0;
      font-size: 14px;
    }
    .unlock-stars {
      font-size: 24px;
      margin-bottom: 24px;
      animation: stars-glow 1.5s ease infinite;
    }
    @keyframes stars-glow {
      0%, 100% { opacity: 1; filter: brightness(1); }
      50% { opacity: 0.8; filter: brightness(1.3); }
    }
    .unlock-btn {
      width: 100%;
      padding: 14px 24px;
      font-size: 16px;
    }
    
    /* Confetti Animation */
    @keyframes confetti-fall {
      0% { transform: translateY(0) rotate(0deg); opacity: 1; }
      100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
    }
    
    .mode-icon { font-size: 1.5rem; margin-bottom: var(--space-1); }
    .mode-name { font-size: 0.7rem; font-weight: 600; color: var(--text-secondary); }

    /* Picture Mode - Rosetta Stone Style */
    .picture-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      margin-top: 20px;
    }
    
    .picture-option {
      background: var(--bg-card);
      border: 3px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: 12px 8px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      position: relative;
      overflow: hidden;
      min-height: 140px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .picture-option:hover { border-color: var(--brand-primary); transform: scale(1.02); }
    .picture-option.correct { border-color: var(--success); background: var(--success-bg); }
    .picture-option.wrong { border-color: var(--error); background: var(--danger-light); }
    
    /* Emoji-Fallback Styles (v2.0.8.7) */
    .picture-emoji { 
      font-size: 42px; 
      margin-bottom: 8px; 
      display: block;
      line-height: 1;
    }
    .picture-label { 
      font-size: 12px; 
      color: var(--text-secondary); 
      font-weight: 600;
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
      max-width: 100%;
      padding: 0 4px;
      line-height: 1.3;
    }
    
    /* Echte Bilder im Picture Mode - Rosetta Stone Style */
    .picture-grid.rosetta-style {
      gap: 10px;
    }
    
    .picture-grid.rosetta-style .picture-option {
      padding: 0;
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .picture-grid.rosetta-style .picture-option.has-image {
      padding: 0;
    }
    
    .picture-option-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 13px;
      background: var(--bg-tertiary);
    }
    
    .picture-option.has-image:hover {
      transform: scale(1.03);
      box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    }
    
    .picture-option.has-image.correct {
      border-color: var(--success);
      box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.3);
    }
    
    .picture-option.has-image.wrong {
      border-color: var(--error);
      opacity: 0.6;
    }
    
    .picture-image {
      width: 100%;
      height: 120px;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 8px;
      background: var(--bg-tertiary);
    }
    
    .picture-image.loading {
      background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-light) 50%, var(--bg-tertiary) 75%);
      background-size: 200% 100%;
      animation: shimmer 1.5s infinite;
    }
    
    @keyframes shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
    
    .picture-option .picture-caption {
      font-size: 14px;
      color: var(--text-secondary);
      font-weight: 600;
      padding: 6px 0;
      background: rgba(255,255,255,0.9);
    }
    
    /* Rosetta Stone Style: Bild mit Text-Overlay */
    .picture-option.rosetta {
      padding: 0;
      position: relative;
    }
    
    .picture-option.rosetta .picture-image {
      width: 100%;
      height: 130px;
      margin-bottom: 0;
      border-radius: 13px 13px 0 0;
    }
    
    .picture-option.rosetta .picture-text-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: linear-gradient(transparent, rgba(0,0,0,0.7));
      color: white;
      padding: 20px 10px 10px;
      font-size: 13px;
      font-weight: 600;
      border-radius: 0 0 13px 13px;
    }
    
    /* Audio Play Button auf Bild */
    .picture-audio-btn {
      position: absolute;
      top: 8px;
      right: 8px;
      background: rgba(255,255,255,0.9);
      border: none;
      border-radius: 50%;
      width: 32px;
      height: 32px;
      cursor: pointer;
      font-size: 16px;
      z-index: 10;
    }

    /* Sentence Build Mode */
    .sentence-area {
      min-height: 60px;
      background: var(--bg-tertiary);
      border-radius: 12px;
      padding: 12px;
      margin-bottom: 20px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      justify-content: center;
    }
    
    .sentence-word {
      background: var(--primary);
      color: white;
      padding: 10px 16px;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .sentence-word.available {
      background: var(--bg-card);
      color: var(--text-secondary);
      border: 2px solid var(--border-default);
    }
    
    .sentence-word.available:hover { border-color: var(--primary); }

    /* Listen Mode */
    .listen-prompt {
      text-align: center;
      margin-bottom: 24px;
    }
    
    .listen-play-btn {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: var(--primary);
      border: none;
      font-size: 40px;
      color: white;
      cursor: pointer;
      margin-bottom: 16px;
      transition: all 0.2s;
    }
    
    .listen-play-btn:hover { transform: scale(1.1); }
    .listen-play-btn:active { transform: scale(0.95); }
    
    .listen-hint { font-size: 14px; color: var(--text-tertiary); }

    /* ═══════════════════════════════════════════════════════════
       SHADOWING MODUS
    ═══════════════════════════════════════════════════════════ */
    .shadowing-container {
      padding: 20px;
      text-align: center;
    }
    
    .shadowing-header {
      margin-bottom: 24px;
    }
    
    .shadowing-progress {
      font-size: 0.85rem;
      color: var(--text-tertiary);
      margin-bottom: 4px;
    }
    
    .shadowing-title {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    
    .shadowing-word {
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 8px;
    }
    
    .shadowing-image {
      width: 80px;
      height: 80px;
      margin: 0 auto 12px;
      border-radius: 12px;
      overflow: hidden;
      background: var(--bg-tertiary);
    }
    
    .shadowing-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* Step-Bild für alle Natural Steps */
    .step-image {
      width: 100px;
      height: 100px;
      margin: 0 auto 16px;
      border-radius: 16px;
      overflow: hidden;
      background: var(--bg-tertiary);
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .step-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .shadowing-word.arabic {
      font-family: var(--font-arabic);
      font-size: 2.5rem;
      direction: rtl;
    }
    
    .shadowing-translit {
      font-size: 1rem;
      color: var(--text-tertiary);
      font-style: italic;
      margin-bottom: 4px;
    }
    
    .shadowing-native {
      font-size: 1.1rem;
      color: var(--text-secondary);
      margin-bottom: 30px;
    }
    
    .shadowing-phases {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin-bottom: 30px;
      flex-wrap: wrap;
    }
    
    .shadowing-phase {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 10px 16px;
      border-radius: 12px;
      background: var(--bg-tertiary);
      transition: all 0.3s;
    }
    
    .shadowing-phase.active {
      background: var(--primary);
      color: white;
      transform: scale(1.05);
    }
    
    .phase-icon {
      font-size: 1.5rem;
      margin-bottom: 4px;
    }
    
    .phase-label {
      font-size: 0.75rem;
      font-weight: 600;
    }
    
    .shadowing-controls {
      margin-bottom: 30px;
      min-height: 120px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    .shadowing-btn {
      width: 140px;
      height: 140px;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 0.3s;
    }
    
    .shadowing-btn.listening {
      background: linear-gradient(135deg, #6366f1, #8b5cf6);
      color: white;
      animation: pulse 1.5s infinite;
    }
    
    .shadowing-btn.recording {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      color: white;
      animation: pulse 0.8s infinite;
    }
    
    .shadowing-btn.playing {
      transform: scale(1.1);
    }
    
    .shadowing-btn .btn-icon {
      font-size: 3rem;
      margin-bottom: 4px;
    }
    
    .shadowing-btn .btn-text {
      font-size: 0.8rem;
      font-weight: 600;
    }
    
    @keyframes pulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
      50% { box-shadow: 0 0 0 15px rgba(99, 102, 241, 0); }
    }
    
    .shadowing-countdown {
      font-size: 4rem;
      font-weight: 700;
      color: var(--primary);
      animation: countdownPulse 0.8s ease-in-out infinite;
    }
    
    @keyframes countdownPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.2); }
    }
    
    .shadowing-hint {
      font-size: 1rem;
      color: var(--text-tertiary);
      margin-top: 8px;
    }
    
    .shadowing-compare-btns {
      display: flex;
      gap: 12px;
      margin-bottom: 20px;
    }
    
    .shadowing-compare-btn {
      padding: 16px 24px;
      border-radius: 12px;
      border: 2px solid var(--border-default);
      background: var(--bg-card);
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      color: var(--text-primary);
    }
    
    .shadowing-compare-btn:hover:not(:disabled) {
      border-color: var(--primary);
      background: var(--bg-secondary);
    }
    
    .shadowing-compare-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .shadowing-rating {
      margin-top: 16px;
    }
    
    .shadowing-rating span {
      display: block;
      font-size: 0.9rem;
      color: var(--text-secondary);
      margin-bottom: 12px;
    }
    
    /* Automatische Shadowing-Auswertung */
    .shadowing-analyzing {
      text-align: center;
      padding: 20px;
    }
    
    .analyzing-spinner {
      font-size: 2.5rem;
      animation: spin 1s linear infinite;
    }
    
    @keyframes spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(360deg); }
    }
    
    .analyzing-text {
      color: var(--text-secondary);
      margin-top: 12px;
    }
    
    .shadowing-result {
      text-align: center;
      padding: 20px;
      border-radius: 16px;
      background: var(--bg-secondary);
    }
    
    /* Light Mode Shadowing Results */
    [data-theme="light"] .shadowing-result.excellent { background: #f0fdf4; }
    [data-theme="light"] .shadowing-result.good { background: #fefce8; }
    [data-theme="light"] .shadowing-result.fair { background: var(--warning-bg); }
    [data-theme="light"] .shadowing-result.retry { background: #fef2f2; }
    
    /* Dark Mode Shadowing Results */
    [data-theme="dark"] .shadowing-result.excellent { background: rgba(16, 185, 129, 0.15); }
    [data-theme="dark"] .shadowing-result.good { background: rgba(234, 179, 8, 0.15); }
    [data-theme="dark"] .shadowing-result.fair { background: var(--warning-bg); }
    [data-theme="dark"] .shadowing-result.retry { background: rgba(239, 68, 68, 0.15); }
    
    .result-emoji {
      font-size: 3rem;
      margin-bottom: 8px;
    }
    
    .result-score {
      font-size: 2.5rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    
    .shadowing-result.excellent .result-score { color: var(--success); }
    [data-theme="light"] .shadowing-result.good .result-score { color: #ca8a04; }
    [data-theme="dark"] .shadowing-result.good .result-score { color: #fbbf24; }
    .shadowing-result.fair .result-score { color: var(--warning); }
    .shadowing-result.retry .result-score { color: var(--error); }
    
    .result-message {
      color: var(--text-secondary);
      margin-top: 4px;
    }
    
    .rating-btns-auto {
      display: flex;
      justify-content: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    
    .rating-btn-auto {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding: 12px 16px;
      border-radius: 12px;
      border: 2px solid var(--border-default);
      background: var(--bg-card);
      cursor: pointer;
      transition: all 0.2s;
      min-width: 70px;
    }
    
    .rating-btn-auto span:first-child {
      font-size: 1.5rem;
    }
    
    .rating-btn-auto span:last-child {
      font-size: 0.75rem;
      color: var(--text-secondary);
    }
    
    .rating-btn-auto:hover {
      transform: translateY(-2px);
    }
    
    [data-theme="light"] .rating-btn-auto.retry:hover { border-color: var(--error); background: #fef2f2; }
    [data-theme="light"] .rating-btn-auto.fair:hover { border-color: var(--warning); background: var(--warning-bg); }
    [data-theme="light"] .rating-btn-auto.good:hover { border-color: #ca8a04; background: #fefce8; }
    [data-theme="light"] .rating-btn-auto.excellent:hover { border-color: var(--success); background: #f0fdf4; }
    
    [data-theme="dark"] .rating-btn-auto.retry:hover { border-color: var(--error); background: rgba(239, 68, 68, 0.15); }
    [data-theme="dark"] .rating-btn-auto.fair:hover { border-color: var(--warning); background: var(--warning-bg); }
    [data-theme="dark"] .rating-btn-auto.good:hover { border-color: #fbbf24; background: rgba(234, 179, 8, 0.15); }
    [data-theme="dark"] .rating-btn-auto.excellent:hover { border-color: var(--success); background: rgba(16, 185, 129, 0.15); }
    
    .rating-btns {
      display: flex;
      justify-content: center;
      gap: 16px;
    }
    
    .rating-btn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 2px solid var(--border-default);
      background: var(--bg-card);
      font-size: 1.8rem;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .rating-btn:hover {
      transform: scale(1.1);
    }
    
    .rating-btn.bad:hover { border-color: var(--error); background: var(--danger-light); }
    .rating-btn.ok:hover { border-color: var(--warning); background: var(--warning-bg); }
    .rating-btn.good:hover { border-color: var(--success); background: var(--success-bg); }
    
    .shadowing-nav {
      display: flex;
      gap: 12px;
      justify-content: center;
    }
    
    .shadowing-nav .nav-btn {
      padding: 12px 20px;
      border-radius: 10px;
      border: 1px solid var(--border-default);
      background: var(--bg-card);
      font-size: 0.95rem;
      font-weight: 500;
      cursor: pointer;
      transition: all 0.2s;
      color: var(--text-primary);
    }
    
    .shadowing-nav .nav-btn:hover:not(:disabled) {
      background: var(--bg-secondary);
    }
    
    .shadowing-nav .nav-btn:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    .shadowing-nav .nav-btn.primary {
      background: var(--primary);
      color: white;
      border-color: var(--primary);
    }
    
    .shadowing-nav .nav-btn.primary:hover {
      background: var(--primary-dark);
    }

    /* Memory Mode */
    .memory-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
    }
    
    .memory-card {
      aspect-ratio: 1;
      background: var(--primary);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: white;
      transition: all 0.3s;
      padding: 4px;
      text-align: center;
      word-break: break-word;
    }
    
    .memory-card.flipped { background: var(--bg-card); color: var(--text-primary); border: 2px solid var(--border-default); }
    .memory-card.matched { background: var(--success); color: white; }
    .memory-card .memory-back { font-size: 24px; }

    /* Sprint Mode */
    .sprint-timer {
      text-align: center;
      margin-bottom: 20px;
    }
    
    .sprint-time {
      font-size: 48px;
      font-weight: 700;
      color: var(--primary);
    }
    
    .sprint-score {
      font-size: 18px;
      color: var(--text-secondary);
    }
    
    .sprint-buttons {
      display: flex;
      gap: 12px;
      margin-top: 20px;
    }
    
    .sprint-btn {
      flex: 1;
      padding: 20px;
      border: none;
      border-radius: 12px;
      font-size: 18px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .sprint-btn.correct { background: var(--success); color: white; }
    .sprint-btn.wrong { background: var(--error); color: white; }
    .sprint-btn:active { transform: scale(0.95); }

    /* Method Tabs */
    .method-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 16px;
      background: var(--bg-tertiary);
      padding: 5px;
      border-radius: 14px;
      border: 1px solid var(--border-light);
    }
    
    .method-tab {
      flex: 1;
      padding: 14px 12px;
      border: none;
      border-radius: 10px;
      background: transparent;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      color: var(--text-tertiary);
    }
    
    .method-tab:hover {
      color: var(--text-secondary);
      background: rgba(255,255,255,0.1);
    }
    
    .method-tab.active {
      background: var(--bg-card);
      color: var(--primary);
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }
    
    .method-intro {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: var(--warning-bg);
      border-radius: 14px;
      margin-bottom: 16px;
      border: 1px solid rgba(245, 158, 11, 0.2);
    }
    
    .method-intro-icon { font-size: 36px; }
    .method-intro-text { font-size: 14px; color: var(--text-secondary); line-height: 1.5; font-weight: 500; }

    /* Natural Steps (Gehirngerecht) */
    .natural-steps {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .natural-step {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px;
      background: var(--bg-card);
      border: 2px solid var(--border-default);
      border-radius: 18px;
      cursor: pointer;
      transition: all 0.25s ease;
      box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    }
    
    .natural-step:hover { 
      border-color: var(--primary); 
      transform: translateX(4px);
      box-shadow: 0 4px 15px rgba(255, 107, 53, 0.12);
    }
    .natural-step.completed { 
      border-color: var(--success); 
      background: var(--success-bg);
      box-shadow: 0 2px 10px rgba(34, 197, 94, 0.1);
    }
    .natural-step.active { 
      border-color: var(--primary); 
      background: rgba(255, 107, 53, 0.1);
    }
    
    .natural-step-number {
      width: 32px;
      height: 32px;
      background: var(--bg-tertiary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      color: var(--text-secondary);
      flex-shrink: 0;
    }
    
    .natural-step.completed .natural-step-number { background: var(--success); color: white; }
    .natural-step.active .natural-step-number { background: var(--primary); color: white; }
    
    .natural-step-content { flex: 1; }
    .natural-step-icon { font-size: 22px; margin-bottom: 4px; }
    .natural-step-title { font-weight: 700; font-size: 15px; color: var(--text-primary); }
    .natural-step-desc { font-size: 13px; color: var(--text-tertiary); margin-top: 2px; }
    
    .natural-step-check {
      font-size: 22px;
      color: var(--border-default);
    }
    
    .natural-step.completed .natural-step-check { color: var(--success); }

    /* Decode Screen */
    .decode-container {
      padding: 20px;
    }
    
    .decode-sentence {
      background: var(--bg-card);
      border-radius: 16px;
      padding: 20px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-card);
    }
    
    .decode-original {
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 16px;
      line-height: 1.6;
      color: var(--text-primary);
    }
    
    .decode-word {
      display: inline-block;
      text-align: center;
      margin: 4px 2px;
      cursor: pointer;
    }
    
    .decode-word:hover { background: var(--primary-light); border-radius: 4px; }
    
    .decode-target { display: block; font-weight: 600; color: var(--primary); }
    .decode-native { display: block; font-size: 12px; color: var(--text-tertiary); }
    
    .decode-audio-btn {
      width: 100%;
      padding: 16px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    /* Passive Listen Screen */
    .passive-container {
      padding: 20px;
      text-align: center;
    }
    
    .passive-visual {
      width: 200px;
      height: 200px;
      margin: 40px auto;
      background: linear-gradient(135deg, var(--primary), #818cf8);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 64px;
      animation: pulse 2s ease-in-out infinite;
    }
    
    @keyframes pulse {
      0%, 100% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.05); opacity: 0.8; }
    }
    
    .passive-info {
      margin: 20px 0;
    }
    
    .passive-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
    .passive-subtitle { color: var(--text-tertiary); }
    
    .passive-controls {
      display: flex;
      gap: 12px;
      justify-content: center;
      margin-top: 24px;
    }
    
    .passive-btn {
      padding: 16px 32px;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
    }
    
    .passive-btn.primary { background: var(--primary); color: white; }
    .passive-btn.secondary { background: var(--bg-tertiary); color: var(--text-secondary); }

    /* Level Progress */
    .level-progress {
      background: var(--bg-secondary);
      border-radius: 14px;
      padding: 16px;
    }
    .level-header { display: flex; justify-content: space-between; margin-bottom: 10px; }
    .level-name { font-weight: 700; font-size: 1rem; }
    .level-percent { color: var(--primary); font-weight: 700; }
    .progress-bar { height: 10px; background: var(--bg-tertiary); border-radius: 5px; overflow: hidden; }
    .progress-fill { height: 100%; background: var(--gradient-warm); border-radius: 5px; transition: width 0.5s; }
    .level-stats { display: flex; justify-content: space-between; margin-top: 8px; font-size: 0.8rem; color: var(--text-tertiary); }

    /* ═══════════════════════════════════════════════════════════
       BOX-ÜBERSICHT (Leitner-System)
    ═══════════════════════════════════════════════════════════ */
    .box-overview {
      background: var(--bg-secondary);
      border-radius: 14px;
      padding: 16px;
      margin-top: 16px;
    }
    
    .box-overview-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
    }
    
    .box-overview-title {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .box-overview-help {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: var(--bg-tertiary);
      border: none;
      color: var(--text-tertiary);
      font-size: 0.75rem;
      font-weight: 700;
      cursor: pointer;
    }
    
    .box-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
    }
    
    .box-item {
      background: var(--bg-tertiary);
      border-radius: 10px;
      padding: 10px 6px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
      border: 2px solid transparent;
    }
    .box-item:active {
      transform: scale(0.95);
    }
    
    /* Light Mode Box Colors */
    [data-theme="light"] .box-item.box-1 { background: #fee2e2; border-color: #fecaca; }
    [data-theme="light"] .box-item.box-2 { background: #fef3c7; border-color: #fde68a; }
    [data-theme="light"] .box-item.box-3 { background: #d1fae5; border-color: #a7f3d0; }
    [data-theme="light"] .box-item.box-4 { background: #dbeafe; border-color: #bfdbfe; }
    [data-theme="light"] .box-item.box-5 { background: #e9d5ff; border-color: #d8b4fe; }
    
    /* Dark Mode Box Colors */
    [data-theme="dark"] .box-item.box-1 { background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.4); }
    [data-theme="dark"] .box-item.box-2 { background: rgba(245, 158, 11, 0.2); border-color: rgba(245, 158, 11, 0.4); }
    [data-theme="dark"] .box-item.box-3 { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.4); }
    [data-theme="dark"] .box-item.box-4 { background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.4); }
    [data-theme="dark"] .box-item.box-5 { background: rgba(139, 92, 246, 0.2); border-color: rgba(139, 92, 246, 0.4); }
    
    .box-item-num {
      font-weight: 700;
      font-size: 1.1rem;
      color: var(--text-primary);
    }
    
    .box-item-count {
      font-size: 0.75rem;
      color: var(--text-secondary);
      margin-top: 2px;
    }
    
    .box-item-label {
      font-size: 0.55rem;
      color: var(--text-tertiary);
      margin-top: 2px;
    }

    /* Box-Detail Modal */
    .box-detail-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.9);
      z-index: 10002;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 20px;
      animation: fadeIn 0.3s ease;
    }
    .box-detail-overlay.active { display: flex; }
    
    /* Methoden-Auswahl Dialog */
    .method-dialog-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.85);
      z-index: 10003;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .method-dialog-overlay.active { opacity: 1; }
    
    .method-dialog {
      background: var(--bg-card);
      border-radius: 24px;
      max-width: 360px;
      width: 100%;
      overflow: hidden;
      transform: scale(0.9) translateY(20px);
      transition: transform 0.3s ease;
    }
    .method-dialog-overlay.active .method-dialog {
      transform: scale(1) translateY(0);
    }
    
    .method-dialog-header {
      background: linear-gradient(135deg, var(--primary), #7c3aed);
      color: white;
      padding: 20px 24px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    
    .method-dialog-header h3 {
      margin: 0;
      font-size: 1.2rem;
      font-weight: 700;
    }
    
    .method-dialog-close {
      background: rgba(255,255,255,0.2);
      border: none;
      color: white;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      font-size: 1.3rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .method-dialog-close:hover { background: rgba(255,255,255,0.3); }
    
    .method-dialog-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      padding: 20px;
    }
    
    .method-dialog-option {
      background: var(--bg-secondary);
      border: 2px solid var(--border-light);
      border-radius: 16px;
      padding: 16px 12px;
      text-align: center;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .method-dialog-option:hover {
      border-color: var(--primary);
      background: var(--primary-light);
      transform: translateY(-2px);
    }
    
    .method-dialog-option:active {
      transform: scale(0.97);
    }
    
    .method-dialog-icon {
      font-size: 2rem;
      margin-bottom: 8px;
    }
    
    .method-dialog-name {
      font-weight: 600;
      font-size: 0.95rem;
      color: var(--text-primary);
      margin-bottom: 2px;
    }
    
    .method-dialog-desc {
      font-size: 0.75rem;
      color: var(--text-tertiary);
    }

    .box-detail-card {
      background: var(--bg-card);
      border-radius: 24px;
      max-width: 400px;
      width: 100%;
      max-height: calc(100vh - 80px);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      animation: slideUp 0.4s ease;
    }

    .box-detail-header {
      padding: 20px 24px;
      color: white;
      flex-shrink: 0;
    }
    .box-detail-header.box-1 { background: linear-gradient(135deg, #ef4444, #f87171); }
    .box-detail-header.box-2 { background: linear-gradient(135deg, #f59e0b, #fbbf24); }
    .box-detail-header.box-3 { background: linear-gradient(135deg, #10b981, #34d399); }
    .box-detail-header.box-4 { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
    .box-detail-header.box-5 { background: linear-gradient(135deg, #8b5cf6, #a78bfa); }

    .box-detail-title {
      font-size: 1.3rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .box-detail-subtitle {
      font-size: 0.9rem;
      opacity: 0.9;
      margin-top: 4px;
    }

    .box-detail-content {
      padding: 0;
      overflow-y: auto;
      flex: 1;
      -webkit-overflow-scrolling: touch;
    }

    .box-vocab-list {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .box-vocab-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 24px;
      border-bottom: 1px solid var(--border-light);
    }
    .box-vocab-item:last-child { border-bottom: none; }
    
    .box-vocab-target {
      font-weight: 600;
      color: var(--text-primary);
    }
    
    .box-vocab-native {
      font-size: 0.9rem;
      color: var(--text-tertiary);
      text-align: right;
    }

    .box-detail-footer {
      padding: 16px 24px 24px;
      flex-shrink: 0;
      border-top: 1px solid var(--border-light);
      display: flex;
      gap: 12px;
    }
    
    .box-detail-btn {
      flex: 1;
      padding: 14px;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
    }
    .box-detail-btn-close {
      background: var(--bg-tertiary);
      color: var(--text-secondary);
    }
    .box-detail-btn-learn {
      background: var(--success);
      color: white;
    }
    
    .box-empty-message {
      text-align: center;
      padding: 40px 20px;
      color: var(--text-tertiary);
    }
    .box-empty-icon {
      font-size: 3rem;
      margin-bottom: 12px;
    }

    /* ═══════════════════════════════════════════════════════════
       BILD-HÖR-MODUS (Rosetta Stone Style)
    ═══════════════════════════════════════════════════════════ */
    .picture-listen-container {
      padding: 20px;
      text-align: center;
    }
    
    .picture-listen-prompt {
      font-size: 1.1rem;
      color: var(--text-secondary);
      margin-bottom: 20px;
    }
    
    .picture-listen-word {
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 24px;
    }
    
    .picture-listen-audio-btn {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: var(--gradient-warm);
      border: none;
      font-size: 2rem;
      color: white;
      cursor: pointer;
      margin-bottom: 30px;
      box-shadow: 0 4px 15px rgba(255,107,53,0.3);
      transition: all 0.2s;
    }
    .picture-listen-audio-btn:active {
      transform: scale(0.95);
    }
    .picture-listen-audio-btn.playing,
    .picture-listen-audio-btn.audio-playing {
      animation: audioPulse 0.8s ease-in-out infinite;
    }
    
    .picture-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 12px;
      max-width: 340px;
      margin: 0 auto;
    }
    
    .picture-option {
      aspect-ratio: 1;
      border-radius: var(--radius-lg);
      overflow: hidden;
      cursor: pointer;
      border: 3px solid var(--border-light);
      transition: all 0.2s;
      position: relative;
      background: var(--bg-card);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 8px;
    }
    .picture-option:active {
      transform: scale(0.98);
    }
    .picture-option img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .picture-option .picture-emoji {
      font-size: 2.8rem;
      margin-bottom: 8px;
    }
    .picture-option .picture-label {
      font-size: 11px;
      font-weight: 600;
      color: var(--text-secondary);
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
      text-align: center;
      line-height: 1.3;
      max-width: 100%;
    }
    .picture-option.selected {
      border-color: var(--brand-primary);
      box-shadow: 0 0 0 3px rgba(255,107,53,0.3);
    }
    .picture-option.correct {
      border-color: var(--success);
      background: var(--success-bg);
    }
    .picture-option.wrong {
      border-color: var(--error);
      background: var(--danger-light);
    }
    
    .picture-option-label {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background: rgba(0,0,0,0.75);
      color: white;
      padding: 10px 6px;
      font-size: 11px;
      font-weight: 600;
      display: none;
      word-wrap: break-word;
      line-height: 1.3;
    }
    .picture-option.correct .picture-option-label,
    .picture-option.wrong .picture-option-label {
      display: block;
    }

    /* ═══════════════════════════════════════════════════════════
       LEARN SCREEN
    ═══════════════════════════════════════════════════════════ */
    .learn-screen { background: var(--bg-secondary); }

    .learn-header {
      background: var(--bg-card);
      padding: 14px 20px;
      display: flex;
      align-items: center;
      gap: 12px;
      border-bottom: 1px solid var(--border-light);
    }

    .back-btn {
      width: 40px;
      height: 40px;
      border: none;
      background: var(--bg-tertiary);
      border-radius: 10px;
      font-size: 1.2rem;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-primary);
    }

    .progress-dots {
      flex: 1;
      display: flex;
      gap: 3px;
      justify-content: center;
      flex-wrap: wrap;
    }

    .progress-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--bg-tertiary);
    }
    .progress-dot.done { background: var(--success); }
    .progress-dot.current { background: var(--primary); width: 20px; border-radius: 4px; }
    .progress-dot.wrong { background: var(--danger); }
    .progress-dot.retry { background: var(--warning); }

    .learn-content {
      flex: 1;
      display: flex;
      flex-direction: column;
      padding: 20px;
      overflow: hidden;
    }

    /* Flashcard */
    .flashcard-area {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      perspective: 1000px;
    }

    .flashcard {
      position: relative;
      width: 100%;
      height: 260px;
      transform-style: preserve-3d;
      transition: transform 0.5s;
      cursor: pointer;
    }
    .flashcard.flipped { transform: rotateY(180deg); }

    .flashcard-face {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      border-radius: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 20px;
      text-align: center;
    }

    .flashcard-front {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      color: white;
    }

    .flashcard-back {
      background: var(--bg-card);
      border: 3px solid var(--primary);
      transform: rotateY(180deg);
    }

    .card-word {
      font-size: 2rem;
      font-weight: 700;
      margin-bottom: 8px;
      line-height: 1.3;
      color: var(--text-primary);
    }
    .card-word.arabic { font-family: 'Noto Sans Arabic', sans-serif; font-size: 2.5rem; }

    .card-translit { font-size: 1rem; opacity: 0.85; font-style: italic; }
    .card-hint { position: absolute; bottom: 16px; font-size: 0.85rem; opacity: 0.7; }

    /* Bilder in Lernmodi */
    .card-image {
      width: 100px;
      height: 100px;
      margin-bottom: 12px;
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255,255,255,0.15);
    }
    
    .card-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .flashcard-back .card-image {
      background: var(--bg-tertiary);
    }
    
    .quiz-image {
      width: 80px;
      height: 80px;
      margin: 0 auto 12px;
      border-radius: 10px;
      overflow: hidden;
      background: rgba(255,255,255,0.2);
    }
    
    .quiz-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .write-image {
      width: 80px;
      height: 80px;
      margin: 0 auto 12px;
      border-radius: 10px;
      overflow: hidden;
      background: var(--bg-tertiary);
    }
    
    .write-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .audio-btn {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 44px;
      height: 44px;
      border: none;
      background: rgba(255,255,255,0.2);
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    /* SVG Audio Icon für bessere Kompatibilität */
    .audio-btn .audio-icon,
    .audio-icon-svg {
      width: 24px;
      height: 24px;
      fill: currentColor;
    }
    
    .audio-btn:active {
      transform: scale(0.9);
    }
    .audio-btn.loading {
      animation: audioPulse 0.8s ease infinite;
    }
    body.rtl .audio-btn { right: auto; left: 14px; }

    /* Audio Button Loading State - Dezenter Lade-Ring um den Button */
    .audio-btn.audio-loading,
    .speak-btn.audio-loading,
    .decode-audio-btn.audio-loading,
    .picture-audio-btn.audio-loading,
    .picture-listen-audio-btn.audio-loading,
    .nl-audio-btn.audio-loading,
    .natural-audio-btn.audio-loading,
    .listen-play-btn.audio-loading,
    [onclick*="playAudio"].audio-loading {
      position: relative;
      pointer-events: none;
    }
    
    /* Lade-Ring um das Icon */
    .audio-btn.audio-loading::after,
    .speak-btn.audio-loading::after,
    .decode-audio-btn.audio-loading::after,
    .picture-audio-btn.audio-loading::after,
    .picture-listen-audio-btn.audio-loading::after,
    .nl-audio-btn.audio-loading::after,
    .natural-audio-btn.audio-loading::after,
    .listen-play-btn.audio-loading::after,
    [onclick*="playAudio"].audio-loading::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(100% + 8px);
      height: calc(100% + 8px);
      margin-top: calc(-50% - 4px);
      margin-left: calc(-50% - 4px);
      border: 2px solid transparent;
      border-top-color: var(--primary, #FF7A59);
      border-right-color: var(--primary, #FF7A59);
      border-radius: 50%;
      animation: audioRingSpin 0.7s linear infinite;
      pointer-events: none;
    }
    
    /* Halber Ring für eleganteres Aussehen */
    .audio-btn.audio-loading::before,
    .speak-btn.audio-loading::before,
    .decode-audio-btn.audio-loading::before,
    .picture-audio-btn.audio-loading::before,
    .picture-listen-audio-btn.audio-loading::before,
    .nl-audio-btn.audio-loading::before,
    .natural-audio-btn.audio-loading::before,
    .listen-play-btn.audio-loading::before {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(100% + 8px);
      height: calc(100% + 8px);
      margin-top: calc(-50% - 4px);
      margin-left: calc(-50% - 4px);
      border: 2px solid rgba(255, 122, 89, 0.2);
      border-radius: 50%;
      pointer-events: none;
    }
    
    @keyframes audioRingSpin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    /* Pulsieren während Wiedergabe */
    .audio-btn.audio-playing,
    .speak-btn.audio-playing,
    .decode-audio-btn.audio-playing,
    .picture-audio-btn.audio-playing,
    .picture-listen-audio-btn.audio-playing,
    .nl-audio-btn.audio-playing,
    .natural-audio-btn.audio-playing,
    .listen-play-btn.audio-playing,
    [onclick*="playAudio"].audio-playing {
      animation: audioPulse 0.8s ease-in-out infinite;
    }
    
    /* Pulsierendes Glow während Wiedergabe */
    .audio-btn.audio-playing::after,
    .speak-btn.audio-playing::after,
    .decode-audio-btn.audio-playing::after,
    .picture-audio-btn.audio-playing::after,
    .picture-listen-audio-btn.audio-playing::after,
    .nl-audio-btn.audio-playing::after,
    .natural-audio-btn.audio-playing::after,
    .listen-play-btn.audio-playing::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: calc(100% + 12px);
      height: calc(100% + 12px);
      margin-top: calc(-50% - 6px);
      margin-left: calc(-50% - 6px);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(255, 122, 89, 0.3) 0%, transparent 70%);
      animation: audioGlowPulse 0.8s ease-in-out infinite;
      pointer-events: none;
    }

    @keyframes audioPulse {
      0%, 100% { 
        transform: scale(1); 
        opacity: 1;
      }
      50% { 
        transform: scale(1.1); 
        opacity: 0.85;
      }
    }
    
    @keyframes audioGlowPulse {
      0%, 100% { 
        opacity: 0.5;
        transform: translate(-50%, -50%) scale(1);
      }
      50% { 
        opacity: 0.8;
        transform: translate(-50%, -50%) scale(1.15);
      }
    }

    .answer-buttons {
      display: flex;
      gap: 12px;
      margin-top: 20px;
    }

    .answer-btn {
      flex: 1;
      padding: 18px;
      border: none;
      border-radius: 14px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .answer-btn:active { transform: scale(0.95); }
    .answer-btn.wrong { background: var(--danger-light); color: var(--danger); }
    .answer-btn.correct { background: var(--success-light); color: var(--success); }

    /* Quiz */
    .quiz-area { flex: 1; display: flex; flex-direction: column; }

    .quiz-question {
      background: linear-gradient(135deg, var(--primary), var(--primary-dark));
      border-radius: 20px;
      padding: 30px 20px;
      text-align: center;
      color: white;
      margin-bottom: 20px;
      position: relative;
    }

    .quiz-word { font-size: 1.8rem; font-weight: 700; margin-bottom: 6px; }
    .quiz-word.arabic { font-family: 'Noto Sans Arabic', sans-serif; font-size: 2.2rem; }
    .quiz-translit { font-size: 0.95rem; opacity: 0.85; }

    .quiz-options { display: flex; flex-direction: column; gap: 10px; }

    .quiz-option {
      padding: 16px 18px;
      background: var(--bg-card);
      border: 2px solid var(--border-default);
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      color: var(--text-primary);
    }
    body.rtl .quiz-option { text-align: right; }
    .quiz-option:active { transform: scale(0.98); }
    .quiz-option.correct { border-color: var(--success); background: var(--success-light); }
    .quiz-option.wrong { border-color: var(--danger); background: var(--danger-light); }

    /* Write */
    .write-area { flex: 1; display: flex; flex-direction: column; }

    .write-prompt {
      background: var(--bg-secondary);
      border-radius: 16px;
      padding: 24px;
      text-align: center;
      margin-bottom: 20px;
    }
    .write-label { font-size: 0.85rem; color: var(--text-tertiary); margin-bottom: 6px; }
    .write-word { font-size: 1.6rem; font-weight: 700; }

    .write-input {
      width: 100%;
      padding: 18px;
      border: 3px solid var(--border-light);
      border-radius: 14px;
      font-size: 1.4rem;
      text-align: center;
      font-weight: 600;
    }
    .write-input:focus { outline: none; border-color: var(--primary); }
    .write-input.correct { border-color: var(--success); background: var(--success-light); }
    .write-input.wrong { border-color: var(--danger); background: var(--danger-light); }
    .write-input.arabic { font-family: 'Noto Sans Arabic', sans-serif; direction: rtl; }

    .write-feedback { text-align: center; margin-top: 14px; font-size: 0.95rem; min-height: 24px; }
    .write-feedback.correct { color: var(--success); }
    .write-feedback.wrong { color: var(--danger); }

    .check-btn {
      margin-top: auto;
      padding: 16px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 700;
      cursor: pointer;
    }
    .check-btn:disabled { background: var(--bg-tertiary); }

    /* ═══════════════════════════════════════════════════════════
       RETRY SCREEN
    ═══════════════════════════════════════════════════════════ */
    .retry-intro {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 30px;
    }

    .retry-icon { font-size: 4rem; margin-bottom: 16px; }
    .retry-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; }
    .retry-subtitle { color: var(--text-tertiary); margin-bottom: 24px; }
    .retry-btn {
      background: var(--warning);
      color: white;
      padding: 16px 40px;
      border: none;
      border-radius: 30px;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
    }

    /* ═══════════════════════════════════════════════════════════
       COMPLETE SCREEN
    ═══════════════════════════════════════════════════════════ */
    .complete-screen {
      justify-content: center;
      align-items: center;
      padding: 30px;
      text-align: center;
      background: linear-gradient(180deg, var(--primary), var(--primary-dark));
      color: white;
    }

    .complete-icon { font-size: 4rem; margin-bottom: 16px; animation: bounce 0.5s ease; }
    @keyframes bounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }

    .complete-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 6px; }
    .complete-subtitle { font-size: 1rem; opacity: 0.9; margin-bottom: 28px; }

    .complete-stats { display: flex; gap: 20px; margin-bottom: 32px; }
    .complete-stat { text-align: center; }
    .complete-stat-value { font-size: 2.2rem; font-weight: 800; }
    .complete-stat-label { font-size: 0.85rem; opacity: 0.8; }

    .complete-btn {
      background: white;
      color: var(--primary);
      padding: 16px 50px;
      border: none;
      border-radius: 30px;
      font-size: 1.1rem;
      font-weight: 700;
      cursor: pointer;
    }

    /* Confetti */
    .confetti {
      position: fixed;
      width: 10px;
      height: 10px;
      top: -10px;
      animation: confetti-fall 3s ease-out forwards;
    }
    @keyframes confetti-fall {
      to { top: 110%; transform: rotate(720deg); }
    }

    /* ═══════════════════════════════════════════════════════════════════
       PROFILE SCREEN - 2026 Design mit Theme Toggle
    ═══════════════════════════════════════════════════════════════════ */
    .profile-screen { 
      background: var(--bg-secondary); 
      padding: var(--space-5); 
      overflow-y: auto;
      transition: background-color var(--duration-normal) var(--ease-out);
    }

    .profile-header {
      background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-dark));
      border-radius: var(--radius-xl);
      padding: var(--space-6);
      text-align: center;
      color: white;
      margin-bottom: var(--space-5);
      box-shadow: var(--shadow-lg);
    }

    .profile-avatar-large {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      background: white;
      margin: 0 auto var(--space-3);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      overflow: hidden;
      box-shadow: var(--shadow-md);
    }
    .profile-avatar-large img { width: 100%; height: 100%; object-fit: cover; }

    .profile-name { font-size: 1.4rem; font-weight: 700; margin-bottom: 4px; }
    .profile-email { opacity: 0.9; font-size: 0.9rem; }

    /* Theme Toggle */
    .theme-toggle-section {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      margin-bottom: var(--space-4);
      border: 1px solid var(--border-light);
      transition: all var(--duration-normal) var(--ease-out);
    }
    
    /* Trainer Section (v2.0.9.18) */
    .trainer-section-wrapper {
      margin-bottom: var(--space-4);
    }
    
    .trainer-section-title {
      font-size: 1rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: var(--space-3);
    }
    
    .trainer-section {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      border: 1px solid var(--border-light);
      overflow: hidden;
    }
    
    .trainer-current {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px;
      cursor: pointer;
      transition: background 0.2s;
    }
    
    .trainer-current:hover {
      background: var(--bg-secondary);
    }
    
    .trainer-current:active {
      transform: scale(0.99);
    }
    
    .trainer-current-avatar {
      width: 56px;
      height: 56px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--bg-tertiary);
      flex-shrink: 0;
    }
    
    .trainer-current-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .trainer-current-info {
      flex: 1;
    }
    
    .trainer-current-name {
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--text-primary);
    }
    
    .trainer-current-hint {
      font-size: 0.85rem;
      color: var(--text-tertiary);
      margin-top: 2px;
    }
    
    .trainer-current-arrow {
      font-size: 1.5rem;
      color: var(--text-tertiary);
    }
    
    /* Trainer Modal */
    .trainer-modal-content {
      max-height: 80vh;
      overflow-y: auto;
    }
    
    .trainer-modal-subtitle {
      color: var(--text-secondary);
      font-size: 0.9rem;
      margin-bottom: 16px;
      text-align: center;
    }
    
    .trainer-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .trainer-option-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      background: var(--bg-secondary);
      border: 2px solid var(--border-light);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .trainer-option-card:hover {
      border-color: var(--primary);
      background: var(--bg-tertiary);
    }
    
    .trainer-option-card.selected {
      border-color: var(--primary);
      background: rgba(255, 107, 53, 0.1);
    }
    
    .trainer-option-avatar {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--bg-tertiary);
      flex-shrink: 0;
      position: relative;
    }
    
    .trainer-option-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .trainer-generating {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(0,0,0,0.5);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }
    
    .trainer-option-info {
      flex: 1;
    }
    
    .trainer-option-name {
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--text-primary);
    }
    
    .trainer-option-origin {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-top: 2px;
    }
    
    .trainer-option-personality {
      font-size: 0.8rem;
      color: var(--text-tertiary);
      margin-top: 4px;
      font-style: italic;
    }
    
    .trainer-option-check {
      width: 28px;
      height: 28px;
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
    }
    
    /* ═══ Trainer Selection Modal (Sprachwechsel) ═══ */
    .trainer-selection-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    
    .trainer-selection-card {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px;
      background: var(--bg-secondary);
      border: 2px solid var(--border-light);
      border-radius: 16px;
      cursor: pointer;
      transition: all 0.2s;
    }
    
    .trainer-selection-card:hover {
      border-color: var(--primary);
      background: var(--bg-tertiary);
    }
    
    .trainer-selection-card.selected {
      border-color: var(--primary);
      background: rgba(255, 107, 53, 0.15);
      box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.2);
    }
    
    .trainer-selection-avatar {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--bg-tertiary);
      flex-shrink: 0;
    }
    
    .trainer-selection-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .trainer-selection-info {
      flex: 1;
    }
    
    .trainer-selection-name {
      font-weight: 600;
      font-size: 1.1rem;
      color: var(--text-primary);
    }
    
    .trainer-selection-desc {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-top: 2px;
    }
    
    .theme-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .theme-toggle-label {
      display: flex;
      align-items: center;
      gap: var(--space-3);
    }
    
    .theme-toggle-icon {
      font-size: 1.3rem;
    }
    
    .theme-toggle-text {
      font-weight: 600;
      color: var(--text-primary);
    }
    
    .theme-toggle-switch {
      position: relative;
      width: 56px;
      height: 30px;
      background: var(--bg-tertiary);
      border-radius: var(--radius-full);
      cursor: pointer;
      transition: all var(--duration-normal) var(--ease-out);
      border: 2px solid var(--border-default);
    }
    
    .theme-toggle-switch::after {
      content: '';
      position: absolute;
      top: 2px;
      left: 2px;
      width: 22px;
      height: 22px;
      background: white;
      border-radius: 50%;
      transition: all var(--duration-normal) var(--ease-spring);
      box-shadow: var(--shadow-sm);
    }
    
    .theme-toggle-switch.dark {
      background: var(--brand-primary);
      border-color: var(--brand-primary);
    }
    
    .theme-toggle-switch.dark::after {
      transform: translateX(26px);
    }

    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-3);
      margin-bottom: var(--space-5);
    }

    .stat-card {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      text-align: center;
      border: 1px solid var(--border-light);
      transition: all var(--duration-normal) var(--ease-out);
    }
    .stat-value { font-size: 1.8rem; font-weight: 800; color: var(--brand-primary); }
    .stat-label { font-size: 0.8rem; color: var(--text-tertiary); margin-top: 2px; }

    .level-selector {
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      padding: var(--space-4);
      margin-bottom: var(--space-5);
      border: 1px solid var(--border-light);
      transition: all var(--duration-normal) var(--ease-out);
    }
    
    .level-selector-title {
      font-size: 0.8rem;
      color: var(--text-tertiary);
      margin-bottom: var(--space-3);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 600;
    }
    
    .level-options {
      display: flex;
      gap: var(--space-2);
      flex-wrap: wrap;
    }
    
    .level-option {
      flex: 1;
      min-width: 50px;
      padding: var(--space-3) var(--space-2);
      border: 2px solid var(--border-default);
      border-radius: var(--radius-sm);
      background: var(--bg-secondary);
      font-weight: 600;
      cursor: pointer;
      transition: all var(--duration-fast);
      color: var(--text-primary);
    }
    
    .level-option:hover:not(.locked):not(.active) {
      border-color: var(--brand-primary);
      background: rgba(255, 107, 53, 0.1);
    }
    
    .level-option.active {
      border-color: var(--brand-primary);
      background: var(--brand-primary);
      color: white;
    }
    
    .level-option.locked {
      opacity: 0.5;
      cursor: not-allowed;
      background: var(--bg-tertiary);
    }
    
    .level-option.empty {
      opacity: 0.4;
      cursor: not-allowed;
      background: var(--bg-secondary);
      border-style: dashed;
      color: var(--text-muted);
    }
    
    .level-option.empty:hover {
      border-color: var(--border-default);
      background: var(--bg-secondary);
    }
    
    /* Business Level Button (C1+) */
    .level-option-business {
      background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
      color: white !important;
      border: none !important;
      font-weight: 600;
    }
    
    .level-option-business:hover {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
    }
    
    /* Business Button im Einstufungstest */
    .level-select-business {
      background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
      border: none !important;
    }
    
    .level-select-business .level-select-level {
      color: white;
    }
    
    .level-select-business .level-select-desc {
      color: rgba(255,255,255,0.9);
    }
    
    .level-hint {
      font-size: 0.75rem;
      color: var(--text-muted);
      margin-top: var(--space-3);
      text-align: center;
    }

    .subscription-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: var(--space-3);
      padding: var(--space-4);
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      border: none;
      border-radius: var(--radius-lg);
      color: white;
      cursor: pointer;
      margin-bottom: var(--space-3);
      box-shadow: var(--shadow-md);
      transition: all var(--duration-normal) var(--ease-out);
    }
    
    .subscription-btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-lg);
    }
    
    .subscription-btn-icon { font-size: 24px; }
    .subscription-btn-text { flex: 1; text-align: left; font-weight: 600; }
    .subscription-btn-badge {
      background: rgba(255,255,255,0.2);
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-full);
      font-size: 0.75rem;
      font-weight: 600;
    }

    /* Subscription Screen */
    .subscription-screen {
      padding: 20px;
      padding-bottom: 100px;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    
    .subscription-title {
      font-size: 24px;
      font-weight: 700;
      margin-bottom: 20px;
      text-align: center;
    }
    
    .current-plan {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      background: var(--bg-tertiary);
      border-radius: 12px;
      margin-bottom: 24px;
    }
    
    .current-plan-badge {
      background: var(--primary);
      color: white;
      padding: 8px 16px;
      border-radius: 8px;
      font-weight: 700;
      font-size: 14px;
    }
    
    .current-plan-badge.basic { background: #10b981; }
    .current-plan-badge.premium { background: #f59e0b; }
    
    .current-plan-name { font-weight: 600; }
    .current-plan-expires { font-size: 12px; color: var(--text-tertiary); }
    
    .plans-container {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .plan-card {
      background: var(--bg-card);
      border: 2px solid var(--border-default);
      border-radius: 16px;
      padding: 20px;
      position: relative;
    }
    
    .plan-card.featured {
      border-color: var(--primary);
      box-shadow: 0 4px 20px rgba(99, 102, 241, 0.2);
    }
    
    .plan-card.current {
      border-color: var(--success);
      background: var(--success-bg);
    }
    
    .plan-badge {
      position: absolute;
      top: -10px;
      right: 20px;
      background: var(--primary);
      color: white;
      padding: 4px 12px;
      border-radius: 20px;
      font-size: 12px;
      font-weight: 600;
    }
    
    .plan-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .plan-name {
      font-size: 20px;
      font-weight: 700;
    }
    
    .plan-price {
      font-size: 24px;
      font-weight: 700;
      color: var(--primary);
    }
    
    .plan-price span {
      font-size: 14px;
      font-weight: 400;
      color: var(--text-tertiary);
    }
    
    .plan-features {
      list-style: none;
      padding: 0;
      margin: 0 0 16px 0;
    }
    
    .plan-features li {
      padding: 8px 0;
      border-bottom: 1px solid var(--border-light);
      font-size: 14px;
    }
    
    .plan-features li:last-child { border-bottom: none; }
    
    .plan-btn {
      width: 100%;
      padding: 12px;
      border: 2px solid var(--border-default);
      border-radius: 8px;
      background: var(--bg-card);
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      color: var(--text-primary);
    }
    
    .plan-btn:hover { border-color: var(--primary); }
    
    .plan-btn.primary {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }
    
    .plan-btn.current {
      background: var(--success);
      border-color: var(--success);
      color: white;
      cursor: default;
    }
    
    .subscription-note {
      text-align: center;
      font-size: 12px;
      color: var(--text-tertiary);
      margin-top: 20px;
    }

    /* Admin Button */
    .admin-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%);
      border: none;
      border-radius: 12px;
      color: white;
      cursor: pointer;
      margin-bottom: 12px;
    }

    /* Admin Dashboard */
    .admin-screen { padding: 20px; padding-bottom: 100px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
    .admin-title { font-size: 24px; font-weight: 700; margin-bottom: 20px; }
    
    /* Admin Tabs */
    .admin-tabs {
      display: flex;
      gap: 6px;
      margin-bottom: 20px;
      background: var(--bg-tertiary);
      border-radius: 12px;
      padding: 6px;
      overflow-x: auto;
      overflow-y: visible;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
      scrollbar-color: var(--border-default) transparent;
      min-height: 70px; /* Feste Mindesthöhe für 2 Zeilen */
    }
    
    .admin-tabs::-webkit-scrollbar {
      height: 4px;
    }
    
    .admin-tabs::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .admin-tabs::-webkit-scrollbar-thumb {
      background: var(--border-default);
      border-radius: 2px;
    }
    
    .admin-tab {
      flex: 0 0 auto;
      padding: 8px 14px;
      border: none;
      background: var(--bg-tertiary);
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      border-radius: 8px;
      transition: all 0.2s;
      white-space: nowrap;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      min-width: 55px;
      height: 58px; /* Feste Höhe */
    }
    
    .admin-tab:hover {
      background: var(--bg-secondary);
    }
    
    .admin-tab-icon {
      font-size: 22px;
      line-height: 1;
    }
    
    .admin-tab-label {
      font-size: 9px;
      text-transform: uppercase;
      letter-spacing: 0.3px;
      line-height: 1;
    }
    
    .admin-tab.active {
      background: var(--bg-card);
      color: var(--primary);
      box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    }
    
    .admin-tab-content { display: none; }
    .admin-tab-content.active { display: block; }
    
    /* KI-Tools Untermenü-Tabs (v2.0.9.65) */
    .ai-subtab {
      flex: 1;
      min-width: 80px;
      padding: 10px 12px;
      border: none;
      background: var(--gray-100);
      color: var(--gray-600);
      font-size: 12px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.2s;
      white-space: nowrap;
    }
    .ai-subtab:hover {
      background: var(--gray-200);
    }
    .ai-subtab.active {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    .ai-subcontent {
      display: none;
    }
    .ai-subcontent.active {
      display: block;
    }
    
    .admin-cards {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }
    
    .admin-card {
      background: var(--bg-card);
      border-radius: 12px;
      padding: 16px;
      box-shadow: var(--shadow-card);
    }
    
    .admin-card-title { font-size: 12px; color: var(--text-tertiary); margin-bottom: 8px; }
    .admin-card-value { font-size: 28px; font-weight: 700; color: var(--primary); }
    .admin-card-sub { font-size: 11px; color: var(--text-tertiary); margin-top: 4px; }
    
    .admin-section {
      background: var(--bg-card);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
      box-shadow: var(--shadow-card);
    }
    
    .admin-section h3 { font-size: 14px; margin-bottom: 12px; color: var(--text-secondary); }
    
    /* Trainer Status Grid */
    .trainer-status-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 16px;
    }
    
    .trainer-status-lang {
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 12px;
      border: 1px solid var(--border-light);
    }
    
    .trainer-status-header {
      font-weight: 600;
      font-size: 0.95rem;
      margin-bottom: 8px;
      color: var(--text-primary);
    }
    
    .trainer-status-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      font-size: 0.85rem;
      border-bottom: 1px solid var(--border-light);
    }
    
    .trainer-status-item:last-child {
      border-bottom: none;
    }
    
    .trainer-status-item.has-avatar {
      color: var(--success);
    }
    
    .trainer-status-item.no-avatar {
      color: var(--text-tertiary);
    }
    
    .trainer-status-id {
      font-size: 0.7rem;
      color: var(--text-tertiary);
      margin-left: auto;
    }
    
    /* Modul-Einstellungen Grid */
    .module-settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 12px;
    }
    
    .module-setting-card {
      background: var(--bg-secondary);
      border: 2px solid var(--border-light);
      border-radius: 12px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all 0.2s;
    }
    
    [data-theme="light"] .module-setting-card.enabled {
      border-color: var(--success);
      background: #f0fdf4;
    }
    [data-theme="dark"] .module-setting-card.enabled {
      border-color: var(--success);
      background: rgba(16, 185, 129, 0.15);
    }
    
    .module-setting-card.disabled {
      border-color: var(--border-default);
      background: var(--bg-tertiary);
      opacity: 0.7;
    }
    
    .module-setting-icon {
      font-size: 2rem;
      width: 50px;
      text-align: center;
    }
    
    .module-setting-info {
      flex: 1;
    }
    
    .module-setting-name {
      font-weight: 600;
      color: var(--text-primary);
      margin-bottom: 2px;
    }
    
    .module-setting-desc {
      font-size: 0.8rem;
      color: var(--text-tertiary);
    }
    
    .module-setting-toggle {
      position: relative;
      width: 50px;
      height: 28px;
    }
    
    .module-setting-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    
    .module-setting-toggle .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--bg-tertiary);
      border-radius: 28px;
      transition: 0.3s;
    }
    
    .module-setting-toggle .slider:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      border-radius: 50%;
      transition: 0.3s;
    }
    
    .module-setting-toggle input:checked + .slider {
      background-color: var(--success);
    }
    
    .module-setting-toggle input:checked + .slider:before {
      transform: translateX(22px);
    }
    
    .module-content-stats {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 10px;
    }
    
    .module-stat-card {
      background: var(--bg-secondary);
      border-radius: 10px;
      padding: 12px;
      text-align: center;
    }
    
    .module-stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--primary);
    }
    
    .module-stat-label {
      font-size: 0.75rem;
      color: var(--text-tertiary);
      margin-top: 4px;
    }
    
    .admin-btn-primary {
      background: linear-gradient(135deg, var(--primary), #7c3aed);
      color: white;
      border: none;
      padding: 14px 28px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s;
    }
    
    .admin-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    }
    
    .admin-btn-secondary {
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border: 1px solid var(--border-default);
      padding: 14px 28px;
      border-radius: 10px;
      font-weight: 600;
      cursor: pointer;
      font-size: 1rem;
      transition: all 0.2s;
    }
    
    .admin-btn-secondary:hover {
      background: var(--bg-tertiary);
    }
    
    /* Globale Sprach/Level-Einstellungen */
    .global-settings-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 12px;
      max-height: 400px;
      overflow-y: auto;
    }
    
    .global-lang-card {
      background: var(--bg-card);
      border: 2px solid var(--border-default);
      border-radius: 12px;
      padding: 12px;
    }
    
    .global-lang-card.disabled {
      opacity: 0.6;
      background: var(--bg-secondary);
    }
    
    .global-lang-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .global-lang-name {
      font-weight: 600;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .global-lang-flag {
      font-size: 1.3rem;
    }
    
    .global-level-list {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    
    .global-level-chip {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 4px 8px;
      border-radius: 6px;
      font-size: 0.75rem;
      background: var(--bg-tertiary);
      cursor: pointer;
      transition: all 0.2s;
    }
    
    [data-theme="light"] .global-level-chip.enabled {
      background: #dcfce7;
      color: #166534;
    }
    [data-theme="dark"] .global-level-chip.enabled {
      background: rgba(16, 185, 129, 0.2);
      color: #34d399;
    }
    
    [data-theme="light"] .global-level-chip.disabled {
      background: #fee2e2;
      color: #991b1b;
    }
    [data-theme="dark"] .global-level-chip.disabled {
      background: rgba(239, 68, 68, 0.2);
      color: #f87171;
    }
    
    .global-level-chip:hover {
      transform: scale(1.05);
    }
    
    .admin-chart { display: flex; flex-direction: column; gap: 8px; }
    
    .admin-chart-row {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .admin-chart-label { width: 80px; font-size: 12px; }
    .admin-chart-bar {
      flex: 1;
      height: 24px;
      background: var(--bg-tertiary);
      border-radius: 4px;
      overflow: hidden;
    }
    
    .admin-chart-fill {
      height: 100%;
      background: var(--primary);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      padding-right: 8px;
      font-size: 11px;
      color: white;
      font-weight: 600;
    }
    
    .admin-list { max-height: 300px; overflow-y: auto; }
    
    .admin-list-item {
      display: flex;
      justify-content: space-between;
      padding: 8px 0;
      border-bottom: 1px solid var(--border-light);
      font-size: 13px;
    }
    
    .admin-list-item:last-child { border-bottom: none; }
    
    /* Image Admin Styles */
    .image-admin-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .image-stats-cards {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }
    
    .image-stat-card {
      background: var(--bg-secondary);
      padding: 12px;
      border-radius: 8px;
      text-align: center;
    }
    
    .image-stat-value { font-size: 20px; font-weight: 700; color: var(--primary); }
    .image-stat-label { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; }
    
    .language-image-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 12px;
    }
    
    .language-image-table th {
      text-align: left;
      padding: 8px;
      border-bottom: 2px solid var(--border-light);
      color: var(--text-secondary);
      font-weight: 600;
    }
    
    .language-image-table td {
      padding: 8px;
      border-bottom: 1px solid var(--border-light);
      vertical-align: middle;
    }
    
    .language-image-table tr:hover { background: var(--bg-secondary); }
    
    .progress-bar-small {
      width: 100%;
      height: 6px;
      background: var(--bg-tertiary);
      border-radius: 3px;
      overflow: hidden;
    }
    
    .progress-bar-small-fill {
      height: 100%;
      background: var(--success);
      transition: width 0.3s;
    }
    
    .progress-bar-small-fill.low { background: var(--danger); }
    .progress-bar-small-fill.medium { background: var(--warning); }
    .progress-bar-small-fill.overflow { background: #ff6b6b; animation: pulse-overflow 1s ease-in-out infinite; }
    
    @keyframes pulse-overflow {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.7; }
    }
    
    .btn-small {
      padding: 4px 8px;
      font-size: 11px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-weight: 500;
    }
    
    .btn-small.primary { background: var(--primary); color: white; }
    .btn-small.success { background: var(--success); color: white; }
    .btn-small.warning { background: var(--warning); color: white; }
    .btn-small.danger { background: var(--danger); color: white; }
    .btn-small:disabled { opacity: 0.5; cursor: not-allowed; }
    
    .job-status {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 2px 8px;
      border-radius: 10px;
      font-size: 10px;
      font-weight: 600;
    }
    
    /* Light Mode Job Status */
    [data-theme="light"] .job-status.running { background: #dbeafe; color: #1d4ed8; }
    [data-theme="light"] .job-status.completed { background: #dcfce7; color: #15803d; }
    [data-theme="light"] .job-status.pending { background: #fef3c7; color: #b45309; }
    [data-theme="light"] .job-status.error { background: #fee2e2; color: #dc2626; }
    
    /* Dark Mode Job Status */
    [data-theme="dark"] .job-status.running { background: rgba(59, 130, 246, 0.25); color: #60a5fa; }
    [data-theme="dark"] .job-status.completed { background: rgba(16, 185, 129, 0.25); color: #34d399; }
    [data-theme="dark"] .job-status.pending { background: rgba(245, 158, 11, 0.25); color: #fbbf24; }
    [data-theme="dark"] .job-status.error { background: rgba(239, 68, 68, 0.25); color: #f87171; }
    
    .job-status .spinner {
      width: 10px;
      height: 10px;
      border: 2px solid currentColor;
      border-top-color: transparent;
      border-radius: 50%;
      animation: spin 1s linear infinite;
    }
    
    /* Test Generator */
    .test-generator {
      border: 2px dashed var(--primary);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
    }
    [data-theme="light"] .test-generator {
      background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    }
    [data-theme="dark"] .test-generator {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.15));
    }
    
    .test-generator h4 {
      margin: 0 0 12px 0;
      color: var(--primary);
      font-size: 14px;
    }
    
    .test-form {
      display: grid;
      grid-template-columns: 1fr 1fr auto auto;
      gap: 8px;
      align-items: end;
    }
    
    .test-form select, .test-form input {
      padding: 8px;
      border: 1px solid var(--border-default);
      border-radius: 6px;
      font-size: 13px;
    }
    
    .test-form label {
      font-size: 11px;
      color: var(--text-secondary);
      margin-bottom: 4px;
      display: block;
    }
    
    .test-results {
      margin-top: 16px;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 12px;
    }
    
    .test-result-card {
      background: var(--bg-card);
      border-radius: 8px;
      overflow: hidden;
      box-shadow: var(--shadow-card);
    }
    
    .test-result-image {
      width: 100%;
      aspect-ratio: 1;
      object-fit: cover;
      background: var(--bg-secondary);
    }
    
    .test-result-image.loading {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      animation: pulse 1.5s infinite;
    }
    
    @keyframes pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    
    .test-result-info {
      padding: 8px;
    }
    
    .test-result-word {
      font-weight: 600;
      font-size: 13px;
      margin-bottom: 2px;
    }
    
    .test-result-native {
      font-size: 11px;
      color: var(--text-tertiary);
    }
    
    .test-result-actions {
      display: flex;
      gap: 4px;
      margin-top: 6px;
    }
    
    /* Jobs List */
    .jobs-list {
      max-height: 200px;
      overflow-y: auto;
    }
    
    .job-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px;
      border-bottom: 1px solid var(--border-light);
    }
    
    .job-item:last-child { border-bottom: none; }
    
    .job-info {
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    
    .job-title { font-weight: 600; font-size: 13px; }
    .job-progress-text { font-size: 11px; color: var(--text-tertiary); }
    
    .job-progress-bar {
      width: 100px;
      height: 4px;
      background: var(--bg-tertiary);
      border-radius: 2px;
      overflow: hidden;
      margin-top: 4px;
    }
    
    .job-progress-fill {
      height: 100%;
      background: var(--primary);
      transition: width 0.3s;
    }

    /* Placement Test Modal */
    .placement-modal { max-width: 400px; }
    
    .placement-intro {
      text-align: center;
      margin-bottom: 20px;
      color: var(--text-secondary);
    }
    
    .level-select-grid {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .level-select-btn {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      border: 2px solid var(--border-default);
      border-radius: 12px;
      background: var(--bg-card);
      cursor: pointer;
      text-align: left;
      transition: all 0.2s;
      color: var(--text-primary);
    }
    
    .level-select-btn:hover {
      border-color: var(--primary);
      background: rgba(255, 107, 53, 0.1);
    }
    
    .level-select-level {
      font-size: 20px;
      font-weight: 700;
      color: var(--primary);
      min-width: 40px;
    }
    
    .level-select-desc { font-size: 14px; color: var(--text-secondary); }
    
    .placement-progress {
      text-align: center;
      font-size: 14px;
      color: var(--text-tertiary);
      margin-bottom: 20px;
    }
    
    .placement-question { text-align: center; margin-bottom: 24px; }
    
    .placement-word {
      font-size: 32px;
      font-weight: 700;
      margin-bottom: 8px;
    }
    
    .placement-prompt { font-size: 14px; color: var(--text-tertiary); }
    
    .placement-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    
    .placement-option {
      padding: 16px;
      border: 2px solid var(--border-default);
      border-radius: 12px;
      background: var(--bg-card);
      cursor: pointer;
      font-size: 16px;
      transition: all 0.2s;
      color: var(--text-primary);
    }
    
    .placement-option:hover { border-color: var(--primary); }
    .placement-option.correct { border-color: var(--success); background: var(--success-bg); }
    .placement-option.wrong { border-color: var(--error); background: var(--danger-light); }
    
    .placement-result { text-align: center; padding: 20px 0; }
    .placement-result-icon { font-size: 48px; margin-bottom: 16px; }
    .placement-result-title { font-size: 18px; color: var(--text-secondary); margin-bottom: 8px; }
    .placement-result-level { font-size: 48px; font-weight: 700; color: var(--primary); margin-bottom: 16px; }
    .placement-result-message { font-size: 14px; color: var(--text-tertiary); margin-bottom: 24px; }
    
    .placement-start-btn {
      width: 100%;
      padding: 16px;
      background: var(--primary);
      color: white;
      border: none;
      border-radius: 12px;
      font-size: 16px;
      font-weight: 600;
      cursor: pointer;
    }

    /* Erweiterte Placement Test Styles für B1+ */
    .placement-section-title {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--text-secondary);
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    
    .placement-sentence {
      font-size: 1.05rem;
      line-height: 1.6;
      color: var(--text-primary);
      padding: 16px;
      background: var(--bg-secondary);
      border-radius: 12px;
      margin-bottom: 16px;
    }
    
    .placement-sentence .blank {
      display: inline-block;
      min-width: 80px;
      border-bottom: 2px dashed var(--primary);
      margin: 0 4px;
      text-align: center;
      color: var(--primary);
      font-weight: 600;
    }
    
    .placement-dialog {
      background: var(--bg-secondary);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
    }
    
    .placement-dialog-line {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
    }
    .placement-dialog-line:last-child { margin-bottom: 0; }
    
    .placement-dialog-speaker {
      font-weight: 600;
      color: var(--primary);
      min-width: 28px;
    }
    
    .placement-dialog-text {
      flex: 1;
      line-height: 1.5;
    }
    
    .placement-textarea {
      width: 100%;
      min-height: 100px;
      padding: 14px;
      border: 2px solid var(--border-light);
      border-radius: 12px;
      font-size: 1rem;
      font-family: inherit;
      resize: vertical;
      margin-bottom: 12px;
      box-sizing: border-box;
    }
    .placement-textarea:focus {
      outline: none;
      border-color: var(--primary);
    }
    
    .placement-hint {
      font-size: 0.85rem;
      color: var(--text-tertiary);
      margin-bottom: 16px;
    }
    
    .placement-submit-btn {
      width: 100%;
      padding: 14px;
      background: var(--success);
      border: none;
      border-radius: 12px;
      color: white;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
    }
    .placement-submit-btn:disabled {
      background: var(--bg-tertiary);
      cursor: not-allowed;
    }
    
    .placement-loading {
      text-align: center;
      padding: 40px 20px;
    }
    .placement-loading-spinner {
      width: 50px;
      height: 50px;
      border: 4px solid var(--border-light);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto 16px;
    }
    @keyframes spin {
      to { transform: rotate(360deg); }
    }
    .placement-loading-text {
      color: var(--text-secondary);
      font-size: 0.95rem;
    }
    
    .placement-ai-feedback {
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 16px;
    }
    [data-theme="light"] .placement-ai-feedback {
      background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    }
    [data-theme="dark"] .placement-ai-feedback {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(59, 130, 246, 0.15));
    }
    .placement-ai-feedback-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 12px;
      font-weight: 600;
      color: var(--text-primary);
    }
    .placement-ai-score {
      display: flex;
      gap: 12px;
      margin-bottom: 12px;
    }
    .placement-ai-score-item {
      flex: 1;
      text-align: center;
      padding: 10px 8px;
      background: var(--bg-card);
      border-radius: 8px;
    }
    .placement-ai-score-value {
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--primary);
    }
    .placement-ai-score-label {
      font-size: 0.7rem;
      color: var(--text-tertiary);
    }
    .placement-ai-comment {
      font-size: 0.9rem;
      color: var(--text-secondary);
      line-height: 1.5;
    }
    .placement-ai-level {
      text-align: center;
      margin: 16px 0;
    }
    .placement-ai-level-label {
      font-size: 0.85rem;
      color: var(--text-tertiary);
      margin-bottom: 4px;
    }
    .placement-ai-level-value {
      font-size: 3rem;
      font-weight: 700;
      color: var(--success);
    }
    .placement-ai-details {
      margin: 16px 0;
    }
    .ai-section {
      margin-bottom: 12px;
    }
    .ai-section strong {
      display: block;
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 6px;
    }
    .ai-feedback-item {
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 0.9rem;
      margin-bottom: 6px;
    }
    [data-theme="light"] .ai-feedback-item.positive {
      background: #dcfce7;
      color: #166534;
    }
    [data-theme="dark"] .ai-feedback-item.positive {
      background: rgba(16, 185, 129, 0.2);
      color: #34d399;
    }
    [data-theme="light"] .ai-feedback-item.negative {
      background: #fef3c7;
      color: #92400e;
    }
    [data-theme="dark"] .ai-feedback-item.negative {
      background: rgba(245, 158, 11, 0.2);
      color: #fbbf24;
    }
    
    .placement-tasks {
      margin-bottom: 20px;
    }
    .placement-task {
      background: var(--bg-card);
      border: 1px solid var(--border-default);
      border-radius: 12px;
      padding: 16px;
      margin-bottom: 12px;
    }
    .placement-task-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 10px;
    }
    .placement-task-type {
      font-size: 0.8rem;
      font-weight: 600;
      color: var(--text-tertiary);
      text-transform: uppercase;
    }
    .placement-task-points {
      font-size: 0.8rem;
      color: var(--primary);
      font-weight: 600;
    }

    .logout-btn {
      width: 100%;
      padding: 14px;
      background: var(--bg-tertiary);
      color: var(--text-secondary);
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: 600;
      cursor: pointer;
    }

    /* Toggle-Switch für Settings */
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 52px;
      height: 28px;
      flex-shrink: 0;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: var(--bg-tertiary);
      transition: 0.3s;
      border-radius: 28px;
    }
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 22px;
      width: 22px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.3s;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    }
    .toggle-switch input:checked + .toggle-slider {
      background-color: var(--success);
    }
    .toggle-switch input:checked + .toggle-slider:before {
      transform: translateX(24px);
    }

    /* ═══════════════════════════════════════════════════════════
       MODALS
    ═══════════════════════════════════════════════════════════ */
    .modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      display: none;
      align-items: flex-end;
      justify-content: center;
      z-index: 1000;
    }
    .modal-overlay.active { display: flex; }

    .modal-content {
      background: var(--bg-card);
      border-radius: 20px 20px 0 0;
      padding: 20px;
      width: 100%;
      max-width: 480px;
      animation: slideUp 0.3s ease;
    }
    @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

    .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
    .modal-title { font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
    .modal-close {
      width: 36px;
      height: 36px;
      border: none;
      background: var(--bg-tertiary);
      border-radius: 50%;
      font-size: 1.2rem;
      cursor: pointer;
      color: var(--text-primary);
    }

    /* XP Popup */
    .xp-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: var(--warning);
      color: white;
      padding: 14px 28px;
      border-radius: 16px;
      font-size: 1.2rem;
      font-weight: 700;
      z-index: 2000;
      animation: xpPop 0.8s ease forwards;
      pointer-events: none;
    }
    @keyframes xpPop {
      0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
      30% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
      100% { opacity: 0; transform: translate(-50%, -150%) scale(1); }
    }

    .hidden { display: none !important; }

    /* ═══════════════════════════════════════════════════════════════════
       DARK MODE OVERRIDES (v2.0.9.6)
       Fixes für Inline-Styles und Admin-Panel
    ═══════════════════════════════════════════════════════════════════ */
    
    [data-theme="dark"] {
      /* Admin Panel Overrides */
      & .admin-section {
        background: var(--bg-card) !important;
        border-color: var(--border-default) !important;
      }
      
      & .admin-section[style*="background: #fff"],
      & .admin-section[style*="background: white"],
      & div[style*="background: white"],
      & div[style*="background: #fff"] {
        background: var(--bg-card) !important;
      }
      
      /* Selects und Inputs */
      & select,
      & input[type="text"],
      & input[type="number"],
      & input[type="email"],
      & input[type="password"],
      & textarea {
        background: var(--bg-input) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-default) !important;
      }
      
      & select option {
        background: var(--bg-card);
        color: var(--text-primary);
      }
      
      /* Labels und Text */
      & label {
        color: var(--text-secondary) !important;
      }
      
      /* Modals */
      & .modal-content {
        background: var(--bg-card) !important;
      }
      
      /* Cards */
      & .global-lang-card,
      & .image-stat-card,
      & .job-item {
        background: var(--bg-secondary) !important;
        border-color: var(--border-default) !important;
      }
      
      /* Tabellen */
      & table th {
        background: var(--bg-tertiary) !important;
        color: var(--text-primary) !important;
      }
      
      & table td {
        background: var(--bg-card) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-light) !important;
      }
      
      & table tr:hover td {
        background: var(--bg-secondary) !important;
      }
      
      /* Fehler-Log */
      & .admin-section[style*="border: 2px solid var(--danger)"] {
        background: rgba(239, 68, 68, 0.1) !important;
      }
      
      /* Sprach-Verwaltung */
      & .admin-section[style*="border: 2px solid var(--primary)"] {
        background: rgba(255, 107, 53, 0.1) !important;
      }
      
      /* Settings Toggles */
      & .setting-item {
        background: var(--bg-secondary) !important;
        border-color: var(--border-default) !important;
      }
      
      /* Kostenvorschau */
      & div[style*="background: linear-gradient"] {
        background: var(--bg-secondary) !important;
      }
      
      /* Test-Generator */
      & .test-generator {
        background: var(--bg-secondary) !important;
        border-color: var(--border-default) !important;
      }
      
      & .test-results {
        background: var(--bg-card) !important;
      }
      
      /* Progress Bars */
      & .level-progress-bar,
      & .job-progress-bar {
        background: var(--bg-tertiary) !important;
      }
    }
    
    /* Nesting Fallback für ältere Browser */
    [data-theme="dark"] .admin-section {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] select,
    [data-theme="dark"] input[type="text"],
    [data-theme="dark"] input[type="number"],
    [data-theme="dark"] input[type="email"],
    [data-theme="dark"] input[type="password"],
    [data-theme="dark"] textarea {
      background: var(--bg-input) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] label {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .modal-content {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] table th {
      background: var(--bg-tertiary) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] table td {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-light) !important;
    }
    
    [data-theme="dark"] .test-generator {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .global-lang-card,
    [data-theme="dark"] .image-stat-card {
      background: var(--bg-secondary) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .setting-item {
      background: var(--bg-secondary) !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════════
       DARK MODE - Tutorials & Modals (v2.0.9.10)
    ═══════════════════════════════════════════════════════════════════ */
    
    /* Tutorial Cards */
    [data-theme="dark"] .tutorial-card,
    [data-theme="dark"] .module-tutorial-card {
      background: var(--bg-card) !important;
    }
    
    [data-theme="dark"] .tutorial-content,
    [data-theme="dark"] .module-tutorial-content {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .tutorial-footer,
    [data-theme="dark"] .module-tutorial-footer {
      background: var(--bg-card) !important;
      border-color: var(--border-light) !important;
    }
    
    [data-theme="dark"] .tutorial-text,
    [data-theme="dark"] .module-tutorial-step {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .module-tutorial-step {
      border-color: var(--border-light) !important;
    }
    
    [data-theme="dark"] .tutorial-highlight,
    [data-theme="dark"] .module-tutorial-tip {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .tutorial-highlight-title,
    [data-theme="dark"] .tutorial-highlight-text {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .tutorial-btn-skip,
    [data-theme="dark"] .module-tutorial-btn-skip {
      background: var(--bg-tertiary) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .tutorial-method-card {
      background: var(--bg-secondary) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .tutorial-box {
      background: var(--bg-tertiary) !important;
    }
    
    [data-theme="dark"] .tutorial-box-num,
    [data-theme="dark"] .tutorial-box-label {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .tutorial-tip {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .tutorial-tip-text {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .module-tutorial-checkbox {
      color: var(--text-tertiary) !important;
    }
    
    /* Box Detail Modal */
    [data-theme="dark"] .box-detail-modal {
      background: var(--bg-card) !important;
    }
    
    [data-theme="dark"] .box-detail-content {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
    }
    
    /* Learning Cards / Flashcards */
    [data-theme="dark"] .flashcard,
    [data-theme="dark"] .quiz-card,
    [data-theme="dark"] .write-card,
    [data-theme="dark"] .picture-card,
    [data-theme="dark"] .memory-card,
    [data-theme="dark"] .sentence-card {
      background: var(--bg-card) !important;
    }
    
    [data-theme="dark"] .card-word,
    [data-theme="dark"] .card-translation {
      color: var(--text-primary) !important;
    }
    
    /* Quiz Options */
    [data-theme="dark"] .quiz-option {
      background: var(--bg-secondary) !important;
      border-color: var(--border-default) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .quiz-option:hover {
      background: var(--bg-tertiary) !important;
    }
    
    /* Progress Cards */
    [data-theme="dark"] .progress-card,
    [data-theme="dark"] .stat-card,
    [data-theme="dark"] .stats-card {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
    }
    
    /* Module Cards on Home */
    [data-theme="dark"] .module-card {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .module-card-title,
    [data-theme="dark"] .module-card-desc {
      color: var(--text-primary) !important;
    }
    
    /* Language Selection */
    [data-theme="dark"] .language-option {
      background: var(--bg-secondary) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .language-option-name {
      color: var(--text-primary) !important;
    }
    
    /* Level Selection */
    [data-theme="dark"] .level-card {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .level-card-title {
      color: var(--text-primary) !important;
    }
    
    /* Settings / Profile Items */
    [data-theme="dark"] .profile-btn,
    [data-theme="dark"] .subscription-btn {
      background: var(--bg-secondary) !important;
      border-color: var(--border-default) !important;
      color: var(--text-primary) !important;
    }
    
    /* Result Screens */
    [data-theme="dark"] .result-card {
      background: var(--bg-card) !important;
    }
    
    [data-theme="dark"] .result-stat {
      background: var(--bg-secondary) !important;
      color: var(--text-primary) !important;
    }
    
    /* Streak / XP popups */
    [data-theme="dark"] .streak-popup,
    [data-theme="dark"] .achievement-popup {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
    }
    
    /* All generic white backgrounds */
    [data-theme="dark"] [style*="background: white"],
    [data-theme="dark"] [style*="background:#fff"],
    [data-theme="dark"] [style*="background: #fff"] {
      background: var(--bg-card) !important;
    }
    
    /* Tutorial Mode Cards */
    [data-theme="dark"] .tutorial-mode-mini {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .tutorial-mode-mini-name {
      color: var(--text-primary) !important;
    }
    
    /* Progress Demo in Tutorial */
    [data-theme="dark"] .tutorial-progress-demo {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .tutorial-progress-bar {
      background: var(--bg-tertiary) !important;
    }
    
    [data-theme="dark"] .tutorial-progress-stats span {
      color: var(--text-secondary) !important;
    }
    
    /* Natural Learning Info Cards */
    [data-theme="dark"] .natural-info-card,
    [data-theme="dark"] .info-card {
      background: var(--bg-secondary) !important;
      border-color: var(--border-default) !important;
    }
    
    /* ═══════════════════════════════════════════════════════════════════
       DARK MODE - Comprehensive Fix v2.0.9.13
       Vollständige Überarbeitung aller weißen Hintergründe
    ═══════════════════════════════════════════════════════════════════ */
    
    /* ─── Natural Steps (Gehirngerecht-Modus) ─── */
    [data-theme="dark"] .natural-step {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .natural-step:hover {
      border-color: var(--brand-primary) !important;
      background: rgba(255, 107, 53, 0.1) !important;
    }
    
    [data-theme="dark"] .natural-step.completed {
      border-color: var(--success) !important;
      background: rgba(16, 185, 129, 0.15) !important;
    }
    
    [data-theme="dark"] .natural-step.active {
      border-color: var(--brand-primary) !important;
      background: rgba(255, 107, 53, 0.15) !important;
    }
    
    [data-theme="dark"] .natural-step-number {
      background: var(--bg-tertiary) !important;
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .natural-step-title {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .natural-step-desc {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .natural-step-check {
      color: var(--text-muted) !important;
    }
    
    /* ─── Learn Screen & Header ─── */
    [data-theme="dark"] .learn-screen {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .learn-header {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .back-btn {
      background: var(--bg-tertiary) !important;
      color: var(--text-primary) !important;
    }
    
    /* ─── Decode Screen ─── */
    [data-theme="dark"] .decode-sentence {
      background: var(--bg-card) !important;
    }
    
    [data-theme="dark"] .decode-original {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .decode-target {
      color: var(--brand-primary) !important;
    }
    
    [data-theme="dark"] .decode-native {
      color: var(--text-tertiary) !important;
    }
    
    /* ─── Method Tabs (Klassisch/Natürlich) ─── */
    [data-theme="dark"] .method-tabs {
      background: var(--bg-tertiary) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .method-tab {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .method-tab:hover {
      color: var(--text-secondary) !important;
      background: rgba(255, 255, 255, 0.05) !important;
    }
    
    [data-theme="dark"] .method-tab.active {
      background: var(--bg-card) !important;
      color: var(--brand-primary) !important;
    }
    
    /* ─── Method Intro Card (Gelbe Box) ─── */
    [data-theme="dark"] .method-intro {
      background: linear-gradient(135deg, rgba(254, 243, 199, 0.15), rgba(253, 230, 138, 0.15)) !important;
      border-color: rgba(245, 158, 11, 0.3) !important;
    }
    
    [data-theme="dark"] .method-intro-text {
      color: var(--text-secondary) !important;
    }
    
    /* ─── Flashcard ─── */
    [data-theme="dark"] .flashcard-back {
      background: var(--bg-card) !important;
      border-color: var(--brand-primary) !important;
    }
    
    [data-theme="dark"] .flashcard-back .card-word {
      color: var(--brand-primary) !important;
    }
    
    /* ─── Memory Card ─── */
    [data-theme="dark"] .memory-card.flipped {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-default) !important;
    }
    
    /* ─── Sentence Area ─── */
    [data-theme="dark"] .sentence-area {
      background: var(--bg-tertiary) !important;
    }
    
    [data-theme="dark"] .sentence-word.available {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-default) !important;
    }
    
    /* ─── Shadowing Mode ─── */
    [data-theme="dark"] .shadowing-word {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .shadowing-native {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .shadowing-translit {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .shadowing-phase {
      background: var(--bg-tertiary) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .shadowing-compare-btn {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .shadowing-compare-btn:hover:not(:disabled) {
      background: var(--bg-tertiary) !important;
      border-color: var(--brand-primary) !important;
    }
    
    [data-theme="dark"] .shadowing-result {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .shadowing-result.fair {
      background: rgba(245, 158, 11, 0.15) !important;
    }
    
    /* ─── Rating Buttons ─── */
    [data-theme="dark"] .rating-btn,
    [data-theme="dark"] .rating-btn-auto {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .rating-btn-auto.fair:hover,
    [data-theme="dark"] .rating-btn.ok:hover {
      background: rgba(245, 158, 11, 0.15) !important;
    }
    
    /* ─── Box Detail Modal ─── */
    [data-theme="dark"] .box-detail-card {
      background: var(--bg-card) !important;
    }
    
    [data-theme="dark"] .box-vocab-item {
      border-color: var(--border-light) !important;
    }
    
    [data-theme="dark"] .box-vocab-target {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .box-vocab-native {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .box-detail-footer {
      border-color: var(--border-light) !important;
    }
    
    [data-theme="dark"] .box-detail-btn-close {
      background: var(--bg-tertiary) !important;
      color: var(--text-primary) !important;
    }
    
    /* ─── Method Dialog ─── */
    [data-theme="dark"] .method-dialog-option {
      background: var(--bg-secondary) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .method-dialog-option:hover {
      background: rgba(255, 107, 53, 0.1) !important;
      border-color: var(--brand-primary) !important;
    }
    
    [data-theme="dark"] .method-dialog-name {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .method-dialog-desc {
      color: var(--text-tertiary) !important;
    }
    
    /* ─── Result Screen ─── */
    [data-theme="dark"] .complete-btn {
      background: white !important;
      color: var(--brand-primary) !important;
    }
    
    /* ─── Passive Mode ─── */
    [data-theme="dark"] .passive-title {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .passive-subtitle {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .passive-btn.secondary {
      background: var(--bg-tertiary) !important;
      color: var(--text-primary) !important;
    }
    
    /* ─── Level Progress ─── */
    [data-theme="dark"] .level-progress {
      background: var(--bg-secondary) !important;
    }
    
    [data-theme="dark"] .level-name {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .level-stats {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .progress-bar {
      background: var(--bg-tertiary) !important;
    }
    
    /* ─── Box Overview ─── */
    [data-theme="dark"] .box-overview {
      background: var(--bg-secondary) !important;
    }
    
    /* ─── Tutorial Boxes (Leitner) ─── */
    [data-theme="dark"] .tutorial-box.box-1 { background: rgba(239, 68, 68, 0.2) !important; }
    [data-theme="dark"] .tutorial-box.box-2 { background: rgba(245, 158, 11, 0.2) !important; }
    [data-theme="dark"] .tutorial-box.box-3 { background: rgba(16, 185, 129, 0.2) !important; }
    [data-theme="dark"] .tutorial-box.box-4 { background: rgba(59, 130, 246, 0.2) !important; }
    [data-theme="dark"] .tutorial-box.box-5 { background: rgba(139, 92, 246, 0.2) !important; }
    
    [data-theme="dark"] .tutorial-box-num,
    [data-theme="dark"] .tutorial-box-label {
      color: var(--text-primary) !important;
    }
    
    /* ─── Plan Cards (Subscription) ─── */
    [data-theme="dark"] .plan-card {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .plan-card.current {
      background: rgba(16, 185, 129, 0.1) !important;
    }
    
    [data-theme="dark"] .plan-name {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .plan-price span {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .plan-features li {
      border-color: var(--border-light) !important;
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .plan-btn {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .current-plan {
      background: var(--bg-secondary) !important;
    }
    
    /* ─── Picture Mode ─── */
    [data-theme="dark"] .picture-option {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .picture-label {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .picture-option .picture-caption {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .picture-option-image {
      background: var(--bg-tertiary) !important;
    }
    
    /* ─── Onboarding (weiße Elemente behalten für Kontrast) ─── */
    /* Onboarding bleibt unverändert da es einen farbigen Hintergrund hat */
    
    /* ─── Step Image Background ─── */
    [data-theme="dark"] .step-image {
      background: var(--bg-tertiary) !important;
    }
    
    [data-theme="dark"] .shadowing-image {
      background: var(--bg-tertiary) !important;
    }
    
    /* ─── Admin Panel ─── */
    [data-theme="dark"] .admin-card {
      background: var(--bg-card) !important;
      border-color: var(--border-default) !important;
    }
    
    [data-theme="dark"] .admin-card-title {
      color: var(--text-primary) !important;
    }
    
    /* ─── Picture Audio Button ─── */
    [data-theme="dark"] .picture-audio-btn {
      background: var(--bg-card) !important;
      color: var(--text-primary) !important;
    }
    
    /* ─── Listen Hint ─── */
    [data-theme="dark"] .listen-hint {
      color: var(--text-tertiary) !important;
    }
    
    /* ─── Shadowing Title ─── */
    [data-theme="dark"] .shadowing-title {
      color: var(--text-primary) !important;
    }
    
    [data-theme="dark"] .shadowing-progress {
      color: var(--text-tertiary) !important;
    }
    
    [data-theme="dark"] .shadowing-hint {
      color: var(--text-tertiary) !important;
    }
    
    /* ─── Sprint Mode ─── */
    [data-theme="dark"] .sprint-score {
      color: var(--text-secondary) !important;
    }
    
    /* ─── Trainer Avatar (Tutorial) ─── */
    [data-theme="dark"] .tutorial-avatar {
      background: var(--bg-card) !important;
    }
    
    [data-theme="dark"] .trainer-avatar {
      background: var(--bg-card) !important;
    }
    
    /* ─── Picture Listen Mode ─── */
    [data-theme="dark"] .picture-listen-prompt {
      color: var(--text-secondary) !important;
    }
    
    [data-theme="dark"] .picture-listen-word {
      color: var(--text-primary) !important;
    }

/* ═══════════════════════════════════════════════════════════
   TRAVEL MODULE STYLES v2.0.9.50
   ═══════════════════════════════════════════════════════════ */

.travel-cat:hover {
  background: var(--primary-light) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.travel-cat:active {
  transform: translateY(0);
}

.travel-mode-btn:hover {
  border-color: var(--primary) !important;
  background: rgba(245, 158, 11, 0.1) !important;
  transform: translateY(-2px);
}

.travel-mode-btn:active {
  transform: translateY(0);
}

/* Dark mode adjustments */
[data-theme="dark"] .travel-cat {
  background: var(--bg-elevated) !important;
}

[data-theme="dark"] .travel-cat:hover {
  background: var(--bg-card) !important;
  border: 1px solid var(--primary);
}

[data-theme="dark"] .travel-mode-btn {
  background: var(--bg-elevated) !important;
}

[data-theme="dark"] .travel-mode-btn:hover {
  background: var(--bg-card) !important;
}

/* ═══════════════════════════════════════════════════════════
   GLOBAL MODE SWITCHER v2.0.9.51
   ═══════════════════════════════════════════════════════════ */

.mode-switcher {
  display: flex;
  gap: 8px;
  padding: 8px;
  margin: 0 16px 16px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.mode-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 8px;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.mode-btn.active {
  border-color: var(--primary);
  background: var(--primary-light);
}

.mode-btn:hover:not(.active):not(.locked) {
  background: var(--bg-elevated);
  transform: translateY(-1px);
}

.mode-btn.locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.mode-icon {
  font-size: 22px;
  line-height: 1;
}

.mode-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.mode-lock {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 10px;
  background: var(--bg-elevated);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mode-btn.active .mode-label {
  color: var(--primary);
}

/* Mode-spezifische Farben */
.mode-btn[data-mode="normal"].active {
  border-color: var(--primary);
  background: rgba(255, 107, 53, 0.1);
}

.mode-btn[data-mode="travel"].active {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

.mode-btn[data-mode="travel"].active .mode-label {
  color: #f59e0b;
}

.mode-btn[data-mode="business"].active {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
}

.mode-btn[data-mode="business"].active .mode-label {
  color: #6366f1;
}

/* Dark Mode */
[data-theme="dark"] .mode-switcher {
  background: var(--bg-elevated);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .mode-btn {
  background: var(--bg-card);
}

[data-theme="dark"] .mode-btn:hover:not(.active):not(.locked) {
  background: var(--bg-secondary);
}

[data-theme="dark"] .mode-lock {
  background: var(--bg-secondary);
}

/* ═══════════════════════════════════════════════════════════
   MODE PAYWALL MODAL v2.0.9.52
   ═══════════════════════════════════════════════════════════ */

.paywall-feature {
  padding: 8px 0;
  font-size: 14px;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-color);
}

.paywall-feature:last-child {
  border-bottom: none;
}

[data-theme="dark"] #modePaywallModal .modal-content {
  background: var(--bg-card);
}

[data-theme="dark"] .paywall-feature {
  border-color: var(--border-color);
}

/* ═══════════════════════════════════════════════════════════
   LEVEL-UP SYSTEM v2.0.9.53
   ═══════════════════════════════════════════════════════════ */

/* Level-Up Banner */
.level-up-banner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  margin: 0 16px 16px 16px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: var(--radius-lg);
  color: white;
  overflow: hidden;
  animation: levelUpPulse 2s ease-in-out infinite;
}

@keyframes levelUpPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.3); }
  50% { box-shadow: 0 4px 30px rgba(16, 185, 129, 0.5); }
}

.level-up-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: levelUpGlow 3s linear infinite;
}

@keyframes levelUpGlow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.level-up-content {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 1;
}

.level-up-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.2);
  padding: 8px 12px;
  border-radius: var(--radius-md);
  font-weight: 700;
}

.level-current {
  opacity: 0.8;
}

.level-arrow {
  font-size: 14px;
}

.level-next {
  font-size: 18px;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.level-up-text {
  flex: 1;
}

.level-up-title {
  font-weight: 600;
  font-size: 15px;
}

.level-up-progress {
  font-size: 12px;
  opacity: 0.9;
  margin-top: 2px;
}

.level-up-btn {
  background: white;
  color: #059669;
  border: none;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  z-index: 1;
  transition: all 0.2s;
}

.level-up-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Level Progress Bar (wenn noch nicht bereit für Level-Up) */
.level-progress-bar {
  margin: 0 16px 16px 16px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
}

.level-progress-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  gap: 12px;
  flex-wrap: nowrap;
}

.level-progress-label {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  white-space: nowrap;
  flex-shrink: 0;
}

.level-progress-count {
  font-size: 12px;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
}

.level-progress-track {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.level-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, #f59e0b 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
}

/* Dark Mode */
[data-theme="dark"] .level-progress-bar {
  background: var(--bg-elevated);
}

[data-theme="dark"] .level-progress-track {
  background: var(--bg-card);
}


/* ═══════════════════════════════════════════════════════════════
   GRAMMATIK-MODUL STYLES (v2.0.9.54)
   ═══════════════════════════════════════════════════════════════ */

/* Home Screen: Grammatik-Sektion */
.grammar-section {
  margin: 16px;
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
}

.grammar-section-header {
  margin-bottom: 12px;
}

.grammar-section-title {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
}

.grammar-tools {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grammar-tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 14px 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.grammar-tool-btn:hover:not(:disabled) {
  background: var(--bg-tertiary);
  border-color: var(--primary);
  transform: translateY(-2px);
}

.grammar-tool-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.grammar-tool-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.grammar-tool-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}

.grammar-tool-desc {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.grammar-tool-coming {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 9px;
  background: var(--primary);
  color: white;
  padding: 2px 6px;
  border-radius: 8px;
  font-weight: 600;
}

/* Grammar Screen - NUR wenn .active sichtbar */
.grammar-screen {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh; /* Dynamic viewport height für mobile */
  background: var(--bg-secondary);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

/* Wichtig: Überschreibt .screen display Regeln nicht */
.grammar-screen:not(.active) {
  display: none !important;
}

.grammar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}

.grammar-header-title {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
}

.grammar-header-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-secondary);
}

.grammar-streak {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--primary);
}

.grammar-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  min-height: 0; /* Wichtig für Flex-Scrolling */
}

.grammar-feedback {
  padding: 16px 20px;
  background: var(--bg-card);
  border-top: 1px solid var(--border-light);
  flex-shrink: 0; /* Nicht schrumpfen */
}

.grammar-actions {
  padding: 16px 20px;
  background: var(--bg-card);
  flex-shrink: 0; /* Nicht schrumpfen */
  padding-bottom: max(16px, env(safe-area-inset-bottom)); /* iOS Safe Area */
}

.grammar-next-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

/* Konjugations-Drill Styles */
.conj-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}

.conj-infinitive {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 4px;
}

.conj-translation {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.conj-irregular-badge {
  display: inline-block;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 20px;
  margin-bottom: 16px;
}
[data-theme="light"] .conj-irregular-badge {
  background: #fef3c7;
  color: #92400e;
}
[data-theme="dark"] .conj-irregular-badge {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
}

.conj-prompt {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 24px;
}

.conj-person {
  background: var(--bg-secondary);
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.conj-tense {
  background: var(--bg-tertiary);
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  color: var(--text-secondary);
}

.conj-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 20px;
}

.conj-option {
  padding: 16px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.conj-option:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--bg-tertiary);
}

.conj-option.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
}

.conj-option.correct {
  border-color: var(--success);
  background: rgba(var(--success-rgb), 0.1);
  color: var(--success);
}

.conj-option.wrong {
  border-color: var(--danger);
  background: rgba(var(--danger-rgb), 0.1);
  color: var(--danger);
}

/* Feedback Styles */
.feedback-result {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.feedback-result.correct {
  color: var(--success);
}

.feedback-result.wrong {
  color: var(--danger);
}

.feedback-answer {
  font-size: 15px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.feedback-rule {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 10px 14px;
  border-radius: var(--radius-md);
  border-left: 3px solid var(--primary);
}

/* Grammar Results */
.grammar-results {
  text-align: center;
  padding: 40px 20px;
}

.grammar-results .results-emoji {
  font-size: 64px;
  margin-bottom: 16px;
}

.grammar-results h2 {
  font-size: 24px;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.grammar-results .results-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
}

.grammar-results .stat {
  text-align: center;
}

.grammar-results .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.grammar-results .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.grammar-results .results-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.grammar-results .btn-primary {
  padding: 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}

.grammar-results .btn-secondary {
  padding: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
}



/* ═══ ARTIKEL-ARENA STYLES (v2.0.9.55) ═══ */

.article-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
}

.article-question {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.article-noun-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.article-blank {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  border-bottom: 3px dashed var(--primary);
  padding: 0 8px;
  min-width: 60px;
}

.article-noun {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
}

.article-translation {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.article-options {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.article-option {
  min-width: 80px;
  padding: 16px 32px;
  background: var(--bg-secondary);
  border: 3px solid var(--border-light);
  border-radius: var(--radius-lg);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.article-option:hover:not(:disabled) {
  border-color: var(--primary);
  transform: scale(1.05);
}

.article-option.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
}

.article-option.correct {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.article-option.wrong {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

[data-theme="light"] .feedback-rule.exception {
  background: #fef3c7;
  border-left-color: #f59e0b;
  color: #92400e;
}
[data-theme="dark"] .feedback-rule.exception {
  background: rgba(245, 158, 11, 0.15);
  border-left-color: #f59e0b;
  color: #fbbf24;
}



/* ═══ SATZBAUKASTEN STYLES (v2.0.9.56) ═══ */

.sentence-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.sentence-instruction {
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 12px;
  text-align: center;
}

.sentence-translation {
  font-size: 15px;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  text-align: center;
}

.sentence-dropzone {
  min-height: 60px;
  background: var(--bg-secondary);
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.sentence-dropzone.correct {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.1);
}

.sentence-dropzone.wrong {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

.dropzone-hint {
  color: var(--text-muted);
  font-size: 14px;
}

.selected-word {
  background: var(--primary);
  color: white;
  padding: 8px 14px;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.selected-word:hover {
  opacity: 0.8;
  transform: scale(0.95);
}

.sentence-words {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.sentence-word {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 10px 16px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 40px;
}

.sentence-word:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.sentence-word.used {
  opacity: 0.3;
  visibility: hidden;
}

.sentence-actions {
  display: flex;
  gap: 12px;
}

.sentence-clear-btn {
  flex: 1;
  padding: 14px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
}

.sentence-check-btn {
  flex: 2;
  padding: 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.sentence-check-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}



/* ═══════════════════════════════════════════════════════════════
   ARTIKEL-ARENA STYLES (v2.0.9.55)
   ═══════════════════════════════════════════════════════════════ */

.article-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  text-align: center;
}

.article-question {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.article-noun-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}

.article-blank {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  min-width: 60px;
  padding: 8px 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 2px dashed var(--primary);
}

.article-noun {
  font-size: 36px;
  font-weight: 700;
  color: var(--text-primary);
}

.article-translation {
  font-size: 18px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.article-options {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.article-option {
  min-width: 80px;
  padding: 18px 32px;
  background: var(--bg-secondary);
  border: 3px solid var(--border-light);
  border-radius: var(--radius-lg);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.article-option:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--bg-tertiary);
  transform: scale(1.05);
}

.article-option.selected {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb), 0.1);
}

.article-option.correct {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.article-option.wrong {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

/* Feedback für Ausnahmen */
.feedback-rule.exception {
  background: #fef3c7;
  border-left-color: #f59e0b;
  color: #92400e;
}



/* ═══ ZEITFORMEN-ZEITSTRAHL STYLES (v2.0.9.57) ═══ */

.tense-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.tense-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 16px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.timeline-point {
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
}

[data-theme="light"] .timeline-point.past { background: #fef3c7; color: #92400e; }
[data-theme="light"] .timeline-point.present { background: #d1fae5; color: #065f46; }
[data-theme="light"] .timeline-point.future { background: #dbeafe; color: #1e40af; }

[data-theme="dark"] .timeline-point.past { background: rgba(245, 158, 11, 0.2); color: #fbbf24; }
[data-theme="dark"] .timeline-point.present { background: rgba(16, 185, 129, 0.2); color: #34d399; }
[data-theme="dark"] .timeline-point.future { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }

.timeline-line {
  flex: 1;
  height: 3px;
  background: var(--border-light);
  max-width: 40px;
}

.tense-signal {
  text-align: center;
  font-size: 20px;
  margin-bottom: 16px;
}

.signal-word {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-weight: 700;
}

.tense-verb {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 8px;
}

.tense-verb-trans {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: var(--text-secondary);
  margin-top: 4px;
}

.tense-question {
  text-align: center;
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

.tense-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tense-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tense-option:hover:not(:disabled) {
  border-color: var(--primary);
  transform: translateX(4px);
}

.tense-option-form {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.tense-option-name {
  font-size: 13px;
  color: var(--text-secondary);
  background: var(--bg-tertiary);
  padding: 4px 10px;
  border-radius: 12px;
}

.tense-option.selected {
  border-color: var(--primary);
}

.tense-option.correct {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.1);
}

.tense-option.correct .tense-option-form {
  color: var(--success);
}

.tense-option.wrong {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

.tense-option.wrong .tense-option-form {
  color: var(--danger);
}



/* ═══════════════════════════════════════════════════════════════
   SATZBAUKASTEN STYLES (v2.0.9.56)
   ═══════════════════════════════════════════════════════════════ */

.sentence-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px;
}

.sentence-instruction {
  font-size: 16px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 8px;
}

.sentence-translation {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 24px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.sentence-dropzone {
  min-height: 60px;
  padding: 16px;
  background: var(--bg-secondary);
  border: 2px dashed var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.sentence-dropzone.correct {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.1);
}

.sentence-dropzone.wrong {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

.dropzone-hint {
  color: var(--text-muted);
  font-size: 14px;
}

.selected-word {
  padding: 10px 16px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.selected-word:hover {
  opacity: 0.8;
  transform: scale(0.95);
}

.sentence-words {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 24px;
}

.sentence-word {
  padding: 12px 20px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.sentence-word:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--bg-tertiary);
}

.sentence-word.used {
  opacity: 0.3;
  cursor: not-allowed;
}

.sentence-actions {
  display: flex;
  gap: 12px;
}

.sentence-clear-btn {
  flex: 1;
  padding: 14px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
}

.sentence-check-btn {
  flex: 2;
  padding: 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.feedback-explanation {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 8px;
  font-style: italic;
}



/* ═══════════════════════════════════════════════════════════════
   LÜCKENTEXT + GRAMMATIK-DUELL STYLES (v2.0.9.58-59)
   ═══════════════════════════════════════════════════════════════ */

/* Battle Button hervorgehoben */
.grammar-tool-battle {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  border-color: #f59e0b !important;
}

.grammar-tool-battle .grammar-tool-name,
.grammar-tool-battle .grammar-tool-desc {
  color: white !important;
}

/* Lückentext Styles */
.fillblank-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
}

.fillblank-question {
  font-size: 22px;
  color: var(--text-primary);
  margin-bottom: 16px;
  line-height: 1.5;
}

.fill-blank-gap {
  display: inline-block;
  min-width: 80px;
  padding: 4px 16px;
  background: var(--bg-secondary);
  border-bottom: 3px solid var(--primary);
  font-weight: 700;
  color: var(--primary);
}

.fillblank-hint {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 24px;
  padding: 8px 16px;
  background: #fef3c7;
  border-radius: var(--radius-md);
  display: inline-block;
}

.fillblank-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.fillblank-option {
  padding: 16px;
  background: var(--bg-secondary);
  border: 2px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.fillblank-option:hover:not(:disabled) {
  border-color: var(--primary);
  background: var(--bg-tertiary);
}

.fillblank-option.selected {
  border-color: var(--primary);
}

.fillblank-option.correct {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.15);
  color: var(--success);
}

.fillblank-option.wrong {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

/* Battle Styles */
.battle-card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 24px;
  text-align: center;
  position: relative;
}

.battle-timer {
  position: absolute;
  top: 16px;
  right: 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 8px 12px;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}

.battle-timer.warning {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.15);
  animation: pulse 0.5s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.battle-type {
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.battle-question {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.battle-translation {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.battle-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.battle-option {
  padding: 18px;
  background: var(--bg-secondary);
  border: 3px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s ease;
}

.battle-option:hover:not(:disabled) {
  border-color: var(--primary);
  transform: scale(1.02);
}

.battle-option.correct {
  border-color: var(--success);
  background: rgba(16, 185, 129, 0.2);
  color: var(--success);
}

.battle-option.wrong {
  border-color: var(--danger);
  background: rgba(239, 68, 68, 0.2);
  color: var(--danger);
}

/* Battle Results */
.battle-results {
  text-align: center;
  padding: 40px 20px;
}

.battle-results-icon {
  font-size: 80px;
  margin-bottom: 16px;
}

.battle-results h2 {
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.battle-results-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-bottom: 32px;
}

.battle-results-stats .stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
}

.battle-results-stats .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.battle-results-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.battle-results-actions .btn-primary {
  padding: 16px;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
}

.battle-results-actions .btn-secondary {
  padding: 14px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 16px;
  cursor: pointer;
}



/* ═══════════════════════════════════════════════════════════════
   NATURAL LEARNING (Rosetta-Style) v2.1.3.0
═══════════════════════════════════════════════════════════════ */

.natural-learning-screen {
  background: var(--bg-primary);
  min-height: 100vh;
  padding-bottom: 100px;
}

.natural-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--bg-card);
  border-bottom: 1px solid var(--border-light);
}

.natural-stats {
  font-size: 14px;
  font-weight: 600;
  color: var(--primary);
}

/* Stufen-Liste */
.natural-stages {
  padding: 16px;
  display: grid;
  gap: 12px;
}

.natural-stage-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
}

.natural-stage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.natural-stage-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.natural-stage-card.locked:hover {
  transform: none;
  box-shadow: none;
}

.natural-stage-card.completed {
  border-color: var(--success);
}

.natural-stage-card.premium {
  border-color: var(--warning);
}

.natural-stage-icon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: 12px;
}

.natural-stage-info {
  flex: 1;
}

.natural-stage-name {
  font-weight: 600;
  font-size: 16px;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.natural-stage-meta {
  font-size: 12px;
  color: var(--text-secondary);
}

.natural-stage-progress {
  width: 100%;
  height: 4px;
  background: var(--bg-secondary);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}

.natural-stage-progress-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 2px;
  transition: width 0.3s;
}

.natural-stage-badge {
  font-size: 20px;
}

/* Übungs-Ansicht */
.natural-exercise-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
}

.natural-exercise-title {
  font-weight: 600;
  font-size: 16px;
}

.natural-exercise-progress {
  font-size: 14px;
  opacity: 0.9;
}

/* Audio Section */
.natural-audio-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  gap: 12px;
}

.natural-audio-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  border: none;
  border-radius: 50px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.natural-audio-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4);
}

.natural-audio-btn:active {
  transform: scale(0.98);
}

.natural-audio-btn .audio-icon {
  font-size: 24px;
  animation: pulse-audio 2s infinite;
}

@keyframes pulse-audio {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.natural-audio-hint {
  font-size: 14px;
  color: var(--text-secondary);
}

/* 4-Bilder Grid */
.natural-images-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 16px;
  max-width: 600px;
  margin: 0 auto;
}

@media (orientation: landscape) {
  .natural-images-grid {
    max-width: 800px;
    gap: 16px;
  }
}

.natural-image-option {
  position: relative;
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid var(--border-light);
  transition: border-color 0.3s, transform 0.2s, box-shadow 0.2s;
  background: var(--bg-card);
}

.natural-image-option:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.natural-image-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.natural-image-option.correct {
  border-color: var(--success);
  animation: correct-pulse 0.5s;
}

.natural-image-option.wrong {
  border-color: var(--error);
  animation: wrong-shake 0.5s;
}

.natural-image-option.selected {
  border-color: var(--primary);
}

@keyframes correct-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes wrong-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

.natural-image-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s;
  font-size: 48px;
}

.natural-image-option.correct .natural-image-overlay {
  background: rgba(16, 185, 129, 0.3);
}

.natural-image-option.correct .natural-image-overlay::after {
  content: "✓";
  color: white;
  font-size: 64px;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.natural-image-option.wrong .natural-image-overlay {
  background: rgba(239, 68, 68, 0.3);
}

.natural-image-option.wrong .natural-image-overlay::after {
  content: "✗";
  color: white;
  font-size: 64px;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Fliegendes Audio-Symbol Animation */
.flying-audio {
  position: fixed;
  font-size: 32px;
  z-index: 1000;
  pointer-events: none;
  transition: all 0.5s ease-out;
}

/* Fortschrittsbalken */
.natural-progress-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--bg-secondary);
}

.natural-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  transition: width 0.3s;
}

/* Ergebnis-Ansicht */
.natural-result-card {
  max-width: 400px;
  margin: 40px auto;
  padding: 32px;
  background: var(--bg-card);
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.natural-result-icon {
  font-size: 72px;
  margin-bottom: 16px;
}

.natural-result-card h2 {
  font-size: 28px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.natural-result-card p {
  color: var(--text-secondary);
  margin-bottom: 24px;
}

.natural-result-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-bottom: 32px;
}

.natural-result-stat .stat-value {
  font-size: 32px;
  font-weight: 700;
  color: var(--primary);
}

.natural-result-stat .stat-label {
  font-size: 12px;
  color: var(--text-secondary);
}

.natural-result-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.natural-result-actions .btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.natural-result-actions .btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  padding: 12px 24px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  cursor: pointer;
}

.natural-result-actions .btn-text {
  background: none;
  border: none;
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}

/* Dreh-Hinweis */
.rotate-hint {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  text-align: center;
  color: var(--text-secondary);
}

@media (orientation: landscape) {
  .rotate-hint {
    display: none !important;
  }
}



/* Rosetta-Style Section */
.rosetta-section {
  padding: 0 16px;
  margin-bottom: 16px;
}

.rosetta-card {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  color: white;
}

.rosetta-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.rosetta-icon {
  font-size: 40px;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
}

.rosetta-content {
  flex: 1;
}

.rosetta-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.rosetta-subtitle {
  font-size: 13px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.rosetta-stages {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.rosetta-stage {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.2);
  padding: 3px 8px;
  border-radius: 4px;
}

.rosetta-arrow {
  font-size: 24px;
  opacity: 0.8;
}



/* ═══════════════════════════════════════════════════════════════
   NEUE LERNMODI STRUKTUR v2.1.3.0
═══════════════════════════════════════════════════════════════ */

/* Section Container */
.learning-section {
  padding: 0 16px;
  margin-bottom: 16px;
}

.section-header-new {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 0;
  cursor: pointer;
  user-select: none;
}

.section-icon {
  font-size: 20px;
}

.section-title-new {
  font-weight: 600;
  font-size: 15px;
  color: var(--text-primary);
  flex: 1;
}

.section-badge {
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}

.section-badge.recommended {
  background: linear-gradient(135deg, #8b5cf6, #6366f1);
  color: white;
}

.section-badge.advanced {
  background: var(--gray-200);
  color: var(--gray-600);
}

.section-toggle {
  font-size: 12px;
  color: var(--text-secondary);
  transition: transform 0.3s;
}

/* Immersive Card (Prominent) */
.immersive-section {
  margin-bottom: 20px;
}

.immersive-card {
  display: flex;
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  border-radius: 16px;
  padding: 16px;
  gap: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  color: white;
}

.immersive-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);
}

.immersive-visual {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.immersive-images {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  font-size: 18px;
}

.immersive-audio {
  font-size: 24px;
  margin-top: 4px;
}

.immersive-content {
  flex: 1;
}

.immersive-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 4px;
}

.immersive-desc {
  font-size: 12px;
  opacity: 0.9;
  margin-bottom: 8px;
  line-height: 1.4;
}

.immersive-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.immersive-stages {
  font-size: 11px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: 12px;
}

.immersive-arrow {
  font-size: 20px;
  opacity: 0.8;
}

/* Mode Grid (Neue Version) */
.mode-grid-new {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 500px;
}

.mode-grid-new.collapsed {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
}

.mode-card-new {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--bg-card);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 1px solid var(--border-light);
}

.mode-card-new:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.mode-card-new:active {
  transform: scale(0.98);
}

.mode-icon-new {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border-radius: 10px;
  flex-shrink: 0;
}

.mode-info-new {
  flex: 1;
  min-width: 0;
}

.mode-name-new {
  font-weight: 600;
  font-size: 14px;
  color: var(--text-primary);
}

.mode-desc-new {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.mode-badge-new {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

/* Challenge Cards */
.challenge-grid {
  grid-template-columns: 1fr;
}

.challenge-card {
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-secondary) 100%);
  border: 2px solid var(--primary);
}

.challenge-card .mode-icon-new {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: white;
}

/* Grammatik Grid */
.grammar-grid {
  grid-template-columns: repeat(2, 1fr);
}

/* Natural Learning Steps */
.natural-steps {
  background: var(--bg-card);
  border-radius: 12px;
  padding: 12px;
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  max-height: 600px;
}

.natural-steps.collapsed {
  max-height: 0;
  opacity: 0;
  padding: 0 12px;
}

.natural-intro {
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 12px;
}

.natural-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: var(--bg-secondary);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.natural-step:hover {
  background: var(--bg-hover);
}

.natural-step:last-child {
  margin-bottom: 0;
}

.natural-step .step-num {
  width: 24px;
  height: 24px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.natural-step .step-icon {
  font-size: 20px;
}

.natural-step .step-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
}

.natural-step .step-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

/* Direction Selector Compact */
.direction-selector-compact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-card);
  border-radius: 12px;
  margin: 0 16px 16px;
}

.direction-label-compact {
  font-size: 12px;
  color: var(--text-secondary);
}

.direction-pills {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: flex-end;
}

.direction-pill {
  padding: 6px 12px;
  border: none;
  background: var(--bg-secondary);
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.direction-pill.active {
  background: var(--primary);
  color: white;
}

/* Tutorial Updates für v2.1.3.0 */
.tutorial-immersive-demo {
  margin: 16px 0;
}

.tutorial-immersive-card {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
  border-radius: 12px;
  padding: 16px;
  color: white;
  text-align: center;
}

.tutorial-immersive-images {
  display: flex;
  justify-content: center;
  gap: 8px;
  font-size: 32px;
  margin-bottom: 12px;
}

.tutorial-immersive-audio {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.tutorial-immersive-action {
  font-size: 12px;
  opacity: 0.8;
}

.tutorial-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 16px 0;
}

.tutorial-mode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  background: var(--bg-secondary);
  border-radius: 8px;
  font-size: 11px;
}

.tutorial-mode-item.highlight {
  background: var(--primary-light);
  border: 1px solid var(--primary);
}

.tutorial-mode-item .tmi-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.tutorial-mode-item .tmi-name {
  font-weight: 600;
  color: var(--text-primary);
}

.tutorial-mode-item .tmi-desc {
  font-size: 9px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.tutorial-challenge-demo {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.tutorial-challenge-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 10px;
}

.tutorial-challenge-card.sprint {
  border-left: 3px solid #f59e0b;
}

.tutorial-challenge-card.battle {
  border-left: 3px solid var(--primary);
}

.tutorial-challenge-icon {
  font-size: 28px;
}

.tutorial-challenge-info {
  flex: 1;
}

.tutorial-challenge-name {
  font-weight: 600;
  font-size: 14px;
}

.tutorial-challenge-desc {
  font-size: 11px;
  color: var(--text-secondary);
}

.tutorial-challenge-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
}

.tutorial-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.tutorial-summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--bg-secondary);
  border-radius: 8px;
}

.tutorial-summary-item .tsi-icon {
  font-size: 20px;
}

.tutorial-summary-item .tsi-text {
  font-size: 13px;
  color: var(--text-primary);
}


/* ═══════════════════════════════════════════════════════════════════
   LEVEL-UP TEST SCREEN (v2.1.6.0)
═══════════════════════════════════════════════════════════════════ */

.level-test-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-app);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

.level-test-container {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-height: 100vh;
  overflow-y: auto;
}

/* Header */
.level-test-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  margin-bottom: 20px;
}

.level-test-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
}

.level-test-badge .level-from {
  color: var(--text-secondary);
}

.level-test-badge .level-arrow {
  color: var(--brand-primary);
}

.level-test-badge .level-to {
  color: var(--brand-primary);
  font-size: 20px;
}

.level-test-progress {
  flex: 1;
  margin: 0 20px;
}

.level-test-progress-text {
  font-size: 12px;
  color: var(--text-secondary);
  text-align: center;
  margin-bottom: 4px;
}

.level-test-progress-bar {
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.level-test-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand-primary), var(--brand-secondary));
  border-radius: 3px;
  transition: width 0.3s ease;
}

.level-test-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 18px;
  cursor: pointer;
  transition: all 0.2s;
}

.level-test-close:hover {
  background: var(--danger);
  color: white;
}

/* Question Area */
.level-test-question-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
  min-height: 200px;
}

.test-question-type {
  font-size: 14px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

.test-question-text {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.test-question-hint {
  font-size: 14px;
  color: var(--text-muted);
}

.test-listen-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 40px;
  background: var(--bg-card);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--shadow-md);
}

.test-listen-btn:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

.test-listen-btn .listen-icon {
  font-size: 48px;
}

/* Answer Area */
.level-test-answer-area {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
}

.test-option-btn {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 500;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
}

.test-option-btn:hover:not(:disabled) {
  border-color: var(--brand-primary);
  background: var(--bg-secondary);
}

.test-option-btn:disabled {
  cursor: default;
}

.test-option-btn.correct {
  background: rgba(16, 185, 129, 0.15);
  border-color: var(--brand-secondary);
  color: var(--brand-secondary);
}

.test-option-btn.wrong {
  background: rgba(239, 68, 68, 0.15);
  border-color: var(--danger);
  color: var(--danger);
}

.test-write-input {
  width: 100%;
  padding: 16px 20px;
  font-size: 18px;
  background: var(--bg-card);
  border: 2px solid var(--border-light);
  border-radius: 12px;
  color: var(--text-primary);
  transition: all 0.2s;
}

.test-write-input:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

.test-submit-btn {
  width: 100%;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.test-submit-btn:hover {
  background: var(--brand-primary-dark);
}

/* Feedback */
.level-test-feedback {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border-radius: 16px;
  margin: 12px 0;
  animation: slideUp 0.3s ease;
}

.level-test-feedback.correct {
  background: rgba(16, 185, 129, 0.1);
}

.level-test-feedback.wrong {
  background: rgba(239, 68, 68, 0.1);
}

.feedback-icon {
  font-size: 36px;
  margin-bottom: 8px;
}

.feedback-text {
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.feedback-correct {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.level-test-next-btn {
  width: 100%;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  background: var(--brand-secondary);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 12px;
}

.level-test-next-btn:hover {
  background: var(--brand-secondary-dark);
}

/* Result Screen */
.level-test-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 20px;
  min-height: 80vh;
}

.result-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: bounceIn 0.5s ease;
}

.result-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.result-score {
  margin-bottom: 32px;
}

.result-percentage {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
}

.result-percentage.passed {
  color: var(--brand-secondary);
}

.result-percentage.failed {
  color: var(--danger);
}

.result-details {
  font-size: 16px;
  color: var(--text-secondary);
  margin-top: 8px;
}

.result-level-up {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  padding: 16px 32px;
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-secondary));
  color: white;
  border-radius: 16px;
  animation: pulse 2s infinite;
}

.result-level-up .old-level {
  opacity: 0.7;
}

.result-level-up .arrow {
  font-size: 20px;
}

.result-level-up .new-level {
  font-size: 28px;
}

.result-message {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 32px;
}

.result-close-btn {
  padding: 16px 48px;
  font-size: 18px;
  font-weight: 600;
  background: var(--brand-primary);
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.result-close-btn:hover {
  background: var(--brand-primary-dark);
  transform: translateY(-2px);
}

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

@keyframes bounceIn {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN TOOLS FIXES (v2.1.6.0)
═══════════════════════════════════════════════════════════════════ */

/* Fix: Admin Tabs Scrolling */
.admin-tabs {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 8px;
  padding: 8px 4px;
}

.admin-tabs::-webkit-scrollbar {
  display: none;
}

/* Fix: Admin Section Spacing */
.admin-section {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.admin-section h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-primary);
}

/* Fix: Level-Up Banner */
.level-up-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #10B981, #059669);
  border-radius: var(--radius-lg);
  color: white;
  margin-bottom: 16px;
}

.level-up-banner .level-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.level-up-banner .progress-info {
  font-size: 12px;
  opacity: 0.9;
}

.level-up-banner .test-btn {
  padding: 8px 16px;
  background: white;
  color: #059669;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.level-up-banner .test-btn:hover {
  background: #f0fdf4;
}

/* Fix: Natural Learning Stages - should use level-based approach */
.natural-stage-item {
  display: flex;
  align-items: center;
  padding: 16px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.natural-stage-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-md);
}

.natural-stage-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.natural-stage-item .stage-icon {
  font-size: 32px;
}

.natural-stage-item .stage-info {
  flex: 1;
}

.natural-stage-item .stage-title {
  font-weight: 600;
  color: var(--text-primary);
}

.natural-stage-item .stage-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
}

.natural-stage-item .stage-status {
  font-size: 24px;
}

/* ═══════════════════════════════════════════════════════════════════
   NATURAL LEARNING - TEXT MODE (v2.1.6.0)
   Fallback wenn keine Bilder verfügbar
═══════════════════════════════════════════════════════════════════ */

.natural-images-grid.text-mode {
  gap: 12px;
}

.natural-images-grid.text-mode .natural-image-option {
  aspect-ratio: auto;
  padding: 20px 16px;
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.natural-images-grid.text-mode .option-text {
  font-size: 20px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: center;
}

.natural-images-grid.text-mode .natural-image-option.correct .option-text {
  color: white;
}

.natural-images-grid.text-mode .natural-image-option.wrong .option-text {
  color: white;
}

/* ═══════════════════════════════════════════════════════════════════
   CONTENT-STATUS ALERTS (v2.1.6.2)
   Admin-Banner und Module-Deaktivierung
═══════════════════════════════════════════════════════════════════ */

/* Admin Content Alert Banner */
.admin-content-alert {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #FEF3C7 0%, #FDE68A 100%);
  border: 1px solid #F59E0B;
  border-radius: var(--radius-md);
  padding: 12px 16px;
  margin: 0 16px 16px;
  color: #92400E;
}

.admin-content-alert .alert-icon {
  font-size: 24px;
}

.admin-content-alert .alert-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.admin-content-alert .alert-text strong {
  font-size: 14px;
}

.admin-content-alert .alert-detail {
  font-size: 12px;
  opacity: 0.8;
}

.admin-content-alert .alert-action {
  padding: 8px 16px;
  background: #F59E0B;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}

.admin-content-alert .alert-action:hover {
  background: #D97706;
}

.admin-content-alert .alert-close {
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: #92400E;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.6;
}

.admin-content-alert .alert-close:hover {
  opacity: 1;
}

/* Content-Unavailable Mode Card */
.mode-card.content-unavailable {
  opacity: 0.5;
  position: relative;
  cursor: not-allowed !important;
}

.mode-card.content-unavailable::after {
  content: '⚠️';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 16px;
}

.mode-card.content-unavailable:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* Dark mode */
[data-theme="dark"] .admin-content-alert {
  background: linear-gradient(135deg, #78350F 0%, #92400E 100%);
  border-color: #B45309;
  color: #FEF3C7;
}

[data-theme="dark"] .admin-content-alert .alert-action {
  background: #D97706;
}

/* ═══════════════════════════════════════════════════════════════
   LIGHT MODE FIXES (v2.1.7.8)
   ═══════════════════════════════════════════════════════════════ */

/* Home Content Hintergrund explizit setzen */
[data-theme="light"] .home-content {
  background: #F1F5F9 !important;
}

/* Mode Switcher Light Mode */
[data-theme="light"] .mode-switcher {
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .mode-btn {
  background: #F8FAFC;
  border-color: transparent;
}

[data-theme="light"] .mode-btn.active {
  background: rgba(255, 107, 53, 0.1);
  border-color: var(--primary);
}

[data-theme="light"] .mode-btn[data-mode="travel"].active {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
}

[data-theme="light"] .mode-btn[data-mode="business"].active {
  background: rgba(99, 102, 241, 0.1);
  border-color: #6366f1;
}

/* Level Progress Bar Light Mode */
[data-theme="light"] .level-progress-bar {
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .level-progress-track {
  background: #E2E8F0;
}

/* Cards im Light Mode */
[data-theme="light"] .daily-goal,
[data-theme="light"] .learn-cta {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Level Progress Card Light Mode */
[data-theme="light"] .level-progress {
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Direction Pills Light Mode */
[data-theme="light"] .direction-pills {
  background: #F1F5F9;
}

[data-theme="light"] .direction-pill {
  background: #FFFFFF;
  color: #334155;
}

[data-theme="light"] .direction-pill.active {
  background: var(--primary);
  color: white;
}

/* ═══════════════════════════════════════════════════════════════
   LEVEL-UP BANNER MOBILE RESPONSIVE (v2.1.7.8)
   ═══════════════════════════════════════════════════════════════ */

/* Mobile: Banner vertikal stapeln */
@media (max-width: 480px) {
  .level-up-banner {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
    padding: 14px;
    margin: 0 12px 12px 12px;
  }
  
  .level-up-content {
    flex-direction: column;
    gap: 8px;
  }
  
  .level-up-badge {
    justify-content: center;
    padding: 6px 10px;
  }
  
  .level-up-text {
    text-align: center;
  }
  
  .level-up-title {
    font-size: 14px;
  }
  
  .level-up-progress {
    font-size: 11px;
  }
  
  .level-up-btn {
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* Tablet: Kompaktere Darstellung */
@media (min-width: 481px) and (max-width: 768px) {
  .level-up-banner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
  }
  
  .level-up-content {
    min-width: 200px;
  }
  
  .level-up-btn {
    flex-shrink: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   iOS SAFARI SPECIFIC FIXES (v2.1.7.8)
   ═══════════════════════════════════════════════════════════════ */

/* iOS Safe Area für Home Content */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .home-content {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }
  
  .bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* iOS Tap Highlight entfernen */
.mode-btn,
.direction-pill,
.level-up-btn,
.learn-cta {
  -webkit-tap-highlight-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════
   NATURAL LEARNING V2 - LEITNER UI (v2.2.0)
   ═══════════════════════════════════════════════════════════════ */

.natural-overview {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Daily Card */
.nl-daily-card {
  background: linear-gradient(135deg, #FF6B35 0%, #f7931e 100%);
  border-radius: 20px;
  padding: 24px;
  color: white;
  text-align: center;
}

.nl-daily-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
}

.nl-daily-icon {
  font-size: 24px;
}

.nl-daily-title {
  font-size: 18px;
  font-weight: 600;
}

.nl-due-count {
  margin-bottom: 20px;
}

.nl-due-number {
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  display: block;
}

.nl-due-label {
  font-size: 14px;
  opacity: 0.9;
}

.nl-start-btn {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.nl-review-btn {
  background: white;
  color: #FF6B35;
}

.nl-start-btn:hover {
  transform: scale(1.02);
}

.nl-start-btn:active {
  transform: scale(0.98);
}

/* Leitner Boxes */
.nl-boxes-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border-light);
}

.nl-section-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 16px 0;
  color: var(--text-primary);
}

.nl-boxes-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}

.nl-box {
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 12px 8px;
  text-align: center;
  transition: transform 0.2s, background 0.2s;
}

.nl-box[data-box="1"] { border-bottom: 3px solid #ef4444; }
.nl-box[data-box="2"] { border-bottom: 3px solid #f59e0b; }
.nl-box[data-box="3"] { border-bottom: 3px solid #eab308; }
.nl-box[data-box="4"] { border-bottom: 3px solid #22c55e; }
.nl-box[data-box="5"] { border-bottom: 3px solid #10b981; }

.nl-box-number {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.nl-box-count {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.nl-box-label {
  font-size: 10px;
  color: var(--text-tertiary);
  margin-top: 4px;
}

/* Action Buttons */
.nl-actions-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.nl-action-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s, border-color 0.2s;
}

.nl-action-btn:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
}

.nl-action-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
}

.nl-action-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  display: block;
}

.nl-action-sub {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  display: block;
}

.nl-new-btn:hover { border-color: #6366f1; }
.nl-weak-btn:hover { border-color: #f59e0b; }

/* Progress Card */
.nl-progress-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border-light);
}

.nl-progress-bar-wrap {
  width: 100%;
  height: 12px;
  background: var(--bg-secondary);
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 12px;
}

.nl-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #10b981, #22c55e);
  border-radius: 6px;
  transition: width 0.5s ease;
}

.nl-progress-stats {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text-secondary);
}

.nl-accuracy {
  color: var(--success);
  font-weight: 500;
}

/* Modules List */
.nl-modules-card {
  background: var(--bg-card);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--border-light);
}

.nl-modules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nl-module-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-secondary);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.nl-module-item:hover {
  background: var(--bg-tertiary);
}

.nl-module-item.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.nl-module-icon {
  font-size: 28px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  border-radius: 10px;
}

.nl-module-info {
  flex: 1;
}

.nl-module-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.nl-module-progress {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.nl-module-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-tertiary);
  border-radius: 2px;
  margin-top: 6px;
  overflow: hidden;
}

.nl-module-bar-fill {
  height: 100%;
  background: var(--success);
  border-radius: 2px;
  transition: width 0.3s;
}

.nl-module-percent {
  font-size: 14px;
  font-weight: 600;
  color: var(--success);
}

/* Exercise View */
.nl-exercise-view {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 70px);
  padding: 16px;
}

.nl-exercise-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.nl-exercise-bar {
  flex: 1;
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.nl-exercise-bar-fill {
  height: 100%;
  background: var(--primary);
  transition: width 0.3s;
}

.nl-exercise-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.nl-exercise-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.nl-audio-btn {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  color: white;
  font-size: 32px;
  cursor: pointer;
  margin-bottom: 24px;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.nl-audio-btn:hover {
  transform: scale(1.1);
}

.nl-audio-btn.playing,
.nl-audio-btn.audio-playing {
  animation: audioPulse 0.8s ease-in-out infinite;
}

.nl-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: 100%;
  max-width: 400px;
}

.nl-option {
  aspect-ratio: 1;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  border: 3px solid var(--border-light);
  transition: transform 0.2s, border-color 0.2s;
  background: var(--bg-card);
}

.nl-option:hover {
  transform: scale(1.03);
  border-color: var(--primary);
}

.nl-option img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nl-option.correct {
  border-color: #10b981;
  animation: nl-correct 0.5s ease;
}

.nl-option.wrong {
  border-color: #ef4444;
  animation: nl-shake 0.5s ease;
}

@keyframes nl-correct {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes nl-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.nl-target-word {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 20px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s;
}

.nl-target-word.visible {
  opacity: 1;
}

/* Result View */
.nl-result-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 70px);
  padding: 24px;
  text-align: center;
}

.nl-result-icon {
  font-size: 80px;
  margin-bottom: 24px;
}

.nl-result-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.nl-result-subtitle {
  font-size: 16px;
  color: var(--text-secondary);
  margin-bottom: 32px;
}

.nl-result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  width: 100%;
  max-width: 320px;
  margin-bottom: 32px;
}

.nl-result-stat {
  background: var(--bg-card);
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--border-light);
}

.nl-result-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: var(--primary);
}

.nl-result-stat-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.nl-result-btn {
  width: 100%;
  max-width: 280px;
  padding: 16px;
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
}

.nl-result-btn.primary {
  background: var(--primary);
  color: white;
}

.nl-result-btn.secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════
   SETUP WIZARD STYLES (v2.2.0)
   ═══════════════════════════════════════════════════════════════ */

.setup-wizard-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.setup-step {
  text-align: center;
  z-index: 1;
}

.setup-step > div:first-child {
  transition: background 0.3s;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.setup-spinner {
  animation: spin 1s linear infinite;
}

/* ═══════════════════════════════════════════════════════════════
   SETUP WIZARD - KOMPLETTES STYLING (v2.2.4)
   ═══════════════════════════════════════════════════════════════ */

/* Sprachen-Grid */
.setup-lang-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.setup-lang-btn {
  padding: 16px 8px;
  border: 2px solid var(--border-color, #e5e7eb);
  border-radius: 12px;
  background: var(--bg-card, #ffffff);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.setup-lang-btn:hover {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.1);
  transform: translateY(-2px);
}

.setup-lang-btn.selected {
  border-color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}

.setup-lang-flag {
  font-size: 32px;
}

.setup-lang-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

/* Weiter-Button */
.setup-next-btn {
  padding: 14px 32px;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--gray-300, #d1d5db);
  color: var(--gray-600, #4b5563);
}

.setup-next-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--gray-300, #d1d5db) !important;
  color: var(--gray-600, #4b5563) !important;
}

/* Aktiver Button - WICHTIG: Muss :disabled überschreiben */
.setup-next-btn.active {
  background: #10b981 !important;
  color: white !important;
  opacity: 1 !important;
  cursor: pointer !important;
}

.setup-next-btn:not(:disabled) {
  background: #10b981;
  color: white;
}

.setup-next-btn:not(:disabled):hover,
.setup-next-btn.active:hover {
  background: #059669 !important;
  transform: translateY(-1px);
}

/* Zurück-Button */
.setup-back-btn {
  padding: 14px 24px;
  border-radius: 10px;
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  background: var(--bg-secondary, #f3f4f6);
  color: var(--text-secondary, #6b7280);
  transition: all 0.2s;
}

.setup-back-btn:hover {
  background: var(--bg-tertiary, #e5e7eb);
}

/* Module Liste */
.setup-modules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.setup-module-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--bg-card, #ffffff);
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid var(--border-color, #e5e7eb);
  transition: all 0.2s;
}

.setup-module-item:hover {
  background: var(--bg-hover, #f9fafb);
  border-color: #10b981;
}

.setup-module-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: #10b981;
  cursor: pointer;
}

.setup-module-info {
  flex: 1;
}

.setup-module-name {
  font-weight: 600;
  color: var(--text-primary);
  font-size: 14px;
}

.setup-module-desc {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  margin-top: 2px;
}

/* Kosten-Box */
.setup-cost-box {
  background: rgba(251, 191, 36, 0.15);
  border: 1px solid rgba(251, 191, 36, 0.3);
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.setup-cost-value {
  font-size: 18px;
  font-weight: bold;
  color: #f59e0b;
}

.setup-cost-hint {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* Navigation Buttons */
.setup-nav-buttons {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Progress Box */
.setup-progress-box {
  background: var(--bg-card);
  padding: 20px;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border-color);
}

.setup-current-step {
  background: var(--bg-secondary);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}

.setup-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--border-color, #e5e7eb);
  border-top-color: #10b981;
  border-radius: 50%;
}

.setup-log {
  max-height: 200px;
  overflow-y: auto;
  font-size: 11px;
  font-family: monospace;
  background: #0f172a;
  color: #10b981;
  padding: 12px;
  border-radius: 8px;
}

/* Dark Mode Anpassungen */
[data-theme="dark"] .setup-lang-btn {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .setup-lang-btn:hover,
[data-theme="dark"] .setup-lang-btn.selected {
  background: rgba(16, 185, 129, 0.2);
}

[data-theme="dark"] .setup-module-item {
  background: var(--bg-card);
  border-color: var(--border-color);
}

[data-theme="dark"] .setup-module-item:hover {
  background: var(--bg-secondary);
}

[data-theme="dark"] .setup-cost-box {
  background: rgba(251, 191, 36, 0.1);
}

[data-theme="dark"] .setup-progress-box {
  background: var(--bg-card);
}

/* ═══════════════════════════════════════════════════════════════
   ONBOARDING WIZARDS (v2.2.0)
   ═══════════════════════════════════════════════════════════════ */

.onboarding-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(8px);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.onboarding-overlay.visible {
  opacity: 1;
}

.onboarding-overlay.natural {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.9), rgba(139, 92, 246, 0.9));
}

.onboarding-wizard {
  background: white;
  border-radius: 24px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  animation: onb-slide-up 0.4s ease;
}

@keyframes onb-slide-up {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.onboarding-header {
  padding: 20px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.onboarding-progress {
  display: flex;
  gap: 8px;
}

.onb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: all 0.3s ease;
}

.onb-dot.active {
  background: #6366f1;
  transform: scale(1.2);
}

.onb-dot.completed {
  background: #10b981;
}

.onboarding-skip {
  background: none;
  border: none;
  color: #9ca3af;
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
}

.onboarding-skip:hover {
  color: #6b7280;
}

.onboarding-content {
  flex: 1;
  padding: 24px;
  overflow-y: auto;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.onb-step-header {
  text-align: center;
  margin-bottom: 24px;
}

.onb-title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.onb-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.onb-step-content {
  min-height: 200px;
}

/* Welcome */
.onb-welcome {
  text-align: center;
  padding: 20px 0;
}

.onb-welcome-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.onb-welcome-text {
  font-size: 16px;
  color: #4b5563;
  line-height: 1.6;
}

/* Modes Grid */
.onb-modes-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.onb-mode-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: #f9fafb;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
}

.onb-mode-card.available {
  border-color: #10b981;
  background: #ecfdf5;
}

.onb-mode-card.locked {
  opacity: 0.6;
  border-color: #e5e7eb;
}

.onb-mode-icon {
  font-size: 28px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border-radius: 10px;
}

.onb-mode-info {
  flex: 1;
}

.onb-mode-name {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
}

.onb-mode-desc {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.onb-mode-check {
  color: #10b981;
  font-size: 18px;
  font-weight: bold;
}

.onb-mode-lock {
  font-size: 16px;
}

.onb-upgrade-hint {
  text-align: center;
  margin-top: 16px;
  padding: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-radius: 10px;
  font-size: 13px;
  color: #92400e;
  font-weight: 500;
}

/* Natural Learning Preview */
.onb-natural-preview {
  text-align: center;
}

.onb-natural-demo {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 16px;
  color: white;
}

.onb-natural-audio {
  font-size: 48px;
  margin-bottom: 16px;
}

.onb-natural-images {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 12px;
}

.onb-natural-images span {
  font-size: 32px;
  padding: 8px;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
}

.onb-natural-hint {
  font-size: 14px;
  opacity: 0.9;
}

.onb-natural-text {
  font-size: 15px;
  color: #4b5563;
  line-height: 1.6;
}

/* Natural Learning Demo Full */
.onb-natural-demo-full {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.onb-demo-step {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 12px;
}

.onb-demo-num {
  width: 32px;
  height: 32px;
  background: #6366f1;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  flex-shrink: 0;
}

.onb-demo-content {
  flex: 1;
}

.onb-demo-icon {
  font-size: 32px;
  margin-bottom: 4px;
}

.onb-demo-images {
  display: flex;
  gap: 8px;
  margin-bottom: 4px;
}

.onb-demo-images span {
  font-size: 24px;
  padding: 6px;
  background: #e5e7eb;
  border-radius: 6px;
}

.onb-demo-images span.highlight {
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
}

.onb-demo-text {
  font-size: 14px;
  color: #4b5563;
}

/* Leitner System */
.onb-leitner {
  text-align: center;
}

.onb-leitner-boxes {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 20px;
}

.onb-leitner-box {
  width: 56px;
  padding: 12px 8px;
  background: #f3f4f6;
  border-radius: 10px;
  text-align: center;
}

.onb-leitner-box[data-box="1"] { border-bottom: 3px solid #ef4444; }
.onb-leitner-box[data-box="2"] { border-bottom: 3px solid #f59e0b; }
.onb-leitner-box[data-box="3"] { border-bottom: 3px solid #eab308; }
.onb-leitner-box[data-box="4"] { border-bottom: 3px solid #22c55e; }
.onb-leitner-box[data-box="5"] { border-bottom: 3px solid #10b981; background: #ecfdf5; }

.onb-box-num {
  font-size: 20px;
  font-weight: 700;
  color: #1f2937;
}

.onb-box-label {
  font-size: 10px;
  color: #6b7280;
  margin-top: 4px;
}

.onb-leitner-text {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

/* Modules List */
.onb-modules-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.onb-module {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f9fafb;
  border-radius: 10px;
  font-size: 14px;
  color: #374151;
}

.onb-module span {
  font-size: 20px;
}

/* Start */
.onb-start {
  text-align: center;
  padding: 20px 0;
}

.onb-start-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.onb-start-text {
  font-size: 16px;
  color: #4b5563;
  margin-bottom: 24px;
}

.onb-start-modes {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.onb-quick-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
  background: #f3f4f6;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.onb-quick-mode:hover {
  background: #e5e7eb;
  transform: translateY(-2px);
}

.onb-quick-mode span:first-child {
  font-size: 24px;
}

.onb-quick-mode span:last-child {
  font-size: 12px;
  color: #6b7280;
}

/* Footer */
.onboarding-footer {
  padding: 16px 24px 24px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.onboarding-btn {
  padding: 14px 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.onboarding-btn.primary {
  background: #6366f1;
  color: white;
  flex: 1;
}

.onboarding-btn.primary:hover {
  background: #4f46e5;
}

.onboarding-btn.primary.finish {
  background: linear-gradient(135deg, #10b981, #059669);
}

.onboarding-btn.secondary {
  background: #f3f4f6;
  color: #4b5563;
}

.onboarding-btn.secondary:hover {
  background: #e5e7eb;
}

/* Dark Mode */
[data-theme="dark"] .onboarding-wizard {
  background: var(--bg-card);
}

[data-theme="dark"] .onb-title {
  color: var(--text-primary);
}

[data-theme="dark"] .onb-subtitle,
[data-theme="dark"] .onb-welcome-text,
[data-theme="dark"] .onb-mode-desc,
[data-theme="dark"] .onb-demo-text {
  color: var(--text-secondary);
}

[data-theme="dark"] .onb-mode-card,
[data-theme="dark"] .onb-demo-step,
[data-theme="dark"] .onb-module,
[data-theme="dark"] .onb-leitner-box {
  background: var(--bg-secondary);
}

[data-theme="dark"] .onb-mode-icon,
[data-theme="dark"] .onb-quick-mode {
  background: var(--bg-tertiary);
}

/* ═══════════════════════════════════════════════════════════════════
   THEME-BEWUSSTE UTILITY-KLASSEN (v2.5.3.0)
   Für inline Styles die Theme-Wechsel respektieren müssen
═══════════════════════════════════════════════════════════════════ */

/* Danger/Error Backgrounds */
.bg-danger-subtle {
  background: #fff5f5 !important;
}
[data-theme="dark"] .bg-danger-subtle {
  background: rgba(239, 68, 68, 0.15) !important;
}

/* Warning Backgrounds */
.bg-warning-subtle {
  background: #fef3c7 !important;
}
[data-theme="dark"] .bg-warning-subtle {
  background: rgba(245, 158, 11, 0.15) !important;
}

/* Success Backgrounds */
.bg-success-subtle {
  background: #f0fdf4 !important;
}
[data-theme="dark"] .bg-success-subtle {
  background: rgba(16, 185, 129, 0.15) !important;
}

/* Info/Blue Backgrounds */
.bg-info-subtle {
  background: #eff6ff !important;
}
[data-theme="dark"] .bg-info-subtle {
  background: rgba(59, 130, 246, 0.15) !important;
}

/* Text colors that adapt */
.text-warning-dark {
  color: #92400e;
}
[data-theme="dark"] .text-warning-dark {
  color: #fbbf24;
}

.text-success-dark {
  color: #166534;
}
[data-theme="dark"] .text-success-dark {
  color: #34d399;
}

.text-danger-dark {
  color: #991b1b;
}
[data-theme="dark"] .text-danger-dark {
  color: #f87171;
}

/* Terminal/Console Look */
.terminal-bg {
  background: #1e293b;
  color: #10b981;
}
[data-theme="light"] .terminal-bg {
  background: #0f172a;
  color: #10b981;
}

/* Admin Section Variants */
.admin-section-danger {
  border: 2px solid var(--danger);
  background: #fff5f5;
}
[data-theme="dark"] .admin-section-danger {
  background: rgba(239, 68, 68, 0.1);
}

.admin-section-warning {
  border: 2px solid var(--warning);
  background: #fef3c7;
}
[data-theme="dark"] .admin-section-warning {
  background: rgba(245, 158, 11, 0.1);
}

.admin-section-success {
  border: 2px solid var(--success);
  background: #f0fdf4;
}
[data-theme="dark"] .admin-section-success {
  background: rgba(16, 185, 129, 0.1);
}

/* Fix für inline styles mit background: #fff */
[data-theme="dark"] div[style*="background: #fff"],
[data-theme="dark"] div[style*="background:#fff"],
[data-theme="dark"] .admin-section[style*="background: #fff"] {
  background: var(--bg-card) !important;
}

/* Fix für hardcoded Light-Mode Farben in Admin */
[data-theme="dark"] [style*="#fff5f5"] {
  background: rgba(239, 68, 68, 0.15) !important;
}
[data-theme="dark"] [style*="#fef3c7"] {
  background: rgba(245, 158, 11, 0.15) !important;
}
[data-theme="dark"] [style*="#f0fdf4"] {
  background: rgba(16, 185, 129, 0.15) !important;
}

/* Log/Console Colors im Dark Mode */
[data-theme="dark"] [style*="color: #92400e"] {
  color: #fbbf24 !important;
}
[data-theme="dark"] [style*="color: #166534"] {
  color: #34d399 !important;
}
[data-theme="dark"] [style*="color: #991b1b"] {
  color: #f87171 !important;
}