/* ═══════════════════════════════════════════
   VOCABULARY UX IMPROVEMENTS v1.0
   Better mobile, smoother transitions, cleaner layout
   ═══════════════════════════════════════════ */

/* === MOBILE THEORY/PRACTICE TABS === */
.mobile-content-tabs {
    display: flex !important;
    gap: 4px;
    padding: 6px;
    background: #F1F5F9;
    border-radius: 14px;
    margin: 12px 16px;
    position: sticky;
    top: 52px;
    z-index: 100;
}
[data-theme="dark"] .mobile-content-tabs {
    background: #1E293B;
}
.mobile-content-tab {
    flex: 1;
    padding: 10px 0;
    border: none;
    background: transparent;
    border-radius: 10px;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748B;
    cursor: pointer;
    transition: all 0.25s ease;
}
.mobile-content-tab.active {
    background: #fff !important;
    color: #6366F1 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
[data-theme="dark"] .mobile-content-tab.active {
    background: #334155 !important;
    color: #A5B4FC !important;
}

/* === FIXED TOP NAV IMPROVEMENT === */
.fixed-top-nav {
    height: 52px !important;
    background: rgba(255,255,255,0.92) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
}
[data-theme="dark"] .fixed-top-nav {
    background: rgba(15,23,42,0.92) !important;
    border-color: rgba(255,255,255,0.06) !important;
}
.top-nav-title {
    font-size: 0.9rem !important;
    font-weight: 700 !important;
}

/* === EXERCISE CARDS === */
.exercise-card {
    background: #fff !important;
    border: 1px solid #E5E7EB !important;
    border-radius: 16px !important;
    padding: 20px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03) !important;
    transition: all 0.2s ease !important;
    animation: cardIn 0.3s ease backwards !important;
}
.exercise-card:nth-child(2) { animation-delay: 0.03s !important; }
.exercise-card:nth-child(3) { animation-delay: 0.06s !important; }
.exercise-card:nth-child(4) { animation-delay: 0.09s !important; }
.exercise-card:nth-child(5) { animation-delay: 0.12s !important; }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

[data-theme="dark"] .exercise-card {
    background: #1E293B !important;
    border-color: #334155 !important;
}

/* === OPTION BUTTONS === */
.option-btn {
    border-radius: 12px !important;
    padding: 14px 16px !important;
    font-size: 0.92rem !important;
    transition: all 0.15s ease !important;
    border-width: 2px !important;
}
.option-btn:active:not([disabled]) {
    transform: scale(0.98) !important;
}
.option-btn.correct {
    background: #ECFDF5 !important;
    border-color: #10B981 !important;
    animation: correctPulse 0.5s ease !important;
}
.option-btn.incorrect {
    animation: wrongShake 0.4s ease !important;
}
@keyframes correctPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}
@keyframes wrongShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* === QUESTION TEXT === */
.question-text {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.55 !important;
    color: #1F2937 !important;
    display: block !important;
    margin-bottom: 14px !important;
}
[data-theme="dark"] .question-text {
    color: #E5E7EB !important;
}

/* === EXERCISE TYPE BADGES === */
.exercise-type-badge {
    font-size: 0.6rem !important;
    padding: 3px 8px !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    vertical-align: middle !important;
    margin-left: 6px !important;
}

/* === FILL INPUT === */
.fill-input, .write-area {
    border-radius: 12px !important;
    padding: 12px 14px !important;
    font-size: 15px !important;
    border: 2px dashed #CBD5E1 !important;
    transition: all 0.2s !important;
}
.fill-input:focus, .write-area:focus {
    border-color: #6366F1 !important;
    border-style: solid !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.1) !important;
}

/* === CHECK BUTTON === */
.fill-check-btn {
    padding: 10px 20px !important;
    border-radius: 10px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    background: #6366F1 !important;
    color: #fff !important;
    transition: all 0.15s !important;
}
.fill-check-btn:active:not([disabled]) {
    transform: scale(0.96) !important;
}
.fill-check-btn:disabled {
    background: #CBD5E1 !important;
}

/* === THEORY CONTENT === */
.theory-text-column {
    font-size: 0.92rem !important;
    line-height: 1.75 !important;
}
.theory-text-column strong {
    color: #4338CA;
    cursor: pointer;
    transition: color 0.15s;
}
.theory-text-column strong:hover {
    color: #6366F1;
}
[data-theme="dark"] .theory-text-column strong {
    color: #A5B4FC;
}

/* === EXPLANATION BOX === */
.explanation-box {
    border-radius: 12px !important;
    animation: fadeIn 0.3s ease !important;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* === UNIT NAVIGATION BUTTONS === */
#prev-unit-btn, #next-unit-btn {
    border-radius: 12px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    transition: all 0.15s !important;
}
#prev-unit-btn:active, #next-unit-btn:active {
    transform: scale(0.97) !important;
}

/* === LISTEN PLAY BUTTON === */
.listen-play-btn {
    transition: all 0.2s !important;
    box-shadow: 0 4px 20px rgba(59,130,246,0.3) !important;
}
.listen-play-btn:active {
    transform: scale(0.9) !important;
}

/* === MATCHING ITEMS === */
.match-item {
    border-radius: 10px !important;
    padding: 12px 14px !important;
    transition: all 0.15s !important;
}
.match-item:active {
    transform: scale(0.97) !important;
}

/* === PROGRESS BAR === */
.practice-progress-bar {
    height: 6px !important;
    border-radius: 3px !important;
    overflow: hidden !important;
}
.practice-progress-fill {
    border-radius: 3px !important;
    transition: width 0.4s ease !important;
    background: linear-gradient(90deg, #6366F1, #8B5CF6) !important;
}

/* === SECTION TABS (A/B/C) === */
.section-tab {
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    transition: all 0.15s !important;
}

/* === WEB TITLE === */
.web-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

/* === ROADMAP SIDEBAR === */
.roadmap-sidebar {
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1) !important;
}

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 768px) {
    body {
        padding-top: 52px !important;
    }
    .web-title-section {
        padding: 12px 16px 0 !important;
    }
    .exercise-card {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
    .theory-panel {
        padding: 0 4px !important;
    }
    .practice-panel {
        padding: 0 4px !important;
    }
    /* Prevent content jumping when switching tabs */
    .mobile-hidden {
        display: none !important;
    }
    /* Better scroll snap for exercises */
    .practice-content {
        scroll-behavior: smooth;
    }
}

/* === SMOOTH PAGE TRANSITIONS === */
.theory-panel, .practice-panel {
    animation: panelFade 0.3s ease !important;
}
@keyframes panelFade { from { opacity: 0; } to { opacity: 1; } }

/* === SMART BAR IMPROVEMENTS === */
#smart-bar {
    border-radius: 0 !important;
    padding: 6px 0 max(6px, env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,0.95) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}
[data-theme="dark"] #smart-bar {
    background: rgba(15,23,42,0.95) !important;
}