* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); color: #1f2937; line-height: 1.6; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Header */
.header { background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); color: #1f2937; padding: 0; border-bottom: 1px solid rgba(229, 231, 235, 0.8); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.header .container { display: flex; justify-content: space-between; align-items: center; height: 64px; }
.logo { font-size: 20px; font-weight: 700; color: #10b981; text-decoration: none; display: flex; align-items: center; gap: 10px; transition: all 0.3s ease; }
.logo:hover { color: #059669; transform: scale(1.02); }
.logo-icon { width: 28px; height: 28px; filter: drop-shadow(0 2px 4px rgba(16, 185, 129, 0.2)); }
.nav { display: flex; gap: 4px; }
.nav a { color: #6b7280; text-decoration: none; padding: 10px 18px; border-radius: 8px; transition: all 0.3s ease; font-size: 14px; font-weight: 500; position: relative; overflow: hidden; }
.nav a::before { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: #10b981; transition: all 0.3s ease; transform: translateX(-50%); }
.nav a:hover { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); color: #059669; }
.nav a:hover::before { width: 80%; }
.user-area { display: flex; align-items: center; gap: 12px; position: relative; }
.user-area .btn { padding: 10px 22px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent; }
.user-area .btn-outline { background: transparent; border-color: #10b981; color: #10b981; }
.user-area .btn-outline:hover { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); }
.user-area .btn-primary { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2); }
.user-area .btn-primary:hover { background: linear-gradient(135deg, #059669 0%, #047857 100%); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }

.user-menu { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); border-radius: 10px; border: 2px solid rgba(229, 231, 235, 0.8); cursor: pointer; transition: all 0.3s ease; position: relative; }
.user-menu:hover { border-color: #10b981; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); }
.user-avatar-small { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.user-avatar-small svg { width: 20px; height: 20px; color: #10b981; }
.user-info-small { display: flex; flex-direction: column; gap: 0; }
.user-name { font-size: 13px; font-weight: 600; color: #1f2937; }
.user-level { font-size: 11px; font-weight: 500; color: #10b981; }
.dropdown-arrow { width: 16px; height: 16px; color: #6b7280; transition: transform 0.3s ease; }
.user-menu:hover .dropdown-arrow { transform: rotate(180deg); }

.user-dropdown { position: absolute; top: calc(100% + 12px); right: 0; width: 280px; background: white; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; }
.user-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-header { display: flex; align-items: center; gap: 16px; padding: 20px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 16px 16px 0 0; }
.dropdown-avatar { width: 56px; height: 56px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.dropdown-avatar svg { width: 28px; height: 28px; color: #10b981; }
.dropdown-info { flex: 1; }
.dropdown-info h4 { font-size: 16px; font-weight: 700; color: #1f2937; margin-bottom: 4px; }
.dropdown-info span { font-size: 14px; color: #10b981; font-weight: 600; }
.dropdown-menu { padding: 8px 0; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: #6b7280; text-decoration: none; transition: all 0.3s ease; font-size: 14px; font-weight: 500; }
.menu-item:hover { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #10b981; }
.menu-item svg { width: 18px; height: 18px; }
.menu-divider { height: 1px; background: #e5e7eb; margin: 8px 0; }
.menu-item-danger { color: #ef4444; }
.menu-item-danger:hover { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); color: #ef4444; }

/* Main */
.main { min-height: calc(100vh - 140px); padding: 32px 0; }

/* Home Layout */
.home-layout { display: flex; gap: 28px; max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* Vehicle Sidebar */
.vehicle-sidebar { width: 240px; background: #fff; border-radius: 14px; padding: 28px; border: 1px solid rgba(229, 231, 235, 0.8); flex-shrink: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); }
.vehicle-sidebar h3 { font-size: 14px; color: #1f2937; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #f3f4f6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; }
.vehicle-list { display: flex; flex-direction: column; gap: 8px; }
.vehicle-item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 12px; text-decoration: none; color: #6b7280; transition: all 0.3s ease; cursor: pointer; border: 2px solid transparent; position: relative; overflow: hidden; }
.vehicle-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; }
.vehicle-item:hover { background: #f9fafb; color: #1f2937; border-color: #e5e7eb; transform: translateX(6px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.vehicle-item:hover::before { opacity: 1; }
.vehicle-item.active { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #059669; border-color: #10b981; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); }
.vehicle-item .icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.vehicle-item .icon svg { width: 24px; height: 24px; }
.vehicle-item .name { font-size: 14px; font-weight: 500; }

/* Main Content */
.main-content { flex: 1; min-width: 0; }

/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; gap: 12px; margin-bottom: 28px; font-size: 13px; color: #9ca3af; padding: 12px 16px; background: #fff; border-radius: 10px; border: 1px solid #e5e7eb; }
.breadcrumb a { color: #6b7280; text-decoration: none; transition: all 0.3s ease; font-weight: 500; }
.breadcrumb a:hover { color: #10b981; }
.breadcrumb .separator { color: #d1d5db; }

/* Subject Tabs */
.subject-tabs { display: flex; gap: 8px; margin-bottom: 28px; background: #f8fafc; border-radius: 16px; padding: 8px; border: 1px solid #e2e8f0; }
.subject-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px 28px; text-decoration: none; color: #64748b; font-size: 15px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; position: relative; border-radius: 12px; background: transparent; cursor: pointer; border: 2px solid transparent; }
.subject-tab .subject-name { font-weight: 600; }
.subject-tab .subject-subtitle { font-size: 13px; color: #94a3b8; font-weight: 400; transition: color 0.3s ease; }

/* 未选中悬停效果 */
.subject-tab:hover { background: #fff; color: #475569; border-color: #cbd5e1; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.subject-tab:hover .subject-subtitle { color: #64748b; }

/* 科目一选中样式 - 蓝色 */
.subject-tab.subject-1.active { color: #fff !important; background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; border-color: #2563eb; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
.subject-tab.subject-1.active .subject-name { font-weight: 700; color: #fff !important; }
.subject-tab.subject-1.active .subject-subtitle { color: #fff !important; font-weight: 500; }
.subject-tab.subject-1:hover { background: #eff6ff; color: #2563eb; border-color: #3b82f6; }
.subject-tab.subject-1.active:hover { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important; color: #fff !important; border-color: #2563eb; }
.subject-tab.subject-1.active:hover .subject-name { color: #fff !important; }
.subject-tab.subject-1.active:hover .subject-subtitle { color: #fff !important; }

/* 科目四选中样式 - 绿色 */
.subject-tab.subject-4.active { color: #fff !important; background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; border-color: #059669; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.subject-tab.subject-4.active .subject-name { font-weight: 700; color: #fff !important; }
.subject-tab.subject-4.active .subject-subtitle { color: #fff !important; font-weight: 500; }
.subject-tab.subject-4:hover { background: #f0fdf4; color: #059669; border-color: #10b981; }
.subject-tab.subject-4.active:hover { background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important; color: #fff !important; border-color: #059669; }
.subject-tab.subject-4.active:hover .subject-name { color: #fff !important; }
.subject-tab.subject-4.active:hover .subject-subtitle { color: #fff !important; }

/* Modules Grid */
.modules-grid { margin-bottom: 28px; }

/* Large Modules */
.modules-large { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 20px; }
.module-large { display: flex; align-items: center; gap: 18px; padding: 32px 28px; border-radius: 14px; text-decoration: none; color: #fff; transition: all 0.3s ease; border: 2px solid transparent; position: relative; overflow: hidden; }
.module-large::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; }
.module-large::after { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); opacity: 0; transition: opacity 0.3s ease; }
.module-large:hover::before { opacity: 1; }
.module-large:hover::after { opacity: 1; }
.module-large .module-icon { width: 60px; height: 60px; background: rgba(255,255,255,0.25); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; backdrop-filter: blur(10px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.module-large .module-icon svg { width: 30px; height: 30px; }
.module-large .module-info h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.module-large .module-info p { font-size: 14px; opacity: 0.95; font-weight: 400; }

/* Large Module Colors */
.module-large.module-green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); }
.module-large.module-green:hover { background: linear-gradient(135deg, #059669 0%, #047857 100%); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(16, 185, 129, 0.25); }
.module-large.module-blue { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15); }
.module-large.module-blue:hover { background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(59, 130, 246, 0.25); }
.module-large.module-orange { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.15); }
.module-large.module-orange:hover { background: linear-gradient(135deg, #ea580c 0%, #c2410c 100%); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(249, 115, 22, 0.25); }
.module-large.module-purple { background: linear-gradient(135deg, #a855f7 0%, #9333ea 100%); box-shadow: 0 4px 12px rgba(168, 85, 247, 0.15); }
.module-large.module-purple:hover { background: linear-gradient(135deg, #9333ea 0%, #7c3aed 100%); transform: translateY(-6px); box-shadow: 0 16px 32px rgba(168, 85, 247, 0.25); }

/* Small Modules */
.modules-small { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.module-small { display: flex; align-items: center; gap: 14px; padding: 24px; background: #fff; border-radius: 14px; text-decoration: none; transition: all 0.3s ease; border: 2px solid #e5e7eb; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.module-small::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; }
.module-small:hover { background: #fff; border-color: #10b981; transform: translateY(-4px); box-shadow: 0 12px 24px rgba(16, 185, 129, 0.12); }
.module-small:hover::before { opacity: 1; }
.module-small .module-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.module-small .module-icon svg { width: 24px; height: 24px; }
.module-small .module-info h3 { font-size: 16px; font-weight: 600; color: #1f2937; margin-bottom: 4px; }
.module-small .module-info p { font-size: 12px; color: #9ca3af; font-weight: 400; }

/* Module Colors */
.module-green .module-icon { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); }
.module-green .module-icon svg { color: #10b981; }
.module-blue .module-icon { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
.module-blue .module-icon svg { color: #3b82f6; }
.module-orange .module-icon { background: linear-gradient(135deg, #fff7ed 0%, #fed7aa 100%); }
.module-orange .module-icon svg { color: #f97316; }
.module-purple .module-icon { background: linear-gradient(135deg, #faf5ff 0%, #e9d5ff 100%); }
.module-purple .module-icon svg { color: #a855f7; }

/* Exam Info */
.exam-info { display: flex; align-items: center; gap: 12px; padding: 20px 28px; background: #fff; border-radius: 14px; border: 2px solid #e5e7eb; font-size: 13px; color: #6b7280; font-weight: 500; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.exam-info .info-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; }
.exam-info .info-icon svg { width: 20px; height: 20px; color: #10b981; }
.exam-info .info-text { line-height: 1.7; }

/* Progress Card */
.progress-card { background: #fff; border-radius: 14px; padding: 28px; border: 1px solid rgba(229, 231, 235, 0.8); margin-top: 28px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); }
.progress-card h3 { font-size: 14px; color: #1f2937; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid #f3f4f6; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; }
.progress-stats { display: flex; flex-direction: column; gap: 18px; margin-bottom: 24px; }
.progress-item { display: flex; align-items: center; gap: 16px; padding: 12px; background: #fff; border-radius: 12px; transition: all 0.3s ease; border: 2px solid #ecfdf5; }
.progress-item:hover { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); transform: translateX(4px); border-color: #10b981; }
.progress-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); }
.progress-icon svg { width: 24px; height: 24px; color: #10b981; }
.progress-info { display: flex; flex-direction: column; }
.progress-value { font-size: 22px; font-weight: 700; color: #1f2937; line-height: 1.2; }
.progress-label { font-size: 12px; color: #9ca3af; font-weight: 500; margin-top: 2px; }
.progress-bar-container { display: flex; flex-direction: column; gap: 8px; }
.progress-bar-label { font-size: 12px; color: #6b7280; font-weight: 500; }
.progress-bar-track { width: 100%; height: 8px; background: #f3f4f6; border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, #10b981 0%, #059669 100%); border-radius: 4px; transition: width 0.5s ease; }
.progress-bar-text { font-size: 12px; color: #10b981; font-weight: 600; text-align: right; }

/* Daily Practice */
.daily-practice { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); border-radius: 16px; padding: 32px 36px; margin-bottom: 28px; position: relative; overflow: hidden; box-shadow: 0 8px 24px rgba(59, 130, 246, 0.2); }
.daily-practice::before { content: ''; position: absolute; top: -50%; right: -50%; width: 100%; height: 100%; background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%); }
.daily-practice::after { content: ''; position: absolute; bottom: -20%; left: -10%; width: 60%; height: 60%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); }
.daily-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; position: relative; z-index: 1; }
.daily-title { display: flex; align-items: center; gap: 12px; color: #fff; font-size: 22px; font-weight: 700; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.daily-title svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); }
.daily-date { color: rgba(255,255,255,0.95); font-size: 14px; font-weight: 500; background: rgba(255,255,255,0.15); padding: 6px 14px; border-radius: 20px; backdrop-filter: blur(10px); }
.daily-content { display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 1; }
.daily-stats { display: flex; gap: 40px; }
.daily-stat { display: flex; flex-direction: column; }
.daily-stat-value { font-size: 36px; font-weight: 700; color: #fff; line-height: 1; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.daily-stat-label { font-size: 12px; color: rgba(255,255,255,0.95); font-weight: 500; margin-top: 6px; }
.daily-btn { display: flex; align-items: center; gap: 10px; padding: 16px 32px; background: #fff; color: #3b82f6; border-radius: 12px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); }
.daily-btn:hover { background: #f9fafb; transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.daily-btn svg { width: 20px; height: 20px; }

/* Hot Questions */
.hot-questions { background: #fff; border-radius: 16px; padding: 32px 36px; margin-bottom: 28px; border: 2px solid rgba(229, 231, 235, 0.8); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
.hot-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.hot-header h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; color: #1f2937; }
.hot-header h3 svg { width: 22px; height: 22px; color: #f97316; filter: drop-shadow(0 2px 4px rgba(249, 115, 22, 0.2)); }
.hot-more { color: #10b981; text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.3s ease; }
.hot-more:hover { color: #059669; transform: translateX(2px); }
.hot-list { display: flex; flex-direction: column; gap: 14px; }
.hot-item { display: flex; align-items: center; gap: 16px; padding: 18px 24px; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); border-radius: 12px; text-decoration: none; transition: all 0.3s ease; border: 2px solid transparent; }
.hot-item:hover { background: #fff; border-color: #10b981; transform: translateX(6px); box-shadow: 0 6px 16px rgba(16, 185, 129, 0.1); }
.hot-rank { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: #fff; border-radius: 10px; font-weight: 700; font-size: 15px; flex-shrink: 0; box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2); }
.hot-item:nth-child(2) .hot-rank { background: linear-gradient(135deg, #f97316 0%, #ea580c 100%); box-shadow: 0 2px 8px rgba(249, 115, 22, 0.2); }
.hot-item:nth-child(3) .hot-rank { background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%); box-shadow: 0 2px 8px rgba(234, 179, 8, 0.2); }
.hot-title { flex: 1; color: #374151; font-size: 14px; font-weight: 500; line-height: 1.6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hot-fire { display: flex; align-items: center; gap: 6px; color: #f97316; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.hot-fire svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 2px rgba(249, 115, 22, 0.2)); }

/* Practice Page */
.practice-page { max-width: 800px; margin: 0 auto; }
.progress-bar { background: white; padding: 18px 24px; border-radius: 12px; margin-bottom: 24px; border: 2px solid #e5e7eb; }
.question-card { background: white; border-radius: 12px; padding: 32px; border: 2px solid #e5e7eb; }
.question-image { margin-bottom: 24px; text-align: center; }
.question-image img { max-width: 100%; max-height: 300px; border-radius: 10px; }
.question-text { font-size: 18px; line-height: 1.8; margin-bottom: 28px; color: #1f2937; font-weight: 500; }
.options { display: flex; flex-direction: column; gap: 14px; }
.option { display: flex; align-items: center; padding: 18px 22px; background: #f9fafb; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; border: 2px solid transparent; }
.option:hover { background: #f3f4f6; transform: translateX(4px); }
.option input { display: none; }
.option.selected { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-color: #10b981; }
.option.correct { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-color: #10b981; }
.option.wrong { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-color: #ef4444; }
.option-label { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: #10b981; color: white; border-radius: 8px; margin-right: 16px; font-weight: 700; flex-shrink: 0; }
.option.correct .option-label { background: #10b981; }
.option.wrong .option-label { background: #ef4444; }

.answer-result { margin-top: 24px; padding: 24px; border-radius: 12px; }
.answer-result.correct { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-left: 4px solid #10b981; }
.answer-result.wrong { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-left: 4px solid #ef4444; }
.explanation { margin-top: 12px; color: #6b7280; font-size: 14px; line-height: 1.7; }

.action-buttons { display: flex; justify-content: center; gap: 18px; margin-top: 32px; }
.btn { padding: 14px 34px; border: none; border-radius: 10px; cursor: pointer; font-size: 16px; text-decoration: none; transition: all 0.3s ease; display: inline-block; font-weight: 600; }
.btn-primary { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
.btn-primary:hover { background: linear-gradient(135deg, #059669 0%, #047857 100%); transform: translateY(-2px); box-shadow: 0 8px 16px rgba(16, 185, 129, 0.3); }
.btn-secondary { background: #e5e7eb; color: #374151; }
.btn-secondary:hover { background: #d1d5db; }
.btn-large { padding: 18px 56px; font-size: 18px; }

/* Empty State */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 40px; background: #fff; border-radius: 20px; border: 2px solid rgba(229, 231, 235, 0.8); text-align: center; max-width: 500px; margin: 60px auto; }
.empty-icon { width: 120px; height: 120px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 32px; border: 3px solid #10b981; }
.empty-icon svg { width: 60px; height: 60px; color: #10b981; }
.empty-state h3 { font-size: 24px; font-weight: 700; color: #1f2937; margin-bottom: 12px; }
.empty-state p { font-size: 15px; color: #6b7280; margin-bottom: 32px; line-height: 1.6; }
.empty-state .btn { display: flex; align-items: center; gap: 10px; padding: 16px 32px; font-size: 15px; }
.empty-state .btn svg { width: 20px; height: 20px; }

/* Login Prompt */
.login-prompt { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 60px 40px; background: #fff; border-radius: 20px; border: 2px solid rgba(229, 231, 235, 0.8); text-align: center; max-width: 450px; margin: 40px auto; }
.login-icon { width: 100px; height: 100px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 28px; border: 3px solid #10b981; }
.login-icon svg { width: 50px; height: 50px; color: #10b981; }
.login-prompt h3 { font-size: 22px; font-weight: 700; color: #1f2937; margin-bottom: 12px; }
.login-prompt p { font-size: 14px; color: #6b7280; margin-bottom: 28px; line-height: 1.6; max-width: 300px; }
.login-prompt .btn { display: flex; align-items: center; gap: 10px; padding: 14px 32px; font-size: 15px; }
.login-prompt .btn svg { width: 20px; height: 20px; }

/* Stats Card */
.stats-card { background: white; padding: 32px; border-radius: 12px; border: 2px solid #e5e7eb; }
.stats-card h3 { margin-bottom: 24px; font-weight: 600; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stat-item { text-align: center; padding: 24px; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); border-radius: 10px; }
.stat-item .value { display: block; font-size: 36px; font-weight: 700; color: #10b981; }
.stat-item .label { color: #6b7280; margin-top: 8px; font-weight: 500; }

/* Categories Section */
.categories-section { background: white; padding: 32px; border-radius: 12px; margin-bottom: 32px; border: 2px solid #e5e7eb; }
.categories-section h2 { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #f3f4f6; font-weight: 600; }
.category-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.category-item { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); border-radius: 10px; text-decoration: none; color: inherit; transition: all 0.3s ease; border: 2px solid transparent; }
.category-item:hover { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #059669; border-color: #10b981; transform: translateY(-2px); }
.category-item .count { font-size: 12px; color: #9ca3af; font-weight: 500; }

/* Modal */
.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(8px); animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content { background: #ffffff; padding: 48px 40px 40px; border-radius: 24px; width: 100%; max-width: 460px; position: relative; border: 1px solid #e5e7eb; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); animation: slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
@keyframes slideUp { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }
.modal-content .close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #9ca3af; transition: all 0.3s ease; border-radius: 50%; background: #f3f4f6; }
.modal-content .close:hover { color: #fff; background: #10b981; transform: rotate(90deg); }
.modal-content .close svg { display: block; }
.modal-header { text-align: center; margin-bottom: 32px; }
.modal-header .modal-icon { width: 72px; height: 72px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; box-shadow: 0 8px 24px rgba(16, 185, 129, 0.35); }
.modal-header .modal-icon svg { color: #fff; }
.modal-content h3 { margin-bottom: 8px; text-align: center; font-weight: 700; font-size: 26px; color: #111827; }
.modal-content .modal-subtitle { text-align: center; color: #6b7280; font-size: 15px; font-weight: 400; }
.modal-content form { display: flex; flex-direction: column; gap: 18px; margin-top: 28px; }
.modal-content .form-group { position: relative; }
.modal-content input { width: 100%; padding: 16px 18px 16px 52px; border: 2px solid #e5e7eb; border-radius: 14px; font-size: 15px; transition: all 0.3s ease; background: #fff; color: #374151; }
.modal-content input::placeholder { color: #9ca3af; }
.modal-content input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1); background: #fff; }
.modal-content .input-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: #9ca3af; transition: all 0.3s ease; }
.modal-content input:focus + .input-icon { color: #10b981; }
.modal-content button { padding: 16px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; border: none; border-radius: 14px; font-size: 16px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; margin-top: 12px; box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35); }
.modal-content button:hover { background: linear-gradient(135deg, #059669 0%, #047857 100%); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.4); }
.modal-content button:active { transform: translateY(0); }
.modal-content .form-footer { text-align: center; margin-top: 28px; padding-top: 24px; border-top: 1px solid #e5e7eb; color: #6b7280; font-size: 14px; }
.modal-content .form-footer a { color: #10b981; text-decoration: none; font-weight: 600; transition: all 0.3s ease; }
.modal-content .form-footer a:hover { color: #059669; text-decoration: underline; }
.modal-features { display: flex; justify-content: center; gap: 24px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #f3f4f6; }
.modal-features .feature-item { display: flex; align-items: center; gap: 6px; color: #6b7280; font-size: 13px; font-weight: 500; }
.modal-features .feature-item svg { color: #10b981; }

/* Footer */
.footer { background: #1f2937; color: #9ca3af; text-align: center; padding: 24px; margin-top: 48px; }

/* Responsive */
@media (max-width: 1024px) {
    .home-layout { flex-direction: column; }
    .vehicle-sidebar { width: 100%; }
    .vehicle-list { flex-direction: row; flex-wrap: wrap; }
    .vehicle-item { flex: 1; min-width: 120px; justify-content: center; }
    .progress-stats { flex-direction: row; flex-wrap: wrap; }
    .progress-item { flex: 1; min-width: 140px; }
    .daily-content { flex-direction: column; gap: 20px; }
    .daily-stats { gap: 24px; }
}

@media (max-width: 768px) {
    .header .container { flex-wrap: wrap; height: auto; padding: 12px 20px; }
    .nav { order: 3; width: 100%; margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center; }
    .nav a { margin: 4px; padding: 8px 14px; font-size: 13px; }
    .modules-large { grid-template-columns: 1fr; }
    .modules-small { grid-template-columns: repeat(2, 1fr); }
    .subject-tab { flex-direction: column; padding: 14px; font-size: 13px; }
    .subject-tab .subject-subtitle { display: none; }
    .daily-practice { padding: 24px 20px; }
    .daily-stat-value { font-size: 28px; }
    .daily-stats { gap: 20px; }
    .hot-questions { padding: 24px 20px; }
    .hot-title { font-size: 13px; }
    .stats-overview { grid-template-columns: repeat(2, 1fr); }
    .plan-grid { grid-template-columns: 1fr; }
    .leaderboard-item { padding: 16px; }
    .user-stats { flex-wrap: wrap; gap: 12px; }
    .analysis-content { grid-template-columns: 1fr; }
    .profile-layout { grid-template-columns: 1fr; }
    .user-dropdown { width: 260px; }
    .wrong-stats { grid-template-columns: 1fr; }
    .wrong-item { flex-direction: column; gap: 16px; }
    .wrong-actions-item { flex-direction: row; }
}

@media (max-width: 480px) {
    .modules-small { grid-template-columns: 1fr; }
    .module-small { padding: 18px; }
    .home-layout { padding: 0 16px; }
    .daily-practice { padding: 20px 16px; }
    .daily-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .daily-content { flex-direction: column; align-items: stretch; }
    .daily-stats { justify-content: space-around; }
    .daily-btn { justify-content: center; }
    .hot-questions { padding: 20px 16px; }
    .hot-item { padding: 14px 16px; }
    .hot-title { font-size: 12px; }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}

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

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes glow {
    0%, 100% { box-shadow: 0 0 5px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.6); }
}

@keyframes ripple {
    0% { transform: scale(0); opacity: 1; }
    100% { transform: scale(4); opacity: 0; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}

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

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes rotateIn {
    from { opacity: 0; transform: rotate(-10deg); }
    to { opacity: 1; transform: rotate(0deg); }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Animation Classes */
.animate-fade-in { animation: fadeIn 0.5s ease-out; }
.animate-slide-in { animation: slideIn 0.5s ease-out; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-glow { animation: glow 2s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s ease-in-out; }
.animate-slide-up { animation: slideUp 0.6s ease-out; }
.animate-scale-in { animation: scaleIn 0.5s ease-out; }
.animate-rotate-in { animation: rotateIn 0.5s ease-out; }
.animate-shimmer { animation: shimmer 2s infinite linear; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent); background-size: 200% 100%; }

/* Stagger Animation */
.vehicle-item:nth-child(1) { animation-delay: 0.1s; }
.vehicle-item:nth-child(2) { animation-delay: 0.2s; }
.vehicle-item:nth-child(3) { animation-delay: 0.3s; }
.vehicle-item:nth-child(4) { animation-delay: 0.4s; }
.vehicle-item:nth-child(5) { animation-delay: 0.5s; }

.module-card:nth-child(1) { animation-delay: 0.1s; }
.module-card:nth-child(2) { animation-delay: 0.2s; }
.module-card:nth-child(3) { animation-delay: 0.3s; }
.module-card:nth-child(4) { animation-delay: 0.4s; }

.hot-item:nth-child(1) { animation-delay: 0.1s; }
.hot-item:nth-child(2) { animation-delay: 0.2s; }
.hot-item:nth-child(3) { animation-delay: 0.3s; }
.hot-item:nth-child(4) { animation-delay: 0.4s; }

/* Study Stats Animation */
.study-stats { animation: slideUp 0.6s ease-out 0.3s both; }
.chart-bar:nth-child(1) { animation-delay: 0.4s; }
.chart-bar:nth-child(2) { animation-delay: 0.5s; }
.chart-bar:nth-child(3) { animation-delay: 0.6s; }
.chart-bar:nth-child(4) { animation-delay: 0.7s; }
.chart-bar:nth-child(5) { animation-delay: 0.8s; }
.chart-bar:nth-child(6) { animation-delay: 0.9s; }
.chart-bar:nth-child(7) { animation-delay: 1.0s; }

/* Study Reminder Animation */
.study-reminder { animation: slideUp 0.6s ease-out 0.4s both; }

/* Study Achievements Animation */
.study-achievements { animation: slideUp 0.6s ease-out 0.5s both; }
.achievement-item:nth-child(1) { animation-delay: 0.6s; }
.achievement-item:nth-child(2) { animation-delay: 0.7s; }
.achievement-item:nth-child(3) { animation-delay: 0.8s; }
.achievement-item:nth-child(4) { animation-delay: 0.9s; }
.achievement-item:nth-child(5) { animation-delay: 1.0s; }

/* Ripple Effect */
.ripple { position: relative; overflow: hidden; }
.ripple::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255, 255, 255, 0.3); border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; }
.ripple:active::after { width: 300px; height: 300px; }

/* Loading Skeleton */
.skeleton { background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }

/* Scrollbar Styling */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f3f4f6; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; transition: background 0.3s ease; }
::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

/* Selection */
::selection { background: #10b981; color: #fff; }

/* Focus States */
a:focus, button:focus, input:focus { outline: 2px solid #10b981; outline-offset: 2px; }

/* Hover Effects Enhancement */
a, button, .vehicle-item, .module-card, .hot-item, .option { -webkit-tap-highlight-color: transparent; }

/* Smooth Scroll */
html { scroll-behavior: smooth; }

/* Image Hover */
img { transition: transform 0.3s ease; }
img:hover { transform: scale(1.02); }

/* Button Press Effect */
button:active, .btn:active, .daily-btn:active { transform: scale(0.98); }

/* Card Tilt Effect (3D) */
@media (min-width: 1024px) {
    .module-large, .module-small, .hot-item, .progress-item {
        transform-style: preserve-3d;
        perspective: 1000px;
    }
}

/* Print Styles */
@media print {
    .header, .footer, .vehicle-sidebar, .daily-practice, .hot-questions { display: none; }
    .main-content { max-width: 100%; }
    .question-card { box-shadow: none; border: 1px solid #000; }
}

/* Dark Mode Support (Optional) */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode */
    /* body { background: #111827; color: #f9fafb; }
    .header { background: #1f2937; border-bottom-color: #374151; }
    .vehicle-sidebar, .progress-card, .module-small, .hot-questions, .question-card { background: #1f2937; border-color: #374151; }
    .exam-info { background: #1f2937; border-color: #374151; }
    .option { background: #374151; }
    .option:hover { background: #4b5563; }
    .subject-tab { color: #9ca3af; }
    .subject-tab.active { color: #10b981; }
    .module-small .module-info h3 { color: #f9fafb; }
    .module-small .module-info p { color: #9ca3af; }
    .hot-title { color: #e5e7eb; }
    .hot-item { background: #374151; }
    .hot-item:hover { background: #4b5563; } */
}

/* Study Stats */
.study-stats { background: white; padding: 28px; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); margin-top: 24px; position: relative; overflow: hidden; }
.study-stats::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #10b981, #059669, #10b981); background-size: 200% 100%; animation: shimmer 3s linear infinite; }
.stats-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.stats-header h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #1f2937; }
.stats-header h3 svg { width: 22px; height: 22px; color: #10b981; }
.stats-content { display: flex; gap: 32px; }
.stats-chart { flex: 1; }
.chart-bars { display: flex; align-items: flex-end; gap: 16px; height: 160px; padding: 20px 0; }
.chart-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bar-wrapper { position: relative; width: 100%; height: 120px; display: flex; align-items: flex-end; }
.bar-fill { width: 100%; background: linear-gradient(180deg, #10b981 0%, #059669 100%); border-radius: 6px 6px 0 0; transition: height 0.5s ease, transform 0.3s ease; position: relative; }
.bar-fill:hover { background: linear-gradient(180deg, #059669 0%, #047857 100%); transform: scaleY(1.05); }
.bar-value { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: #10b981; opacity: 0; transition: opacity 0.3s ease; }
.chart-bar:hover .bar-value { opacity: 1; }
.bar-label { font-size: 12px; color: #6b7280; font-weight: 500; transition: color 0.3s ease; }
.chart-bar:hover .bar-label { color: #10b981; }
.stats-summary { display: flex; flex-direction: column; gap: 16px; padding-left: 32px; border-left: 2px solid #e5e7eb; }
.summary-item { display: flex; flex-direction: column; gap: 4px; transition: transform 0.3s ease; }
.summary-item:hover { transform: translateX(4px); }
.summary-label { font-size: 13px; color: #6b7280; font-weight: 500; }
.summary-value { font-size: 24px; font-weight: 700; color: #10b981; }

/* Study Reminder */
.study-reminder { background: white; padding: 28px; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); margin-top: 24px; }
.reminder-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.reminder-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #1f2937; }
.reminder-title svg { width: 22px; height: 22px; color: #10b981; }
.reminder-toggle { position: relative; width: 52px; height: 28px; cursor: pointer; }
.reminder-toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #d1d5db; transition: 0.3s; border-radius: 28px; }
.toggle-slider:before { position: absolute; content: ""; height: 22px; width: 22px; left: 3px; bottom: 3px; background: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.reminder-toggle input:checked + .toggle-slider { background: #10b981; }
.reminder-toggle input:checked + .toggle-slider:before { transform: translateX(24px); }
.reminder-content { display: flex; gap: 32px; }
.reminder-time { display: flex; flex-direction: column; gap: 8px; }
.time-label { font-size: 13px; color: #6b7280; font-weight: 500; }
.time-value { font-size: 20px; font-weight: 700; color: #10b981; }
.reminder-days { display: flex; flex-direction: column; gap: 8px; }
.days-label { font-size: 13px; color: #6b7280; font-weight: 500; }
.days-list { display: flex; gap: 8px; flex-wrap: wrap; }
.day-tag { padding: 6px 12px; background: #f3f4f6; border-radius: 6px; font-size: 12px; font-weight: 500; color: #6b7280; }

/* Study Achievements */
.study-achievements { background: white; padding: 28px; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); margin-top: 24px; }
.achievements-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.achievements-header h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; color: #1f2937; }
.achievements-header h3 svg { width: 22px; height: 22px; color: #10b981; }
.achievements-count { font-size: 14px; color: #6b7280; font-weight: 500; }
.achievements-list { display: flex; flex-direction: column; gap: 16px; }
.achievement-item { display: flex; align-items: center; gap: 16px; padding: 20px; background: #fff; border-radius: 12px; border: 2px solid rgba(229, 231, 235, 0.8); transition: all 0.3s ease; }
.achievement-item.unlocked { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-color: #10b981; }
.achievement-item.locked { opacity: 0.6; }
.achievement-item:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 12px 28px rgba(16, 185, 129, 0.2); border-color: #10b981; }
.achievement-item.unlocked:hover { box-shadow: 0 12px 28px rgba(16, 185, 129, 0.3); }
.achievement-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); }
.achievement-info { flex: 1; }
.achievement-info h4 { font-size: 16px; font-weight: 700; color: #1f2937; margin-bottom: 4px; }
.achievement-info p { font-size: 13px; color: #6b7280; }
.achievement-status { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #10b981; border-radius: 50%; }
.achievement-status svg { width: 18px; height: 18px; color: white; }
.achievement-status.locked { background: #d1d5db; }
.achievement-status.locked svg { color: #9ca3af; }

/* Stats Page */
.stats-page { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.page-header { text-align: center; margin-bottom: 40px; }
.page-header h1 { font-size: 32px; font-weight: 700; color: #1f2937; margin-bottom: 12px; }
.page-header p { font-size: 16px; color: #6b7280; }
.stats-overview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 32px; }
.overview-card { background: linear-gradient(135deg, #ffffff 0%, #f9fafb 100%); padding: 28px; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); display: flex; align-items: center; gap: 20px; transition: all 0.3s ease; }
.overview-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15); border-color: #10b981; }
.overview-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); }
.overview-icon svg { width: 28px; height: 28px; color: #10b981; }
.overview-info { display: flex; flex-direction: column; }
.overview-value { font-size: 32px; font-weight: 700; color: #1f2937; line-height: 1; margin-bottom: 4px; }
.overview-label { font-size: 14px; color: #6b7280; font-weight: 500; }
.stats-chart-section { margin-bottom: 32px; }
.chart-card { background: white; padding: 32px; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); }
.chart-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.chart-header h3 { font-size: 18px; font-weight: 700; color: #1f2937; }
.chart-subtitle { font-size: 14px; color: #6b7280; }
.chart-content { padding: 20px 0; }
.stats-details { margin-bottom: 32px; }
.detail-card { background: white; padding: 32px; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); }
.detail-card h3 { font-size: 18px; font-weight: 700; color: #1f2937; margin-bottom: 24px; }
.detail-list { display: flex; flex-direction: column; gap: 16px; }
.detail-item { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); border-radius: 10px; }
.detail-label { font-size: 14px; color: #6b7280; font-weight: 500; }
.detail-value { font-size: 20px; font-weight: 700; color: #10b981; }

/* Stats Analysis */
.stats-analysis { margin-bottom: 32px; }
.analysis-card { background: white; padding: 32px; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); }
.analysis-card h3 { font-size: 18px; font-weight: 700; color: #1f2937; margin-bottom: 24px; }
.analysis-content { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.analysis-item { display: flex; flex-direction: column; gap: 16px; }
.analysis-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.analysis-icon svg { width: 24px; height: 24px; color: #10b981; }
.analysis-info { flex: 1; }
.analysis-info h4 { font-size: 16px; font-weight: 700; color: #1f2937; margin-bottom: 8px; }
.analysis-info p { font-size: 14px; color: #6b7280; margin-bottom: 12px; }
.trend-bar { width: 100%; height: 8px; background: #f3f4f6; border-radius: 4px; overflow: hidden; }
.trend-fill { height: 100%; background: linear-gradient(90deg, #10b981 0%, #059669 100%); border-radius: 4px; transition: width 0.5s ease; }
.trend-fill.accuracy { background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%); }
.trend-fill.days { background: linear-gradient(90deg, #f59e0b 0%, #d97706 100%); }

/* Achievements Page */
.achievements-page { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.achievements-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.summary-card { background: white; padding: 28px; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); display: flex; align-items: center; gap: 20px; transition: all 0.3s ease; }
.summary-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.summary-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.summary-icon svg { width: 28px; height: 28px; color: #10b981; }
.summary-info { display: flex; flex-direction: column; gap: 4px; }
.summary-value { font-size: 28px; font-weight: 700; color: #10b981; }
.summary-label { font-size: 14px; color: #6b7280; font-weight: 500; }
.achievements-list { display: flex; flex-direction: column; gap: 16px; }

/* Navigation Active State */
.nav-item.active { color: #10b981; font-weight: 600; }
.nav-item.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: #10b981; border-radius: 2px; }

/* Leaderboard Page */
.leaderboard-page { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.leaderboard-tabs { display: flex; gap: 12px; margin-bottom: 32px; background: #fff; padding: 8px; border-radius: 12px; border: 2px solid rgba(229, 231, 235, 0.8); }
.tab-btn { flex: 1; padding: 12px 20px; border: none; background: transparent; border-radius: 8px; font-size: 15px; font-weight: 500; color: #6b7280; cursor: pointer; transition: all 0.3s ease; }
.tab-btn:hover { background: #f3f4f6; color: #10b981; }
.tab-btn.active { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; font-weight: 600; }
.leaderboard-list { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.leaderboard-item { display: flex; align-items: center; gap: 20px; padding: 24px; background: #fff; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); transition: all 0.3s ease; }
.leaderboard-item:hover { transform: translateX(8px) scale(1.02); box-shadow: 0 12px 32px rgba(16, 185, 129, 0.2); border-color: #10b981; }
.leaderboard-item.current-user { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-color: #10b981; }
.leaderboard-item.current-user:hover { box-shadow: 0 12px 32px rgba(16, 185, 129, 0.3); }
.rank-badge { width: 48px; height: 48px; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.3s ease; }
.rank-badge.top-3 { background: linear-gradient(135deg, #fef3c7 0%, #fbbf24 100%); box-shadow: 0 4px 12px rgba(251, 191, 36, 0.3); }
.rank-badge:hover { transform: scale(1.1) rotate(5deg); }
.rank-number { font-size: 20px; font-weight: 700; color: #6b7280; }
.rank-badge.top-3 .rank-number { color: white; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
.user-avatar { width: 56px; height: 56px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2); transition: all 0.3s ease; }
.user-avatar:hover { transform: scale(1.1) rotate(5deg); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.3); }
.user-info { flex: 1; }
.user-info h4 { font-size: 18px; font-weight: 700; color: #1f2937; margin-bottom: 12px; }
.user-stats { display: flex; gap: 24px; }
.stat-item { display: flex; align-items: center; gap: 6px; font-size: 14px; color: #6b7280; font-weight: 500; }
.stat-item svg { width: 16px; height: 16px; color: #10b981; }
.leaderboard-footer { display: flex; align-items: center; justify-content: space-between; padding: 24px; background: #fff; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); }
.my-rank { display: flex; align-items: center; gap: 12px; }
.rank-label { font-size: 14px; color: #6b7280; font-weight: 500; }
.rank-value { font-size: 24px; font-weight: 700; color: #10b981; }
.leaderboard-tips { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6b7280; }
.leaderboard-tips svg { width: 18px; height: 18px; color: #10b981; }

/* Plan Page */
.plan-page { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.plan-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-bottom: 40px; }
.plan-card { background: #fff; border-radius: 20px; padding: 32px; border: 2px solid rgba(229, 231, 235, 0.8); transition: all 0.3s ease; }
.plan-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12); border-color: var(--plan-color); }
.plan-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.plan-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.plan-info { flex: 1; }
.plan-info h3 { font-size: 20px; font-weight: 700; color: #1f2937; margin-bottom: 4px; }
.plan-difficulty { display: inline-block; padding: 4px 12px; background: var(--plan-color); color: white; border-radius: 20px; font-size: 12px; font-weight: 600; }
.plan-description { font-size: 14px; color: #6b7280; line-height: 1.6; margin-bottom: 24px; }
.plan-stats { display: flex; gap: 20px; margin-bottom: 24px; padding: 16px; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); border-radius: 12px; }
.plan-stats .stat-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #6b7280; font-weight: 500; }
.plan-stats .stat-item svg { width: 18px; height: 18px; color: var(--plan-color); }
.plan-topics { margin-bottom: 24px; }
.plan-topics h4 { font-size: 14px; font-weight: 600; color: #1f2937; margin-bottom: 12px; }
.topic-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-tag { display: inline-block; padding: 6px 14px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #10b981; border-radius: 20px; font-size: 12px; font-weight: 500; }
.plan-card .btn-block { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; color: white; border: none; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.plan-card .btn-block:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); filter: brightness(1.1); }
.plan-tips { margin-top: 40px; }
.tips-card { background: white; padding: 32px; border-radius: 20px; border: 2px solid rgba(229, 231, 235, 0.8); }
.tips-card h3 { font-size: 18px; font-weight: 700; color: #1f2937; margin-bottom: 24px; }
.tips-list { display: flex; flex-direction: column; gap: 20px; }
.tip-item { display: flex; align-items: flex-start; gap: 16px; }
.tip-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tip-icon svg { width: 24px; height: 24px; color: #10b981; }
.tip-content { flex: 1; }
.tip-content h4 { font-size: 16px; font-weight: 600; color: #1f2937; margin-bottom: 4px; }
.tip-content p { font-size: 14px; color: #6b7280; line-height: 1.5; }

/* Profile Page */
.profile-page { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.profile-layout { display: grid; grid-template-columns: 320px 1fr; gap: 32px; }
.profile-sidebar { display: flex; flex-direction: column; gap: 24px; }
.profile-card { background: white; padding: 32px; border-radius: 20px; border: 2px solid rgba(229, 231, 235, 0.8); text-align: center; }
.profile-avatar { width: 100px; height: 100px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.profile-avatar svg { width: 50px; height: 50px; color: #10b981; }
.profile-card h3 { font-size: 20px; font-weight: 700; color: #1f2937; margin-bottom: 8px; }
.profile-level { font-size: 14px; color: #10b981; font-weight: 600; margin-bottom: 24px; }
.profile-stats { display: flex; justify-content: space-around; padding-top: 24px; border-top: 2px solid #e5e7eb; }
.profile-stats .stat-item { display: flex; flex-direction: column; gap: 4px; }
.profile-stats .stat-value { font-size: 24px; font-weight: 700; color: #10b981; }
.profile-stats .stat-label { font-size: 12px; color: #6b7280; font-weight: 500; }
.profile-menu { background: white; padding: 16px; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); }
.profile-menu .menu-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #6b7280; text-decoration: none; border-radius: 12px; transition: all 0.3s ease; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
.profile-menu .menu-item:hover { background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); color: #10b981; }
.profile-menu .menu-item.active { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; }
.profile-menu .menu-item svg { width: 18px; height: 18px; }
.profile-content { display: flex; flex-direction: column; gap: 24px; }
.content-section { background: white; padding: 32px; border-radius: 20px; border: 2px solid rgba(229, 231, 235, 0.8); }
.content-section h2 { font-size: 20px; font-weight: 700; color: #1f2937; margin-bottom: 24px; }
.info-card { display: flex; flex-direction: column; gap: 20px; }
.info-item { display: flex; flex-direction: column; gap: 8px; }
.info-item label { font-size: 14px; font-weight: 600; color: #1f2937; }
.info-item input { padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 10px; font-size: 14px; transition: all 0.3s ease; }
.info-item input:focus { outline: none; border-color: #10b981; box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); }
.info-item input[readonly] { background: #f9fafb; color: #6b7280; }
.setting-item { display: flex; align-items: center; justify-content: space-between; padding: 20px; background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); border-radius: 12px; }
.setting-info { flex: 1; }
.setting-info h4 { font-size: 16px; font-weight: 600; color: #1f2937; margin-bottom: 4px; }
.setting-info p { font-size: 14px; color: #6b7280; }
.switch { position: relative; display: inline-block; width: 52px; height: 28px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background: #e5e7eb; transition: 0.3s; border-radius: 28px; }
.slider:before { position: absolute; content: ''; height: 22px; width: 22px; left: 3px; bottom: 3px; background: white; transition: 0.3s; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); }
input:checked + .slider { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
input:checked + .slider:before { transform: translateX(24px); }

/* Wrong Page */
.wrong-page { max-width: 1000px; margin: 0 auto; padding: 40px 20px; }
.empty-state { text-align: center; padding: 80px 40px; background: white; border-radius: 20px; border: 2px solid rgba(229, 231, 235, 0.8); }
.empty-icon { width: 80px; height: 80px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 24px; }
.empty-icon svg { width: 40px; height: 40px; color: #10b981; }
.empty-state h3 { font-size: 24px; font-weight: 700; color: #1f2937; margin-bottom: 12px; }
.empty-state p { font-size: 16px; color: #6b7280; margin-bottom: 32px; }
.wrong-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.stat-card { display: flex; align-items: center; gap: 20px; padding: 24px; background: white; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); transition: all 0.3s ease; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(16, 185, 129, 0.15); border-color: #10b981; }
.stat-icon { width: 56px; height: 56px; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 28px; height: 28px; color: #ef4444; }
.stat-info { display: flex; flex-direction: column; }
.stat-value { font-size: 28px; font-weight: 700; color: #1f2937; line-height: 1; }
.stat-label { font-size: 14px; color: #6b7280; font-weight: 500; }
.wrong-actions { display: flex; gap: 16px; margin-bottom: 32px; }
.wrong-list { display: flex; flex-direction: column; gap: 16px; }
.wrong-item { display: flex; align-items: flex-start; gap: 20px; padding: 24px; background: white; border-radius: 16px; border: 2px solid rgba(229, 231, 235, 0.8); transition: all 0.3s ease; }
.wrong-item:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); border-color: #10b981; }
.wrong-number { width: 40px; height: 40px; background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #ef4444; flex-shrink: 0; }
.wrong-content { flex: 1; }
.wrong-question { font-size: 16px; font-weight: 600; color: #1f2937; line-height: 1.6; margin-bottom: 12px; }
.wrong-answer { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.answer-label { font-size: 12px; color: #6b7280; font-weight: 500; padding: 4px 8px; background: #f3f4f6; border-radius: 4px; }
.answer-value { font-size: 14px; font-weight: 700; color: #10b981; }
.wrong-meta { display: flex; gap: 16px; }
.wrong-category { font-size: 12px; color: #6b7280; padding: 4px 10px; background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%); border-radius: 20px; }
.wrong-date { font-size: 12px; color: #9ca3af; }
.wrong-actions-item { display: flex; flex-direction: column; gap: 8px; }
.btn-text { background: transparent; border: none; color: #6b7280; font-size: 13px; cursor: pointer; transition: color 0.3s ease; }
.btn-text:hover { color: #ef4444; }

/* Exam Page - Modern Design */
.exam-page { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }

/* Exam Start */
.exam-start { background: white; border-radius: 20px; padding: 48px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); }
.start-header { text-align: center; margin-bottom: 40px; }
.start-header h1 { font-size: 36px; font-weight: 700; color: #1f2937; margin-bottom: 12px; }
.start-header p { font-size: 16px; color: #6b7280; }

/* Exam Selector */
.exam-selector { margin-bottom: 32px; }
.selector-group { margin-bottom: 24px; }
.selector-group label { display: block; font-size: 14px; font-weight: 600; color: #374151; margin-bottom: 12px; }
.selector-options { display: flex; flex-wrap: wrap; gap: 12px; }
.selector-btn { display: flex; flex-direction: column; align-items: center; padding: 16px 24px; background: white; border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; min-width: 100px; }
.selector-btn:hover { border-color: #10b981; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1); }
.selector-btn.active { background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: #10b981; color: white; }
.selector-btn .btn-title { font-size: 18px; font-weight: 700; margin-bottom: 4px; }
.selector-btn .btn-desc { font-size: 12px; color: #6b7280; }
.selector-btn.active .btn-desc { color: rgba(255,255,255,0.8); }

.start-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.start-card { display: flex; align-items: center; gap: 20px; padding: 24px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-radius: 16px; border: 1px solid #e2e8f0; transition: all 0.3s; }
.start-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-color: #10b981; }
.card-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.card-icon svg { width: 28px; height: 28px; }
.card-icon.questions { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
.card-icon.questions svg { color: #3b82f6; }
.card-icon.time { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.card-icon.time svg { color: #d97706; }
.card-icon.score { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
.card-icon.score svg { color: #10b981; }
.card-content { display: flex; flex-direction: column; }
.card-label { font-size: 13px; color: #6b7280; font-weight: 500; margin-bottom: 4px; }
.card-value { font-size: 24px; font-weight: 700; color: #1f2937; }

.start-tips { display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; }
.tip-item { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: #f8fafc; border-radius: 12px; }
.tip-dot { width: 8px; height: 8px; background: #10b981; border-radius: 50%; flex-shrink: 0; }
.tip-item span { font-size: 14px; color: #4b5563; }

.btn-start { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 18px 48px; font-size: 18px; font-weight: 600; color: white; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.btn-start svg { width: 24px; height: 24px; }
.btn-start:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }

/* Exam Container */
.exam-container { background: white; border-radius: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); overflow: hidden; }
.exam-header { display: flex; justify-content: space-between; align-items: center; padding: 24px 32px; background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 1px solid #e2e8f0; }
.header-left { display: flex; align-items: center; gap: 20px; flex: 1; }
.progress-badge { display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 700; color: #1f2937; }
.progress-badge span:first-child { color: #10b981; }
.progress-bar { width: 200px; height: 8px; background: #e2e8f0; border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, #10b981 0%, #059669 100%); border-radius: 4px; transition: width 0.3s; }
.timer-badge { display: flex; align-items: center; gap: 8px; padding: 10px 20px; background: white; border-radius: 10px; font-size: 18px; font-weight: 700; color: #1f2937; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.timer-badge svg { width: 20px; height: 20px; color: #6b7280; }
.timer-badge.warning { background: #fef3c7; color: #d97706; }
.timer-badge.warning svg { color: #d97706; }
.timer-badge.danger { background: #fee2e2; color: #dc2626; animation: pulse 1s infinite; }
.timer-badge.danger svg { color: #dc2626; }

.exam-body { display: flex; gap: 24px; padding: 32px; }
.question-section { flex: 1; }
.question-card { background: #f8fafc; border-radius: 16px; padding: 32px; margin-bottom: 24px; }
.question-text { font-size: 18px; font-weight: 600; color: #1f2937; line-height: 1.8; margin-bottom: 28px; }
.options { display: flex; flex-direction: column; gap: 12px; }
.opt-btn { display: flex; align-items: center; gap: 16px; padding: 18px 24px; background: white; border: 2px solid #e2e8f0; border-radius: 12px; cursor: pointer; transition: all 0.3s; text-align: left; }
.opt-btn:hover { border-color: #10b981; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.1); }
.opt-btn.selected { background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: #10b981; color: white; }
.opt-btn.selected:hover { box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3); }
.opt-label { width: 32px; height: 32px; background: #f1f5f9; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #64748b; flex-shrink: 0; }
.opt-btn.selected .opt-label { background: rgba(255,255,255,0.2); color: white; }
.opt-text { font-size: 15px; font-weight: 500; }

.exam-actions { display: flex; gap: 12px; }
.action-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; font-size: 15px; font-weight: 600; border-radius: 10px; cursor: pointer; transition: all 0.3s; border: none; }
.action-btn svg { width: 18px; height: 18px; }
.action-btn.secondary { background: #f1f5f9; color: #475569; }
.action-btn.secondary:hover { background: #e2e8f0; }
.action-btn.primary { background: linear-gradient(135deg, #10b981 0%, #059669 100%); color: white; box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.action-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4); }
.action-btn.success { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: white; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }
.action-btn.success:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4); }

.answer-sheet { width: 320px; background: #f8fafc; border-radius: 16px; padding: 24px; height: fit-content; }
.sheet-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.sheet-header h4 { font-size: 16px; font-weight: 700; color: #1f2937; }
.sheet-stats { display: flex; gap: 16px; }
.stat-item { display: flex; flex-direction: column; align-items: center; }
.stat-label { font-size: 11px; color: #6b7280; font-weight: 500; margin-bottom: 2px; }
.stat-value { font-size: 16px; font-weight: 700; color: #1f2937; }
.sheet-grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; margin-bottom: 20px; }
.sheet-btn { aspect-ratio: 1; border: 2px solid #e2e8f0; background: white; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; color: #64748b; transition: all 0.3s; }
.sheet-btn:hover { border-color: #10b981; color: #10b981; }
.sheet-btn.done { background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: #10b981; color: white; }
.sheet-btn.current { border-color: #3b82f6; border-width: 3px; color: #3b82f6; }
.sheet-legend { display: flex; gap: 16px; padding-top: 16px; border-top: 1px solid #e2e8f0; }
.legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #6b7280; }
.legend-dot { width: 14px; height: 14px; border: 2px solid #e2e8f0; border-radius: 4px; display: inline-block; }
.legend-dot.done { background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-color: #10b981; }
.legend-dot.current { border-color: #3b82f6; border-width: 3px; }

/* Exam Result */
.exam-result { max-width: 900px; margin: 0 auto; }
.result-card { text-align: center; padding: 48px 64px; border-radius: 20px; margin-bottom: 32px; box-shadow: 0 8px 32px rgba(0,0,0,0.1); }
.result-card.pass { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); border: 2px solid #10b981; }
.result-card.fail { background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%); border: 2px solid #ef4444; }
.result-icon { width: 80px; height: 80px; margin: 0 auto 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.result-card.pass .result-icon { background: white; }
.result-card.pass .result-icon svg { width: 40px; height: 40px; color: #10b981; }
.result-card.fail .result-icon { background: white; }
.result-card.fail .result-icon svg { width: 40px; height: 40px; color: #ef4444; }
.result-content { margin-bottom: 16px; }
.score-display { display: flex; align-items: baseline; justify-content: center; gap: 8px; margin-bottom: 16px; }
.score-num { font-size: 72px; font-weight: 800; line-height: 1; }
.result-card.pass .score-num { color: #10b981; }
.result-card.fail .score-num { color: #ef4444; }
.score-label { font-size: 24px; font-weight: 600; color: #6b7280; }
.result-status { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.result-card.pass .result-status { color: #10b981; }
.result-card.fail .result-status { color: #ef4444; }
.result-message { font-size: 16px; color: #6b7280; }

.result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px; }
.stat-card { display: flex; align-items: center; gap: 16px; padding: 24px; background: white; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.06); transition: all 0.3s; }
.stat-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
.stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 24px; height: 24px; }
.stat-icon.correct { background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%); }
.stat-icon.correct svg { color: #10b981; }
.stat-icon.used { background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); }
.stat-icon.used svg { color: #3b82f6; }
.stat-icon.rate { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.stat-icon.rate svg { color: #d97706; }
.stat-info { display: flex; flex-direction: column; }
.stat-info .stat-label { font-size: 13px; color: #6b7280; font-weight: 500; margin-bottom: 4px; }
.stat-info .stat-value { font-size: 24px; font-weight: 700; color: #1f2937; }

.result-actions { display: flex; justify-content: center; gap: 16px; }
.result-actions .action-btn { flex: 0 0 auto; }

/* Mobile Responsive */
@media (max-width: 768px) {
    .container { padding: 0 16px; }
    
    .header .container { height: 56px; }
    .logo { font-size: 18px; }
    .logo-icon { width: 24px; height: 24px; }
    
    .nav { display: none; }
    
    .user-area .btn { padding: 8px 16px; font-size: 13px; }
    
    .user-menu { padding: 4px 8px; gap: 6px; }
    .user-avatar-small { width: 18px; height: 18px; }
    .user-avatar-small svg { width: 18px; height: 18px; }
    .user-name { font-size: 12px; }
    .user-level { font-size: 10px; }
    .dropdown-arrow { width: 14px; height: 14px; }
    
    .user-dropdown { width: 260px; right: -8px; }
    .dropdown-header { padding: 16px; }
    .dropdown-avatar { width: 48px; height: 48px; }
    .dropdown-avatar svg { width: 24px; height: 24px; }
    .dropdown-info h4 { font-size: 15px; }
    .dropdown-info span { font-size: 13px; }
    .menu-item { padding: 10px 16px; font-size: 13px; }
    
    .main { padding: 20px 0; }
    
    .modules-grid { grid-template-columns: 1fr; gap: 12px; }
    .module-card { padding: 20px 16px; }
    .module-icon { width: 56px; height: 56px; }
    .module-icon svg { width: 28px; height: 28px; }
    .module-title { font-size: 18px; }
    .module-subtitle { font-size: 13px; }
    
    .stats-grid { grid-template-columns: 1fr; gap: 12px; }
    .stat-card { padding: 16px; }
    .stat-icon { width: 40px; height: 40px; }
    .stat-icon svg { width: 20px; height: 20px; }
    .stat-info .stat-label { font-size: 12px; }
    .stat-info .stat-value { font-size: 20px; }
    
    .tips-section { padding: 20px 16px; }
    .tips-grid { grid-template-columns: 1fr; gap: 12px; }
    .tip-item { padding: 12px; }
    .tip-item svg { width: 18px; height: 18px; min-width: 18px; }
    .tip-text { font-size: 13px; }
    
    .question-card { padding: 20px 16px; }
    .question-type { font-size: 13px; }
    .question-text { font-size: 15px; }
    .question-options { gap: 10px; }
    .option-btn { padding: 12px 16px; font-size: 14px; }
    .option-btn svg { width: 18px; height: 18px; }
    
    .subject-tabs { flex-direction: column; gap: 8px; }
    .subject-tab { padding: 12px 16px; }
    .subject-name { font-size: 16px; }
    .subject-subtitle { font-size: 12px; }
    
    .exam-options { flex-direction: column; gap: 12px; }
    .exam-option { padding: 16px; }
    .exam-option-title { font-size: 16px; }
    .exam-option-subtitle { font-size: 13px; }
    .exam-option-icon { width: 48px; height: 48px; }
    .exam-option-icon svg { width: 24px; height: 24px; }
    
    .exam-header { padding: 20px 16px; }
    .exam-title { font-size: 20px; }
    .exam-subtitle { font-size: 13px; }
    
    .exam-question { padding: 20px 16px; }
    .exam-question-text { font-size: 15px; }
    .exam-options { gap: 10px; }
    .exam-option-btn { padding: 12px 16px; font-size: 14px; }
    
    .exam-footer { padding: 16px; flex-direction: column; gap: 12px; }
    .exam-footer-left, .exam-footer-right { width: 100%; justify-content: center; }
    .exam-btn { padding: 12px 24px; font-size: 14px; }
    
    .sheet-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
    .sheet-btn { font-size: 12px; }
    
    .result-card { padding: 32px 24px; }
    .score-num { font-size: 48px; }
    .score-label { font-size: 18px; }
    .result-status { font-size: 20px; }
    .result-message { font-size: 14px; }
    
    .result-stats { grid-template-columns: 1fr; gap: 12px; }
    .stat-card { padding: 16px; }
    .stat-icon { width: 40px; height: 40px; }
    .stat-icon svg { width: 20px; height: 20px; }
    .stat-info .stat-label { font-size: 12px; }
    .stat-info .stat-value { font-size: 20px; }
    
    .result-actions { flex-direction: column; }
    .result-actions .action-btn { width: 100%; }
    
    .modal-content { padding: 32px 24px 24px; border-radius: 20px; }
    .modal-content .close { width: 32px; height: 32px; top: 12px; right: 12px; }
    .modal-header { margin-bottom: 24px; }
    .modal-header .modal-icon { width: 64px; height: 64px; margin-bottom: 16px; }
    .modal-content h3 { font-size: 22px; }
    .modal-content .modal-subtitle { font-size: 14px; }
    .modal-content input { padding: 14px 16px 14px 48px; font-size: 14px; }
    .modal-content button { padding: 14px; font-size: 15px; }
    .modal-features { flex-wrap: wrap; gap: 16px; }
    
    .wrong-empty { padding: 40px 20px; }
    .wrong-empty-icon { width: 80px; height: 80px; }
    .wrong-empty-icon svg { width: 40px; height: 40px; }
    .wrong-empty-title { font-size: 18px; }
    .wrong-empty-text { font-size: 14px; }
    
    .wrong-stats { grid-template-columns: 1fr; gap: 12px; }
    
    .wrong-question { padding: 16px; }
    .wrong-question-text { font-size: 14px; }
    .wrong-question-meta { font-size: 12px; }
    .wrong-question-meta svg { width: 14px; height: 14px; }
    
    .profile-header { padding: 24px 16px; flex-direction: column; text-align: center; }
    .profile-avatar { width: 80px; height: 80px; margin: 0 0 16px; }
    .profile-avatar svg { width: 40px; height: 40px; }
    .profile-info { margin-bottom: 16px; }
    .profile-name { font-size: 20px; }
    .profile-level { font-size: 14px; }
    .profile-stats { justify-content: center; }
    
    .profile-section { padding: 20px 16px; }
    .profile-section-title { font-size: 16px; }
    .profile-form-group { margin-bottom: 16px; }
    .profile-form-group label { font-size: 13px; }
    .profile-form-group input { padding: 12px 16px; font-size: 14px; }
    .profile-form-btn { padding: 14px; font-size: 15px; }
    
    .achievements-grid { grid-template-columns: 1fr; gap: 12px; }
    .achievement-card { padding: 20px 16px; }
    .achievement-icon { width: 56px; height: 56px; }
    .achievement-icon svg { width: 28px; height: 28px; }
    .achievement-title { font-size: 16px; }
    .achievement-desc { font-size: 13px; }
    .achievement-progress { font-size: 12px; }
    
    .leaderboard-list { gap: 12px; }
    .leaderboard-item { padding: 16px; }
    .leaderboard-rank { width: 32px; height: 32px; font-size: 14px; }
    .leaderboard-avatar { width: 40px; height: 40px; }
    .leaderboard-avatar svg { width: 20px; height: 20px; }
    .leaderboard-info { gap: 2px; }
    .leaderboard-name { font-size: 14px; }
    .leaderboard-level { font-size: 11px; }
    .leaderboard-score { font-size: 16px; }
    
    .charts-grid { grid-template-columns: 1fr; gap: 16px; }
    .chart-card { padding: 20px 16px; }
    .chart-title { font-size: 16px; }
    
    .reminders-list { gap: 12px; }
    .reminder-item { padding: 16px; }
    .reminder-time { font-size: 18px; }
    .reminder-text { font-size: 14px; }
}

@media (max-width: 480px) {
    .container { padding: 0 12px; }
    
    .header .container { height: 52px; }
    .logo { font-size: 16px; }
    .logo-icon { width: 20px; height: 20px; }
    
    .user-area .btn { padding: 6px 12px; font-size: 12px; }
    
    .user-dropdown { width: 240px; }
    
    .modules-grid { gap: 10px; }
    .module-card { padding: 16px 12px; }
    .module-icon { width: 48px; height: 48px; }
    .module-icon svg { width: 24px; height: 24px; }
    .module-title { font-size: 16px; }
    .module-subtitle { font-size: 12px; }
    
    .question-card { padding: 16px 12px; }
    .question-text { font-size: 14px; }
    .option-btn { padding: 10px 14px; font-size: 13px; }
    
    .sheet-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; }
    .sheet-btn { font-size: 11px; }
    
    .result-card { padding: 24px 16px; }
    .score-num { font-size: 40px; }
    .score-label { font-size: 16px; }
    
    .modal-content { padding: 24px 16px 20px; }
    .modal-header .modal-icon { width: 56px; height: 56px; }
    .modal-content h3 { font-size: 20px; }
    .modal-content input { padding: 12px 14px 12px 44px; font-size: 13px; }
    .modal-content button { padding: 12px; font-size: 14px; }
}