body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6;
    min-height: 100vh;
}
.bee-page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.bee-row-1 {
    position: sticky;
    top: 0;
    z-index: 20;
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s, box-shadow 0.3s;
}
.main-content-area {
    flex-grow: 1;
    padding-top: 6rem; /* İçeriği sabit başlığın altından kurtarmak için artırdık */
    padding-bottom: 2rem;
}
.bee-row-1 .bee-row-content {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.bee-menu ul li {
    padding: 10px 15px;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.2s;
}
.bee-menu ul li a {
    color: #1f2937;
    text-decoration: none;
    transition: color 0.2s;
}
.bee-menu ul li a:hover,
.nav-active {
    color: #10b981 !important;
}
.quiz-container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 1rem;
}
.quiz-card {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.option-button {
    transition: all 0.2s;
}
.option-button:hover:not(.selected):not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.gradient-header {
    background-image: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
}
.q-index-button {
    transition: background-color 0.1s, transform 0.1s;
}
@media (max-width: 640px) {
    .summary-table-cell {
        display: block;
        width: 100%;
        text-align: left !important;
        padding-bottom: 0.5rem;
        padding-top: 0.5rem;
    }
    .summary-table-row {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 0;
        padding: 0.5rem;
        border-bottom: 1px solid #e5e7eb;
    }
    .summary-table-header {
        display: none;
    }
    .summary-table-cell:first-child {
        font-size: 1.125rem;
        font-weight: 700;
        border-bottom: none;
    }
    .summary-table-cell:last-child {
        text-align: right !important;
        border-bottom: none;
    }
}
.history-modal {
    max-height: 80vh;
    overflow-y: auto;
}
.history-item {
    transition: all 0.2s;
}
.cefr-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
    border-radius: 12px;
    box-shadow: 0 5px 10px -3px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease-in-out;
    cursor: pointer;
    border: 3px solid transparent;
}
.cefr-button:hover {
    transform: translateY(-4px);
}
.cefr-button-A {
    background-color: #ecfdf5;
    border-color: #10b981;
}
.cefr-button-A:hover {
    background-color: #d1fae5;
}
.cefr-button-B {
    background-color: #eff6ff;
    border-color: #3b82f6;
}
.cefr-button-B:hover {
    background-color: #dbeafe;
}
.cefr-button-C {
    background-color: #f5f3ff;
    border-color: #8b5cf6;
}
.cefr-button-C:hover {
    background-color: #ede9fe;
}

/* NEW: Test button colors for different CEFR levels */
.test-button-A {
    background-color: #ecfdf5;
    border-color: #10b981;
    color: #065f46;
}
.test-button-A:hover {
    background-color: #d1fae5;
}
.test-button-B {
    background-color: #eff6ff;
    border-color: #3b82f6;
    color: #1e40af;
}
.test-button-B:hover {
    background-color: #dbeafe;
}
.test-button-C {
    background-color: #f5f3ff;
    border-color: #8b5cf6;
    color: #5b21b6;
}
.test-button-C:hover {
    background-color: #ede9fe;
}
.progress-ring {
    transform: rotate(-90deg);
}
.progress-ring-circle {
    transition: stroke-dashoffset 0.3s;
}
.auth-card {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
/* Abstract Aurora Background */
.aurora-bg {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: -1; overflow: hidden; pointer-events: none;
    background: radial-gradient(circle at top left, #f8fafc 40%, #e2e8f0 100%);
}
.dark .aurora-bg {
    background: radial-gradient(circle at top left, #050505 40%, #0a0a0a 100%);
}
.aurora-blob-1, .aurora-blob-2, .aurora-blob-3 {
    position: absolute; border-radius: 50%; filter: blur(100px);
    opacity: 0.25; animation: aurora 15s infinite alternate ease-in-out;
}
.dark .aurora-blob-1, .dark .aurora-blob-2, .dark .aurora-blob-3 {
    opacity: 0.15;
}
.aurora-blob-1 { top: -10%; left: -10%; width: 500px; height: 500px; background: #06b6d4; }
.aurora-blob-2 { bottom: -10%; right: -10%; width: 600px; height: 600px; background: #a855f7; animation-delay: -5s; }
.aurora-blob-3 { top: 40%; left: 40%; width: 400px; height: 400px; background: #3b82f6; animation-delay: -10s; }

@keyframes aurora {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(50px, -50px) scale(1.2); }
    100% { transform: translate(-50px, 50px) scale(0.9); }
}

/* Transparan arkaplan ayarı (Aurora'nın görünmesi için) */
body {
    background-color: transparent !important;
}

/* 1. KARTLAR VE PANELLER (Linguamis Glass Card Görünümü) */
.dark .bg-white {
    background-color: rgba(20, 20, 20, 0.75) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 2. METİN RENKLERİ */
.dark .text-gray-800, .dark .text-gray-900 { color: #f8fafc !important; }
.dark .text-gray-700, .dark .text-gray-600 { color: #cbd5e1 !important; }
.dark .text-gray-500 { color: #94a3b8 !important; }

/* 3. İKİNCİL ARKA PLANLAR (Soru alanı, iç paneller) */
.dark .bg-gray-50, .dark .bg-gray-100 {
    background-color: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

/* 4. INPUT VE SELECT ALANLARI */
.dark input, .dark select {
    background-color: rgba(0, 0, 0, 0.5) !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ----- 5. QUIZ ŞIKLARI (OPTION BUTTONS) DÜZELTMESİ ----- */
/* JS kodunda btn.classList.add('bg-white') eklendiği için .bg-white sınıfını özel olarak eziyoruz[cite: 3]. */

/* Şıkların varsayılan karanlık mod görünümü */
.dark .option-button.bg-white:not(.bg-green-500):not(.bg-red-500) {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    color: #e2e8f0 !important;
}

/* Şıkların üzerine gelindiğinde (hover) */
.dark .option-button.bg-white:not(.bg-green-500):not(.bg-red-500):hover {
    background-color: rgba(6, 182, 212, 0.15) !important;
    border-color: rgba(6, 182, 212, 0.5) !important;
}

/* Doğru Cevap Seçildiğinde (Yeşil) */
.dark button.bg-green-500 {
    background-color: #22c55e !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}

/* Yanlış Cevap Seçildiğinde (Kırmızı) */
.dark button.bg-red-500 {
    background-color: #ef4444 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* ----- 6. CEFR VE TABLO RENKLERİ ----- */
.dark .cefr-button-A { background-color: rgba(16, 185, 129, 0.1) !important; border-color: rgba(16, 185, 129, 0.3) !important; }
.dark .cefr-button-B { background-color: rgba(59, 130, 246, 0.1) !important; border-color: rgba(59, 130, 246, 0.3) !important; }
.dark .cefr-button-C { background-color: rgba(139, 92, 246, 0.1) !important; border-color: rgba(139, 92, 246, 0.3) !important; }

.dark .summary-table-row.bg-yellow-50 { background-color: rgba(234, 179, 8, 0.15) !important; border-color: rgba(234, 179, 8, 0.2) !important; color: #fde047 !important;}
.dark .summary-table-row.bg-green-50 { background-color: rgba(34, 197, 94, 0.15) !important; border-color: rgba(34, 197, 94, 0.2) !important; color: #86efac !important; }
.dark .summary-table-row.bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important;}
/* ----- 7. ANASAYFA BİLGİLENDİRME KARTLARI (Teal, Indigo, Purple) ----- */
/* Kart arka planlarını şeffaf ve uyumlu hale getiriyoruz */
.dark .bg-teal-50 { background-color: rgba(20, 184, 166, 0.1) !important; border-color: rgba(20, 184, 166, 0.2) !important; }
.dark .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.1) !important; border-color: rgba(99, 102, 241, 0.2) !important; }
.dark .bg-purple-50 { background-color: rgba(168, 85, 247, 0.1) !important; border-color: rgba(168, 85, 247, 0.2) !important; }

/* Kart başlıklarındaki koyu renkli yazıları daha açık (pastel) renklere çeviriyoruz */
.dark .text-teal-700 { color: #2dd4bf !important; } /* Teal-400 */
.dark .text-indigo-700 { color: #818cf8 !important; } /* Indigo-400 */
.dark .text-purple-700 { color: #c084fc !important; } /* Purple-400 */


/* ----- 8. GEÇMİŞ VE DETAYLI İNCELEME PANELLERİ (Doğru, Yanlış, Boş) ----- */
/* Geçmiş ekranındaki detay panellerinin arka planları */
.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; border-color: rgba(34, 197, 94, 0.2) !important; }
.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; border-color: rgba(239, 68, 68, 0.2) !important; }
.dark .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.1) !important; border-color: rgba(234, 179, 8, 0.2) !important; }

/* Bildirim mesajlarının (feedback) arka planları */
.dark .bg-green-100 { background-color: rgba(34, 197, 94, 0.15) !important; border-color: rgba(34, 197, 94, 0.3) !important; }
.dark .bg-red-100 { background-color: rgba(239, 68, 68, 0.15) !important; border-color: rgba(239, 68, 68, 0.3) !important; }
.dark .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.15) !important; border-color: rgba(234, 179, 8, 0.3) !important; }

/* Doğru/Yanlış/Uyarı metin renklerini karanlık modda okunabilir yapıyoruz */
.dark .text-green-700 { color: #4ade80 !important; } /* Green-400 */
.dark .text-red-700 { color: #f87171 !important; } /* Red-400 */
.dark .text-yellow-700 { color: #facc15 !important; } /* Yellow-400 */

.dark .text-green-800 { color: #86efac !important; } /* Green-300 */
.dark .text-red-800 { color: #fca5a5 !important; } /* Red-300 */
.dark .text-yellow-800 { color: #fef08a !important; } /* Yellow-300 */