/* Optimized CSS Bundle-Generated Fri Oct 24 22:12:05 JST 2025 *//* CSS Variables */:root{--bottom-nav-height:80px;--top-header-height:50px;--primary-color:#0d6efd;--text-color:#6c757d;--text-color-active:#0d6efd;--flashcard-back-bg:#2c3e50;}/* From:app-style.css *//*** File:app-style.css* Description:Mobile-Only Stylesheet cho ứng dụng học tập Luc Sensei.* Version:5.0 (Mobile-First Architecture)* Features:Mobile-optimized,Touch-friendly,Performance-focused*/:root{--bottom-nav-height:80px;--top-header-height:50px;--primary-color:#0d6efd;--text-color:#6c757d;--text-color-active:#0d6efd;--flashcard-back-bg:#2c3e50;}html,body{min-height:100%;background-color:#f8f9fa;}body{padding-top:var(--top-header-height);padding-bottom:var(--bottom-nav-height);-webkit-tap-highlight-color:transparent;}/* ==================================================================== *//* Bố cục Header Trái-Giữa-Phải *//* ==================================================================== */.top-header{position:fixed;top:0;left:0;right:0;height:var(--top-header-height);background-color:#ffffff;border-bottom:1px solid #dee2e6;z-index:1030;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;gap:1rem;}.header-side-left,.header-side-right{flex:1;display:flex;align-items:center;}.header-side-left{justify-content:flex-start;}.header-side-right{justify-content:flex-end;}.header-center{flex-grow:1;text-align:center;}.app-title{font-weight:600;font-size:1.2rem;color:var(--primary-color);white-space:nowrap;}.btn-header-action{border:none;background:none;font-size:1.5rem;padding:0.5rem;color:#6c757d;transition:color 0.2s ease;line-height:1;}.btn-header-action:hover{color:var(--primary-color);}.user-profile .user-avatar{border-radius:50%;border:2px solid #dee2e6;object-fit:cover;transition:border-color 0.2s ease;}.user-profile a:hover .user-avatar{border-color:var(--primary-color);}.login-button{padding:0.375rem 0.8rem;font-weight:500;font-size:0.9rem;white-space:nowrap;}.dropdown-menu{--bs-dropdown-link-active-bg:var(--primary-color);}.gamify-stats-container{display:flex;align-items:center;gap:0.75rem;}.gamify-stat{display:flex;align-items:center;background-color:#f1f3f5;padding:0.25rem 0.6rem;border-radius:20px;font-weight:500;color:#495057;font-size:0.9rem;}.gamify-stat i{font-size:1.1em;margin-right:0.25rem;}[data-bs-theme="dark"] .gamify-stat{background-color:#2d2d2d;color:#dee2e6;}[data-bs-theme="dark"] .btn-header-action{color:#adb5bd;}/* Course Switcher */.course-switcher-container{display:flex;align-items:center;}.course-switcher-container select{background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:6px;padding:0.25rem 0.5rem;font-size:0.85rem;color:#495057;min-width:120px;max-width:180px;}.course-switcher-container select:focus{border-color:var(--primary-color);box-shadow:0 0 0 0.2rem rgba(13,110,253,0.25);outline:none;}.course-switcher-container select option{padding:0.25rem;}[data-bs-theme="dark"] .course-switcher-container select{background-color:#2d2d2d;border-color:#495057;color:#dee2e6;}/* ==================================================================== *//* NEW DASHBOARD STYLES *//* ==================================================================== */.dashboard-container{max-width:1200px;margin:0 auto;padding:0.25rem 1rem 2rem 1rem;}/* Progress Section */.progress-section{margin-bottom:2rem;}.progress-section .card{border:none;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s ease;}.progress-section .card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.12);}.progress-section .card-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;border-radius:16px 16px 0 0;padding:1rem 1.5rem;font-weight:600;display:flex;align-items:center;gap:0.75rem;}.progress-section .card-header i{font-size:1.25rem;}.progress-section .card-body{padding:1.5rem;}.progress-item{display:flex;justify-content:space-between;align-items:center;padding:0.75rem 0;border-bottom:1px solid #f1f3f4;}.progress-item:last-child{border-bottom:none;}.progress-label{font-weight:500;color:#495057;flex:1;}.progress-value{font-weight:600;color:#667eea;margin-left:1rem;}.progress-bar-custom{height:8px;background-color:#e9ecef;border-radius:4px;overflow:hidden;margin-top:0.5rem;}.progress-bar-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:4px;transition:width 0.8s ease;}/* Actions Section-Extra bottom margin */.actions-section{margin-bottom:3rem;}.actions-section .card{border:none;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);transition:all 0.3s ease;}.actions-section .card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.12);}.actions-section .card-header{background:linear-gradient(135deg,#51cf66 0%,#40c057 100%);color:white;border:none;border-radius:16px 16px 0 0;padding:1rem 1.5rem;font-weight:600;display:flex;align-items:center;gap:0.75rem;}.actions-section .card-header i{font-size:1.25rem;}.actions-section .card-body{padding:1.5rem;}.action-item{display:flex;align-items:center;gap:1rem;padding:1rem;border:1px solid #e9ecef;border-radius:12px;margin-bottom:0.75rem;transition:all 0.3s ease;cursor:pointer;text-decoration:none;color:inherit;}.action-item:hover{background-color:#f8f9fa;border-color:#667eea;transform:translateX(4px);text-decoration:none;color:inherit;}.action-item:last-child{margin-bottom:0;}.action-icon{width:48px;height:48px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-size:1.25rem;flex-shrink:0;}.action-content{flex:1;}.action-title{font-weight:600;color:#495057;margin-bottom:0.25rem;}.action-description{font-size:0.875rem;color:#6c757d;margin:0;}/* Welcome Section-Enhanced with Animated Wave */.welcome-section{margin-bottom:1rem;position:relative;}.welcome-card{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:20px;padding:1.5rem 2rem;color:white;box-shadow:0 8px 32px rgba(102,126,234,0.3);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}.welcome-card::before{content:"";position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);border-radius:50%;animation:float 6s ease-in-out infinite;}.welcome-card::after{content:"";position:absolute;bottom:-30%;left:-10%;width:150px;height:150px;background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);border-radius:50%;animation:float 8s ease-in-out infinite reverse;}.welcome-card:hover{box-shadow:0 12px 40px rgba(102,126,234,0.4);transform:translateY(-3px) scale(1.02);}.welcome-content{display:flex;align-items:center;gap:1.5rem;position:relative;z-index:2;}.welcome-icon{font-size:2.5rem;animation:wave 2s ease-in-out infinite;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));}.welcome-text{flex:1;}.welcome-title{font-size:1.6rem;font-weight:700;margin:0 0 0.5rem 0;color:white;text-shadow:0 2px 4px rgba(0,0,0,0.2);letter-spacing:-0.025em;}.welcome-subtitle{font-size:1rem;opacity:0.9;margin:0;color:rgba(255,255,255,0.9);font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,0.1);}/* Wave Animation */@keyframes wave{0%,100%{transform:rotate(0deg);}25%{transform:rotate(-10deg);}75%{transform:rotate(10deg);}}/* Float Animation */@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg);}50%{transform:translateY(-20px) rotate(180deg);}}/* Course Selection Card */.course-selection-card .card{border-radius:15px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border:1px solid #dee2e6;}.course-selection-card .card-body{padding:1.5rem;}.course-selection-card .form-select-lg{border-radius:10px;border:2px solid #dee2e6;font-size:1.1rem;padding:0.75rem 1rem;transition:all 0.3s ease;}.course-selection-card .form-select-lg:focus{border-color:#0d6efd;box-shadow:0 0 0 0.2rem rgba(13,110,253,0.25);}.current-course-info{text-align:right;}/* Section Headers-Harmonious */.section-header{text-align:left;margin-bottom:1.5rem;padding:0 0.5rem;}.section-title{font-size:1.3rem;font-weight:600;color:#495057;margin-bottom:0.5rem;display:flex;align-items:center;gap:0.5rem;}.section-subtitle{font-size:1rem;margin:0;}/* Stats Grid */.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;margin-bottom:2rem;}.stat-card{background:white;border-radius:15px;padding:1.5rem;box-shadow:0 5px 15px rgba(0,0,0,0.08);border:1px solid #e9ecef;transition:all 0.3s ease;position:relative;overflow:hidden;}.stat-card:hover{transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,0.15);}.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea,#764ba2);}.vocab-card::before{background:linear-gradient(90deg,#4facfe,#00f2fe);}.questions-card::before{background:linear-gradient(90deg,#43e97b,#38f9d7);}.review-card::before{background:linear-gradient(90deg,#fa709a,#fee140);}.stat-icon{width:60px;height:60px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;font-size:1.5rem;color:white;}.vocab-card .stat-icon{background:linear-gradient(135deg,#4facfe,#00f2fe);}.questions-card .stat-icon{background:linear-gradient(135deg,#43e97b,#38f9d7);}.review-card .stat-icon{background:linear-gradient(135deg,#fa709a,#fee140);}.stat-content{text-align:center;}.stat-number{font-size:2rem;font-weight:700;color:#2c3e50;margin-bottom:0.5rem;}.stat-label{font-size:1rem;color:#6c757d;margin-bottom:1rem;font-weight:500;}.stat-progress{height:6px;background:#e9ecef;border-radius:3px;overflow:hidden;}.progress-bar{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);border-radius:3px;transition:width 0.8s ease;}/* Actions Grid */.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;}.action-card{background:white;border-radius:15px;padding:1.5rem;text-decoration:none;color:inherit;box-shadow:0 5px 15px rgba(0,0,0,0.08);border:1px solid #e9ecef;transition:all 0.3s ease;display:flex;align-items:center;gap:1rem;position:relative;overflow:hidden;}.action-card:hover{transform:translateY(-3px);box-shadow:0 10px 25px rgba(0,0,0,0.15);text-decoration:none;color:inherit;}.action-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#667eea,#764ba2);}.vocab-action::before{background:linear-gradient(90deg,#4facfe,#00f2fe);}.practice-action::before{background:linear-gradient(90deg,#43e97b,#38f9d7);}.test-action::before{background:linear-gradient(90deg,#fa709a,#fee140);}.action-icon{width:50px;height:50px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:white;flex-shrink:0;}.vocab-action .action-icon{background:linear-gradient(135deg,#4facfe,#00f2fe);}.practice-action .action-icon{background:linear-gradient(135deg,#43e97b,#38f9d7);}.test-action .action-icon{background:linear-gradient(135deg,#fa709a,#fee140);}.action-content{flex:1;}.action-title{font-size:1.2rem;font-weight:600;color:#2c3e50;margin-bottom:0.5rem;}.action-description{font-size:0.9rem;color:#6c757d;margin-bottom:0.5rem;}.action-badge{display:inline-block;background:#f8f9fa;color:#6c757d;padding:0.25rem 0.75rem;border-radius:20px;font-size:0.8rem;font-weight:500;}.action-arrow{color:#6c757d;font-size:1.2rem;flex-shrink:0;}/* Dark Theme-Complete */[data-bs-theme="dark"] .welcome-card{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);box-shadow:0 8px 32px rgba(74,85,104,0.4);}[data-bs-theme="dark"] .welcome-card:hover{box-shadow:0 12px 40px rgba(74,85,104,0.5);}[data-bs-theme="dark"] .welcome-card::before{background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);}[data-bs-theme="dark"] .welcome-card::after{background:radial-gradient(circle,rgba(255,255,255,0.03) 0%,transparent 70%);}[data-bs-theme="dark"] .welcome-title{color:#f7fafc;text-shadow:0 2px 4px rgba(0,0,0,0.3);}[data-bs-theme="dark"] .welcome-subtitle{color:rgba(247,250,252,0.8);text-shadow:0 1px 2px rgba(0,0,0,0.2);}[data-bs-theme="dark"] .stat-card,[data-bs-theme="dark"] .action-card{background:#2d2d2d;border-color:#495057;}[data-bs-theme="dark"] .stat-card-mobile{background:#2d2d2d;border-color:#495057;color:#e9ecef;}[data-bs-theme="dark"] .action-card-mobile{background:#2d2d2d;border-color:#495057;color:#e9ecef;}[data-bs-theme="dark"] .section-title{color:#e9ecef;}[data-bs-theme="dark"] .stat-number{color:#e9ecef;}[data-bs-theme="dark"] .stat-label{color:#adb5bd;}[data-bs-theme="dark"] .action-title{color:#e9ecef;}[data-bs-theme="dark"] .action-description{color:#adb5bd;}[data-bs-theme="dark"] .course-selection-card .card{background:linear-gradient(135deg,#2d2d2d 0%,#343a40 100%);border-color:#495057;color:#e9ecef;}[data-bs-theme="dark"] .course-selection-card .form-select-lg{background-color:#343a40;border-color:#495057;color:#e9ecef;}[data-bs-theme="dark"] .current-course-info{color:#adb5bd;}[data-bs-theme="dark"] .current-course-link{color:#60a5fa;}/* Mobile Optimized Styles */.stats-grid-mobile{display:grid;grid-template-columns:repeat(3,1fr);gap:0.5rem;margin-bottom:1rem;}.stat-card-mobile{background:#f8f9fa;border-radius:12px;padding:1rem;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #e9ecef;text-align:center;position:relative;overflow:hidden;transition:all 0.3s ease;}.stat-card-mobile:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1);}.stat-card-mobile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6c757d,#adb5bd);}.vocab-card::before{background:linear-gradient(90deg,#0d6efd,#6f42c1);}.questions-card::before{background:linear-gradient(90deg,#198754,#20c997);}.review-card::before{background:linear-gradient(90deg,#fa709a,#fee140);}.stat-icon-mobile{width:35px;height:35px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin:0 auto 0.5rem;font-size:1rem;color:white;}.vocab-card .stat-icon-mobile{background:linear-gradient(135deg,#4facfe,#00f2fe);}.questions-card .stat-icon-mobile{background:linear-gradient(135deg,#43e97b,#38f9d7);}.review-card .stat-icon-mobile{background:linear-gradient(135deg,#fa709a,#fee140);}.stat-number-mobile{font-size:1.5rem;font-weight:700;color:#2c3e50;margin-bottom:0.25rem;}.stat-label-mobile{font-size:0.8rem;color:#6c757d;font-weight:500;}.actions-grid-mobile{display:grid;grid-template-columns:1fr;gap:0.75rem;}.action-card-mobile{background:#f8f9fa;border-radius:12px;padding:1rem;text-decoration:none;color:inherit;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #e9ecef;transition:all 0.3s ease;display:flex;align-items:center;gap:0.75rem;position:relative;overflow:hidden;}.action-card-mobile:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.12);text-decoration:none;color:inherit;}.action-card-mobile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#6c757d,#adb5bd);}.vocab-action::before{background:linear-gradient(90deg,#0d6efd,#6f42c1);}.practice-action::before{background:linear-gradient(90deg,#198754,#20c997);}.test-action::before{background:linear-gradient(90deg,#fa709a,#fee140);}.action-icon-mobile{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;color:white;flex-shrink:0;}.vocab-action .action-icon-mobile{background:linear-gradient(135deg,#4facfe,#00f2fe);}.practice-action .action-icon-mobile{background:linear-gradient(135deg,#43e97b,#38f9d7);}.test-action .action-icon-mobile{background:linear-gradient(135deg,#fa709a,#fee140);}.action-content-mobile{flex:1;}.action-title-mobile{font-size:1rem;font-weight:600;color:#2c3e50;margin-bottom:0.25rem;}.action-description-mobile{font-size:0.8rem;color:#6c757d;margin:0;}/* Responsive */@media (max-width:768px){.welcome-card{padding:1.25rem 1.5rem;border-radius:16px;}.welcome-content{gap:1.25rem;}.welcome-icon{font-size:2.2rem;}.welcome-title{font-size:1.5rem;margin-bottom:0.4rem;}.welcome-subtitle{font-size:0.95rem;}.welcome-card::before{width:150px;height:150px;}.welcome-card::after{width:120px;height:120px;}.section-title{font-size:1.4rem;}.course-selection-card .row{flex-direction:column;}.current-course-info{text-align:center;margin-top:1rem;}.course-selection-card .form-select-lg{font-size:1rem;padding:0.6rem 0.8rem;}}/* Mobile-Only Document Content */.document-content-wrapper{background:white;border-radius:16px;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:1px solid #f1f3f4;margin:0 1rem 2rem 1rem;padding:2rem;}.document-content{font-size:1.05rem;line-height:1.7;}.document-content p{margin-bottom:1.4rem;}.document-content ul,.document-content ol{padding-left:2rem;margin-bottom:1.4rem;}/* Mobile-Only Stats Grid */.stats-grid-mobile{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-bottom:1rem;}.actions-grid-mobile{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;}/* Hide desktop grids on mobile */.stats-grid{display:none;}.actions-grid{display:none;}#search-results-container{min-height:50px;max-height:60vh;overflow-y:auto;}#search-results-container .list-group-item{cursor:pointer;}#search-results-container .list-group-item .badge{font-size:0.7rem;}/* ==================================================================== */.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-height);background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);border-top:1px solid rgba(0,0,0,0.08);display:flex;justify-content:space-around;align-items:center;box-shadow:0-4px 20px rgba(0,0,0,0.08);backdrop-filter:blur(10px);z-index:1030;border-radius:20px 20px 0 0;}.bottom-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;flex-grow:1;text-decoration:none;color:#8e8e93;padding:12px 8px;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);border-radius:12px;margin:0 4px;position:relative;overflow:hidden;}.bottom-nav a::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,var(--primary-color),#0056b3);opacity:0;transition:opacity 0.3s ease;border-radius:12px;z-index:-1;}.bottom-nav a:active{transform:scale(0.95);}.bottom-nav a i{font-size:1.5rem;margin-bottom:6px;transition:all 0.3s ease;position:relative;z-index:1;}.bottom-nav a span{font-size:0.7rem;font-weight:500;transition:all 0.3s ease;position:relative;z-index:1;}.bottom-nav a.active{color:#ffffff;font-weight:600;transform:translateY(-2px);}.bottom-nav a.active::before{opacity:1;}.bottom-nav a.active i{transform:scale(1.1);}.bottom-nav a:hover:not(.active){color:var(--primary-color);transform:translateY(-1px);}.bottom-nav a:hover:not(.active) i{transform:scale(1.05);}/* Add subtle pulse animation for active tab */@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(13,110,253,0.4);}70%{box-shadow:0 0 0 10px rgba(13,110,253,0);}100%{box-shadow:0 0 0 0 rgba(13,110,253,0);}}.bottom-nav a.active::after{content:"";position:absolute;top:50%;left:50%;width:4px;height:4px;background:#ffffff;border-radius:50%;transform:translate(-50%,-50%);animation:pulse 2s infinite;z-index:2;}/* Smooth transitions for all states */.bottom-nav a{will-change:transform,color;}/* Enhanced focus states for accessibility */.bottom-nav a:focus{outline:2px solid var(--primary-color);outline-offset:2px;}/* Mobile-specific optimizations */@media (max-width:768px){.bottom-nav{height:85px;border-radius:25px 25px 0 0;}.bottom-nav a{padding:14px 6px;}.bottom-nav a i{font-size:1.6rem;margin-bottom:8px;}.bottom-nav a span{font-size:0.75rem;}}.main-content{padding:0.25rem 0 2rem 0;margin:0;width:100vw;max-width:100vw;}#content-display{transition:opacity 0.2s ease-in-out;margin:0;padding:0;width:100vw;max-width:100vw;}.fade-out{opacity:0 !important;}/* MỚI:CSS cho Tab cố định và Tìm kiếm từ vựng */.vocab-sticky-header{position:-webkit-sticky;position:sticky;/* Dính vào ngay dưới thanh header chính */top:var(--top-header-height);background-color:var(--bs-body-bg);z-index:1022;/* Cao hơn nội dung nhưng thấp hơn header chính */padding-top:0.5rem;padding-bottom:0.5rem;margin:-1rem-1rem 0-1rem;/* Bù lại padding của .main-content */padding-left:1rem;padding-right:1rem;}.fab-container{position:fixed;bottom:calc(var(--bottom-nav-height)+20px);right:20px;z-index:1020;}.fab-ai-button{width:56px;height:56px;border-radius:50%;border:none;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;box-shadow:0 8px 25px rgba(102,126,234,0.4);display:flex;align-items:center;justify-content:center;font-size:1.6rem;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}.fab-ai-button::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#764ba2 0%,#667eea 100%);opacity:0;transition:opacity 0.3s ease;border-radius:50%;}.fab-ai-button:hover{transform:scale(1.15) translateY(-2px);box-shadow:0 12px 35px rgba(102,126,234,0.6);}.fab-ai-button:hover::before{opacity:1;}.fab-ai-button:active{transform:scale(1.05) translateY(-1px);}.fab-ai-button i{position:relative;z-index:1;transition:all 0.3s ease;}.fab-ai-button:hover i{transform:scale(1.1) rotate(5deg);}/* AI Chat Pulse Animation */@keyframes ai-pulse{0%{box-shadow:0 8px 25px rgba(102,126,234,0.4);}50%{box-shadow:0 8px 25px rgba(102,126,234,0.8),0 0 0 10px rgba(102,126,234,0.1);}100%{box-shadow:0 8px 25px rgba(102,126,234,0.4);}}.fab-ai-button.pulse{animation:ai-pulse 2s infinite;}/* Floating particles effect */@keyframes float{0%,100%{transform:translateY(0px);}50%{transform:translateY(-10px);}}.fab-ai-button::after{content:"✨";position:absolute;top:-3px;right:-3px;font-size:0.6rem;animation:float 3s ease-in-out infinite;opacity:0.8;}.skeleton{animation:skeleton-loading 1s linear infinite alternate;}@keyframes skeleton-loading{0%{background-color:hsl(200,20%,80%);}100%{background-color:hsl(200,20%,95%);}}.skeleton-card{background-color:#fff;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.08);margin-bottom:1.5rem;padding:1rem;}.skeleton-line{height:1.2rem;border-radius:4px;margin-bottom:0.75rem;}.skeleton-line:last-child{margin-bottom:0;}/* AI Chat Modal Styling */#ai-chat-modal .modal-content{border:none;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.15);overflow:hidden;background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);}.chat-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:1.5rem;position:relative;}.chat-header::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http:opacity:0.3;}.chat-header .modal-title{position:relative;z-index:1;font-weight:600;font-size:1.2rem;}.chat-header .modal-title i{background:rgba(255,255,255,0.2);padding:8px;border-radius:12px;margin-right:12px;}.chat-header .btn-close{filter:invert(1);opacity:0.8;position:relative;z-index:1;}.chat-header .btn-close:hover{opacity:1;transform:scale(1.1);}.chat-body{padding:1.5rem;display:flex;flex-direction:column;background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);min-height:400px;}#chat-output{flex-grow:1;overflow-y:auto;padding:1rem 0;scroll-behavior:smooth;}#chat-output::-webkit-scrollbar{width:6px;}#chat-output::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px;}#chat-output::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#667eea,#764ba2);border-radius:3px;}.chat-footer{border:none;background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);display:flex;flex-direction:column;padding:1.5rem;box-shadow:0-4px 20px rgba(0,0,0,0.05);}.chat-input-bar{display:flex;width:100%;gap:0.75rem;align-items:center;background:white;border-radius:25px;padding:8px;box-shadow:0 4px 20px rgba(0,0,0,0.1);border:1px solid rgba(102,126,234,0.1);}.chat-input-bar .form-control{border:none;border-radius:20px;padding:12px 20px;background:transparent;font-size:1rem;box-shadow:none;}.chat-input-bar .form-control:focus{box-shadow:none;border:none;outline:none;}.chat-input-bar .btn{border-radius:50%;width:50px;height:50px;flex-shrink:0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;}.chat-input-bar .btn:hover{transform:scale(1.1);box-shadow:0 4px 15px rgba(102,126,234,0.4);}.chat-input-bar .btn:active{transform:scale(0.95);}/* Message Bubbles */.message-bubble{max-width:85%;padding:15px 20px;border-radius:20px;margin-bottom:1rem;position:relative;animation:messageSlideIn 0.3s ease-out;box-shadow:0 2px 10px rgba(0,0,0,0.1);backdrop-filter:blur(10px);}@keyframes messageSlideIn{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.user-bubble{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;margin-left:auto;border-bottom-right-radius:8px;}.user-bubble::before{content:"";position:absolute;bottom:0;right:-8px;width:0;height:0;border-left:8px solid #764ba2;border-top:8px solid transparent;border-bottom:8px solid transparent;}.ai-bubble{background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);color:#2c3e50;margin-right:auto;border:1px solid rgba(102,126,234,0.1);border-bottom-left-radius:8px;}.ai-bubble::before{content:"";position:absolute;bottom:0;left:-8px;width:0;height:0;border-right:8px solid #f8f9fa;border-top:8px solid transparent;border-bottom:8px solid transparent;}.ai-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;display:flex;align-items:center;justify-content:center;font-size:0.9rem;margin-right:10px;flex-shrink:0;box-shadow:0 2px 8px rgba(102,126,234,0.3);}.message-container{display:flex;align-items:flex-end;margin-bottom:1rem;}.message-container.user{justify-content:flex-end;}.message-container.ai{justify-content:flex-start;}/* Typing indicator */.typing-indicator{display:flex;align-items:center;padding:15px 20px;background:linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);border-radius:20px;border-bottom-left-radius:8px;margin-right:auto;max-width:120px;border:1px solid rgba(102,126,234,0.1);box-shadow:0 2px 10px rgba(0,0,0,0.1);}.typing-indicator .ai-avatar{margin-right:10px;}.typing-dots{display:flex;gap:4px;}.typing-dots span{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);animation:typingDot 1.4s infinite ease-in-out;}.typing-dots span:nth-child(1){animation-delay:-0.32s;}.typing-dots span:nth-child(2){animation-delay:-0.16s;}@keyframes typingDot{0%,80%,100%{transform:scale(0.8);opacity:0.5;}40%{transform:scale(1);opacity:1;}}/* Modal entrance animation */#ai-chat-modal .modal-dialog{animation:modalSlideIn 0.3s ease-out;}@keyframes modalSlideIn{from{opacity:0;transform:translateY(50px) scale(0.9);}to{opacity:1;transform:translateY(0) scale(1);}}/* Chat suggestions styling */#chat-suggestions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1rem;}.chat-suggestion{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border:1px solid rgba(102,126,234,0.1);border-radius:20px;padding:8px 16px;font-size:0.9rem;color:#495057;cursor:pointer;transition:all 0.3s ease;user-select:none;}.chat-suggestion:hover{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;transform:translateY(-2px);box-shadow:0 4px 15px rgba(102,126,234,0.3);}/* Dark mode chat suggestions */[data-bs-theme="dark"] .chat-suggestion{background:linear-gradient(135deg,#2d2d2d 0%,#3d3d3d 100%);color:#dee2e6;border:1px solid rgba(102,126,234,0.2);}[data-bs-theme="dark"] .chat-suggestion:hover{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);color:white;}/* Enhanced focus states */.chat-input-bar .form-control:focus{transform:scale(1.02);}/* Loading state for send button */.chat-input-bar .btn.loading{pointer-events:none;opacity:0.7;}.chat-input-bar .btn.loading i{animation:spin 1s linear infinite;}@keyframes spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}/* ==================================================================== *//* MOCK TEST MODERN UI *//* ==================================================================== */.mock-test-container{padding:0;max-width:600px;margin:0 auto;}/* Modern Hero Section */.mock-test-hero{position:relative;z-index:2;padding:2rem 1.5rem 2.5rem;text-align:center;background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);border-radius:24px;margin:0.5rem;margin-bottom:1.5rem;color:white;overflow:hidden;box-shadow:0 25px 50px rgba(102,126,234,0.4),0 0 0 1px rgba(255,255,255,0.1),inset 0 1px 0 rgba(255,255,255,0.2);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);animation:slideInUp 0.6s ease-out;/* Center focus effect */display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:220px;}.mock-test-hero::before{content:"";position:absolute;top:50%;left:50%;width:250px;height:250px;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 30%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);animation:centerPulse 4s ease-in-out infinite;z-index:1;}.mock-test-hero::after{content:"";position:absolute;top:50%;left:50%;width:180px;height:180px;background:radial-gradient(circle,rgba(240,147,251,0.15) 0%,rgba(240,147,251,0.08) 40%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);animation:centerPulse 6s ease-in-out infinite reverse;z-index:1;}@keyframes centerPulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.3;}50%{transform:translate(-50%,-50%) scale(1.2);opacity:0.6;}}@keyframes heroFloat{0%,100%{transform:translateY(0px) rotate(0deg) scale(1);opacity:0.6;}50%{transform:translateY(-15px) rotate(180deg) scale(1.05);opacity:1;}}.hero-icon{position:relative;z-index:3;width:110px;height:110px;background:rgba(255,255,255,0.25);border-radius:32px;display:flex;align-items:center;justify-content:center;margin:0 auto 1.5rem;backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.4);box-shadow:0 8px 32px rgba(0,0,0,0.15),inset 0 1px 0 rgba(255,255,255,0.3);transition:all 0.4s cubic-bezier(0.4,0,0.2,1);animation:fadeInUp 0.8s ease-out 0.2s both;}.hero-icon:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 12px 40px rgba(0,0,0,0.2),inset 0 1px 0 rgba(255,255,255,0.4);border-color:rgba(255,255,255,0.6);}.hero-icon i{font-size:3.5rem;color:white;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.2));}.hero-title{position:relative;z-index:3;font-size:3.2rem;font-weight:800;margin:0 0 1rem 0;background:linear-gradient(135deg,#ffffff 0%,#f0f9ff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:0 2px 4px rgba(0,0,0,0.3),0 0 20px rgba(255,255,255,0.1);animation:fadeInLeft 0.8s ease-out 0.4s both;letter-spacing:-0.025em;line-height:1.2;}.hero-subtitle{position:relative;z-index:3;font-size:1.4rem;color:rgba(255,255,255,0.95);margin:0;animation:fadeInLeft 0.8s ease-out 0.6s both;text-shadow:0 1px 2px rgba(0,0,0,0.2),0 0 10px rgba(255,255,255,0.1);font-weight:500;letter-spacing:0.025em;line-height:1.6;max-width:400px;margin:0 auto;}@keyframes slideInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:translateX(0);}}.hero-subtitle{position:relative;z-index:1;font-size:1.1rem;opacity:0.9;margin:0;font-weight:300;}/* Setup Card */.mock-test-setup-card{background:white;border-radius:20px;box-shadow:0 10px 40px rgba(0,0,0,0.1);overflow:hidden;border:1px solid rgba(102,126,234,0.1);}.setup-header{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:1.5rem;display:flex;align-items:center;gap:1rem;border-bottom:1px solid rgba(0,0,0,0.05);}.setup-icon{width:50px;height:50px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-size:1.2rem;}.setup-title{font-size:1.4rem;font-weight:600;color:#2c3e50;margin:0;}.setup-content{padding:0;}/* Question Count Section */.question-count-section{margin-bottom:2rem;}.section-label{display:flex;align-items:center;gap:0.5rem;font-weight:600;color:#495057;margin-bottom:1rem;font-size:1.1rem;}.section-label i{color:#667eea;font-size:1.2rem;}/* Compact Question Options-Beautiful Modern Design */.question-options-compact{display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap;padding:2rem 1rem;background:linear-gradient(135deg,rgba(255,255,255,0.8) 0%,rgba(248,250,252,0.6) 100%);border-radius:32px;box-shadow:0 20px 60px rgba(0,0,0,0.08),0 0 0 1px rgba(255,255,255,0.9),inset 0 1px 0 rgba(255,255,255,0.8);backdrop-filter:blur(30px);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.6);}.question-options-compact::before{content:"";position:absolute;top:-30%;right:-15%;width:200px;height:200px;background:radial-gradient(circle,rgba(99,102,241,0.15) 0%,rgba(139,92,246,0.1) 50%,transparent 70%);border-radius:50%;animation:floatGentle 8s ease-in-out infinite;}.question-options-compact::after{content:"";position:absolute;bottom:-25%;left:-10%;width:150px;height:150px;background:radial-gradient(circle,rgba(59,130,246,0.12) 0%,rgba(16,185,129,0.08) 50%,transparent 70%);border-radius:50%;animation:floatGentle 10s ease-in-out infinite reverse;}@keyframes floatGentle{0%,100%{transform:translateY(0px) rotate(0deg) scale(1);opacity:0.7;}50%{transform:translateY(-20px) rotate(180deg) scale(1.1);opacity:1;}}.option-item{position:relative;cursor:pointer;transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);overflow:visible;z-index:3;}.option-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border:3px solid rgba(99,102,241,0.15);border-radius:28px;position:relative;z-index:2;transition:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);box-shadow:0 12px 40px rgba(0,0,0,0.08),0 0 0 1px rgba(255,255,255,0.9),inset 0 2px 0 rgba(255,255,255,0.8),inset 0-1px 0 rgba(0,0,0,0.05);backdrop-filter:blur(25px);}.option-badge::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,rgba(99,102,241,0.2) 0%,rgba(139,92,246,0.15) 100%);border-radius:30px;opacity:0;transition:all 0.4s ease;z-index:-1;}.option-badge::after{content:"";position:absolute;top:50%;left:50%;width:0;height:0;background:radial-gradient(circle,rgba(99,102,241,0.3) 0%,transparent 70%);border-radius:50%;transform:translate(-50%,-50%);transition:all 0.6s ease;z-index:-1;}.option-item:hover .option-badge{transform:translateY(-6px) scale(1.05);box-shadow:0 20px 60px rgba(99,102,241,0.2),0 0 0 1px rgba(99,102,241,0.3),inset 0 2px 0 rgba(255,255,255,1),inset 0-1px 0 rgba(0,0,0,0.1);border-color:rgba(99,102,241,0.4);}.option-item:hover .option-badge::before{opacity:1;transform:scale(1.05);}.option-item:hover .option-badge::after{width:120px;height:120px;}.option-item.active .option-badge{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 40%,#ec4899 100%);color:white;border-color:rgba(255,255,255,0.3);transform:translateY(-4px) scale(1.08);box-shadow:0 25px 70px rgba(99,102,241,0.35),0 0 0 1px rgba(255,255,255,0.2),inset 0 2px 0 rgba(255,255,255,0.4),inset 0-1px 0 rgba(0,0,0,0.1);}.option-item.active .option-badge::before{opacity:0;}.option-item.active .option-badge::after{width:0;height:0;}.option-number{font-size:1.8rem;font-weight:900;line-height:1;margin-bottom:0.4rem;color:inherit;text-shadow:0 2px 4px rgba(0,0,0,0.1);letter-spacing:-0.03em;background:linear-gradient(135deg,currentColor 0%,rgba(0,0,0,0.1) 100%);-webkit-background-clip:text;background-clip:text;}.option-item.active .option-number{text-shadow:0 2px 8px rgba(0,0,0,0.2);}.option-time{font-size:0.8rem;font-weight:700;opacity:0.95;color:inherit;background:rgba(99,102,241,0.12);padding:0.3rem 0.6rem;border-radius:16px;backdrop-filter:blur(15px);border:1px solid rgba(99,102,241,0.25);text-shadow:0 1px 2px rgba(0,0,0,0.1);letter-spacing:0.02em;}.option-item.active .option-time{background:rgba(255,255,255,0.3);border-color:rgba(255,255,255,0.4);text-shadow:0 1px 3px rgba(0,0,0,0.2);}/* Ripple Effect */.option-ripple{position:absolute;top:0;left:0;width:0;height:0;background:rgba(255,255,255,0.3);border-radius:50%;transform:scale(0);pointer-events:none;z-index:0;}.option-ripple.animate{animation:ripple-animation 0.6s ease-out;}@keyframes ripple-animation{0%{transform:scale(0);opacity:1;}100%{transform:scale(1);opacity:0;}}/* Pulse Effect for Active Item */.option-item.active::before{content:"";position:absolute;top:-4px;left:-4px;right:-4px;bottom:-4px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:24px;z-index:-1;animation:pulse-ring 2s infinite;}@keyframes pulse-ring{0%{transform:scale(0.8);opacity:1;}100%{transform:scale(1.2);opacity:0;}}/* Glow Effect */.option-item.active::after{content:"";position:absolute;top:-2px;left:-2px;right:-2px;bottom:-2px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:22px;z-index:-2;filter:blur(8px);opacity:0.6;animation:glow-pulse 2s infinite alternate;}@keyframes glow-pulse{0%{opacity:0.4;transform:scale(1);}100%{opacity:0.8;transform:scale(1.05);}}/* Exam Info */.exam-info{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:16px;padding:1.5rem;margin-bottom:2rem;}.info-item{display:flex;align-items:center;gap:0.75rem;margin-bottom:0.75rem;font-size:0.95rem;color:#495057;}.info-item:last-child{margin-bottom:0;}.info-item i{width:20px;height:20px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-size:0.8rem;flex-shrink:0;}/* Start Exam Button */.start-exam-btn{width:100%;background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%);border:none;border-radius:16px;padding:1.25rem 2rem;color:white;font-size:1.2rem;font-weight:600;cursor:pointer;position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 8px 25px rgba(231,76,60,0.3);}.start-exam-btn:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(231,76,60,0.4);}.start-exam-btn:active{transform:translateY(0);}.btn-content{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:0.75rem;}.btn-content i{font-size:1.3rem;}.btn-shine{position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s ease;}.start-exam-btn:hover .btn-shine{left:100%;}/* Dark Mode Support */[data-bs-theme="dark"] .mock-test-setup-card{background:#2d2d2d;border-color:rgba(102,126,234,0.2);}[data-bs-theme="dark"] .setup-header{background:linear-gradient(135deg,#3d3d3d 0%,#2d2d2d 100%);border-color:rgba(255,255,255,0.1);}[data-bs-theme="dark"] .setup-title{color:#dee2e6;}[data-bs-theme="dark"] .section-label{color:#adb5bd;}[data-bs-theme="dark"] .question-options-compact{background:linear-gradient(135deg,rgba(30,41,59,0.8) 0%,rgba(15,23,42,0.6) 100%);border-color:rgba(71,85,105,0.5);box-shadow:0 20px 60px rgba(0,0,0,0.3),0 0 0 1px rgba(71,85,105,0.5),inset 0 1px 0 rgba(255,255,255,0.1);}[data-bs-theme="dark"] .question-options-compact::before{background:radial-gradient(circle,rgba(99,102,241,0.2) 0%,rgba(139,92,246,0.15) 50%,transparent 70%);}[data-bs-theme="dark"] .question-options-compact::after{background:radial-gradient(circle,rgba(59,130,246,0.18) 0%,rgba(16,185,129,0.12) 50%,transparent 70%);}[data-bs-theme="dark"] .option-badge{background:linear-gradient(135deg,#334155 0%,#1e293b 100%);border-color:rgba(99,102,241,0.3);color:#e2e8f0;box-shadow:0 8px 32px rgba(0,0,0,0.3),0 0 0 1px rgba(71,85,105,0.5),inset 0 1px 0 rgba(255,255,255,0.1);}[data-bs-theme="dark"] .option-badge::before{background:linear-gradient(135deg,rgba(99,102,241,0.1) 0%,rgba(139,92,246,0.1) 100%);}[data-bs-theme="dark"] .option-item:hover .option-badge{border-color:rgba(99,102,241,0.5);box-shadow:0 16px 48px rgba(99,102,241,0.2),0 0 0 1px rgba(99,102,241,0.4),inset 0 1px 0 rgba(255,255,255,0.15);}[data-bs-theme="dark"] .option-time{background:rgba(99,102,241,0.2);border-color:rgba(99,102,241,0.3);color:#cbd5e0;}[data-bs-theme="dark"] .option-item.active .option-time{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.3);}[data-bs-theme="dark"] .exam-info{background:linear-gradient(135deg,#3d3d3d 0%,#2d2d2d 100%);}[data-bs-theme="dark"] .info-item{color:#adb5bd;}/* Mobile Responsive */@media (max-width:768px){.mock-test-container{padding:0;}.mock-test-hero{padding:1.5rem 1rem;margin-bottom:1.5rem;}.hero-icon{width:60px;height:60px;}.hero-icon i{font-size:2rem;}.hero-title{font-size:2rem;}.hero-subtitle{font-size:1rem;}.setup-content{padding:0;}.question-options-compact{gap:1rem;padding:1.5rem 0.75rem;border-radius:24px;}.question-options-compact::before{width:120px;height:120px;}.question-options-compact::after{width:100px;height:100px;}.option-badge{width:85px;height:85px;border-radius:22px;}.option-number{font-size:1.5rem;}.option-time{font-size:0.75rem;padding:0.25rem 0.5rem;border-radius:12px;}}.ai-bubble{white-space:pre-wrap;word-wrap:break-word;}.user-bubble{background-color:#0d6efd;color:white;align-self:flex-end;border-bottom-right-radius:4px;}.ai-bubble-container{display:flex;align-items:flex-start;gap:10px;align-self:flex-start;max-width:95%;}.ai-avatar{width:32px;height:32px;border-radius:50%;background-color:#e9ecef;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#495057;flex-shrink:0;}.ai-bubble{background-color:#f1f3f5;color:#212529;border-bottom-left-radius:4px;}#chat-suggestions{display:none;flex-wrap:wrap;gap:8px;}.suggestion-chip{padding:6px 12px;font-size:0.9rem;border:1px solid #0d6efd;color:#0d6efd;background-color:#ffffff;border-radius:16px;cursor:pointer;transition:all 0.2s ease;}.suggestion-chip:hover{background-color:#0d6efd;color:#ffffff;}/*** ============================================* DDL-MOD:FLASHCARD STYLES-IMPORTED* ============================================* Flashcard styles have been moved to flashcard-style.css* Import the flashcard styles at the top of this file*/rt{font-size:0.7em;}.vocab-list-actions .btn{padding:0.25rem 0.5rem;font-size:1rem;line-height:1.5;}/* Compact Vocabulary Container */.vocabulary-container{padding:0;max-width:100%;background:#f8f9fa;min-height:100vh;}/* Compact Header-Matching content-header style */.vocab-compact-header{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);color:#1e293b;padding:1rem 1.25rem;position:sticky;top:0;z-index:100;box-shadow:0 10px 40px rgba(0,0,0,0.08);border-radius:0 0 20px 20px;backdrop-filter:blur(20px);margin-bottom:0;border:1px solid rgba(255,255,255,0.8);overflow:hidden;}.vocab-compact-header::before{content:"";position:absolute;top:-20%;right:-10%;width:80px;height:80px;background:linear-gradient(135deg,rgba(99,102,241,0.1) 0%,rgba(139,92,246,0.1) 100%);border-radius:50%;animation:float 6s ease-in-out infinite;}.vocab-compact-header::after{content:"";position:absolute;bottom:-15%;left:-5%;width:60px;height:60px;background:linear-gradient(135deg,rgba(59,130,246,0.08) 0%,rgba(16,185,129,0.08) 100%);border-radius:50%;animation:float 8s ease-in-out infinite reverse;}.header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}.title-section{display:flex;align-items:center;gap:1rem;}.vocab-title{font-size:1.4rem;font-weight:700;margin:0;display:flex;align-items:center;gap:0.5rem;color:#1e293b;}.vocab-title i{font-size:1.6rem;color:#6366f1;}.vocab-count{background:rgba(99,102,241,0.1);color:#6366f1;padding:0.4rem 1rem;border-radius:20px;font-size:0.85rem;font-weight:600;backdrop-filter:blur(15px);border:1px solid rgba(99,102,241,0.2);box-shadow:0 2px 8px rgba(0,0,0,0.1);}.tab-switcher{display:flex;background:rgba(255,255,255,0.2);border-radius:16px;padding:0.3rem;backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.2);box-shadow:0 2px 8px rgba(0,0,0,0.1);position:relative;z-index:20;}.tab-switch{display:flex;align-items:center;gap:0.5rem;padding:0.6rem 1.2rem;border:none;background:transparent;color:#1e293b;border-radius:12px;font-size:0.9rem;font-weight:600;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}.tab-switch.active{background:rgba(255,255,255,0.95);color:#667eea;box-shadow:0 4px 12px rgba(0,0,0,0.15);transform:translateY(-1px);}.tab-switch:hover:not(.active){background:rgba(99,102,241,0.1);color:#6366f1;}.tab-switch i{font-size:1rem;}.search-bar{margin-top:1rem;}.search-wrapper{position:relative;display:flex;align-items:center;background:rgba(255,255,255,0.95);border-radius:20px;border:2px solid rgba(0,0,0,0.1);transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 4px 12px rgba(0,0,0,0.1);backdrop-filter:blur(15px);}.search-wrapper:focus-within{border-color:#3b82f6;background:rgba(255,255,255,1);box-shadow:0 6px 20px rgba(59,130,246,0.2);transform:translateY(-1px);}.search-wrapper i{position:absolute;left:1rem;color:#6b7280;font-size:1rem;z-index:2;}.search-wrapper input{flex:1;border:none;outline:none;padding:0.875rem 1rem 0.875rem 2.5rem;background:transparent;font-size:0.95rem;color:#374151;border-radius:20px;}.search-wrapper input::placeholder{color:#9ca3af;}.search-clear{position:absolute;right:0.75rem;background:none;border:none;color:rgba(255,255,255,0.8);font-size:1.1rem;cursor:pointer;padding:0.4rem;border-radius:50%;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);width:32px;height:32px;display:flex;align-items:center;justify-content:center;}.search-clear:hover{color:white;background:rgba(255,255,255,0.2);transform:scale(1.1);}/* Compact Content Layout */.vocab-content-compact{display:flex;flex-direction:column;gap:0.75rem;}.japanese-row,.vietnamese-row{display:flex;align-items:center;gap:0.75rem;}.flag-container{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#f8f9fa;border-radius:8px;border:1px solid #e9ecef;flex-shrink:0;}.flag-emoji{font-size:1.2rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1));}.text-content{flex:1;min-width:0;}.japanese-text{font-size:1.2rem;font-weight:700;color:#1a202c;line-height:1.4;word-break:break-all;letter-spacing:0.5px;}.vietnamese-text{font-size:1rem;font-weight:600;color:#495057;line-height:1.5;word-break:break-word;}/* Content Area */.vocab-content{padding:0;margin-top:1rem;}.tab-pane{display:none;position:relative;z-index:5;}.tab-pane.active{display:block;}/* Desktop Table */.desktop-table{background:white;border-radius:20px;margin:1rem;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.08);}.vocab-table{width:100%;border-collapse:collapse;}.vocab-table th{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:1.25rem 1rem;text-align:left;font-weight:600;color:#495057;border-bottom:1px solid #e9ecef;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.5px;}.vocab-table td{padding:1.25rem 1rem;border-bottom:1px solid #f1f3f4;vertical-align:middle;transition:all 0.2s ease;}.vocab-table tr:hover{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.05);}/* Mobile Cards */.mobile-cards{padding:1rem;}/* Load More Trigger */.load-more-trigger{height:20px;margin:1rem 0;}/* Loading State */.loading-state{text-align:center;padding:2rem 1rem;color:#6c757d;}.loading-spinner{width:32px;height:32px;border:3px solid #e9ecef;border-top:3px solid #667eea;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem;}.loading-state p{margin:0;font-size:0.9rem;}/* Empty State */.empty-state{text-align:center;padding:3rem 1rem;color:#6c757d;}.empty-state i{font-size:2.5rem;color:#adb5bd;margin-bottom:1rem;}.empty-state h3{font-size:1.2rem;font-weight:600;margin-bottom:0.5rem;color:#495057;}.empty-state p{font-size:0.9rem;color:#6c757d;margin:0;}.vocab-header-section::before{content:"";position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);border-radius:50%;animation:float 6s ease-in-out infinite;}.vocab-header-content{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2;}.vocab-title-section{flex:1;}.vocab-main-title{font-size:1.8rem;font-weight:800;margin-bottom:0.5rem;display:flex;align-items:center;text-shadow:0 2px 4px rgba(0,0,0,0.1);}.vocab-main-title i{font-size:2rem;margin-right:0.75rem;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));}.vocab-subtitle{color:rgba(255,255,255,0.85);font-size:1rem;font-weight:500;margin:0;text-shadow:0 1px 2px rgba(0,0,0,0.1);}.vocab-stats{display:flex;gap:1rem;}.stat-item{text-align:center;background:rgba(255,255,255,0.15);padding:1rem;border-radius:16px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.2);min-width:80px;}.stat-number{display:block;font-size:2rem;font-weight:800;color:white;text-shadow:0 1px 2px rgba(0,0,0,0.1);}.stat-label{display:block;font-size:0.8rem;color:white !important;font-weight:500;margin-top:0.25rem;}/* Tab Navigation */.vocab-tab-navigation{margin-bottom:1.5rem;padding:0 1rem;}/* Tab Content */.tab-content{position:relative;}.tab-pane{display:none;}.tab-pane.active{display:block;}.tab-buttons{display:flex;background:#f8f9fa;border-radius:16px;padding:0.5rem;box-shadow:0 4px 12px rgba(0,0,0,0.05);}.tab-button{flex:1;display:flex;align-items:center;justify-content:center;gap:0.5rem;padding:0.875rem 1rem;border:none;background:transparent;border-radius:12px;font-weight:600;font-size:0.9rem;color:#6c757d;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);cursor:pointer;}.tab-button.active{background:white;color:#0d6efd;box-shadow:0 2px 8px rgba(13,110,253,0.15);transform:translateY(-1px);}.tab-button:hover:not(.active){color:#495057;background:rgba(255,255,255,0.5);}.tab-button i{font-size:1.1rem;}/* Search Section */.vocab-search-section{padding:0 1rem;margin-bottom:1.5rem;}.search-container{max-width:100%;}.search-input-wrapper{position:relative;display:flex;align-items:center;background:white;border-radius:16px;box-shadow:0 4px 12px rgba(0,0,0,0.08);border:2px solid #e9ecef;transition:all 0.3s ease;}.search-input-wrapper:focus-within{border-color:#0d6efd;box-shadow:0 4px 20px rgba(13,110,253,0.15);}.search-icon{position:absolute;left:1rem;color:#6c757d;font-size:1.1rem;z-index:2;}.search-input{flex:1;border:none;outline:none;padding:1rem 1rem 1rem 3rem;font-size:1rem;background:transparent;color:#495057;}.search-input::placeholder{color:#adb5bd;}.search-clear-btn{position:absolute;right:1rem;background:none;border:none;color:#6c757d;font-size:1.2rem;cursor:pointer;padding:0.25rem;border-radius:50%;transition:all 0.2s ease;}.search-clear-btn:hover{color:#dc3545;background:rgba(220,53,69,0.1);}/* Flashcard Controls Section-MOVED TO flashcard-style.css *//* Modern Vocabulary Cards */.vocab-card-modern{margin-bottom:1.5rem;animation:slideInUp 0.6s ease forwards;opacity:0;transform:translateY(20px);}@keyframes slideInUp{to{opacity:1;transform:translateY(0);}}.vocab-card-content{background:white;border-radius:20px;padding:1.5rem;box-shadow:0 8px 25px rgba(0,0,0,0.08);border:1px solid #e9ecef;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);position:relative;overflow:hidden;}.vocab-card-content::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);}.vocab-card-content:hover{transform:translateY(-4px);box-shadow:0 12px 35px rgba(0,0,0,0.12);border-color:#0d6efd;}.vocab-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}.vocab-number{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:0.9rem;box-shadow:0 4px 12px rgba(102,126,234,0.3);}.vocab-actions{display:flex;gap:0.5rem;}.action-btn{width:40px;height:40px;border:none;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;cursor:pointer;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);box-shadow:0 2px 8px rgba(0,0,0,0.1);}.speak-btn{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:white;}.explanation-btn{background:linear-gradient(135deg,#43e97b 0%,#38f9d7 100%);color:white;}.action-btn:hover{transform:scale(1.1) translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.2);}.vocab-main{display:flex;flex-direction:column;gap:1rem;}.japanese-section,.vietnamese-section{flex:1;}.japanese-text{font-size:1.4rem;font-weight:700;color:#1a202c;line-height:1.4;word-break:break-all;letter-spacing:0.5px;}.vietnamese-text{font-size:1.1rem;font-weight:600;color:#495057;line-height:1.5;word-break:break-word;}.divider{display:flex;justify-content:center;align-items:center;margin:0.5rem 0;}.divider i{color:#adb5bd;font-size:1.2rem;background:#f8f9fa;padding:0.5rem;border-radius:50%;border:2px solid #e9ecef;}/* Loader and Empty State */.vocab-loader{text-align:center;padding:3rem 1rem;}.loader-content{display:flex;flex-direction:column;align-items:center;gap:1rem;}.spinner{width:40px;height:40px;border:4px solid #e9ecef;border-top:4px solid #0d6efd;border-radius:50%;animation:spin 1s linear infinite;}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}.vocab-empty-state{text-align:center;padding:3rem 1rem;color:#6c757d;}.empty-icon{font-size:3rem;color:#adb5bd;margin-bottom:1rem;}.vocab-empty-state h3{font-size:1.3rem;font-weight:600;margin-bottom:0.5rem;color:#495057;}.vocab-empty-state p{font-size:1rem;color:#6c757d;}/* Dark Mode Styles */[data-bs-theme="dark"] .vocabulary-container{background:#1a202c;}[data-bs-theme="dark"] .vocab-compact-header{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);color:#f1f5f9;border-color:#334155;}[data-bs-theme="dark"] .vocab-compact-header::before{background:linear-gradient(135deg,rgba(99,102,241,0.15) 0%,rgba(139,92,246,0.15) 100%);}[data-bs-theme="dark"] .vocab-compact-header::after{background:linear-gradient(135deg,rgba(59,130,246,0.12) 0%,rgba(16,185,129,0.12) 100%);}[data-bs-theme="dark"] .vocab-title{color:#f1f5f9;}[data-bs-theme="dark"] .vocab-title i{color:#818cf8;}[data-bs-theme="dark"] .vocab-count{background:rgba(129,140,248,0.15);color:#818cf8;border:1px solid rgba(129,140,248,0.3);}[data-bs-theme="dark"] .tab-switcher{background:rgba(255,255,255,0.15);border:1px solid rgba(255,255,255,0.1);}[data-bs-theme="dark"] .tab-switch{color:#e2e8f0;}[data-bs-theme="dark"] .tab-switch.active{background:rgba(255,255,255,0.95);color:#4a5568;}[data-bs-theme="dark"] .tab-switch:hover:not(.active){background:rgba(129,140,248,0.15);color:#818cf8;}[data-bs-theme="dark"] .search-wrapper{background:rgba(255,255,255,0.1);}[data-bs-theme="dark"] .search-wrapper:focus-within{border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.15);}[data-bs-theme="dark"] .search-wrapper i{color:rgba(255,255,255,0.7);}[data-bs-theme="dark"] .search-wrapper input{color:#e2e8f0;}[data-bs-theme="dark"] .search-wrapper input::placeholder{color:rgba(255,255,255,0.5);}[data-bs-theme="dark"] .search-clear{color:rgba(255,255,255,0.7);}[data-bs-theme="dark"] .search-clear:hover{color:white;background:rgba(255,255,255,0.15);}[data-bs-theme="dark"] .desktop-table{background:#2d3748;box-shadow:0 4px 20px rgba(0,0,0,0.3);border-radius:20px;}[data-bs-theme="dark"] .vocab-table th{background:linear-gradient(135deg,#4a5568 0%,#718096 100%);color:#e2e8f0;border-bottom-color:#718096;}[data-bs-theme="dark"] .vocab-table td{color:#e2e8f0;border-bottom-color:#4a5568;}[data-bs-theme="dark"] .vocab-table tr:hover{background:linear-gradient(135deg,#4a5568 0%,#718096 100%);transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,0.2);}[data-bs-theme="dark"] .loading-state{color:#a0aec0;}[data-bs-theme="dark"] .loading-spinner{border-color:#4a5568;border-top-color:#60a5fa;}[data-bs-theme="dark"] .empty-state{color:#a0aec0;}[data-bs-theme="dark"] .empty-state i{color:#718096;}[data-bs-theme="dark"] .empty-state h3{color:#e2e8f0;}[data-bs-theme="dark"] .empty-state p{color:#a0aec0;}[data-bs-theme="dark"] .flag-container{background:#4a5568;border-color:#718096;}/* Dark mode flashcard controls-MOVED TO flashcard-style.css */[data-bs-theme="dark"] .vocab-header-section::before{background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);}[data-bs-theme="dark"] .stat-item{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.15);}[data-bs-theme="dark"] .tab-buttons{background:#2d3748;}[data-bs-theme="dark"] .tab-button{color:#a0aec0;}[data-bs-theme="dark"] .tab-button.active{background:#4a5568;color:#60a5fa;}[data-bs-theme="dark"] .tab-button:hover:not(.active){color:#e2e8f0;background:rgba(255,255,255,0.1);}[data-bs-theme="dark"] .search-input-wrapper{background:#2d3748;border-color:#4a5568;}[data-bs-theme="dark"] .search-input-wrapper:focus-within{border-color:#60a5fa;box-shadow:0 4px 20px rgba(96,165,250,0.15);}[data-bs-theme="dark"] .search-input{color:#e2e8f0;}[data-bs-theme="dark"] .search-input::placeholder{color:#a0aec0;}[data-bs-theme="dark"] .search-icon{color:#a0aec0;}[data-bs-theme="dark"] .search-clear-btn{color:#a0aec0;}[data-bs-theme="dark"] .search-clear-btn:hover{color:#fc8181;background:rgba(252,129,129,0.1);}[data-bs-theme="dark"] .mode-toggle-container{background:linear-gradient(135deg,#374151 0%,#1f2937 100%);border:2px solid #4b5563;}[data-bs-theme="dark"] .mode-toggle-btn{color:#cbd5e0;}[data-bs-theme="dark"] .mode-toggle-btn.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;box-shadow:0 4px 15px rgba(102,126,234,0.4);}[data-bs-theme="dark"] .mode-toggle-btn:hover:not(.active){color:#f7fafc;background:rgba(102,126,234,0.2);}[data-bs-theme="dark"] .vocab-card-content{background:#2d3748;border-color:#4a5568;}[data-bs-theme="dark"] .vocab-card-content:hover{border-color:#60a5fa;box-shadow:0 12px 35px rgba(96,165,250,0.15);}[data-bs-theme="dark"] .japanese-text{color:#f7fafc;}[data-bs-theme="dark"] .vietnamese-text{color:#e2e8f0;}[data-bs-theme="dark"] .divider i{color:#a0aec0;background:#4a5568;border-color:#718096;}[data-bs-theme="dark"] .vocab-empty-state{color:#a0aec0;}[data-bs-theme="dark"] .vocab-empty-state h3{color:#e2e8f0;}[data-bs-theme="dark"] .vocab-empty-state p{color:#a0aec0;}[data-bs-theme="dark"] .empty-icon{color:#718096;}/* Legacy dark mode styles for old mobile cards */[data-bs-theme="dark"] .vocab-mobile-card .card{background-color:#2d3748;border-color:#4a5568;}[data-bs-theme="dark"] .vocab-mobile-card .card:hover{border-color:#60a5fa;box-shadow:0 6px 20px rgba(96,165,250,0.2) !important;}[data-bs-theme="dark"] .vocab-japanese .japanese-text{color:#f7fafc;}[data-bs-theme="dark"] .vocab-vietnamese{background:#1a202c;border-left-color:#60a5fa;}[data-bs-theme="dark"] .vocab-vietnamese .vietnamese-text{color:#e2e8f0;}[data-bs-theme="dark"] .vocab-actions .btn{background-color:#4a5568;border-color:#718096;color:#e2e8f0;}[data-bs-theme="dark"] .vocab-actions .btn:hover{background-color:#60a5fa;border-color:#60a5fa;color:#ffffff;}.list-group-item.correct{background-color:#d1e7dd !important;border-color:#badbcc !important;color:#0f5132 !important;}.list-group-item.incorrect{background-color:#f8d7da !important;border-color:#f5c2c7 !important;color:#842029 !important;text-decoration:line-through;}.list-group-item.no-answer-correct{background-color:#cff4fc !important;border-color:#b6effb !important;color:#055160 !important;}.document-content img{max-width:100%;height:auto;border-radius:8px;margin-top:1rem;margin-bottom:1rem;}.quiz-controls-container{position:fixed;top:calc(var(--top-header-height)+10px);right:15px;z-index:1025;display:none;flex-direction:column;align-items:flex-end;gap:10px;}.fixed-quiz-control{display:none;}#fixed-quiz-timer{background-color:rgba(0,0,0,0.7);color:white;padding:8px 15px;border-radius:20px;font-size:1.1rem;font-weight:bold;display:flex;align-items:center;transition:background-color 0.3s ease;}#fixed-quiz-timer::before{font-family:"bootstrap-icons";content:"\F282";margin-right:8px;font-size:1.2rem;}#fixed-quiz-submit{background-color:rgba(0,0,0,0.7);color:white;padding:8px 15px;border-radius:20px;font-size:1.1rem;font-weight:bold;border:none;cursor:pointer;transition:background-color 0.3s ease;}.question-image{max-width:100%;max-height:300px;width:auto;height:auto;border-radius:8px;border:1px solid #dee2e6;margin-bottom:1rem;object-fit:contain;display:block;margin-left:auto;margin-right:auto;}/* Responsive adjustments for question images */@media (max-width:768px){.question-image{max-height:250px;}}@media (max-width:480px){.question-image{max-height:200px;}}/*---Dark Mode Styles---*/[data-bs-theme="dark"] html,[data-bs-theme="dark"] body{background-color:#121212 !important;color:#dee2e6;min-height:100vh;}[data-bs-theme="dark"] body{background-color:#121212 !important;color:#dee2e6;}[data-bs-theme="dark"] .top-header,[data-bs-theme="dark"] .bottom-nav{background:linear-gradient(135deg,#1c1c1c 0%,#2d2d2d 100%);border-color:#3d3d3d;}[data-bs-theme="dark"] .bottom-nav{border-top:1px solid rgba(255,255,255,0.1);box-shadow:0-4px 20px rgba(0,0,0,0.4);backdrop-filter:blur(10px);}/* Remove any white lines or borders in dark mode */[data-bs-theme="dark"] *{border-color:#3d3d3d !important;}[data-bs-theme="dark"] .bottom-nav a{color:#8e8e93;}[data-bs-theme="dark"] .bottom-nav a.active{color:#ffffff;}[data-bs-theme="dark"] .bottom-nav a:hover:not(.active){color:#60a5fa;}[data-bs-theme="dark"] .btn-dark-mode{color:#adb5bd;}[data-bs-theme="dark"] .card,[data-bs-theme="dark"] .modal-content,[data-bs-theme="dark"] .list-group-item,[data-bs-theme="dark"] .offcanvas{background-color:#1e1e1e !important;border-color:#2d2d2d !important;color:#dee2e6;}/* Dark mode for dashboard container */[data-bs-theme="dark"] .dashboard-container{background-color:#121212;}/* Dark mode for main content */[data-bs-theme="dark"] .main-content{background-color:#121212;}/* Dark mode for section headers */[data-bs-theme="dark"] .section-header{background-color:#121212;}/* Dark mode for progress section */[data-bs-theme="dark"] .progress-section{background-color:#121212;}[data-bs-theme="dark"] .progress-section .card{background-color:#1e1e1e;border-color:#2d2d2d;}[data-bs-theme="dark"] .progress-section .card-header{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);}[data-bs-theme="dark"] .progress-item{border-bottom-color:#2d2d2d;}[data-bs-theme="dark"] .progress-label{color:#e2e8f0;}[data-bs-theme="dark"] .progress-value{color:#90cdf4;}[data-bs-theme="dark"] .progress-bar-custom{background-color:#2d2d2d;}/* Dark mode for actions section */[data-bs-theme="dark"] .actions-section{background-color:#121212;}[data-bs-theme="dark"] .actions-section .card{background-color:#1e1e1e;border-color:#2d2d2d;}[data-bs-theme="dark"] .actions-section .card-header{background:linear-gradient(135deg,#2d5a27 0%,#1a3d1a 100%);}[data-bs-theme="dark"] .action-item{background-color:#1e1e1e;border-color:#2d2d2d;}[data-bs-theme="dark"] .action-item:hover{background-color:#2d2d2d;border-color:#4a5568;}[data-bs-theme="dark"] .action-title{color:#e2e8f0;}[data-bs-theme="dark"] .action-description{color:#a0aec0;}[data-bs-theme="dark"] #chat-output{background-color:#121212;}/* Ensure all main containers have consistent dark background */[data-bs-theme="dark"] .container,[data-bs-theme="dark"] .container-fluid,[data-bs-theme="dark"] .row,[data-bs-theme="dark"] .col,[data-bs-theme="dark"] .col-*{background-color:transparent;}/* Fix any potential white backgrounds in dark mode */[data-bs-theme="dark"] .bg-white,[data-bs-theme="dark"] .bg-light{background-color:#1e1e1e !important;}/* Ensure consistent background for all main page elements */[data-bs-theme="dark"] .page-wrapper,[data-bs-theme="dark"] .app-container,[data-bs-theme="dark"] .main-wrapper{background-color:#121212 !important;}/* Dark mode for flashcard-MOVED TO flashcard-style.css */[data-bs-theme="dark"] .list-group-item.correct{background-color:#0f5132 !important;border-color:#0f5132 !important;color:#fff !important;}[data-bs-theme="dark"] .list-group-item.incorrect{background-color:#842029 !important;border-color:#842029 !important;color:#fff !important;}[data-bs-theme="dark"] .list-group-item.no-answer-correct{background-color:#032830 !important;border-color:#032830 !important;color:#9eeaf9 !important;}/* Dark Mode AI Chat */[data-bs-theme="dark"] #ai-chat-modal .modal-content{background:linear-gradient(135deg,#1c1c1c 0%,#2d2d2d 100%);}[data-bs-theme="dark"] .chat-header{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);}[data-bs-theme="dark"] .chat-body{background:linear-gradient(135deg,#2d2d2d 0%,#1c1c1c 100%);}[data-bs-theme="dark"] .chat-footer{background:linear-gradient(135deg,#1c1c1c 0%,#2d2d2d 100%);border-color:#3d3d3d;}[data-bs-theme="dark"] .chat-input-bar{background:#2d2d2d;border:1px solid rgba(102,126,234,0.2);}[data-bs-theme="dark"] .chat-input-bar .form-control{background:transparent;color:#dee2e6;}[data-bs-theme="dark"] .chat-input-bar .form-control::placeholder{color:#8e8e93;}[data-bs-theme="dark"] .ai-bubble{background:linear-gradient(135deg,#2d2d2d 0%,#3d3d3d 100%);color:#dee2e6;border:1px solid rgba(102,126,234,0.2);}[data-bs-theme="dark"] .ai-bubble::before{border-right-color:#2d2d2d;}[data-bs-theme="dark"] .user-bubble{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);color:white;}[data-bs-theme="dark"] .user-bubble::before{border-left-color:#2d3748;}[data-bs-theme="dark"] .ai-avatar{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);color:white;}[data-bs-theme="dark"] .typing-indicator{background:linear-gradient(135deg,#2d2d2d 0%,#3d3d3d 100%);border:1px solid rgba(102,126,234,0.2);}[data-bs-theme="dark"] #chat-output::-webkit-scrollbar-track{background:#2d2d2d;}[data-bs-theme="dark"] #chat-output::-webkit-scrollbar-thumb{background:linear-gradient(135deg,#4a5568,#2d3748);}[data-bs-theme="dark"] .user-profile .user-avatar{border-color:#495057;}[data-bs-theme="dark"] .user-profile a:hover .user-avatar{border-color:var(--primary-color);}[data-bs-theme="dark"] .suggestion-chip{background-color:transparent;border-color:#495057;color:#adb5bd;}[data-bs-theme="dark"] .suggestion-chip:hover{background-color:#0d6efd;border-color:#0d6efd;color:#ffffff;}[data-bs-theme="dark"] .question-image{border-color:#495057;}[data-bs-theme="dark"] .srs-btn:hover{transform:scale(1.05);opacity:0.8;}[data-bs-theme="dark"] .vocab-list-actions .btn{--bs-btn-color:#adb5bd;--bs-btn-border-color:#495057;--bs-btn-hover-color:#fff;--bs-btn-hover-bg:#495057;--bs-btn-hover-border-color:#495057;}@keyframes slideInUp{from{transform:translateY(30px);opacity:0;}to{transform:translateY(0);opacity:1;}}.animate-in{animation:slideInUp 0.4s ease-out;}:focus-visible{outline:3px solid var(--primary-color);outline-offset:2px;}@media (pointer:coarse){.btn,.list-group-item,.nav-link{min-height:44px;display:flex;align-items:center;}}/*** ============================================* DDL-MOD:GIAO DIỆN DASHBOARD TRANG CHỦ* ============================================*/.dashboard-header h2{font-weight:600;}.stat-card{background-color:#fff;border-radius:12px;padding:1.25rem;display:flex;align-items:center;gap:1rem;border:1px solid #e9ecef;transition:transform 0.2s ease,box-shadow 0.2s ease;}.stat-card:hover{transform:translateY(-5px);box-shadow:0 8px 20px rgba(0,0,0,0.08);}.stat-card i{font-size:2.5rem;padding:1rem;background-color:var(--bs-light-bg-subtle);border-radius:50%;}.stat-card-info{display:flex;flex-direction:column;}.stat-card-value{font-size:2rem;font-weight:700;line-height:1.2;}.stat-card-label{font-size:0.9rem;color:#6c757d;}.quick-actions .list-group-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;}.quick-actions .list-group-item i:first-child{font-size:1.5rem;}.quick-actions .list-group-item div{flex-grow:1;}[data-bs-theme="dark"] .stat-card{background-color:#1e1e1e;border-color:#2d2d2d;}[data-bs-theme="dark"] .stat-card i{background-color:#2d2d2d;}/* Dark mode for stat icons */[data-bs-theme="dark"] .stat-icon-mobile{background-color:#2d2d2d;color:#e9ecef;}[data-bs-theme="dark"] .stat-number-mobile{color:#f8f9fa;}[data-bs-theme="dark"] .stat-label-mobile{color:#adb5bd;}/* Dark mode for action icons */[data-bs-theme="dark"] .action-icon-mobile{background-color:#2d2d2d;color:#e9ecef;}[data-bs-theme="dark"] .action-title-mobile{color:#f8f9fa;}[data-bs-theme="dark"] .action-description-mobile{color:#adb5bd;}/* Mobile responsive styles for progress and actions sections */@media (max-width:768px){.progress-section .card,.actions-section .card{border-radius:12px;margin-bottom:1rem;}.progress-section .card-header,.actions-section .card-header{padding:0.75rem 1rem;font-size:0.9rem;}.progress-section .card-body,.actions-section .card-body{padding:1rem;}.progress-item{padding:0.5rem 0;}.progress-label{font-size:0.9rem;}.progress-value{font-size:0.9rem;}.action-item{padding:0.75rem;margin-bottom:0.5rem;}.action-icon{width:40px;height:40px;font-size:1rem;}.action-title{font-size:0.9rem;}.action-description{font-size:0.8rem;}}/* Dark mode for form elements */[data-bs-theme="dark"] .form-select{background-color:#343a40;border-color:#495057;color:#e9ecef;}[data-bs-theme="dark"] .form-select:focus{background-color:#343a40;border-color:#60a5fa;color:#e9ecef;}/* Dark mode for badges */[data-bs-theme="dark"] .badge{background-color:#495057;color:#e9ecef;}/* ==================================================================== *//* PRACTICE INTERFACE-MODERN DESIGN *//* ==================================================================== */.practice-container{padding:0;max-width:1200px;margin:0 auto;}/* Practice Mode Cards */.practice-mode-section{margin-bottom:2rem;}.mode-cards{display:grid;grid-template-columns:1fr;gap:1rem;}.mode-card{background:#ffffff;border:2px solid #e9ecef;border-radius:16px;padding:1.5rem;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden;display:flex;align-items:center;gap:1rem;}.mode-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#e9ecef,#dee2e6);transition:all 0.3s ease;}.mode-card:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.1);border-color:#0d6efd;}.mode-card.active{border-color:#0d6efd;background:linear-gradient(135deg,#f8f9ff 0%,#e3f2fd 100%);box-shadow:0 8px 25px rgba(13,110,253,0.15);}.mode-card.active::before{background:linear-gradient(90deg,#0d6efd,#6f42c1);}.mode-icon{width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;color:#6c757d;background:#f8f9fa;transition:all 0.3s ease;flex-shrink:0;}.mode-card.active .mode-icon{background:linear-gradient(135deg,#0d6efd,#6f42c1);color:#ffffff;transform:scale(1.1);}.mode-content{flex:1;}.mode-title{font-size:1.1rem;font-weight:600;margin:0 0 0.5rem 0;color:#212529;}.mode-description{font-size:0.9rem;color:#6c757d;margin:0;}.mode-badge{flex-shrink:0;}.mode-badge .badge{font-size:0.75rem;padding:0.5rem 0.75rem;border-radius:20px;}/* Setup Card */.setup-card{background:#ffffff;border-radius:20px;box-shadow:0 4px 20px rgba(0,0,0,0.08);overflow:hidden;border:1px solid #e9ecef;}.setup-header{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);padding:1.5rem;border-bottom:1px solid #dee2e6;}.setup-title{font-size:1.3rem;font-weight:600;margin:0;color:#495057;display:flex;align-items:center;}.setup-content{padding:0;}.setup-section{margin-bottom:1.5rem;}.form-group{margin-bottom:0;}.form-label{font-weight:600;color:#495057;margin-bottom:0.75rem;display:flex;align-items:center;font-size:1rem;}.select-wrapper{position:relative;}.form-select{border:2px solid #e9ecef;border-radius:12px;padding:0.75rem 1rem;font-size:1rem;background-color:#ffffff;transition:all 0.3s ease;}.form-select:focus{border-color:#0d6efd;box-shadow:0 0 0 0.2rem rgba(13,110,253,0.1);}.select-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:#6c757d;pointer-events:none;}/* Info Cards */.info-card{background:linear-gradient(135deg,#e3f2fd 0%,#f3e5f5 100%);border:1px solid #bbdefb;border-radius:12px;padding:1.5rem;display:flex;align-items:flex-start;gap:1rem;}.info-icon{width:40px;height:40px;border-radius:8px;background:#0d6efd;color:#ffffff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;}.info-content h5{font-size:1.1rem;font-weight:600;margin:0 0 0.5rem 0;color:#1976d2;}.info-content p{margin:0;color:#424242;font-size:0.95rem;line-height:1.5;}/* Start Button */.start-button-wrapper{margin-top:2rem;text-align:center;}.btn-start{background:linear-gradient(135deg,#0d6efd 0%,#6f42c1 100%);border:none;border-radius:16px;padding:1rem 2rem;color:#ffffff;font-size:1.1rem;font-weight:600;display:inline-flex;align-items:center;gap:0.75rem;cursor:pointer;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(13,110,253,0.3);min-width:200px;justify-content:center;}.btn-start:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(13,110,253,0.4);background:linear-gradient(135deg,#0b5ed7 0%,#5a2d91 100%);}.btn-start:active{transform:translateY(0);}.btn-start i{font-size:1.2rem;}/* Quiz Container */.quiz-container{margin-top:2rem;}/* =========================================================================LIBRARY MODERN STYLES========================================================================= *//* Library Container */.library-container{padding:0;max-width:100%;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;}/* Library Header */.library-header{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;padding:2.5rem 2rem;border-radius:20px;margin-bottom:2.5rem;box-shadow:0 12px 40px rgba(102,126,234,0.25);position:relative;overflow:hidden;}.library-header::before{content:"";position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);border-radius:50%;animation:float 6s ease-in-out infinite;}.library-header::after{content:"";position:absolute;bottom:-30%;left:-10%;width:150px;height:150px;background:radial-gradient(circle,rgba(255,255,255,0.08) 0%,transparent 70%);border-radius:50%;animation:float 8s ease-in-out infinite reverse;}@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg);}50%{transform:translateY(-20px) rotate(180deg);}}.library-title{display:flex;align-items:center;gap:1rem;font-size:1.75rem;font-weight:800;margin-bottom:1.5rem;position:relative;z-index:2;}.library-title i{font-size:2rem;opacity:0.95;filter:drop-shadow(0 2px 4px rgba(0,0,0,0.1));}.library-stats{display:flex;gap:2rem;position:relative;z-index:2;}.stat-item{display:flex;align-items:center;gap:0.75rem;background:rgba(255,255,255,0.2);padding:0.75rem 1.5rem;border-radius:25px;backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.3);transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.1);}.stat-item:hover{background:rgba(255,255,255,0.25);transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.15);}.stat-item i{font-size:1.25rem;opacity:0.95;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.1));}.stat-item span{font-weight:700;font-size:1rem;text-shadow:0 1px 2px rgba(0,0,0,0.1);}/* Unified Content Section */.unified-content-section{margin-bottom:2rem;margin-top:1rem;}.content-header{display:flex;flex-direction:column;gap:2rem;margin-bottom:0;padding:3rem 2.5rem;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);border-radius:24px;box-shadow:0 10px 40px rgba(0,0,0,0.08);border:1px solid rgba(255,255,255,0.8);position:relative;overflow:hidden;backdrop-filter:blur(20px);}/* Sticky Search and Filter Section */.content-search-filter-section{position:sticky;top:var(--top-header-height);z-index:1000;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);border-radius:16px;padding:0.75rem 1rem;margin:0.25rem 0;box-shadow:0 4px 20px rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.8);backdrop-filter:blur(20px);will-change:transform;transform:translateZ(0);display:flex;align-items:center;gap:0.75rem;}.library-search-section{flex:1;min-width:200px;}.content-filters{display:flex;gap:0.375rem;flex-shrink:0;}.content-header::before{content:"";position:absolute;top:-20%;right:-10%;width:120px;height:120px;background:linear-gradient(135deg,rgba(99,102,241,0.1) 0%,rgba(139,92,246,0.1) 100%);border-radius:50%;animation:float 6s ease-in-out infinite;}.content-header::after{content:"";position:absolute;bottom:-15%;left:-5%;width:80px;height:80px;background:linear-gradient(135deg,rgba(59,130,246,0.08) 0%,rgba(16,185,129,0.08) 100%);border-radius:50%;animation:float 8s ease-in-out infinite reverse;}.content-title-wrapper{position:relative;z-index:2;text-align:center;}.content-section-title{font-size:2.5rem;font-weight:800;color:#0f172a;margin-bottom:1rem;letter-spacing:-0.025em;display:flex;align-items:center;justify-content:center;gap:1rem;}.content-section-title i{font-size:2rem;color:#dc2626;background:linear-gradient(135deg,#dc2626 0%,#ea580c 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}.content-section-subtitle{color:#374151;font-size:1.25rem;font-weight:500;margin:0;line-height:1.6;max-width:600px;margin:0 auto;}.content-filters{display:flex;gap:0.75rem;position:relative;z-index:2;}.filter-btn{display:flex;align-items:center;gap:0.5rem;padding:0.875rem 1.75rem;background:rgba(255,255,255,0.9);border:2px solid rgba(0,0,0,0.1);border-radius:30px;color:#374151;font-weight:700;font-size:0.95rem;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);cursor:pointer;position:relative;overflow:hidden;backdrop-filter:blur(10px);box-shadow:0 2px 8px rgba(0,0,0,0.1);}.filter-btn::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(59,130,246,0.1);opacity:0;transition:opacity 0.3s ease;}.filter-btn:hover{background:rgba(255,255,255,1);border-color:rgba(59,130,246,0.3);transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,0.15);}.filter-btn.active{background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%);border-color:#3b82f6;color:white;box-shadow:0 8px 25px rgba(59,130,246,0.3);transform:translateY(-2px);}.filter-btn.active::before{opacity:1;}.filter-btn i{font-size:1rem;position:relative;z-index:2;}.filter-btn span{position:relative;z-index:2;}/* Animation Keyframes */@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px);}100%{opacity:1;transform:translateY(0);}}@keyframes fadeOut{0%{opacity:1;transform:translateY(0);}100%{opacity:0;transform:translateY(-30px);}}/* Library Navigation */.library-nav{margin-bottom:2.5rem;}.library-nav .nav-pills{background:#ffffff;border-radius:16px;padding:0.75rem;box-shadow:0 8px 32px rgba(0,0,0,0.08);border:1px solid #f1f3f4;position:relative;overflow:hidden;}.library-nav .nav-pills::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(102,126,234,0.02) 0%,rgba(118,75,162,0.02) 100%);pointer-events:none;}.library-nav .nav-link{border:none;background:transparent;color:#6c757d;font-weight:700;padding:1rem 2rem;border-radius:12px;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);position:relative;display:flex;align-items:center;justify-content:center;gap:0.75rem;font-size:0.95rem;letter-spacing:0.025em;z-index:2;}.library-nav .nav-link:hover{background:rgba(102,126,234,0.08);color:#667eea;transform:translateY(-1px);box-shadow:0 4px 12px rgba(102,126,234,0.15);}.library-nav .nav-link.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;box-shadow:0 8px 25px rgba(102,126,234,0.4);transform:translateY(-2px);}.library-nav .nav-link.active::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 50%);border-radius:12px;pointer-events:none;}.nav-badge{background:rgba(255,255,255,0.25);color:white;font-size:0.7rem;padding:0.3rem 0.6rem;border-radius:12px;font-weight:700;margin-left:0.5rem;text-shadow:0 1px 2px rgba(0,0,0,0.1);box-shadow:0 2px 4px rgba(0,0,0,0.1);}.library-nav .nav-link:not(.active) .nav-badge{background:#e9ecef;color:#6c757d;box-shadow:none;text-shadow:none;}/* Content Grid */.content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;margin-top:1.5rem;padding:0 0.5rem;}/* Content Cards */.content-card{background:white;border-radius:20px;padding:2rem;box-shadow:0 8px 32px rgba(0,0,0,0.06);border:1px solid #f1f3f4;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);cursor:pointer;position:relative;overflow:hidden;will-change:transform,box-shadow;}.content-card::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);transform:scaleX(0);transition:transform 0.4s cubic-bezier(0.4,0,0.2,1);border-radius:20px 20px 0 0;}.content-card::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(102,126,234,0.02) 0%,rgba(118,75,162,0.02) 100%);opacity:0;transition:opacity 0.4s ease;pointer-events:none;}.content-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 20px 60px rgba(0,0,0,0.12);}.content-card:hover::before{transform:scaleX(1);}.content-card:hover::after{opacity:1;}.content-card:focus{outline:2px solid #667eea;outline-offset:2px;}.content-card:focus-visible{outline:2px solid #667eea;outline-offset:2px;}.content-card-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;position:relative;z-index:2;}.content-icon{width:56px;height:56px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;color:white;font-size:1.5rem;box-shadow:0 8px 20px rgba(102,126,234,0.3);transition:all 0.3s ease;}.content-card:hover .content-icon{transform:scale(1.1) rotate(5deg);box-shadow:0 12px 30px rgba(102,126,234,0.4);}.content-badge .badge{font-size:0.7rem;padding:0.5rem 1rem;border-radius:25px;font-weight:700;letter-spacing:0.025em;text-transform:uppercase;box-shadow:0 2px 8px rgba(0,0,0,0.1);}.content-card-body{margin-bottom:2rem;position:relative;z-index:2;}.content-title{font-size:1.2rem;font-weight:800;color:#2c3e50;margin-bottom:1rem;line-height:1.4;letter-spacing:-0.025em;}.content-excerpt{color:#6c757d;font-size:0.95rem;line-height:1.6;margin:0;font-weight:500;}.content-card-footer{border-top:1px solid #f1f3f4;padding-top:1.5rem;position:relative;z-index:2;}.content-actions{display:flex;align-items:center;justify-content:space-between;color:#667eea;font-weight:700;font-size:0.95rem;letter-spacing:0.025em;}.read-more{transition:all 0.3s ease;position:relative;}.read-more::after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:2px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);transition:width 0.3s ease;}.content-card:hover .read-more{color:#764ba2;}.content-card:hover .read-more::after{width:100%;}.content-card:hover .content-actions i{transform:translateX(6px) scale(1.1);}.content-actions i{transition:all 0.3s ease;font-size:1.1rem;}/* Loading States */.library-loading{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:2rem;margin-top:1.5rem;padding:0 0.5rem;}.skeleton-card{background:white;border-radius:20px;padding:2rem;box-shadow:0 8px 32px rgba(0,0,0,0.06);border:1px solid #f1f3f4;animation:skeleton-loading 1.5s ease-in-out infinite;}.skeleton-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.5rem;}.skeleton-icon{width:56px;height:56px;background:#e9ecef;border-radius:16px;animation:skeleton-loading 1.5s ease-in-out infinite;}.skeleton-badge{width:80px;height:28px;background:#e9ecef;border-radius:25px;animation:skeleton-loading 1.5s ease-in-out infinite;}.skeleton-title{width:85%;height:24px;background:#e9ecef;border-radius:6px;margin-bottom:1rem;animation:skeleton-loading 1.5s ease-in-out infinite;}.skeleton-excerpt{width:100%;height:18px;background:#e9ecef;border-radius:4px;margin-bottom:0.75rem;animation:skeleton-loading 1.5s ease-in-out infinite;}.skeleton-excerpt:last-child{width:70%;}@keyframes skeleton-loading{0%{opacity:1;}50%{opacity:0.5;}100%{opacity:1;}}/* Empty State */.empty-state{text-align:center;padding:4rem 2rem;color:#6c757d;}.empty-icon{width:100px;height:100px;background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 2rem;font-size:2.5rem;color:#adb5bd;box-shadow:0 8px 32px rgba(0,0,0,0.08);animation:float 3s ease-in-out infinite;}.empty-title{font-size:1.5rem;font-weight:700;color:#495057;margin-bottom:1rem;letter-spacing:-0.025em;}.empty-description{color:#6c757d;margin:0;font-size:1rem;font-weight:500;line-height:1.6;}/* Document Detail Styles */.document-detail-container{max-width:100%;padding:0;margin:0;}.document-back{margin-bottom:2rem;}.btn-back{display:inline-flex;align-items:center;gap:0.5rem;background:#f8f9fa;border:1px solid #e9ecef;color:#6c757d;padding:0.75rem 1.5rem;border-radius:12px;font-weight:600;transition:all 0.3s ease;text-decoration:none;}.btn-back:hover{background:#e9ecef;color:#495057;transform:translateX(-2px);}.document-content-wrapper{background:white;border-radius:0;padding:1.5rem;margin:0 0 2rem 0;box-shadow:none;border:none;max-width:none;width:100%;}.document-content{line-height:1.6;color:#2c3e50;font-size:1rem;max-width:none;width:100%;}.document-content h1,.document-content h2,.document-content h3,.document-content h4,.document-content h5,.document-content h6{color:#2c3e50;margin-top:2rem;margin-bottom:1rem;font-weight:700;}.document-content p{margin-bottom:1.2rem;text-align:justify;word-spacing:0.1em;}.document-content ul,.document-content ol{margin-bottom:1.2rem;padding-left:1.5rem;}.document-content li{margin-bottom:0.5rem;}.document-content blockquote{border-left:4px solid #667eea;padding-left:1.5rem;margin:2rem 0;font-style:italic;color:#6c757d;background:#f8f9fa;padding:1.5rem;border-radius:8px;}.document-content code{background:#f8f9fa;padding:0.25rem 0.5rem;border-radius:4px;font-family:"Monaco","Menlo","Ubuntu Mono",monospace;font-size:0.9rem;color:#e83e8c;}.document-content pre{background:#f8f9fa;padding:1.5rem;border-radius:8px;overflow-x:auto;margin:1.5rem 0;}.document-content pre code{background:none;padding:0;color:#2c3e50;}/* Dark Mode Styles */[data-bs-theme="dark"] .library-header{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);}[data-bs-theme="dark"] .library-header::before,[data-bs-theme="dark"] .library-header::after{background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);}/* Unified Content Section Dark Mode */[data-bs-theme="dark"] .content-header{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);border-color:#334155;}[data-bs-theme="dark"] .content-header::before{background:linear-gradient(135deg,rgba(99,102,241,0.15) 0%,rgba(139,92,246,0.15) 100%);}[data-bs-theme="dark"] .content-header::after{background:linear-gradient(135deg,rgba(59,130,246,0.12) 0%,rgba(16,185,129,0.12) 100%);}[data-bs-theme="dark"] .content-section-title{color:#f1f5f9;}[data-bs-theme="dark"] .content-section-subtitle{color:#94a3b8;}[data-bs-theme="dark"] .filter-btn{background:rgba(255,255,255,0.1);border-color:rgba(255,255,255,0.2);color:white;}[data-bs-theme="dark"] .filter-btn:hover{background:rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.3);}[data-bs-theme="dark"] .filter-btn.active{background:rgba(255,255,255,0.2);border-color:rgba(255,255,255,0.4);color:white;}[data-bs-theme="dark"] .library-nav .nav-pills{background:#2d3748;border-color:#4a5568;}[data-bs-theme="dark"] .library-nav .nav-pills::before{background:linear-gradient(135deg,rgba(102,126,234,0.05) 0%,rgba(118,75,162,0.05) 100%);}[data-bs-theme="dark"] .library-nav .nav-link{color:#a0aec0;}[data-bs-theme="dark"] .library-nav .nav-link:hover{background:rgba(102,126,234,0.2);color:#667eea;}[data-bs-theme="dark"] .library-nav .nav-link:not(.active) .nav-badge{background:#4a5568;color:#a0aec0;}[data-bs-theme="dark"] .content-card{background:#2d3748;border-color:#4a5568;}[data-bs-theme="dark"] .content-card::after{background:linear-gradient(135deg,rgba(102,126,234,0.05) 0%,rgba(118,75,162,0.05) 100%);}/* Skeleton Loading Dark Mode */[data-bs-theme="dark"] .skeleton-card{background:#2d3748;border-color:#4a5568;}[data-bs-theme="dark"] .skeleton-icon,[data-bs-theme="dark"] .skeleton-badge,[data-bs-theme="dark"] .skeleton-title,[data-bs-theme="dark"] .skeleton-excerpt{background:#4a5568;}[data-bs-theme="dark"] .content-title{color:#e2e8f0;}[data-bs-theme="dark"] .content-excerpt{color:#a0aec0;}[data-bs-theme="dark"] .content-card-footer{border-color:#4a5568;}[data-bs-theme="dark"] .empty-state{color:#a0aec0;}[data-bs-theme="dark"] .empty-icon{background:linear-gradient(135deg,#4a5568 0%,#2d3748 100%);color:#718096;}[data-bs-theme="dark"] .empty-title{color:#e2e8f0;}[data-bs-theme="dark"] .btn-back{background:#4a5568;border-color:#718096;color:#a0aec0;}[data-bs-theme="dark"] .btn-back:hover{background:#718096;color:#e2e8f0;}[data-bs-theme="dark"] .document-content-wrapper{background:#2d3748;border-color:#4a5568;}[data-bs-theme="dark"] .document-content{color:#e2e8f0;}[data-bs-theme="dark"] .document-content h1,[data-bs-theme="dark"] .document-content h2,[data-bs-theme="dark"] .document-content h3,[data-bs-theme="dark"] .document-content h4,[data-bs-theme="dark"] .document-content h5,[data-bs-theme="dark"] .document-content h6{color:#e2e8f0;}[data-bs-theme="dark"] .document-content blockquote{background:#4a5568;color:#a0aec0;}[data-bs-theme="dark"] .document-content code{background:#4a5568;color:#f687b3;}[data-bs-theme="dark"] .document-content pre{background:#4a5568;}[data-bs-theme="dark"] .document-content pre code{color:#e2e8f0;}/* Mobile Responsive */@media (max-width:768px){.unified-content-section{margin-top:0.5rem;}.content-header{flex-direction:column;gap:1.5rem;padding:2rem 1.5rem;}.content-section-title{font-size:2rem;}.content-section-subtitle{font-size:1.1rem;}.content-search-filter-section{padding:0.5rem 0.75rem;margin:0.25rem 0;gap:0.5rem;}.library-search-section{min-width:120px;}.content-filters{gap:0.25rem;flex-wrap:wrap;justify-content:center;}.filter-btn{padding:0.75rem 1.5rem;font-size:0.9rem;}.content-grid{grid-template-columns:1fr;gap:1.5rem;}.content-card{padding:1.5rem;}.document-content-wrapper{padding:1.25rem;margin:0 0 1.5rem 0;}.library-nav .nav-link{padding:0.8rem 1.5rem;font-size:0.9rem;}.nav-badge{font-size:0.65rem;padding:0.25rem 0.5rem;}.skeleton-card{padding:1.5rem;}}@media (max-width:480px){.unified-content-section{margin-top:0;}.content-header{padding:1.5rem 1.25rem;}.content-section-title{font-size:1.75rem;}.content-section-subtitle{font-size:1rem;}.content-search-filter-section{padding:0.375rem 0.5rem;margin:0.125rem 0;gap:0.375rem;flex-direction:column;align-items:stretch;}.library-search-section{min-width:auto;width:100%;}.content-filters{gap:0.1875rem;justify-content:center;}.filter-btn{padding:0.6rem 1.2rem;font-size:0.85rem;}.content-card{padding:1.25rem;}.content-card-header{margin-bottom:1rem;}.content-icon{width:48px;height:48px;font-size:1.25rem;}.document-content-wrapper{padding:1rem;margin:0 0 1rem 0;}.library-nav .nav-link{padding:0.7rem 1.2rem;font-size:0.85rem;}/* Mobile Vocabulary Styles */.vocab-header-content{flex-direction:column;gap:1.5rem;text-align:center;}.vocab-main-title{font-size:1.5rem;}.vocab-main-title i{font-size:1.75rem;}.vocab-subtitle{font-size:0.9rem;}.vocab-stats{justify-content:center;}.stat-item{min-width:70px;padding:0.75rem;}.stat-number{font-size:2rem;}.stat-label{font-size:0.75rem;}.tab-button{padding:0.75rem 0.5rem;font-size:0.85rem;}.tab-button span{display:none;}.tab-button i{font-size:1.2rem;}.search-input{padding:0.875rem 0.875rem 0.875rem 2.5rem;font-size:0.9rem;}.search-icon{left:0.875rem;font-size:1rem;}.mode-toggle-btn{padding:0.75rem 0.5rem;font-size:0.85rem;}.mode-toggle-btn span{display:none;}.mode-toggle-btn i{font-size:1.2rem;}.vocab-card-content{padding:1.25rem;}.vocab-header{margin-bottom:1.25rem;}.vocab-number{width:28px;height:28px;font-size:0.8rem;}.action-btn{width:36px;height:36px;font-size:1rem;}.japanese-text{font-size:1.2rem;}.vietnamese-text{font-size:1rem;}.divider i{font-size:1rem;padding:0.4rem;}.skeleton-card{padding:1.25rem;}/* Mobile Vocabulary Compact Styles */.vocab-compact-header{padding:0.75rem 1rem;border-radius:0 0 16px 16px;}.header-top{flex-direction:column;gap:1rem;align-items:stretch;}.title-section{justify-content:space-between;align-items:center;}.vocab-title{font-size:1.2rem;}.vocab-title i{font-size:1.4rem;}.vocab-count{font-size:0.8rem;padding:0.3rem 0.8rem;border-radius:16px;}.tab-switcher{width:100%;justify-content:center;}.tab-switch{flex:1;padding:0.6rem 0.75rem;font-size:0.85rem;border-radius:10px;}.tab-switch span{display:inline;}.tab-switch i{font-size:1.1rem;}.search-wrapper input{padding:0.6rem 0.75rem 0.6rem 2.25rem;font-size:0.9rem;border-radius:16px;}.search-wrapper i{left:0.75rem;font-size:0.9rem;}.desktop-table{margin:0.75rem;border-radius:16px;}.vocab-table th,.vocab-table td{padding:0.75rem;}.mobile-cards{padding:0.75rem;}.loading-state{padding:1.5rem 0.75rem;}.loading-spinner{width:28px;height:28px;}.empty-state{padding:2rem 0.75rem;}.empty-state i{font-size:2rem;}.empty-state h3{font-size:1.1rem;}.vocab-content-compact{gap:0.5rem;}.japanese-row,.vietnamese-row{gap:0.5rem;}.flag-container{width:28px;height:28px;}.flag-emoji{font-size:1rem;}.japanese-text{font-size:1.1rem;}.vietnamese-text{font-size:0.9rem;}/* Mobile Flashcard Styles-MOVED TO flashcard-style.css */}/* Practice Question Modal */#practiceQuestionModal .modal-content{border-radius:20px;border:none;box-shadow:0 10px 40px rgba(0,0,0,0.15);background:#ffffff;}#practiceQuestionModal .modal-header{background:linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);color:#495057;border-radius:20px 20px 0 0;border-bottom:1px solid #dee2e6;padding:1.5rem;}#practiceQuestionModal .modal-title{font-size:1.3rem;font-weight:600;margin:0;color:#495057;}#practiceQuestionModal .btn-close{opacity:0.6;color:#6c757d;}#practiceQuestionModal .btn-close:hover{opacity:1;color:#495057;}#practiceQuestionModal .modal-body{padding:2rem;background:#ffffff;}#practiceQuestionModal .question-image{max-width:100%;height:auto;border-radius:12px;box-shadow:0 4px 15px rgba(0,0,0,0.1);}#practiceQuestionModal .btn-outline-primary{border:2px solid #6c757d;color:#495057;background:#f8f9fa;font-weight:500;padding:1rem 1.5rem;border-radius:12px;transition:all 0.3s ease;text-align:left;white-space:normal;word-wrap:break-word;}#practiceQuestionModal .btn-outline-primary:hover{background-color:#e9ecef;border-color:#495057;color:#212529;transform:translateY(-2px);box-shadow:0 4px 15px rgba(108,117,125,0.2);}#practiceQuestionModal .btn-outline-primary:active{transform:translateY(0);}#practiceQuestionModal .modal-footer{background:#f8f9fa;border-radius:0 0 20px 20px;border-top:1px solid #dee2e6;padding:1rem 2rem;color:#6c757d;}/* Dark Mode for Practice Question Modal */[data-bs-theme="dark"] #practiceQuestionModal .modal-content{background-color:#2d2d2d;border-color:#495057;}[data-bs-theme="dark"] #practiceQuestionModal .modal-header{background:linear-gradient(135deg,#343a40 0%,#495057 100%);color:#e9ecef;border-color:#495057;}[data-bs-theme="dark"] #practiceQuestionModal .modal-title{color:#e9ecef;}[data-bs-theme="dark"] #practiceQuestionModal .btn-close{color:#adb5bd;}[data-bs-theme="dark"] #practiceQuestionModal .btn-close:hover{color:#e9ecef;}[data-bs-theme="dark"] #practiceQuestionModal .modal-body{background:#2d2d2d;}[data-bs-theme="dark"] #practiceQuestionModal .btn-outline-primary{border-color:#495057;color:#e9ecef;background:#343a40;}[data-bs-theme="dark"] #practiceQuestionModal .btn-outline-primary:hover{background-color:#495057;border-color:#6c757d;color:#f8f9fa;box-shadow:0 4px 15px rgba(108,117,125,0.3);}[data-bs-theme="dark"] #practiceQuestionModal .modal-footer{background:#343a40;border-color:#495057;color:#adb5bd;}/* Mobile Responsive */@media (max-width:768px){.practice-container{padding:0;}.mode-card{padding:1rem;gap:0.75rem;}.mode-icon{width:50px;height:50px;font-size:1.3rem;}.mode-title{font-size:1rem;}.mode-description{font-size:0.85rem;}.setup-content{padding:0;}.btn-start{width:100%;padding:1rem;}/* Mobile Modal Adjustments */#practiceQuestionModal .modal-dialog{margin:0.5rem;}#practiceQuestionModal .modal-body{padding:1.5rem;}#practiceQuestionModal .btn-outline-primary{padding:0.75rem 1rem;font-size:0.95rem;}}/* Dark Mode for Practice Interface */[data-bs-theme="dark"] .mode-card{background:#2d2d2d;border-color:#495057;color:#e9ecef;}[data-bs-theme="dark"] .mode-card:hover{border-color:#60a5fa;box-shadow:0 8px 25px rgba(96,165,250,0.2);}[data-bs-theme="dark"] .mode-card.active{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border-color:#60a5fa;box-shadow:0 8px 25px rgba(96,165,250,0.25);}[data-bs-theme="dark"] .mode-card.active::before{background:linear-gradient(90deg,#60a5fa,#8b5cf6);}[data-bs-theme="dark"] .mode-icon{background:#343a40;color:#adb5bd;}[data-bs-theme="dark"] .mode-card.active .mode-icon{background:linear-gradient(135deg,#60a5fa,#8b5cf6);color:#ffffff;}[data-bs-theme="dark"] .mode-title{color:#f8f9fa;}[data-bs-theme="dark"] .mode-description{color:#adb5bd;}[data-bs-theme="dark"] .setup-card{background:#2d2d2d;border-color:#495057;}[data-bs-theme="dark"] .setup-header{background:linear-gradient(135deg,#343a40 0%,#495057 100%);border-color:#495057;}[data-bs-theme="dark"] .setup-title{color:#e9ecef;}[data-bs-theme="dark"] .form-label{color:#e9ecef;}[data-bs-theme="dark"] .form-select{background-color:#343a40;border-color:#495057;color:#e9ecef;}[data-bs-theme="dark"] .form-select:focus{border-color:#60a5fa;box-shadow:0 0 0 0.2rem rgba(96,165,250,0.1);}[data-bs-theme="dark"] .select-icon{color:#adb5bd;}[data-bs-theme="dark"] .info-card{background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);border-color:#495057;}[data-bs-theme="dark"] .info-content h5{color:#60a5fa;}[data-bs-theme="dark"] .info-content p{color:#e9ecef;}[data-bs-theme="dark"] .btn-start{background:linear-gradient(135deg,#60a5fa 0%,#8b5cf6 100%);box-shadow:0 4px 15px rgba(96,165,250,0.3);}[data-bs-theme="dark"] .btn-start:hover{background:linear-gradient(135deg,#3b82f6 0%,#7c3aed 100%);box-shadow:0 8px 25px rgba(96,165,250,0.4);}/* == DDL-MOD:ÉP BUỘC NỘI DUNG TÀI LIỆU HIỂN THỊ TOÀN CHIỀU RỘNG == */.main-content #content-display .card:not(.flashcard){max-width:none !important;width:100vw !important;margin:0 !important;border-left:none !important;border-right:none !important;border-radius:0 !important;box-shadow:none !important;}.main-content #content-display .card:not(.flashcard) .card-body{padding:0.75rem 1rem !important;margin:0 !important;width:100% !important;max-width:100% !important;}/* Reset tất cả containers để sử dụng toàn bộ chiều rộng */.main-content .container,.main-content .container-fluid,.main-content .row,.main-content .col,.main-content [class*="col-"]{margin:0 !important;padding-left:0 !important;padding-right:0 !important;width:100vw !important;max-width:100vw !important;}/* Đảm bảo document content wrapper sử dụng toàn bộ chiều rộng */.main-content .document-content-wrapper{margin:0 !important;padding:0.75rem 1rem !important;width:100vw !important;max-width:100vw !important;border-radius:0 !important;box-shadow:none !important;}/* Đảm bảo document content sử dụng toàn bộ chiều rộng */.main-content .document-content{margin:0 !important;padding:0 !important;width:100% !important;max-width:100% !important;}/* ==================================================================== *//* MODERN DASHBOARD STYLES-THIẾT KẾ MỚI HIỆN ĐẠI *//* ==================================================================== */.modern-dashboard{padding:0;margin:0;width:100%;max-width:100%;}/* Hero Welcome Section */.hero-welcome{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:24px;padding:2rem;margin-bottom:2rem;position:relative;overflow:hidden;box-shadow:0 20px 40px rgba(102,126,234,0.3);}.hero-welcome::before{content:"";position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,0.1) 0%,transparent 70%);border-radius:50%;animation:float 6s ease-in-out infinite;}.hero-welcome::after{content:"";position:absolute;bottom:-30%;left:-10%;width:150px;height:150px;background:radial-gradient(circle,rgba(255,255,255,0.05) 0%,transparent 70%);border-radius:50%;animation:float 8s ease-in-out infinite reverse;}.hero-content{display:flex;align-items:center;gap:1.5rem;position:relative;z-index:2;}.hero-avatar{position:relative;flex-shrink:0;}.avatar-circle{width:80px;height:80px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;color:white;backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,0.3);}.avatar-status{position:absolute;bottom:2px;right:2px;width:20px;height:20px;background:#4ade80;border-radius:50%;border:3px solid white;}.hero-text{flex:1;}.hero-title{font-size:2rem;font-weight:700;color:white;margin:0 0 0.5rem 0;text-shadow:0 2px 4px rgba(0,0,0,0.2);letter-spacing:-0.025em;}.hero-subtitle{font-size:1.1rem;color:rgba(255,255,255,0.9);margin:0;font-weight:500;text-shadow:0 1px 2px rgba(0,0,0,0.1);}.hero-stats{display:flex;gap:2rem;flex-shrink:0;}.stat-item{text-align:center;}.stat-number{display:block;font-size:2rem;font-weight:700;color:white;text-shadow:0 2px 4px rgba(0,0,0,0.2);}.stat-label{display:block;font-size:0.9rem;color:white !important;font-weight:500;margin-top:0.25rem;}/* Modern Course Section */.modern-course-section{background:white;border-radius:20px;padding:1.5rem;margin-bottom:2rem;box-shadow:0 8px 32px rgba(0,0,0,0.1);border:1px solid rgba(0,0,0,0.05);}.course-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;}.course-title{display:flex;align-items:center;gap:1rem;}.course-icon{width:48px;height:48px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;}.course-icon svg{width:24px;height:24px;}.course-info h3{font-size:1.25rem;font-weight:600;color:#1f2937;margin:0 0 0.25rem 0;}.course-info p{font-size:0.9rem;color:#6b7280;margin:0;}.course-badge{width:40px;height:40px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:600;font-size:0.9rem;}.course-selector{position:relative;margin-bottom:1rem;}.modern-select{width:100%;padding:1rem 1.5rem;border:2px solid #e5e7eb;border-radius:12px;font-size:1rem;font-weight:500;color:#1f2937;background:white;appearance:none;transition:all 0.2s ease;}.modern-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1);}.select-arrow{position:absolute;right:1rem;top:50%;transform:translateY(-50%);pointer-events:none;color:#6b7280;}.select-arrow svg{width:20px;height:20px;}.current-course-display{display:flex;align-items:center;gap:1rem;padding:1rem;background:linear-gradient(135deg,rgba(102,126,234,0.1),rgba(118,75,162,0.1));border-radius:12px;border:1px solid rgba(102,126,234,0.2);}.current-course-icon{width:40px;height:40px;background:linear-gradient(135deg,#4ade80,#22c55e);border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;}.current-course-icon svg{width:20px;height:20px;}.current-course-text{flex:1;}.current-label{display:block;font-size:0.8rem;color:#6b7280;font-weight:500;margin-bottom:0.25rem;}.current-title{display:block;font-size:1rem;font-weight:600;color:#1f2937;}/* Section Headers */.section-header{margin-bottom:1.5rem;}.section-title{display:flex;align-items:center;gap:1rem;}.title-icon{width:48px;height:48px;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;}.title-icon svg{width:24px;height:24px;}.title-text h3{font-size:1.5rem;font-weight:600;color:#1f2937;margin:0 0 0.25rem 0;}.title-text p{font-size:1rem;color:#6b7280;margin:0;}/* Progress Overview */.progress-overview{margin-bottom:2rem;}.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.5rem;}.progress-card{background:white;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.05);transition:all 0.3s ease;display:flex;align-items:center;gap:1rem;}.progress-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.12);}.progress-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.vocab-progress .progress-icon{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;}.questions-progress .progress-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:white;}.review-progress .progress-icon{background:linear-gradient(135deg,#f59e0b,#d97706);color:white;}.progress-icon svg{width:28px;height:28px;}.progress-content{flex:1;}.progress-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0.75rem;}.progress-label{font-size:0.9rem;font-weight:500;color:#6b7280;}.progress-value{font-size:1.25rem;font-weight:700;color:#1f2937;}.progress-bar{height:8px;background:#f3f4f6;border-radius:4px;overflow:hidden;}.progress-fill{height:100%;background:linear-gradient(135deg,#667eea,#764ba2);border-radius:4px;transition:width 0.8s ease;}/* Quick Actions */.quick-actions{margin-bottom:2rem;}.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem;}.action-card{background:white;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px rgba(0,0,0,0.08);border:1px solid rgba(0,0,0,0.05);transition:all 0.3s ease;display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit;}.action-card:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.12);text-decoration:none;color:inherit;}.action-icon{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.vocab-action .action-icon{background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:white;}.practice-action .action-icon{background:linear-gradient(135deg,#8b5cf6,#7c3aed);color:white;}.test-action .action-icon{background:linear-gradient(135deg,#f59e0b,#d97706);color:white;}.action-icon svg{width:28px;height:28px;}.action-content{flex:1;}.action-content h4{font-size:1.1rem;font-weight:600;color:#1f2937;margin:0 0 0.25rem 0;}.action-content p{font-size:0.9rem;color:#6b7280;margin:0;}.action-arrow{color:#9ca3af;transition:all 0.2s ease;}.action-card:hover .action-arrow{color:#667eea;transform:translateX(4px);}.action-arrow svg{width:20px;height:20px;}/* ==================================================================== *//* UNIFIED DASHBOARD DESIGN-MODERN MOBILE-FIRST *//* ==================================================================== */.unified-dashboard{padding:0;margin:0;width:100%;max-width:100%;background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);min-height:100vh;}/* Modern Hero Section */.unified-hero-section{background:linear-gradient(135deg,#667eea 0%,#764ba2 50%,#f093fb 100%);border-radius:24px;padding:2rem 1.5rem;margin:1rem;position:relative;overflow:hidden;box-shadow:0 20px 40px rgba(102,126,234,0.3),0 0 0 1px rgba(255,255,255,0.1),inset 0 1px 0 rgba(255,255,255,0.2);animation:slideInUp 0.6s ease-out;backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.15);}.unified-hero-section::before{content:"";position:absolute;top:-30%;right:-15%;width:200px;height:200px;background:radial-gradient(circle,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0.05) 50%,transparent 70%);border-radius:50%;animation:heroFloat 8s ease-in-out infinite;}.unified-hero-section::after{content:"";position:absolute;bottom:-25%;left:-10%;width:150px;height:150px;background:radial-gradient(circle,rgba(240,147,251,0.2) 0%,rgba(240,147,251,0.05) 50%,transparent 70%);border-radius:50%;animation:heroFloat 10s ease-in-out infinite reverse;}@keyframes heroFloat{0%,100%{transform:translateY(0px) rotate(0deg) scale(1);opacity:0.6;}50%{transform:translateY(-15px) rotate(180deg) scale(1.05);opacity:1;}}.hero-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem;position:relative;z-index:2;text-align:center;padding:0.5rem 0;}.hero-avatar-section{flex-shrink:0;}.avatar-container{position:relative;width:70px;height:70px;}.avatar-circle{width:100%;height:100%;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;font-weight:700;color:white;backdrop-filter:blur(10px);animation:avatarPulse 2s ease-in-out infinite;}.avatar-glow{position:absolute;top:-8px;left:-8px;right:-8px;bottom:-8px;background:radial-gradient(circle,rgba(255,255,255,0.2) 0%,transparent 70%);border-radius:50%;animation:glowPulse 3s ease-in-out infinite;}.avatar-status{position:absolute;bottom:3px;right:3px;width:16px;height:16px;background:#22c55e;border-radius:50%;border:2px solid white;animation:statusBlink 2s ease-in-out infinite;}@keyframes avatarPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}@keyframes glowPulse{0%,100%{opacity:0.2;transform:scale(1);}50%{opacity:0.4;transform:scale(1.1);}}@keyframes statusBlink{0%,100%{opacity:1;}50%{opacity:0.7;}}.hero-text-section{flex:1;}.hero-title{font-size:1.8rem;font-weight:700;color:white;margin:0 0 0.5rem 0;text-shadow:0 2px 8px rgba(0,0,0,0.3);animation:fadeInLeft 0.8s ease-out 0.2s both;letter-spacing:-0.02em;line-height:1.2;}.hero-subtitle{font-size:1rem;color:rgba(255,255,255,0.9);margin:0;animation:fadeInLeft 0.8s ease-out 0.4s both;font-weight:400;letter-spacing:0.01em;line-height:1.4;max-width:280px;}.hero-stats-section{display:flex;gap:0.75rem;flex-shrink:0;justify-content:center;flex-wrap:wrap;}.stat-card{background:rgba(255,255,255,0.15);border-radius:16px;padding:1rem;backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;gap:0.75rem;min-width:120px;animation:fadeInUp 0.8s ease-out 0.6s both;box-shadow:0 4px 20px rgba(0,0,0,0.1);transition:all 0.3s ease;position:relative;overflow:hidden;}.stat-card:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 8px 25px rgba(0,0,0,0.15);border-color:rgba(255,255,255,0.3);background:rgba(255,255,255,0.2);}.stat-card::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,transparent 50%);opacity:0;transition:opacity 0.3s ease;}.stat-card:hover::before{opacity:1;}.stat-icon{width:36px;height:36px;background:rgba(255,255,255,0.2);border-radius:10px;display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 2px 8px rgba(0,0,0,0.1);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,0.15);transition:all 0.3s ease;}.stat-icon:hover{background:rgba(255,255,255,0.3);transform:scale(1.1);box-shadow:0 4px 12px rgba(0,0,0,0.15);}.stat-icon svg{width:18px;height:18px;filter:drop-shadow(0 1px 2px rgba(0,0,0,0.2));}.stat-content{display:flex;flex-direction:column;gap:0.25rem;}.stat-number{font-size:1.8rem;font-weight:700;color:white;line-height:1.1;text-shadow:0 2px 4px rgba(0,0,0,0.3);letter-spacing:-0.02em;}.stat-label{font-size:0.75rem;color:#1e293b !important;line-height:1.2;font-weight:500;text-shadow:none !important;letter-spacing:0.01em;}/* Modern Progress Section */.unified-progress-section{background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border-radius:20px;padding:1.5rem;margin:1rem;box-shadow:0 8px 32px rgba(0,0,0,0.06);border:1px solid rgba(255,255,255,0.8);backdrop-filter:blur(20px);position:relative;overflow:hidden;animation:slideInUp 0.6s ease-out 0.2s both;}.unified-progress-section::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#667eea 0%,#764ba2 50%,#f093fb 100%);border-radius:20px 20px 0 0;animation:gradientShift 3s ease-in-out infinite;}@keyframes gradientShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}.progress-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.5rem;}.unified-progress-card{background:white;border-radius:16px;padding:1.25rem;box-shadow:0 4px 20px rgba(0,0,0,0.06);border:1px solid rgba(255,255,255,0.8);transition:all 0.3s ease;position:relative;overflow:hidden;animation:fadeInUp 0.8s ease-out both;}.unified-progress-card:nth-child(1){animation-delay:0.4s;}.unified-progress-card:nth-child(2){animation-delay:0.6s;}.unified-progress-card:nth-child(3){animation-delay:0.8s;}.unified-progress-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.12);}.unified-progress-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;border-radius:16px 16px 0 0;}.vocab-progress::before{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);}.questions-progress::before{background:linear-gradient(90deg,#f093fb 0%,#f5576c 100%);}.review-progress::before{background:linear-gradient(90deg,#4facfe 0%,#00f2fe 100%);}.progress-icon{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;}.vocab-progress .progress-icon{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;}.questions-progress .progress-icon{background:linear-gradient(135deg,#f093fb 0%,#f5576c 100%);color:white;}.review-progress .progress-icon{background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);color:white;}.progress-icon svg{width:24px;height:24px;}.progress-content{flex:1;}.progress-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}.progress-label{font-size:0.9rem;font-weight:600;color:#64748b;}.progress-value{font-size:1.5rem;font-weight:700;color:#1e293b;}.progress-bar{height:8px;background:#e2e8f0;border-radius:4px;overflow:hidden;}.progress-fill{height:100%;border-radius:4px;transition:width 1s ease-out;}.vocab-progress .progress-fill{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);}.questions-progress .progress-fill{background:linear-gradient(90deg,#f093fb 0%,#f5576c 100%);}.review-progress .progress-fill{background:linear-gradient(90deg,#4facfe 0%,#00f2fe 100%);}/* Modern Actions Section */.unified-actions-section{background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border-radius:20px;padding:1.5rem;margin:1rem;box-shadow:0 8px 32px rgba(0,0,0,0.06);border:1px solid rgba(255,255,255,0.8);backdrop-filter:blur(20px);position:relative;overflow:hidden;animation:slideInUp 0.6s ease-out 0.4s both;}.unified-actions-section::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#667eea 0%,#764ba2 50%,#f093fb 100%);border-radius:20px 20px 0 0;animation:gradientShift 3s ease-in-out infinite;}.actions-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1.5rem;}.unified-action-card{background:white;border-radius:16px;padding:1.25rem;box-shadow:0 4px 20px rgba(0,0,0,0.06);border:1px solid rgba(255,255,255,0.8);transition:all 0.3s ease;position:relative;overflow:hidden;cursor:pointer;animation:fadeInUp 0.8s ease-out both;}.unified-action-card:nth-child(1){animation-delay:0.6s;}.unified-action-card:nth-child(2){animation-delay:0.8s;}.unified-action-card:nth-child(3){animation-delay:1s;}.unified-action-card:nth-child(4){animation-delay:1.2s;}.unified-action-card:hover{transform:translateY(-4px);box-shadow:0 16px 48px rgba(0,0,0,0.12);}.action-background{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(102,126,234,0.05) 0%,rgba(118,75,162,0.05) 100%);opacity:0;transition:opacity 0.3s ease;}.unified-action-card:hover .action-background{opacity:1;}.action-content{display:flex;align-items:center;gap:1rem;position:relative;z-index:2;}.action-icon{width:48px;height:48px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0;transition:all 0.3s ease;}.unified-action-card:hover .action-icon{transform:scale(1.1);}.action-icon svg{width:24px;height:24px;}.action-text{flex:1;}.action-text h4{font-size:1.1rem;font-weight:600;color:#1e293b;margin:0 0 0.25rem 0;}.action-text p{font-size:0.9rem;color:#64748b;margin:0;}.action-arrow{width:32px;height:32px;background:rgba(102,126,234,0.1);border-radius:8px;display:flex;align-items:center;justify-content:center;color:#667eea;transition:all 0.3s ease;flex-shrink:0;}.unified-action-card:hover .action-arrow{background:#667eea;color:white;transform:translateX(4px);}.action-arrow svg{width:16px;height:16px;}@keyframes slideInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeInLeft{from{opacity:0;transform:translateX(-30px);}to{opacity:1;transform:translateX(0);}}/* ==================================================================== *//* ENHANCED COURSE SECTION WITH ANIMATIONS *//* ==================================================================== */.enhanced-course-section{background:linear-gradient(135deg,#ffffff 0%,#f8f9fa 100%);border-radius:24px;padding:2rem;margin-bottom:2rem;box-shadow:0 20px 40px rgba(0,0,0,0.08);border:1px solid rgba(255,255,255,0.2);backdrop-filter:blur(20px);position:relative;overflow:hidden;animation:slideInUp 0.6s ease-out;}.enhanced-course-section::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea 0%,#764ba2 50%,#f093fb 100%);border-radius:24px 24px 0 0;animation:gradientShift 3s ease-in-out infinite;}.enhanced-course-section::after{content:"";position:absolute;top:-50%;right:-20%;width:200px;height:200px;background:radial-gradient(circle,rgba(102,126,234,0.1) 0%,transparent 70%);border-radius:50%;animation:float 6s ease-in-out infinite;}@keyframes slideInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}@keyframes gradientShift{0%,100%{background-position:0% 50%;}50%{background-position:100% 50%;}}@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg);}50%{transform:translateY(-20px) rotate(180deg);}}/* Course Header Enhanced */.course-header-enhanced{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;animation:fadeInLeft 0.8s ease-out 0.2s both;}.course-title-enhanced{display:flex;align-items:center;gap:1.5rem;}.course-icon-enhanced{position:relative;width:60px;height:60px;}.icon-background{width:100%;height:100%;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;color:white;box-shadow:0 8px 32px rgba(102,126,234,0.3);transition:all 0.3s ease;animation:pulse 2s ease-in-out infinite;}.icon-background:hover{transform:scale(1.05);box-shadow:0 12px 40px rgba(102,126,234,0.4);}.icon-glow{position:absolute;top:-10px;left:-10px;right:-10px;bottom:-10px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;opacity:0.3;filter:blur(20px);animation:glow 2s ease-in-out infinite alternate;}@keyframes pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.05);}}@keyframes glow{0%{opacity:0.3;transform:scale(1);}100%{opacity:0.6;transform:scale(1.1);}}.course-icon-enhanced svg{width:28px;height:28px;animation:iconFloat 3s ease-in-out infinite;}@keyframes iconFloat{0%,100%{transform:translateY(0px);}50%{transform:translateY(-3px);}}.course-info-enhanced{flex:1;}.course-title-text{font-size:1.5rem;font-weight:700;color:#2d3748;margin:0 0 0.5rem 0;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:textGlow 2s ease-in-out infinite alternate;}@keyframes textGlow{0%{filter:brightness(1);}100%{filter:brightness(1.2);}}.course-subtitle-text{font-size:1rem;color:#718096;margin:0;animation:fadeIn 1s ease-out 0.4s both;}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}.course-status-enhanced{display:flex;align-items:center;gap:1rem;}.status-indicator{display:flex;align-items:center;gap:0.5rem;background:rgba(34,197,94,0.1);padding:0.75rem 1.25rem;border-radius:25px;border:1px solid rgba(34,197,94,0.2);animation:statusPulse 2s ease-in-out infinite;}@keyframes statusPulse{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,0.4);}50%{box-shadow:0 0 0 10px rgba(34,197,94,0);}}.status-dot{width:10px;height:10px;background:#22c55e;border-radius:50%;animation:dotPulse 1.5s ease-in-out infinite;}@keyframes dotPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.7;transform:scale(1.2);}}.status-text{font-size:0.9rem;font-weight:600;color:#16a34a;}.course-count-badge{width:50px;height:50px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:1.2rem;box-shadow:0 8px 32px rgba(102,126,234,0.3);animation:badgeFloat 3s ease-in-out infinite;}@keyframes badgeFloat{0%,100%{transform:translateY(0px) rotate(0deg);}50%{transform:translateY(-5px) rotate(180deg);}}.count-number{animation:numberCount 0.8s ease-out;}@keyframes numberCount{from{transform:scale(0);}to{transform:scale(1);}}/* Course Selector Enhanced */.course-selector-enhanced{margin-bottom:1.5rem;animation:fadeInUp 0.8s ease-out 0.4s both;}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}.selector-container{position:relative;background:white;border-radius:20px;border:2px solid #e2e8f0;transition:all 0.3s ease;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,0.05);}.selector-container:hover{border-color:#667eea;box-shadow:0 8px 32px rgba(102,126,234,0.15);transform:translateY(-2px);}.selector-background{position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(102,126,234,0.05) 0%,rgba(118,75,162,0.05) 100%);opacity:0;transition:opacity 0.3s ease;}.selector-container:hover .selector-background{opacity:1;}.enhanced-select{width:100%;padding:1.25rem 3.5rem 1.25rem 1.5rem;border:none;background:transparent;font-size:1.1rem;font-weight:500;color:#2d3748;cursor:pointer;appearance:none;outline:none;position:relative;z-index:2;}.enhanced-select:focus{outline:none;}.select-icon-enhanced{position:absolute;right:1.5rem;top:50%;transform:translateY(-50%);color:#667eea;pointer-events:none;z-index:3;transition:all 0.3s ease;}.selector-container:hover .select-icon-enhanced{transform:translateY(-50%) rotate(180deg);}.select-icon-enhanced svg{width:24px;height:24px;}/* Current Course Enhanced */.current-course-enhanced{position:relative;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:20px;padding:1.5rem;color:white;overflow:hidden;animation:slideInRight 0.8s ease-out 0.6s both;}@keyframes slideInRight{from{opacity:0;transform:translateX(30px);}to{opacity:1;transform:translateX(0);}}.current-course-background{position:absolute;top:0;left:0;right:0;bottom:0;background:url('data:image/svg+xml,<svg xmlns="http:opacity:0.3;animation:backgroundMove 20s linear infinite;}@keyframes backgroundMove{0%{transform:translateX(0) translateY(0);}100%{transform:translateX(-100px) translateY(-100px);}}.current-course-content{display:flex;align-items:center;gap:1.5rem;position:relative;z-index:2;}.current-course-icon{flex-shrink:0;}.checkmark-circle{width:50px;height:50px;background:rgba(255,255,255,0.2);border-radius:50%;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(10px);animation:checkmarkPulse 2s ease-in-out infinite;}@keyframes checkmarkPulse{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}.checkmark-circle svg{width:24px;height:24px;color:white;animation:checkmarkDraw 1s ease-out;}@keyframes checkmarkDraw{0%{stroke-dashoffset:100;}100%{stroke-dashoffset:0;}}.current-course-text{flex:1;}.current-label{display:block;font-size:0.9rem;color:rgba(255,255,255,0.9);margin-bottom:0.25rem;animation:fadeInLeft 0.8s ease-out 0.8s both;text-shadow:0 1px 2px rgba(0,0,0,0.3);}@keyframes fadeInLeft{from{opacity:0;transform:translateX(-20px);}to{opacity:1;transform:translateX(0);}}.current-title{display:block;font-size:1.2rem;font-weight:600;color:white;animation:fadeInLeft 0.8s ease-out 1s both;text-shadow:0 2px 4px rgba(0,0,0,0.4);}.progress-indicator{flex-shrink:0;}.progress-ring{position:relative;width:60px;height:60px;}.circular-chart{width:100%;height:100%;transform:rotate(-90deg);}.circle-bg{fill:none;stroke:rgba(255,255,255,0.2);stroke-width:3;}.circle{fill:none;stroke:white;stroke-width:3;stroke-linecap:round;stroke-dasharray:0,100;animation:progressFill 2s ease-out 1.2s both;}@keyframes progressFill{to{stroke-dasharray:75,100;}}.progress-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:0.8rem;font-weight:600;color:white;animation:fadeIn 1s ease-out 1.4s both;}/* Mobile responsive-Đảm bảo hoạt động tốt trên mobile */@media (max-width:768px){.main-content{padding:0.5rem !important;margin:0 !important;width:100vw !important;max-width:100vw !important;}#content-display{margin:0 !important;padding:0 !important;width:100vw !important;max-width:100vw !important;}.unified-dashboard{padding:0.5rem !important;}.unified-hero-section{padding:1rem !important;margin-bottom:1rem !important;border-radius:16px !important;}.hero-content{flex-direction:column !important;text-align:center !important;gap:1rem !important;}.avatar-container{width:60px !important;height:60px !important;}.avatar-circle{font-size:1.5rem !important;}.hero-title{font-size:1.5rem !important;}.hero-subtitle{font-size:1rem !important;}.hero-stats-section{gap:0.75rem !important;justify-content:center !important;}.stat-card{min-width:100px !important;padding:0.75rem !important;}.stat-icon{width:28px !important;height:28px !important;}.stat-icon svg{width:16px !important;height:16px !important;}.stat-number{font-size:2rem !important;}.stat-label{font-size:0.75rem !important;color:white !important;}.unified-progress-section{padding:1rem !important;margin-bottom:1rem !important;border-radius:16px !important;}.progress-grid{grid-template-columns:1fr !important;gap:1rem !important;}.unified-progress-card{padding:1rem !important;border-radius:16px !important;}.progress-icon{width:40px !important;height:40px !important;margin-bottom:0.75rem !important;}.progress-icon svg{width:20px !important;height:20px !important;}.progress-value{font-size:1.25rem !important;}.unified-actions-section{padding:1rem !important;margin-bottom:1rem !important;border-radius:16px !important;}.actions-grid{grid-template-columns:repeat(2,1fr) !important;gap:1rem !important;}.unified-action-card{padding:1rem !important;border-radius:16px !important;}.action-icon{width:40px !important;height:40px !important;}.action-icon svg{width:20px !important;height:20px !important;}.action-text h4{font-size:1rem !important;}.action-text p{font-size:0.8rem !important;}.action-arrow{width:28px !important;height:28px !important;}.action-arrow svg{width:14px !important;height:14px !important;}.hero-welcome{padding:1rem !important;margin-bottom:1rem !important;border-radius:12px !important;}.hero-content{flex-direction:column !important;text-align:center !important;gap:0.5rem !important;}.hero-avatar{margin-bottom:0.5rem !important;}.avatar-circle{width:50px !important;height:50px !important;font-size:1.25rem !important;}.hero-title{font-size:1.25rem !important;margin-bottom:0.25rem !important;}.hero-subtitle{font-size:0.8rem !important;margin-bottom:0.75rem !important;}.hero-stats{gap:0.75rem !important;justify-content:center !important;}.stat-item{padding:0.5rem 0.75rem !important;border-radius:8px !important;}.stat-number{font-size:2rem !important;}.stat-label{font-size:0.7rem !important;color:white !important;}.modern-course-section{padding:0.75rem !important;margin-bottom:1rem !important;border-radius:12px !important;}.course-header{flex-direction:column !important;align-items:flex-start !important;gap:0.5rem !important;}.course-title{flex-direction:row !important;align-items:center !important;gap:0.5rem !important;}.course-icon{width:24px !important;height:24px !important;}.course-info h3{font-size:1rem !important;margin-bottom:0.25rem !important;}.course-info p{font-size:0.75rem !important;}.course-badge{width:28px !important;height:28px !important;font-size:0.8rem !important;}.modern-select{font-size:0.85rem !important;padding:0.5rem 0.75rem !important;}.progress-overview{padding:0.75rem !important;margin-bottom:1rem !important;border-radius:12px !important;}.section-title{flex-direction:row !important;align-items:center !important;gap:0.5rem !important;}.title-icon{width:24px !important;height:24px !important;}.title-text h3{font-size:1rem !important;margin-bottom:0.25rem !important;}.title-text p{font-size:0.75rem !important;}.progress-grid{grid-template-columns:1fr !important;gap:0.5rem !important;}.progress-card{padding:0.75rem !important;border-radius:8px !important;}.progress-icon{width:24px !important;height:24px !important;}.progress-header{margin-bottom:0.5rem !important;}.progress-label{font-size:0.8rem !important;}.progress-value{font-size:1rem !important;}.progress-bar{height:4px !important;}.quick-actions{padding:0.75rem !important;margin-bottom:1rem !important;border-radius:12px !important;}.actions-grid{grid-template-columns:repeat(2,1fr) !important;gap:0.5rem !important;}.action-card{padding:0.75rem !important;border-radius:8px !important;}.action-icon{width:24px !important;height:24px !important;margin-bottom:0.5rem !important;}.action-content h4{font-size:0.8rem !important;margin-bottom:0.25rem !important;}.action-content p{font-size:0.7rem !important;}/* Enhanced Course Section Mobile */.enhanced-course-section{padding:1rem !important;margin-bottom:1rem !important;border-radius:16px !important;}.course-header-enhanced{flex-direction:column !important;align-items:flex-start !important;gap:1rem !important;margin-bottom:1rem !important;}.course-title-enhanced{gap:1rem !important;}.course-icon-enhanced{width:50px !important;height:50px !important;}.icon-background{border-radius:12px !important;}.course-icon-enhanced svg{width:24px !important;height:24px !important;}.course-title-text{font-size:1.25rem !important;}.course-subtitle-text{font-size:0.9rem !important;}.course-status-enhanced{gap:0.75rem !important;}.status-indicator{padding:0.5rem 1rem !important;border-radius:20px !important;}.status-text{font-size:0.8rem !important;}.course-count-badge{width:40px !important;height:40px !important;font-size:1rem !important;}.enhanced-select{padding:1rem 3rem 1rem 1rem !important;font-size:1rem !important;}.select-icon-enhanced{right:1rem !important;}.select-icon-enhanced svg{width:20px !important;height:20px !important;}.current-course-enhanced{padding:1rem !important;border-radius:16px !important;}.current-course-content{gap:1rem !important;}.checkmark-circle{width:40px !important;height:40px !important;}.checkmark-circle svg{width:20px !important;height:20px !important;}.current-label{font-size:0.8rem !important;color:rgba(255,255,255,0.9) !important;text-shadow:0 1px 2px rgba(0,0,0,0.3) !important;}.current-title{font-size:1rem !important;color:white !important;text-shadow:0 2px 4px rgba(0,0,0,0.4) !important;}.progress-ring{width:50px !important;height:50px !important;}.progress-text{font-size:0.7rem !important;}}/* Extra small mobile devices (480px and below) */@media (max-width:480px){.main-content{padding:0.25rem !important;}.unified-dashboard{padding:0.25rem !important;}.unified-hero-section{padding:0.75rem !important;margin-bottom:0.75rem !important;border-radius:12px !important;}.hero-content{gap:0.75rem !important;}.avatar-container{width:50px !important;height:50px !important;}.avatar-circle{font-size:1.25rem !important;}.hero-title{font-size:1.25rem !important;}.hero-subtitle{font-size:0.9rem !important;}.hero-stats-section{gap:0.5rem !important;}.stat-card{min-width:80px !important;padding:0.5rem !important;border-radius:12px !important;}.stat-icon{width:24px !important;height:24px !important;}.stat-icon svg{width:14px !important;height:14px !important;}.stat-number{font-size:2rem !important;color:white !important;}.stat-label{font-size:0.7rem !important;color:white !important;}.unified-progress-section{padding:0.75rem !important;margin-bottom:0.75rem !important;border-radius:12px !important;}.progress-grid{gap:0.75rem !important;}.unified-progress-card{padding:0.75rem !important;border-radius:12px !important;}.progress-icon{width:36px !important;height:36px !important;margin-bottom:0.5rem !important;}.progress-icon svg{width:18px !important;height:18px !important;}.progress-value{font-size:1.1rem !important;}.unified-actions-section{padding:0.75rem !important;margin-bottom:0.75rem !important;border-radius:12px !important;}.actions-grid{gap:0.75rem !important;}.unified-action-card{padding:0.75rem !important;border-radius:12px !important;}.action-icon{width:36px !important;height:36px !important;}.action-icon svg{width:18px !important;height:18px !important;}.action-text h4{font-size:0.9rem !important;}.action-text p{font-size:0.75rem !important;}.action-arrow{width:24px !important;height:24px !important;}.action-arrow svg{width:12px !important;height:12px !important;}.modern-dashboard{padding:0.25rem !important;}.hero-welcome{padding:0.75rem !important;margin-bottom:0.75rem !important;border-radius:8px !important;}.hero-content{gap:0.25rem !important;}.avatar-circle{width:40px !important;height:40px !important;font-size:1rem !important;}.hero-title{font-size:1.1rem !important;}.hero-subtitle{font-size:0.75rem !important;margin-bottom:0.5rem !important;}.hero-stats{gap:0.5rem !important;}.stat-item{padding:0.4rem 0.6rem !important;border-radius:6px !important;}.stat-number{font-size:2rem !important;}.stat-label{font-size:0.65rem !important;color:white !important;}.modern-course-section{padding:0.5rem !important;margin-bottom:0.75rem !important;border-radius:8px !important;}.course-header{gap:0.25rem !important;}.course-title{gap:0.25rem !important;}.course-icon{width:20px !important;height:20px !important;}.course-info h3{font-size:0.9rem !important;}.course-info p{font-size:0.7rem !important;}.course-badge{width:24px !important;height:24px !important;font-size:0.7rem !important;}.modern-select{font-size:0.8rem !important;padding:0.4rem 0.6rem !important;}.progress-overview{padding:0.5rem !important;margin-bottom:0.75rem !important;border-radius:8px !important;}.section-title{gap:0.25rem !important;}.title-icon{width:20px !important;height:20px !important;}.title-text h3{font-size:0.9rem !important;}.title-text p{font-size:0.7rem !important;}.progress-grid{gap:0.25rem !important;}.progress-card{padding:0.5rem !important;border-radius:6px !important;}.progress-icon{width:20px !important;height:20px !important;}.progress-header{margin-bottom:0.25rem !important;}.progress-label{font-size:0.75rem !important;}.progress-value{font-size:0.9rem !important;}.progress-bar{height:3px !important;}.quick-actions{padding:0.5rem !important;margin-bottom:0.75rem !important;border-radius:8px !important;}.actions-grid{gap:0.25rem !important;}.action-card{padding:0.5rem !important;border-radius:6px !important;}.action-icon{width:20px !important;height:20px !important;margin-bottom:0.25rem !important;}.action-content h4{font-size:0.75rem !important;}.action-content p{font-size:0.65rem !important;}/* Enhanced Course Section Extra Small Mobile */.enhanced-course-section{padding:0.75rem !important;margin-bottom:0.75rem !important;border-radius:12px !important;}.course-header-enhanced{gap:0.75rem !important;margin-bottom:0.75rem !important;}.course-title-enhanced{gap:0.75rem !important;}.course-icon-enhanced{width:40px !important;height:40px !important;}.icon-background{border-radius:10px !important;}.course-icon-enhanced svg{width:20px !important;height:20px !important;}.course-title-text{font-size:1.1rem !important;}.course-subtitle-text{font-size:0.8rem !important;}.course-status-enhanced{gap:0.5rem !important;}.status-indicator{padding:0.4rem 0.8rem !important;border-radius:16px !important;}.status-text{font-size:0.75rem !important;}.course-count-badge{width:36px !important;height:36px !important;font-size:0.9rem !important;}.enhanced-select{padding:0.75rem 2.5rem 0.75rem 0.75rem !important;font-size:0.9rem !important;}.select-icon-enhanced{right:0.75rem !important;}.select-icon-enhanced svg{width:18px !important;height:18px !important;}.current-course-enhanced{padding:0.75rem !important;border-radius:12px !important;}.current-course-content{gap:0.75rem !important;}.checkmark-circle{width:36px !important;height:36px !important;}.checkmark-circle svg{width:18px !important;height:18px !important;}.current-label{font-size:0.75rem !important;color:rgba(255,255,255,0.9) !important;text-shadow:0 1px 2px rgba(0,0,0,0.3) !important;}.current-title{font-size:0.9rem !important;color:white !important;text-shadow:0 2px 4px rgba(0,0,0,0.4) !important;}.progress-ring{width:45px !important;height:45px !important;}.progress-text{font-size:0.65rem !important;}.main-content #content-display .card:not(.flashcard){width:100vw !important;max-width:100vw !important;margin:0 !important;border-radius:0 !important;border-left:none !important;border-right:none !important;box-shadow:none !important;}.main-content #content-display .card:not(.flashcard) .card-body{padding:0.75rem 1rem !important;margin:0 !important;width:100% !important;max-width:100% !important;}/* Reset tất cả Bootstrap containers trên mobile */.main-content .container,.main-content .container-fluid,.main-content .row,.main-content .col,.main-content [class*="col-"]{margin:0 !important;padding-left:0 !important;padding-right:0 !important;width:100vw !important;max-width:100vw !important;}/* Đảm bảo document content wrapper trên mobile */.main-content .document-content-wrapper{margin:0 !important;padding:0.75rem 1rem !important;width:100vw !important;max-width:100vw !important;border-radius:0 !important;box-shadow:none !important;}/* Đảm bảo document content trên mobile */.main-content .document-content{margin:0 !important;padding:0 !important;width:100% !important;max-width:100% !important;}/* Modern Dashboard Mobile */.modern-dashboard{padding:1rem;}.hero-welcome{padding:1.5rem;margin-bottom:1.5rem;}.hero-content{flex-direction:column;text-align:center;gap:1rem;}.hero-stats{gap:1.5rem;}.modern-course-section{padding:1.25rem;margin-bottom:1.5rem;}.course-header{flex-direction:column;align-items:flex-start;gap:1rem;}.progress-grid{grid-template-columns:1fr;gap:1rem;}.actions-grid{grid-template-columns:1fr;gap:1rem;}.section-title{flex-direction:column;align-items:flex-start;gap:0.75rem;}}/* MỚI:CSS cho Audio Player */#audio-list-container .list-group-item .play-indicator{display:none;font-size:1.2rem;color:var(--primary-color);}#audio-list-container .list-group-item.playing{background-color:var(--bs-primary-bg-subtle);color:var(--bs-primary-text-emphasis);font-weight:600;}#audio-list-container .list-group-item.playing .play-indicator{display:inline-block;}[data-bs-theme="dark"] #audio-list-container .list-group-item.playing{background-color:rgba(var(--bs-primary-rgb),0.2) !important;}/* ==================================================================== *//* MOCK TEST TAB-MODERN & SCIENTIFIC DESIGN *//* ==================================================================== */.mock-test-container{padding:0;max-width:1200px;margin:0 auto;background:transparent;min-height:auto;}.mock-test-header{text-align:center;margin-bottom:2.5rem;position:relative;}.mock-test-title{font-size:2.5rem;font-weight:800;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:0.5rem;letter-spacing:-0.025em;}.mock-test-subtitle{font-size:1.1rem;color:#64748b;font-weight:500;margin-bottom:1rem;}.mock-test-stats{display:flex;justify-content:center;gap:2rem;margin-top:1.5rem;}.stat-item{text-align:center;padding:1rem 1.5rem;background:rgba(255,255,255,0.7);border-radius:16px;backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);box-shadow:0 4px 15px rgba(0,0,0,0.05);}.stat-number{font-size:2rem;font-weight:700;color:#3730a3;display:block;}.stat-label{font-size:0.9rem;color:#64748b;font-weight:500;margin-top:0.25rem;}.mock-test-card{background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border-radius:24px;padding:2.5rem;box-shadow:0 20px 60px rgba(0,0,0,0.1);border:1px solid rgba(255,255,255,0.8);position:relative;overflow:hidden;margin-bottom:2rem;}.mock-test-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);}.mock-test-card-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;}.mock-test-icon{width:60px;height:60px;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border-radius:16px;display:flex;align-items:center;justify-content:center;color:white;font-size:1.8rem;box-shadow:0 8px 25px rgba(102,126,234,0.3);}.mock-test-card-title{font-size:1.8rem;font-weight:700;color:#1e293b;margin:0;letter-spacing:-0.025em;}.mock-test-info{display:flex;align-items:center;gap:0.75rem;background:rgba(102,126,234,0.1);padding:1rem 1.25rem;border-radius:12px;margin-bottom:2rem;border-left:4px solid #667eea;}.mock-test-info-icon{color:#667eea;font-size:1.2rem;}.mock-test-info-text{color:#475569;font-size:1rem;font-weight:500;line-height:1.5;}.mock-test-form{margin-bottom:2rem;}.form-group{margin-bottom:1.5rem;}.form-label{display:block;font-size:1.1rem;font-weight:600;color:#374151;margin-bottom:0.75rem;}.select-wrapper{position:relative;display:inline-block;width:100%;max-width:300px;}.select-wrapper::after{content:"";position:absolute;right:1rem;top:50%;transform:translateY(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid #64748b;pointer-events:none;}.mock-test-select{width:100%;padding:1rem 1.25rem;padding-right:3rem;border:2px solid #e2e8f0;border-radius:12px;background:#ffffff;font-size:1rem;font-weight:500;color:#374151;cursor:pointer;transition:all 0.3s ease;appearance:none;-webkit-appearance:none;-moz-appearance:none;}.mock-test-select:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px rgba(102,126,234,0.1);}.mock-test-select:hover{border-color:#c7d2fe;}.mock-test-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;margin-top:1rem;}.option-card{padding:1rem;border:2px solid #e2e8f0;border-radius:12px;background:#ffffff;cursor:pointer;transition:all 0.3s ease;text-align:center;position:relative;}.option-card:hover{border-color:#c7d2fe;transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,0.15);}.option-card.selected{border-color:#667eea;background:linear-gradient(135deg,#f0f4ff 0%,#e0e7ff 100%);box-shadow:0 8px 25px rgba(102,126,234,0.2);}.option-card.selected::before{content:"✓";position:absolute;top:0.5rem;right:0.5rem;width:20px;height:20px;background:#667eea;color:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;}.option-number{font-size:1.2rem;font-weight:700;color:#3730a3;margin-bottom:0.25rem;}.option-label{font-size:0.9rem;color:#64748b;font-weight:500;}.mock-test-start-btn{width:100%;padding:1.25rem 2rem;background:linear-gradient(135deg,#ef4444 0%,#dc2626 100%);border:none;border-radius:16px;color:white;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:0.75rem;box-shadow:0 8px 25px rgba(239,68,68,0.3);position:relative;overflow:hidden;}.mock-test-start-btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s ease;}.mock-test-start-btn:hover::before{left:100%;}.mock-test-start-btn:hover{transform:translateY(-2px);box-shadow:0 12px 35px rgba(239,68,68,0.4);}.mock-test-start-btn:active{transform:translateY(0);}.mock-test-start-icon{font-size:1.3rem;}.mock-test-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-top:2rem;}.feature-card{background:rgba(255,255,255,0.8);border-radius:16px;padding:1.5rem;border:1px solid rgba(255,255,255,0.5);backdrop-filter:blur(10px);transition:all 0.3s ease;}.feature-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px rgba(0,0,0,0.1);}.feature-icon{width:50px;height:50px;background:linear-gradient(135deg,#10b981 0%,#059669 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;color:white;font-size:1.3rem;margin-bottom:1rem;}.feature-title{font-size:1.1rem;font-weight:600;color:#1e293b;margin-bottom:0.5rem;}.feature-description{color:#64748b;font-size:0.95rem;line-height:1.5;}/* Dark Mode for Mock Test */[data-bs-theme="dark"] .mock-test-container{background:linear-gradient(135deg,#1e293b 0%,#0f172a 100%);}[data-bs-theme="dark"] .mock-test-title{background:linear-gradient(135deg,#a5b4fc 0%,#c4b5fd 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}[data-bs-theme="dark"] .mock-test-subtitle{color:#94a3b8;}[data-bs-theme="dark"] .stat-item{background:rgba(30,41,59,0.7);border-color:rgba(71,85,105,0.3);}[data-bs-theme="dark"] .stat-number{color:#a5b4fc;}[data-bs-theme="dark"] .stat-label{color:#94a3b8;}[data-bs-theme="dark"] .mock-test-card{background:linear-gradient(135deg,#1e293b 0%,#334155 100%);border-color:rgba(71,85,105,0.5);}[data-bs-theme="dark"] .mock-test-card-title{color:#f1f5f9;}[data-bs-theme="dark"] .mock-test-info{background:rgba(165,180,252,0.1);border-left-color:#a5b4fc;}[data-bs-theme="dark"] .mock-test-info-icon{color:#a5b4fc;}[data-bs-theme="dark"] .mock-test-info-text{color:#cbd5e0;}[data-bs-theme="dark"] .form-label{color:#e2e8f0;}[data-bs-theme="dark"] .mock-test-select{background:#334155;border-color:#475569;color:#f1f5f9;}[data-bs-theme="dark"] .mock-test-select:focus{border-color:#a5b4fc;box-shadow:0 0 0 3px rgba(165,180,252,0.1);}[data-bs-theme="dark"] .option-card{background:#334155;border-color:#475569;}[data-bs-theme="dark"] .option-card:hover{border-color:#a5b4fc;}[data-bs-theme="dark"] .option-card.selected{background:linear-gradient(135deg,#1e1b4b 0%,#312e81 100%);border-color:#a5b4fc;}[data-bs-theme="dark"] .option-number{color:#a5b4fc;}[data-bs-theme="dark"] .option-label{color:#94a3b8;}[data-bs-theme="dark"] .feature-card{background:rgba(30,41,59,0.8);border-color:rgba(71,85,105,0.5);}[data-bs-theme="dark"] .feature-title{color:#f1f5f9;}[data-bs-theme="dark"] .feature-description{color:#94a3b8;}/* Mobile Responsive */@media (max-width:768px){.mock-test-container{padding:0;}.mock-test-title{font-size:2rem;}.mock-test-stats{flex-direction:column;gap:1rem;}.mock-test-card{padding:1.5rem;border-radius:20px;}.mock-test-card-header{flex-direction:column;text-align:center;gap:0.75rem;}.mock-test-icon{width:50px;height:50px;font-size:1.5rem;}.mock-test-card-title{font-size:1.5rem;}.mock-test-options{grid-template-columns:repeat(2,1fr);}.mock-test-features{grid-template-columns:1fr;}.mock-test-start-btn{padding:1rem 1.5rem;font-size:1rem;}}/* Practice Topic Select Styles */.practice-topic-select{display:flex;justify-content:center;align-items:center;margin:0 auto;}#practice-topic-select{text-align:center;margin:0 auto;}.select-wrapper{display:flex;justify-content:center;align-items:center;}.form-group{display:flex;flex-direction:column;align-items:center;text-align:center;}.form-group .form-label{text-align:center;margin-bottom:0.5rem;}/* Force override for stat labels */.stat-label{color:#1e293b !important;text-shadow:none !important;}/* ==================================================================== *//* GAMIFICATION STATS MODAL *//* ==================================================================== */#gamification-stats-modal .modal-dialog{max-width:95%;margin:0.5rem auto;}#gamification-stats-modal .modal-content{border-radius:16px;border:none;box-shadow:0 8px 25px rgba(0,0,0,0.15);overflow:hidden;}#gamification-stats-modal .modal-header{border-bottom:1px solid #f0f0f0;padding:1rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;}#gamification-stats-modal .modal-header .modal-title{font-size:1.1rem;font-weight:600;margin:0;}#gamification-stats-modal .modal-header .btn-close{filter:invert(1);opacity:0.8;}#gamification-stats-modal .modal-body{padding:1rem;background:#fafafa;}#gamification-stats-modal .modal-footer{border-top:1px solid #f0f0f0;padding:0.75rem 1rem;background:white;}/* Stats Container-Mobile First */.stats-container{display:flex;flex-direction:column;gap:0.75rem;}.stat-row{display:flex;gap:0.75rem;}.stat-item{flex:1;display:flex;align-items:center;background:white;border-radius:12px;padding:0.75rem;box-shadow:0 2px 8px rgba(0,0,0,0.06);border:1px solid #f0f0f0;transition:all 0.2s ease;}.stat-item:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.1);}.stat-item .stat-icon{font-size:1.5rem;margin-right:0.75rem;flex-shrink:0;}.stat-content{flex:1;min-width:0;}.stat-value{font-size:1.25rem;font-weight:700;color:#2c3e50;line-height:1.2;margin-bottom:0.125rem;}.stat-label{font-size:0.7rem;color:#7f8c8d;line-height:1.2;font-weight:500;}/* Progress Bar */#gamification-stats-modal .progress{height:6px;border-radius:3px;background:#e9ecef;margin:0.75rem 0 0.5rem;}#gamification-stats-modal .progress-bar{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);border-radius:3px;}#gamification-stats-modal small{font-size:0.65rem;color:#6c757d;display:block;text-align:center;}/* Mobile-Only Gamification Modal */#gamification-stats-modal .modal-dialog{max-width:500px;margin:1.75rem auto;}#gamification-stats-modal .modal-header{padding:1.25rem;}#gamification-stats-modal .modal-body{padding:1.25rem;}#gamification-stats-modal .modal-footer{padding:1rem 1.25rem;}.stats-container{gap:1rem;}.stat-row{gap:1rem;}.stat-item{padding:1rem;}.stat-item .stat-icon{font-size:1.75rem;margin-right:1rem;}.stat-value{font-size:1.5rem;}.stat-label{font-size:0.8rem;}#gamification-stats-modal .progress{height:8px;margin:1rem 0 0.75rem;}#gamification-stats-modal small{font-size:0.75rem;}/* From:flashcard-style.css *//*** ============================================* DDL-MOD:FLASHCARD STYLES-MOBILE-ONLY* ============================================* File:flashcard-style.css* Version:4.0-Mobile-First Architecture* Description:Mobile-optimized flashcard styles với CSS Nesting,* màu HSL,và các kỹ thuật CSS hiện đại cho mobile devices.*//* ============================================VARIABLE DEFINITIONS (CUSTOM PROPERTIES)============================================ */:root{/* NÂNG CẤP:Hệ thống màu sắc với HSL-Light Mode */--fc-primary-h:244;--fc-primary-s:82%;--fc-secondary-h:227;--fc-secondary-s:70%;--fc-accent-blue-h:212;--fc-accent-blue-s:71%;--fc-neutral-h:220;--fc-neutral-s:15%;/* NÂNG CẤP:Chi tiết hóa các biến để dễ quản lý hơn */--fc-border-radius:20px;--fc-border-radius-sm:16px;--fc-shadow-color:hsl(var(--fc-neutral-h),30%,10%);--fc-shadow-elevation-low:0 4px 12px rgba(0,0,0,0.1);--fc-shadow-elevation-medium:0 8px 28px rgba(0,0,0,0.15);--fc-shadow-elevation-high:0 12px 32px rgba(0,0,0,0.2);--fc-transition-duration:0.3s;--fc-transition-timing:ease;--fc-flip-duration:0.8s;/* NÂNG CẤP:Kích thước linh hoạt với clamp() */--fc-width:420px;--fc-height:300px;--fc-title-font-size:2.2rem;--fc-subtitle-font-size:1rem;/* Colors-Light Mode */--fc-front-bg-gradient:linear-gradient(135deg,hsl(var(--fc-secondary-h),var(--fc-secondary-s),97%) 0%,hsl(var(--fc-secondary-h),var(--fc-secondary-s),94%) 100%);--fc-front-border-color:hsl(var(--fc-primary-h),var(--fc-primary-s),90%);--fc-front-overlay-gradient:linear-gradient(135deg,rgba(99,102,241,0.08) 0%,rgba(147,51,234,0.05) 100%);--fc-front-title-color:hsl(var(--fc-primary-h),var(--fc-primary-s),40%);--fc-front-subtitle-color:hsl(var(--fc-primary-h),var(--fc-primary-s),65%);--fc-front-shadow:var(--fc-shadow-elevation-low);--fc-front-hover-shadow:var(--fc-shadow-elevation-medium);--fc-back-bg-gradient:linear-gradient(135deg,hsl(var(--fc-accent-blue-h),var(--fc-accent-blue-s),60%) 0%,hsl(var(--fc-accent-blue-h),var(--fc-accent-blue-s),50%) 100%);--fc-back-text-color:#ffffff;--fc-back-overlay-gradient:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.03) 100%);--fc-back-shadow:var(--fc-shadow-elevation-low);--fc-back-hover-shadow:var(--fc-shadow-elevation-medium);--fc-back-title-shadow:0 2px 8px rgba(0,0,0,0.3);--fc-controls-bg:linear-gradient(135deg,hsl(var(--fc-neutral-h),var(--fc-neutral-s),98%) 0%,hsl(var(--fc-neutral-h),var(--fc-neutral-s),90%) 100%);--fc-controls-border-color:hsl(var(--fc-neutral-h),var(--fc-neutral-s),90%);--fc-controls-shadow:var(--fc-shadow-elevation-medium);--fc-controls-toggle-bg:linear-gradient(135deg,#ffffff 0%,hsl(var(--fc-neutral-h),var(--fc-neutral-s),95%) 100%);--fc-controls-toggle-btn-color:hsl(var(--fc-neutral-h),var(--fc-neutral-s),50%);--fc-controls-toggle-btn-hover-bg:rgba(99,102,241,0.1);--fc-controls-toggle-btn-active-bg:linear-gradient(135deg,hsl(var(--fc-primary-h),80%,70%) 0%,hsl(280,50%,60%) 100%);--fc-controls-toggle-btn-active-color:white;}/* ============================================DARK MODE VARIABLE OVERRIDES============================================ */[data-bs-theme="dark"]{/* NÂNG CẤP:Hệ thống màu sắc với HSL-Dark Mode */--fc-shadow-color:hsl(var(--fc-neutral-h),30%,0%);--fc-front-bg-gradient:linear-gradient(135deg,hsl(var(--fc-primary-h),50%,20%) 0%,hsl(var(--fc-primary-h),50%,25%) 100%);--fc-front-border-color:hsl(var(--fc-primary-h),var(--fc-primary-s),40%);--fc-front-title-color:hsl(var(--fc-primary-h),var(--fc-primary-s),90%);--fc-front-subtitle-color:hsl(var(--fc-primary-h),var(--fc-primary-s),80%);--fc-back-bg-gradient:linear-gradient(135deg,hsl(var(--fc-accent-blue-h),60%,30%) 0%,hsl(var(--fc-accent-blue-h),60%,25%) 100%);--fc-back-title-shadow:0 2px 8px rgba(0,0,0,0.5);--fc-controls-bg:linear-gradient(135deg,hsl(var(--fc-neutral-h),15%,20%) 0%,hsl(var(--fc-neutral-h),15%,10%) 100%);--fc-controls-border-color:hsl(var(--fc-neutral-h),15%,30%);--fc-controls-toggle-bg:linear-gradient(135deg,hsl(var(--fc-neutral-h),15%,20%) 0%,hsl(var(--fc-neutral-h),15%,10%) 100%);--fc-controls-toggle-btn-color:hsl(var(--fc-neutral-h),15%,70%);--fc-controls-toggle-btn-hover-bg:rgba(99,102,241,0.15);}/* ============================================FLASHCARD CORE STYLES============================================ */.flashcard{-webkit-perspective:1200px;perspective:1200px;cursor:pointer;height:var(--fc-height);max-width:var(--fc-width);-webkit-tap-highlight-color:transparent;margin:1rem auto;/* NÂNG CẤP:'auto' để tự căn giữa */border-radius:var(--fc-border-radius);overflow:hidden;box-shadow:var(--fc-front-shadow);position:relative;transition:all var(--fc-transition-duration) var(--fc-transition-timing);/* NÂNG CẤP:CSS Nesting cho pseudo-elements */}.flashcard::after{content:"👆 Tap to flip";position:absolute;bottom:-2rem;left:50%;transform:translateX(-50%);font-size:0.8rem;color:#6c757d;opacity:0.7;font-weight:500;pointer-events:none;transition:opacity var(--fc-transition-duration) ease;}.flashcard:hover::after{opacity:1;}.flashcard.is-flipped .flashcard-inner{transform:rotateY(180deg);}.flashcard.is-flipped::after{content:"👆 Tap to flip back";}.flashcard-inner{position:relative;width:100%;height:100%;transition:transform var(--fc-flip-duration) var(--fc-transition-timing);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;border-radius:inherit;/* NÂNG CẤP:Kế thừa border-radius từ cha */}/* Common styles for both front and back faces */.flashcard-front,.flashcard-back{position:absolute;top:0;left:0;right:0;bottom:0;/* NÂNG CẤP:Dùng 'inset' thay cho top,left,width,height */-webkit-backface-visibility:hidden;backface-visibility:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem 1.5rem;border-radius:inherit;transition:all var(--fc-transition-duration) var(--fc-transition-timing);overflow:hidden;/* NÂNG CẤP:CSS Nesting */}.flashcard-front::before,.flashcard-back::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:inherit;pointer-events:none;}/* ============================================FLASHCARD FRONT SIDE============================================ */.flashcard-front{background:var(--fc-front-bg-gradient);border:2px solid var(--fc-front-border-color);box-shadow:var(--fc-shadow-elevation-low);}.flashcard-front::before{background:var(--fc-front-overlay-gradient);}.flashcard-front:hover{box-shadow:var(--fc-front-hover-shadow);transform:translateY(-2px);}.flashcard-front .card-title{font-size:var(--fc-title-font-size);font-weight:700;color:var(--fc-front-title-color);text-shadow:0 2px 4px rgba(99,102,241,0.1);margin-bottom:0.75rem;line-height:1.3;z-index:2;}.flashcard-front .card-subtitle{font-size:var(--fc-subtitle-font-size);color:var(--fc-front-subtitle-color);font-weight:600;opacity:0.8;z-index:2;}/* ============================================FLASHCARD BACK SIDE============================================ */.flashcard-back{transform:rotateY(180deg);background:var(--fc-back-bg-gradient);color:var(--fc-back-text-color);justify-content:space-between;box-shadow:var(--fc-shadow-elevation-low);}.flashcard-back::before{background:var(--fc-back-overlay-gradient);}.flashcard-back:hover{box-shadow:var(--fc-back-hover-shadow);transform:translateY(-2px) rotateY(180deg);}.flashcard-back .main-content-back{flex-grow:1;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2;}.flashcard-back .main-content-back .card-title{font-size:var(--fc-title-font-size);font-weight:700;text-shadow:var(--fc-back-title-shadow);margin-bottom:0.75rem;line-height:1.3;z-index:2;}.flashcard-back .main-content-back .card-subtitle{font-size:var(--fc-subtitle-font-size);opacity:0.9;font-weight:500;z-index:2;}/* ============================================FLASHCARD INDICATORS & CONTROLS============================================ */.flashcard-progress{position:absolute;top:1rem;left:1rem;right:1rem;height:4px;background:rgba(255,255,255,0.2);border-radius:4px;overflow:hidden;z-index:3;}.flashcard-progress-bar{height:100%;background:linear-gradient(90deg,#51cf66,#40c057);border-radius:4px;transition:width var(--fc-transition-duration) ease;}.flashcard-counter{position:absolute;top:1rem;right:1rem;background:rgba(0,0,0,0.1);color:#ffffff;padding:0.25rem 0.75rem;border-radius:99px;/* NÂNG CẤP:Dùng giá trị lớn để luôn tròn */font-size:0.8rem;font-weight:600;z-index:3;}/* ============================================SRS FEEDBACK SYSTEM============================================ */.srs-feedback{display:flex;justify-content:space-around;gap:10px;width:100%;padding-top:1.25rem;border-top:1px solid rgba(255,255,255,0.2);margin-top:auto;/* NÂNG CẤP:Đẩy xuống cuối */z-index:3;}.srs-btn{flex-grow:1;border:none;border-radius:12px;padding:0.875rem 0.5rem;font-weight:600;font-size:0.9rem;color:#fff;cursor:pointer;transition:all var(--fc-transition-duration) var(--fc-transition-timing);position:relative;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,0.15);text-transform:uppercase;letter-spacing:0.3px;/* NÂNG CẤP:CSS Nesting */}.srs-btn::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:left 0.5s;}.srs-btn:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 5px 15px rgba(0,0,0,0.2);}.srs-btn:hover::before{left:100%;}.srs-btn:active{transform:translateY(0) scale(0.98);}.srs-btn.srs-hard{background:linear-gradient(135deg,#ff6b6b 0%,#ee5a52 100%);}.srs-btn.srs-good{background:linear-gradient(135deg,#51cf66 0%,#40c057 100%);}.srs-btn.srs-easy{background:linear-gradient(135deg,#74c0fc 0%,#339af0 100%);}/* ============================================FLASHCARD CONTROLS SECTION============================================ */.flashcard-controls-section{background:linear-gradient(135deg,#f8fafc 0%,#e2e8f0 100%);border:1px solid rgba(0,0,0,0.1);border-radius:16px;padding:1rem;margin:0.5rem;margin-bottom:1rem;box-shadow:0 4px 12px rgba(0,0,0,0.08);z-index:10;backdrop-filter:blur(10px);}.flashcard-mode-section{margin-bottom:0.75rem;}.mode-toggle-container{display:flex;background:rgba(255,255,255,0.8);border-radius:12px;padding:0.4rem;box-shadow:inset 0 1px 4px rgba(0,0,0,0.05);border:1px solid rgba(0,0,0,0.08);}.mode-toggle-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.75rem 1rem;border:none;background:transparent;border-radius:10px;font-weight:600;font-size:0.9rem;color:#64748b;transition:all 0.2s ease;cursor:pointer;position:relative;}.mode-toggle-btn.active{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);color:white;box-shadow:0 2px 8px rgba(99,102,241,0.3);transform:translateY(-1px);font-weight:700;}.mode-toggle-btn:hover:not(.active){color:#374151;background:rgba(99,102,241,0.1);transform:translateY(-1px);}.flashcard-progress-section{display:flex;justify-content:center;align-items:center;padding-top:0.75rem;border-top:1px solid rgba(0,0,0,0.1);}.progress-info{background:linear-gradient(135deg,#6366f1 0%,#8b5cf6 100%);color:white;padding:0.4rem 0.8rem;border-radius:20px;font-size:0.85rem;font-weight:600;box-shadow:0 2px 8px rgba(99,102,241,0.3);}/* ============================================CARD ACTIONS & FURIGANA============================================ */.card-actions{position:absolute;top:10px;right:10px;z-index:5;display:flex;gap:5px;align-items:center;/* Căn chỉnh các nút theo chiều dọc */.btn{/* NÂNG CẤP:CSS Nesting */padding:0.25rem 0.5rem;font-size:1rem;line-height:1.5;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:none;background:rgba(255,255,255,0.9);color:#6366f1;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:all 0.2s ease;}.btn:hover{background:#6366f1;color:white;transform:scale(1.1);}}rt{font-size:0.7em;}/* ============================================MOBILE RESPONSIVE STYLES (Simplified by clamp())============================================ */@media (max-width:480px){/* NÂNG CẤP:Chỉ giữ lại những thay đổi thực sự cần thiết cho mobilevì nhiều thứ đã được xử lý bởi clamp() */:root{--fc-border-radius:16px;--fc-border-radius-sm:12px;}.flashcard-controls-section,.flashcard{margin-left:0.75rem;margin-right:0.75rem;/* NÂNG CẤP:Dùng logical property */}.flashcard-controls-section{padding:0.75rem;margin:0.25rem;margin-bottom:0.75rem;}.mode-toggle-btn{padding:0.6rem 0.8rem;font-size:0.85rem;}.progress-info{padding:0.3rem 0.6rem;font-size:0.8rem;}.srs-feedback{gap:8px;padding-top:1rem;margin-top:1rem;}.srs-btn{padding:0.75rem 0.4rem;font-size:0.85rem;border-radius:10px;}}/* From:dashboard-mobile-app.css *//*** File:dashboard-mobile-app.css* Description:Mobile App Dashboard Design-Native App Experience* Version:8.0-Mobile App UI/UX* Features:iOS/Android inspired,Native animations,App-like interface*//* ==================================================================== *//* Mobile App Color System *//* ==================================================================== */:root{/* iOS/Android Inspired Colors */--app-primary:#007aff;--app-primary-light:#4da6ff;--app-primary-dark:#0056cc;--app-primary-50:#e6f3ff;--app-primary-100:#cce7ff;--app-primary-200:#99cfff;--app-primary-300:#66b7ff;--app-primary-400:#339fff;--app-primary-500:#007aff;--app-primary-600:#0062cc;--app-primary-700:#004999;--app-primary-800:#003166;--app-primary-900:#001833;/* Semantic Colors */--app-success:#34c759;--app-success-light:#5dd579;--app-warning:#ff9500;--app-warning-light:#ffb84d;--app-error:#ff3b30;--app-error-light:#ff6b61;--app-info:#5ac8fa;--app-info-light:#7dd3fb;/* App Background System */--app-bg-primary:#ffffff;--app-bg-secondary:#f2f2f7;--app-bg-tertiary:#e5e5ea;--app-bg-card:#ffffff;--app-bg-modal:rgba(0,0,0,0.4);/* App Text System */--app-text-primary:#000000;--app-text-secondary:#3c3c43;--app-text-tertiary:#8e8e93;--app-text-white:#ffffff;--app-text-link:#007aff;/* App Shadow System */--app-shadow-sm:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);--app-shadow-md:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);--app-shadow-lg:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);--app-shadow-xl:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);/* App Border Radius */--app-radius-sm:8px;--app-radius-md:12px;--app-radius-lg:16px;--app-radius-xl:20px;--app-radius-2xl:24px;--app-radius-full:9999px;/* App Spacing */--app-space-xs:4px;--app-space-sm:8px;--app-space-md:16px;--app-space-lg:24px;--app-space-xl:32px;--app-space-2xl:48px;--app-space-3xl:64px;/* App Transitions */--app-transition-fast:all 0.2s cubic-bezier(0.25,0.46,0.45,0.94);--app-transition-normal:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);--app-transition-slow:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);--app-transition-bounce:all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);/* App Typography */--app-font-xs:12px;--app-font-sm:14px;--app-font-base:16px;--app-font-lg:18px;--app-font-xl:20px;--app-font-2xl:24px;--app-font-3xl:28px;--app-font-4xl:32px;--app-font-5xl:36px;/* App Z-Index */--app-z-dropdown:1000;--app-z-sticky:1020;--app-z-fixed:1030;--app-z-modal-backdrop:1040;--app-z-modal:1050;--app-z-popover:1060;--app-z-tooltip:1070;}/* Dark Mode */[data-bs-theme="dark"]{--app-primary:#0a84ff;--app-primary-light:#4da6ff;--app-primary-dark:#0056cc;--app-primary-50:#001833;--app-primary-100:#003166;--app-primary-200:#004999;--app-primary-300:#0062cc;--app-primary-400:#007aff;--app-primary-500:#0a84ff;--app-primary-600:#4da6ff;--app-primary-700:#66b7ff;--app-primary-800:#99cfff;--app-primary-900:#cce7ff;--app-success:#30d158;--app-success-light:#5dd579;--app-warning:#ff9f0a;--app-warning-light:#ffb84d;--app-error:#ff453a;--app-error-light:#ff6b61;--app-info:#64d2ff;--app-info-light:#7dd3fb;--app-bg-primary:#000000;--app-bg-secondary:#1c1c1e;--app-bg-tertiary:#2c2c2e;--app-bg-card:#1c1c1e;--app-bg-modal:rgba(0,0,0,0.6);--app-text-primary:#ffffff;--app-text-secondary:#ebebf5;--app-text-tertiary:#8e8e93;--app-text-white:#ffffff;--app-text-link:#0a84ff;}/* ==================================================================== *//* Mobile App Dashboard Container *//* ==================================================================== */.mobile-app-dashboard{background:var(--app-bg-primary) !important;color:var(--app-text-primary) !important;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif !important;line-height:1.4 !important;padding:0 !important;margin:0 !important;min-height:100vh !important;overflow-x:hidden !important;/* Override any existing dashboard styles */max-width:none !important;width:100% !important;}/* ==================================================================== *//* Mobile App Header *//* ==================================================================== */.mobile-app-header{position:sticky !important;top:0 !important;left:0 !important;right:0 !important;z-index:var(--app-z-sticky) !important;background:var(--app-bg-card) !important;backdrop-filter:blur(20px) !important;-webkit-backdrop-filter:blur(20px) !important;border-bottom:0.5px solid var(--app-bg-tertiary) !important;padding:var(--app-space-md) var(--app-space-lg) !important;display:flex !important;align-items:center !important;justify-content:center !important;}.mobile-app-header-content{text-align:center;}.mobile-app-header-title{font-size:var(--app-font-2xl);font-weight:700;color:var(--app-text-primary);margin:0;line-height:1.2;}.mobile-app-header-subtitle{font-size:var(--app-font-sm);color:var(--app-text-tertiary);margin:var(--app-space-xs) 0 0 0;}/* ==================================================================== *//* Mobile App Content *//* ==================================================================== */.mobile-app-content{padding:var(--app-space-lg);padding-bottom:calc(var(--app-space-lg)+80px);/* Space for bottom nav */}/* ==================================================================== *//* Mobile App Hero Section *//* ==================================================================== */.mobile-app-hero{background:linear-gradient(135deg,var(--app-primary-50) 0%,var(--app-primary-100) 100%);border-radius:var(--app-radius-2xl);padding:var(--app-space-xl);margin-bottom:var(--app-space-xl);position:relative;overflow:hidden;}.mobile-app-hero::before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--app-primary-200) 0%,transparent 70%);opacity:0.3;animation:float 6s ease-in-out infinite;}.mobile-app-hero-content{position:relative;z-index:2;text-align:center;}.mobile-app-hero-icon{width:80px;height:80px;border-radius:var(--app-radius-2xl);background:var(--app-primary-500);display:flex;align-items:center;justify-content:center;font-size:var(--app-font-4xl);color:var(--app-text-white);margin:0 auto var(--app-space-lg);box-shadow:var(--app-shadow-lg);animation:pulse 2s ease-in-out infinite;}.mobile-app-hero-title{font-size:var(--app-font-3xl);font-weight:700;color:var(--app-text-primary);margin-bottom:var(--app-space-sm);}.mobile-app-hero-subtitle{font-size:var(--app-font-base);color:var(--app-text-secondary);margin-bottom:var(--app-space-xl);line-height:1.5;}.mobile-app-hero-actions{display:flex;gap:var(--app-space-md);justify-content:center;}.mobile-app-hero-btn{padding:var(--app-space-md) var(--app-space-xl);border-radius:var(--app-radius-full);border:none;font-size:var(--app-font-base);font-weight:600;cursor:pointer;transition:var(--app-transition-normal);display:flex;align-items:center;gap:var(--app-space-sm);}.mobile-app-hero-btn.primary{background:var(--app-primary-500);color:var(--app-text-white);box-shadow:var(--app-shadow-md);}.mobile-app-hero-btn.primary:hover{background:var(--app-primary-600);transform:translateY(-2px);box-shadow:var(--app-shadow-lg);}.mobile-app-hero-btn.secondary{background:var(--app-bg-card);color:var(--app-text-primary);border:1px solid var(--app-bg-tertiary);}.mobile-app-hero-btn.secondary:hover{background:var(--app-bg-secondary);transform:translateY(-2px);}/* ==================================================================== *//* Mobile App Course Section *//* ==================================================================== */.mobile-app-course-section{margin-bottom:var(--app-space-xl);}.mobile-app-course-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--app-space-lg);}.mobile-app-course-title{font-size:var(--app-font-xl);font-weight:700;color:var(--app-text-primary);margin:0;}.mobile-app-course-subtitle{font-size:var(--app-font-sm);color:var(--app-text-tertiary);margin:var(--app-space-xs) 0 0 0;}.mobile-app-course-card{background:var(--app-bg-card);border-radius:var(--app-radius-xl);padding:var(--app-space-lg);box-shadow:var(--app-shadow-sm);border:1px solid var(--app-bg-tertiary);transition:var(--app-transition-normal);position:relative;overflow:hidden;}.mobile-app-course-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--app-primary-500);transform:scaleX(0);transition:var(--app-transition-normal);}.mobile-app-course-card:hover::before{transform:scaleX(1);}.mobile-app-course-card:hover{transform:translateY(-2px);box-shadow:var(--app-shadow-md);}.mobile-app-course-header-card{display:flex;align-items:center;gap:var(--app-space-md);margin-bottom:var(--app-space-lg);}.mobile-app-course-icon{width:50px;height:50px;border-radius:var(--app-radius-lg);background:var(--app-primary-500);display:flex;align-items:center;justify-content:center;font-size:var(--app-font-xl);color:var(--app-text-white);flex-shrink:0;}.mobile-app-course-info{flex:1;min-width:0;}.mobile-app-course-info h3{font-size:var(--app-font-lg);font-weight:600;color:var(--app-text-primary);margin:0 0 var(--app-space-xs) 0;}.mobile-app-course-info p{font-size:var(--app-font-sm);color:var(--app-text-tertiary);margin:0;}.mobile-app-course-select{width:100%;padding:var(--app-space-md);border:1px solid var(--app-bg-tertiary);border-radius:var(--app-radius-md);background:var(--app-bg-card);color:var(--app-text-primary);font-size:var(--app-font-base);cursor:pointer;transition:var(--app-transition-fast);}.mobile-app-course-select:focus{outline:none;border-color:var(--app-primary-300);box-shadow:0 0 0 2px var(--app-primary-100);background:var(--app-bg-card);}/* ==================================================================== *//* Mobile App Progress Section *//* ==================================================================== */.mobile-app-progress-section{margin-bottom:var(--app-space-xl);}.mobile-app-progress-header{text-align:center;margin-bottom:var(--app-space-lg);}.mobile-app-progress-title{font-size:var(--app-font-xl);font-weight:700;color:var(--app-text-primary);margin:0 0 var(--app-space-sm) 0;}.mobile-app-progress-subtitle{font-size:var(--app-font-sm);color:var(--app-text-tertiary);margin:0;}.mobile-app-progress-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--app-space-md);}.mobile-app-progress-card{background:var(--app-bg-card);border-radius:var(--app-radius-lg);padding:var(--app-space-lg);box-shadow:var(--app-shadow-sm);border:1px solid var(--app-bg-tertiary);transition:var(--app-transition-normal);text-align:center;position:relative;overflow:hidden;}.mobile-app-progress-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--app-primary-500);transform:scaleX(0);transition:var(--app-transition-normal);}.mobile-app-progress-card:hover::before{transform:scaleX(1);}.mobile-app-progress-card:hover{transform:translateY(-2px);box-shadow:var(--app-shadow-md);}.mobile-app-progress-card.vocabulary::before{background:var(--app-success);}.mobile-app-progress-card.practice::before{background:var(--app-warning);}.mobile-app-progress-card.mock-test::before{background:var(--app-info);}.mobile-app-progress-icon{width:40px;height:40px;border-radius:var(--app-radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--app-font-lg);color:var(--app-text-white);margin:0 auto var(--app-space-md);transition:var(--app-transition-normal);}.mobile-app-progress-icon.vocabulary{background:var(--app-success);}.mobile-app-progress-icon.practice{background:var(--app-warning);}.mobile-app-progress-icon.mock-test{background:var(--app-info);}.mobile-app-progress-info h4{font-size:var(--app-font-base);font-weight:600;color:var(--app-text-primary);margin:0 0 var(--app-space-xs) 0;}.mobile-app-progress-info p{font-size:var(--app-font-sm);color:var(--app-text-tertiary);margin:0 0 var(--app-space-md) 0;}.mobile-app-progress-bar-container{margin-top:var(--app-space-md);}.mobile-app-progress-bar{width:100%;height:6px;background:var(--app-bg-tertiary);border-radius:var(--app-radius-full);overflow:hidden;margin-bottom:var(--app-space-sm);}.mobile-app-progress-bar-fill{height:100%;background:var(--app-primary-500);border-radius:var(--app-radius-full);transition:width 0.8s ease-in-out;}.mobile-app-progress-bar-fill.vocabulary{background:var(--app-success);}.mobile-app-progress-bar-fill.practice{background:var(--app-warning);}.mobile-app-progress-bar-fill.mock-test{background:var(--app-info);}.mobile-app-progress-stats{font-size:var(--app-font-xs);color:var(--app-text-tertiary);font-weight:500;}/* ==================================================================== *//* Mobile App Actions Section *//* ==================================================================== */.mobile-app-actions-section{margin-bottom:var(--app-space-xl);}.mobile-app-actions-header{text-align:center;margin-bottom:var(--app-space-lg);}.mobile-app-actions-title{font-size:var(--app-font-xl);font-weight:700;color:var(--app-text-primary);margin:0 0 var(--app-space-sm) 0;}.mobile-app-actions-subtitle{font-size:var(--app-font-sm);color:var(--app-text-tertiary);margin:0;}.mobile-app-actions-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--app-space-md);}.mobile-app-action-card{background:var(--app-bg-card);border-radius:var(--app-radius-lg);padding:var(--app-space-lg);box-shadow:var(--app-shadow-sm);border:1px solid var(--app-bg-tertiary);transition:var(--app-transition-normal);position:relative;overflow:hidden;cursor:pointer;text-decoration:none;color:inherit;}.mobile-app-action-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--app-primary-500);transform:scaleX(0);transition:var(--app-transition-normal);}.mobile-app-action-card:hover::before{transform:scaleX(1);}.mobile-app-action-card:hover{transform:translateY(-2px);box-shadow:var(--app-shadow-md);}.mobile-app-action-card.documents::before{background:var(--app-primary-500);}.mobile-app-action-card.vocab::before{background:var(--app-success);}.mobile-app-action-card.practice::before{background:var(--app-warning);}.mobile-app-action-card.mock-test::before{background:var(--app-info);}.mobile-app-action-content{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--app-space-md);}.mobile-app-action-icon{width:50px;height:50px;border-radius:var(--app-radius-md);display:flex;align-items:center;justify-content:center;font-size:var(--app-font-xl);color:var(--app-text-white);transition:var(--app-transition-normal);position:relative;overflow:hidden;}.mobile-app-action-icon::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(255,255,255,0.2) 0%,transparent 100%);opacity:0;transition:var(--app-transition-normal);}.mobile-app-action-icon:hover::before{opacity:1;}.mobile-app-action-icon.documents{background:var(--app-primary-500);}.mobile-app-action-icon.vocab{background:var(--app-success);}.mobile-app-action-icon.practice{background:var(--app-warning);}.mobile-app-action-icon.mock-test{background:var(--app-info);}.mobile-app-action-text h3{font-size:var(--app-font-base);font-weight:600;color:var(--app-text-primary);margin:0 0 var(--app-space-xs) 0;}.mobile-app-action-text p{font-size:var(--app-font-sm);color:var(--app-text-tertiary);margin:0;}/* ==================================================================== *//* Mobile App Animations *//* ==================================================================== */@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg);}50%{transform:translateY(-10px) rotate(5deg);}}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.8;}}@keyframes slideInUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:translateY(0);}}@keyframes slideInDown{from{opacity:0;transform:translateY(-20px);}to{opacity:1;transform:translateY(0);}}@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}/* ==================================================================== *//* Mobile App Responsive *//* ==================================================================== */@media (max-width:480px){.mobile-app-content{padding:var(--app-space-md);}.mobile-app-hero{padding:var(--app-space-lg);margin-bottom:var(--app-space-lg);}.mobile-app-hero-icon{width:60px;height:60px;font-size:var(--app-font-3xl);}.mobile-app-hero-title{font-size:var(--app-font-2xl);}.mobile-app-hero-subtitle{font-size:var(--app-font-sm);}.mobile-app-hero-actions{flex-direction:column;gap:var(--app-space-sm);}.mobile-app-hero-btn{width:100%;justify-content:center;}.mobile-app-progress-grid{grid-template-columns:1fr;gap:var(--app-space-sm);}.mobile-app-actions-grid{grid-template-columns:1fr;gap:var(--app-space-sm);}}/* ==================================================================== *//* iOS/Android Specific Styles *//* ==================================================================== */@supports (-webkit-touch-callout:none){.mobile-app-dashboard{-webkit-overflow-scrolling:touch;}.mobile-app-hero-btn,.mobile-app-action-card{-webkit-tap-highlight-color:transparent;}}/* ==================================================================== *//* Accessibility & Performance *//* ==================================================================== */@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}@media (prefers-contrast:high){.mobile-app-course-card,.mobile-app-progress-card,.mobile-app-action-card{border:2px solid var(--app-text-primary);}}.mobile-app-action-card:focus,.mobile-app-course-select:focus{outline:2px solid var(--app-primary-500);outline-offset:2px;}/* ==================================================================== *//* Loading States *//* ==================================================================== */.mobile-app-loading{opacity:0.6;pointer-events:none;}.mobile-app-loading::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);animation:shimmer 1.5s infinite;}/* ==================================================================== *//* Dark Mode Enhancements *//* ==================================================================== */[data-bs-theme="dark"] .mobile-app-hero{background:linear-gradient(135deg,var(--app-primary-50) 0%,var(--app-primary-100) 100%);}[data-bs-theme="dark"] .mobile-app-hero::before{background:radial-gradient(circle,var(--app-primary-200) 0%,transparent 70%);}/* ==================================================================== *//* Print Styles *//* ==================================================================== */@media print{.mobile-app-header,.mobile-app-hero-actions,.mobile-app-action-card{display:none;}.mobile-app-dashboard{background:white !important;color:black !important;}.mobile-app-course-card,.mobile-app-progress-card{box-shadow:none !important;border:1px solid #ccc !important;}}/* From:mock-test-mobile.css *//*** File:mock-test-mobile.css* Description:Mobile App-Style Mock Test Design* Version:3.0-Mobile App Experience* Features:Native App Feel,Touch-Optimized,Modern Mobile UX*//* ==================================================================== *//* Mobile App Color System *//* ==================================================================== */:root{/* iOS/Android Inspired Colors */--app-primary:#007aff;--app-primary-light:#4da6ff;--app-primary-dark:#0056cc;--app-primary-50:#e6f3ff;--app-primary-100:#cce7ff;--app-primary-200:#99cfff;--app-primary-300:#66b7ff;--app-primary-400:#339fff;--app-primary-500:#007aff;--app-primary-600:#0062cc;--app-primary-700:#004999;--app-primary-800:#003166;--app-primary-900:#001833;/* Semantic Colors */--app-success:#34c759;--app-success-light:#5dd579;--app-warning:#ff9500;--app-warning-light:#ffb84d;--app-error:#ff3b30;--app-error-light:#ff6b61;--app-info:#5ac8fa;--app-info-light:#7dd3fb;/* App Background System */--app-bg-primary:#ffffff;--app-bg-secondary:#f2f2f7;--app-bg-tertiary:#e5e5ea;--app-bg-card:#ffffff;--app-bg-modal:rgba(0,0,0,0.4);/* App Text System */--app-text-primary:#000000;--app-text-secondary:#3c3c43;--app-text-tertiary:#8e8e93;--app-text-white:#ffffff;--app-text-link:#007aff;/* App Shadow System */--app-shadow-sm:0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);--app-shadow-md:0 3px 6px rgba(0,0,0,0.16),0 3px 6px rgba(0,0,0,0.23);--app-shadow-lg:0 10px 20px rgba(0,0,0,0.19),0 6px 6px rgba(0,0,0,0.23);--app-shadow-xl:0 14px 28px rgba(0,0,0,0.25),0 10px 10px rgba(0,0,0,0.22);/* App Border Radius */--app-radius-sm:8px;--app-radius-md:12px;--app-radius-lg:16px;--app-radius-xl:20px;--app-radius-2xl:24px;--app-radius-full:9999px;/* App Spacing */--app-space-xs:4px;--app-space-sm:8px;--app-space-md:16px;--app-space-lg:24px;--app-space-xl:32px;--app-space-2xl:48px;--app-space-3xl:64px;/* App Transitions */--app-transition-fast:all 0.2s cubic-bezier(0.25,0.46,0.45,0.94);--app-transition-normal:all 0.3s cubic-bezier(0.25,0.46,0.45,0.94);--app-transition-slow:all 0.5s cubic-bezier(0.25,0.46,0.45,0.94);--app-transition-bounce:all 0.4s cubic-bezier(0.68,-0.55,0.265,1.55);/* App Typography */--app-font-xs:12px;--app-font-sm:14px;--app-font-base:16px;--app-font-lg:18px;--app-font-xl:20px;--app-font-2xl:24px;--app-font-3xl:28px;--app-font-4xl:32px;--app-font-5xl:36px;/* App Z-Index */--app-z-dropdown:1000;--app-z-sticky:1020;--app-z-fixed:1030;--app-z-modal:1040;--app-z-tooltip:1050;}/* Dark Mode */[data-bs-theme="dark"]{--app-primary:#0a84ff;--app-primary-light:#4da6ff;--app-primary-dark:#0056cc;--app-primary-50:#001833;--app-primary-100:#003166;--app-primary-200:#004999;--app-primary-300:#0062cc;--app-primary-400:#007aff;--app-primary-500:#0a84ff;--app-primary-600:#4da6ff;--app-primary-700:#66b7ff;--app-primary-800:#99cfff;--app-primary-900:#cce7ff;--app-success:#30d158;--app-success-light:#5dd579;--app-warning:#ff9f0a;--app-warning-light:#ffb84d;--app-error:#ff453a;--app-error-light:#ff6b61;--app-info:#64d2ff;--app-info-light:#7dd3fb;--app-bg-primary:#000000;--app-bg-secondary:#1c1c1e;--app-bg-tertiary:#2c2c2e;--app-bg-card:#1c1c1e;--app-bg-modal:rgba(0,0,0,0.6);--app-text-primary:#ffffff;--app-text-secondary:#ebebf5;--app-text-tertiary:#8e8e93;--app-text-white:#ffffff;--app-text-link:#0a84ff;}/* ==================================================================== *//* Mobile App Container *//* ==================================================================== */.mock-test-mobile{min-height:100vh;background:var(--app-bg-primary);color:var(--app-text-primary);font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.4;padding:0;margin:0;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}/* ==================================================================== *//* Mobile App Content *//* ==================================================================== */.mock-content-mobile{padding:var(--app-space-lg);max-width:100%;margin:0 auto;}/* ==================================================================== *//* Mobile App Hero Section *//* ==================================================================== */.mock-hero-mobile{text-align:center;margin-bottom:var(--app-space-2xl);padding:var(--app-space-xl) var(--app-space-lg);background:linear-gradient(135deg,var(--app-primary-50) 0%,var(--app-primary-100) 100%);border-radius:var(--app-radius-2xl);position:relative;overflow:hidden;}.mock-hero-mobile::before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,var(--app-primary-200) 0%,transparent 70%);opacity:0.3;animation:float 6s ease-in-out infinite;}.mock-hero-icon-mobile{position:relative;z-index:2;width:80px;height:80px;background:var(--app-primary-500);border-radius:var(--app-radius-xl);display:flex;align-items:center;justify-content:center;margin:0 auto var(--app-space-lg);color:var(--app-text-white);font-size:var(--app-font-3xl);box-shadow:var(--app-shadow-md);animation:bounceIn 0.8s cubic-bezier(0.68,-0.55,0.265,1.55);}.mock-hero-title-mobile{position:relative;z-index:2;font-size:var(--app-font-4xl);font-weight:700;color:var(--app-text-primary);margin:0 0 var(--app-space-sm) 0;letter-spacing:-0.022em;animation:slideInUp 0.6s ease-out 0.2s both;}.mock-hero-subtitle-mobile{position:relative;z-index:2;font-size:var(--app-font-lg);color:var(--app-text-secondary);margin:0;line-height:1.5;animation:slideInUp 0.6s ease-out 0.4s both;}/* ==================================================================== *//* Mobile App Card *//* ==================================================================== */.mock-card-mobile{background:var(--app-bg-card);border-radius:var(--app-radius-xl);box-shadow:var(--app-shadow-sm);border:0.5px solid var(--app-bg-tertiary);overflow:hidden;margin-bottom:var(--app-space-lg);}.mock-card-header-mobile{background:var(--app-bg-secondary);padding:var(--app-space-lg);border-bottom:0.5px solid var(--app-bg-tertiary);display:flex;align-items:center;gap:var(--app-space-md);}.mock-card-icon-mobile{width:44px;height:44px;background:var(--app-primary-500);border-radius:var(--app-radius-md);display:flex;align-items:center;justify-content:center;color:var(--app-text-white);font-size:var(--app-font-lg);box-shadow:var(--app-shadow-sm);}.mock-card-title-mobile{font-size:var(--app-font-xl);font-weight:600;color:var(--app-text-primary);margin:0;letter-spacing:-0.022em;}.mock-card-content-mobile{padding:var(--app-space-lg);}/* ==================================================================== *//* Mobile App Question Selection *//* ==================================================================== */.mock-question-section-mobile{margin-bottom:var(--app-space-xl);}.mock-section-label-mobile{font-size:var(--app-font-lg);font-weight:600;color:var(--app-text-primary);margin-bottom:var(--app-space-md);display:flex;align-items:center;gap:var(--app-space-sm);}.mock-section-label-mobile i{color:var(--app-primary-500);font-size:var(--app-font-lg);}.mock-question-grid-mobile{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--app-space-md);}.mock-question-card-mobile{background:var(--app-bg-card);border:2px solid var(--app-bg-tertiary);border-radius:var(--app-radius-lg);padding:var(--app-space-lg);text-align:center;cursor:pointer;transition:var(--app-transition-normal);position:relative;overflow:hidden;}.mock-question-card-mobile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--app-primary-500);transform:scaleX(0);transition:var(--app-transition-normal);}.mock-question-card-mobile:hover{transform:translateY(-2px);box-shadow:var(--app-shadow-md);border-color:var(--app-primary-200);}.mock-question-card-mobile:hover::before{transform:scaleX(1);}.mock-question-card-mobile.active{background:var(--app-primary-50);border-color:var(--app-primary-300);transform:translateY(-2px);box-shadow:var(--app-shadow-md);}.mock-question-card-mobile.active::before{transform:scaleX(1);}.mock-question-number-mobile{font-size:var(--app-font-3xl);font-weight:700;color:var(--app-primary-600);margin-bottom:var(--app-space-xs);line-height:1;}.mock-question-time-mobile{font-size:var(--app-font-sm);color:var(--app-text-tertiary);font-weight:500;background:var(--app-bg-tertiary);padding:var(--app-space-xs) var(--app-space-sm);border-radius:var(--app-radius-sm);display:inline-block;}.mock-question-card-mobile.active .mock-question-time-mobile{background:var(--app-primary-200);color:var(--app-primary-700);}/* ==================================================================== *//* Mobile App Info Section *//* ==================================================================== */.mock-info-section-mobile{background:var(--app-bg-secondary);border-radius:var(--app-radius-lg);padding:var(--app-space-lg);margin-bottom:var(--app-space-xl);border:0.5px solid var(--app-bg-tertiary);}.mock-info-item-mobile{display:flex;align-items:center;gap:var(--app-space-md);padding:var(--app-space-md) 0;border-bottom:0.5px solid var(--app-bg-tertiary);}.mock-info-item-mobile:last-child{border-bottom:none;padding-bottom:0;}.mock-info-item-mobile:first-child{padding-top:0;}.mock-info-icon-mobile{width:32px;height:32px;background:var(--app-primary-500);border-radius:var(--app-radius-full);display:flex;align-items:center;justify-content:center;color:var(--app-text-white);font-size:var(--app-font-sm);flex-shrink:0;}.mock-info-text-mobile{font-size:var(--app-font-base);color:var(--app-text-secondary);font-weight:500;}/* ==================================================================== *//* Mobile App Button *//* ==================================================================== */.mock-button-mobile{width:100%;background:var(--app-primary-500);border:none;border-radius:var(--app-radius-lg);padding:var(--app-space-lg) var(--app-space-xl);color:var(--app-text-white);font-size:var(--app-font-lg);font-weight:600;cursor:pointer;position:relative;overflow:hidden;transition:var(--app-transition-normal);box-shadow:var(--app-shadow-sm);display:flex;align-items:center;justify-content:center;gap:var(--app-space-sm);letter-spacing:-0.022em;}.mock-button-mobile::before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition:var(--app-transition-normal);}.mock-button-mobile:hover::before{left:100%;}.mock-button-mobile:hover{background:var(--app-primary-600);transform:translateY(-1px);box-shadow:var(--app-shadow-md);}.mock-button-mobile:active{transform:translateY(0);background:var(--app-primary-700);}.mock-button-mobile i{font-size:var(--app-font-lg);}/* ==================================================================== *//* Mobile App Animations *//* ==================================================================== */@keyframes bounceIn{0%{opacity:0;transform:scale(0.3);}50%{opacity:1;transform:scale(1.05);}70%{transform:scale(0.9);}100%{opacity:1;transform:scale(1);}}@keyframes slideInUp{from{opacity:0;transform:translateY(30px);}to{opacity:1;transform:translateY(0);}}@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg);}50%{transform:translateY(-20px) rotate(180deg);}}@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.5;}}@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}/* ==================================================================== *//* Mobile-Only Design (No Desktop Support) *//* ==================================================================== */.mock-test-mobile{padding:0;}.mock-content-mobile{padding:var(--app-space-md);}.mock-hero-mobile{padding:var(--app-space-lg);margin-bottom:var(--app-space-lg);}.mock-hero-icon-mobile{width:64px;height:64px;font-size:var(--app-font-2xl);}.mock-hero-title-mobile{font-size:var(--app-font-3xl);}.mock-hero-subtitle-mobile{font-size:var(--app-font-base);}.mock-card-mobile{margin-bottom:var(--app-space-md);}.mock-card-header-mobile{padding:var(--app-space-md);}.mock-card-icon-mobile{width:36px;height:36px;font-size:var(--app-font-base);}.mock-card-title-mobile{font-size:var(--app-font-lg);}.mock-card-content-mobile{padding:var(--app-space-md);}.mock-question-grid-mobile{grid-template-columns:repeat(3,1fr);gap:var(--app-space-xs);}.mock-question-card-mobile{padding:var(--app-space-sm);}.mock-question-number-mobile{font-size:var(--app-font-lg);}.mock-question-time-mobile{font-size:var(--app-font-xs);padding:2px var(--app-space-xs);}.mock-info-section-mobile{padding:var(--app-space-sm);}.mock-info-item-mobile{padding:var(--app-space-xs) 0;border-bottom:0.5px solid var(--app-bg-tertiary);}.mock-info-item-mobile:last-child{border-bottom:none;padding-bottom:0;}.mock-info-icon-mobile{width:24px;height:24px;font-size:var(--app-font-xs);}.mock-info-text-mobile{font-size:var(--app-font-xs);}.mock-button-mobile{padding:var(--app-space-md) var(--app-space-lg);font-size:var(--app-font-base);}/* ==================================================================== *//* iOS/Android Specific Styles *//* ==================================================================== */@supports (-webkit-touch-callout:none){/* iOS specific styles */.mock-test-mobile{-webkit-overflow-scrolling:touch;}.mock-button-mobile{-webkit-tap-highlight-color:transparent;}.mock-question-card-mobile{-webkit-tap-highlight-color:transparent;}}@supports (not (-webkit-touch-callout:none)){/* Android specific styles */.mock-test-mobile{scroll-behavior:smooth;}}/* ==================================================================== *//* Accessibility & Performance *//* ==================================================================== */@media (prefers-reduced-motion:reduce){*{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;}}@media (prefers-contrast:high){.mock-question-card-mobile,.mock-card-mobile{border:2px solid var(--app-text-primary);}}.mock-button-mobile:focus,.mock-question-card-mobile:focus{outline:2px solid var(--app-primary-500);outline-offset:2px;}/* ==================================================================== *//* Print Styles *//* ==================================================================== */@media print{.mock-test-mobile{background:white !important;color:black !important;}.mock-card-mobile,.mock-question-card-mobile{box-shadow:none !important;border:1px solid #ccc !important;}.mock-button-mobile{background:#007aff !important;color:white !important;}}