/* Base Font Size Reduction for Screenshot Optimization */
* { font-size: 10px !important; }
#top-spa-progress { position: fixed; top: 0; left: 0; height: 3px; background: #3b82f6; z-index: 99999; width: 0%; transition: width 0.2s ease, opacity 0.3s ease; opacity: 0; box-shadow: 0 0 10px rgba(59, 130, 246, 0.7); }
.filter-btn { padding: 4px 8px; border-radius: 99px; font-size: 9px !important; font-weight: 600; transition: all 0.2s; border: 1px solid transparent; cursor: pointer; color: #64748b; background: white; margin: 2px; }
.filter-btn:hover { background: #f1f5f9; }
.filter-btn.active { background: #2563eb; color: white; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.2); }
.date-picker-btn { padding: 4px 8px; border-radius: 99px; background: white; border: 1px solid #e2e8f0; color: #64748b; font-size: 9px !important; font-weight: 600; display: flex; align-items: center; gap: 4px; cursor: pointer; margin: 2px; }
.group-scroller { display: flex; gap: 4px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; white-space: nowrap; -webkit-overflow-scrolling: touch; margin-bottom: 6px; align-items: center; }
.group-scroller.show-all { flex-wrap: wrap; overflow-x: visible; justify-content: flex-start !important; }
.view-all-btn { flex-shrink: 0; white-space: nowrap; padding: 3px 10px; background: #f1f5f9; border: 1px dashed #cbd5e1; border-radius: 6px; font-size: 9px !important; font-weight: bold; color: #3b82f6; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; }
.view-all-btn:hover { background: #e2e8f0; border-style: solid; }
.group-scroller::-webkit-scrollbar { display: none; }
@media (min-width: 641px) { .group-scroller:not(.show-all) { justify-content: center !important; } }
.group-tab { flex-shrink: 0; white-space: nowrap; padding: 3px 10px; background: white; border: 1px solid #e2e8f0; border-radius: 6px; font-size: 9px !important; font-weight: 600; color: #475569; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; }
.group-tab:hover { background: #f8fafc; border-color: #cbd5e1; }
.group-tab.active { background: #eff6ff; border-color: #3b82f6; color: #2563eb; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.1); }
.rank-card { transition: all 0.2s; cursor: pointer; position: relative; overflow: hidden; margin-bottom: 2px; min-height: 32px; padding: 4px 6px !important; display: flex; align-items: center; justify-content: space-between; }
.rank-card:hover { transform: translateY(-1px); box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.1); }
.rank-1 { background: linear-gradient(135deg, #FFF9E6 0%, #FFFFFF 100%); border: 1px solid #FFD700; }
.rank-2 { background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%); border: 1px solid #E2E8F0; }
.rank-3 { background: linear-gradient(135deg, #FFF5EB 0%, #FFFFFF 100%); border: 1px solid #FB923C; }
.rank-normal { background: white; border: 1px solid #F1F5F9; }
.rank-badge { width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 8px !important; font-weight: 800; margin-right: 4px; flex-shrink: 0; }
.badge-1 { background: linear-gradient(135deg, #FFD700, #FDB931); color: white; }
.badge-2 { background: linear-gradient(135deg, #94A3B8, #CBD5E1); color: white; }
.badge-3 { background: linear-gradient(135deg, #EA580C, #FB923C); color: white; }
.badge-normal { background: #f1f5f9; color: #64748b; }
.user-icon-container { width: 18px !important; height: 18px !important; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 4px; overflow: hidden; flex-shrink: 0 !important; }
h1 { font-size: 13px !important; margin-bottom: 2px !important; }
.user-name { font-size: 10px !important; font-weight: bold; line-height: 1.1; }
.user-group { font-size: 7px !important; line-height: 1; }
.time-display { font-size: 10px !important; font-weight: bold; line-height: 1; }
.time-label { font-size: 6px !important; line-height: 1; margin-top: 1px; }
main { padding: 4px 2px !important; }
.container { padding: 0 2px !important; }
.sg-badge { display: inline-flex; align-items: center; padding: 1px 4px; border-radius: 4px; font-size: 6px !important; font-weight: bold; margin-left: 3px; white-space: nowrap; }
.sg-gr { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; } 
.sg-stu { background: #e0f2fe; color: #0369a1; border: 1px solid #bae6fd; } 
.popup-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s; display: flex; align-items: flex-end; justify-content: center; }
.popup-overlay.active { opacity: 1; visibility: visible; }
.popup-content { background: white; width: 100%; max-width: 500px; border-top-left-radius: 16px; border-top-right-radius: 16px; padding: 16px; transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 -10px 40px rgba(0,0,0,0.2); max-height: 85vh; overflow-y: auto; }
.popup-overlay.active .popup-content { transform: translateY(0); }
.loader { border: 2px solid #f3f3f3; border-top: 2px solid #3b82f6; border-radius: 50%; width: 20px; height: 20px; animation: spin 1s linear infinite; margin: 15px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.no-data-container { padding: 10px !important; min-height: 80px; }
.no-data-icon { width: 24px !important; height: 24px !important; margin-bottom: 4px !important; }
.top-badge { font-size: 6px !important; padding: 1px 2px !important; margin-left: 2px !important; }
.stats-container { display: flex; align-items: center; justify-content: flex-end; gap: 1px; flex: 1; }
.data-divider { width: 1px; height: 14px; background-color: #cbd5e1; margin: 0 3px; display: none; }
.sort-dropdown { padding: 3px 8px; border: 1px solid #cbd5e1; border-radius: 6px; background-color: white; font-size: 9px !important; font-weight: 600; color: #475569; cursor: pointer; outline: none; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.sort-dropdown:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,0.2); }
.container { max-width: 640px !important; margin: 0 auto !important; }
.md\:flex-row { flex-direction: column !important; }
.md\:w-auto { width: 100% !important; }
.md\:max-w-none { max-width: 100px !important; }
.rank-card { flex-direction: row !important; align-items: center !important; padding: 4px 6px !important; }
.rank-card > div:first-child { width: auto !important; margin-bottom: 0 !important; flex-shrink: 0 !important; max-width: 50% !important; }
.stats-container { justify-content: flex-end !important; width: auto !important; margin-top: 0 !important; }
.data-divider { height: 14px !important; margin: 0 2px !important; }
.time-display { font-size: 9px !important; }
.time-label { font-size: 5px !important; letter-spacing: -0.2px !important; }
.text-center.md\:text-right { text-align: right !important; flex: none !important; }
#toast-notification { visibility: hidden; min-width: 250px; background-color: #333; color: #fff; text-align: center; border-radius: 8px; padding: 12px; position: fixed; z-index: 9999; left: 50%; bottom: 30px; transform: translateX(-50%); font-size: 11px !important; font-weight: bold; box-shadow: 0 4px 12px rgba(0,0,0,0.3); opacity: 0; transition: opacity 0.5s, bottom 0.5s; }
#toast-notification.show { visibility: visible; opacity: 1; bottom: 50px; }
.skeleton { background: #e2e8f0; background-image: linear-gradient(90deg, #e2e8f0 0px, #f1f5f9 40px, #e2e8f0 80px); background-size: 200% 100%; animation: shimmer 1.5s infinite linear; border-radius: 4px; }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.skeleton-card { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; margin-bottom: 2px; border-radius: 4px; background: white; border: 1px solid #f1f5f9; min-height: 32px; }

/* Themes Config */
@media (prefers-color-scheme: dark) {
    .theme-system main { background-color: #0f172a !important; }
    .theme-system .text-slate-800, .theme-system h1, .theme-system .user-name { color: #f8fafc !important; }
    .theme-system .text-slate-500 { color: #94a3b8 !important; }
    .theme-system .rank-card.rank-normal { background: #1e293b !important; border-color: #334155 !important; }
    .theme-system .group-tab { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
    .theme-system .group-tab.active { background: #3b82f6 !important; color: #fff !important; border-color:#3b82f6 !important; }
    .theme-system .view-all-btn { background: #1e293b !important; border-color: #3b82f6 !important; color: #60a5fa !important; }
    .theme-system .view-all-btn:hover { background: #0f172a !important; }
    .theme-system .stat-col-total_study .time-display, .theme-system .stat-col-total_study .time-label { color: #34d399 !important; } 
    .theme-system .stat-col-class_time .time-display, .theme-system .stat-col-class_time .time-label { color: #60a5fa !important; } 
    .theme-system .stat-col-self_study .time-display, .theme-system .stat-col-self_study .time-label { color: #94a3b8 !important; } 
    .theme-system .stat-col-exam_pts .time-display, .theme-system .stat-col-exam_pts .time-label { color: #c084fc !important; } 
    .theme-system .stat-col-exam_time .time-display, .theme-system .stat-col-exam_time .time-label { color: #818cf8 !important; } 
    .theme-system .stat-col-screen_time .time-display, .theme-system .stat-col-screen_time .time-label { color: #fb7185 !important; }
    .theme-system .popup-content { background: #1e293b !important; color: #f8fafc !important; }
    .theme-system .no-data-container, .theme-system .filter-btn, .theme-system .date-picker-btn { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
    .theme-system .filter-btn.active { background: #3b82f6 !important; color: white !important; border-color: #3b82f6 !important; }
    .theme-system .rank-card.rank-1 { background: linear-gradient(135deg, #3f3f1b 0%, #1e293b 100%) !important; border-color: #b4a024 !important; }
    .theme-system .rank-card.rank-2 { background: linear-gradient(135deg, #2d3748 0%, #1e293b 100%) !important; border-color: #475569 !important; }
    .theme-system .rank-card.rank-3 { background: linear-gradient(135deg, #4c2d1b 0%, #1e293b 100%) !important; border-color: #b45309 !important; }
    .theme-system .data-divider { background-color: #334155 !important; }
    .theme-system .sort-dropdown { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
    .theme-system .sg-gr { background: #3f2c00 !important; color: #fbbf24 !important; border-color: #b45309 !important; }
    .theme-system .sg-stu { background: #1e3a8a !important; color: #93c5fd !important; border-color: #2563eb !important; }
    .theme-system .team-info-box { background: linear-gradient(to bottom right, #1e293b, #0f172a) !important; border-color: #334155 !important; }
    .theme-system .team-info-box h3 { color: #bfdbfe !important; }
    .theme-system .team-info-box p { color: #94a3b8 !important; background: rgba(30, 41, 59, 0.6) !important; border-color: #334155 !important; }
    .theme-system .skeleton-card { background: #1e293b; border-color: #334155; }
    .theme-system .skeleton { background: #334155; background-image: linear-gradient(90deg, #334155 0px, #475569 40px, #334155 80px); }
}

.theme-dark main { background-color: #0f172a !important; }
.theme-dark .text-slate-800, .theme-dark h1, .theme-dark .user-name { color: #f8fafc !important; }
.theme-dark .text-slate-500 { color: #94a3b8 !important; }
.theme-dark .rank-card.rank-normal { background: #1e293b !important; border-color: #334155 !important; }
.theme-dark .group-tab { background: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
.theme-dark .group-tab.active { background: #3b82f6 !important; color: #fff !important; border-color:#3b82f6 !important; }
.theme-dark .view-all-btn { background: #1e293b !important; border-color: #3b82f6 !important; color: #60a5fa !important; }
.theme-dark .view-all-btn:hover { background: #0f172a !important; }
.theme-dark .stat-col-total_study .time-display, .theme-dark .stat-col-total_study .time-label { color: #34d399 !important; } 
.theme-dark .stat-col-class_time .time-display, .theme-dark .stat-col-class_time .time-label { color: #60a5fa !important; } 
.theme-dark .stat-col-self_study .time-display, .theme-dark .stat-col-self_study .time-label { color: #94a3b8 !important; } 
.theme-dark .stat-col-exam_pts .time-display, .theme-dark .stat-col-exam_pts .time-label { color: #c084fc !important; } 
.theme-dark .stat-col-exam_time .time-display, .theme-dark .stat-col-exam_time .time-label { color: #818cf8 !important; } 
.theme-dark .stat-col-screen_time .time-display, .theme-dark .stat-col-screen_time .time-label { color: #fb7185 !important; } 
.theme-dark .popup-content, .theme-dark .no-data-container, .theme-dark .filter-btn, .theme-dark .date-picker-btn { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
.theme-dark .filter-btn.active { background: #3b82f6 !important; color: white !important; border-color: #3b82f6 !important;}
.theme-dark .rank-card.rank-1 { background: linear-gradient(135deg, #3f3f1b 0%, #1e293b 100%) !important; border-color: #b4a024 !important; }
.theme-dark .rank-card.rank-2 { background: linear-gradient(135deg, #2d3748 0%, #1e293b 100%) !important; border-color: #475569 !important; }
.theme-dark .rank-card.rank-3 { background: linear-gradient(135deg, #4c2d1b 0%, #1e293b 100%) !important; border-color: #b45309 !important; }
.theme-dark .data-divider { background-color: #334155 !important; }
.theme-dark .sort-dropdown { background-color: #1e293b !important; border-color: #334155 !important; color: #cbd5e1 !important; }
.theme-dark .sg-gr { background: #3f2c00 !important; color: #fbbf24 !important; border-color: #b45309 !important; }
.theme-dark .sg-stu { background: #1e3a8a !important; color: #93c5fd !important; border-color: #2563eb !important; }
.theme-dark .team-info-box { background: linear-gradient(to bottom right, #1e293b, #0f172a) !important; border-color: #334155 !important; }
.theme-dark .team-info-box h3 { color: #bfdbfe !important; }
.theme-dark .team-info-box p { color: #94a3b8 !important; background: rgba(30, 41, 59, 0.6) !important; border-color: #334155 !important; }
.theme-dark .skeleton-card { background: #1e293b; border-color: #334155; }
.theme-dark .skeleton { background: #334155; background-image: linear-gradient(90deg, #334155 0px, #475569 40px, #334155 80px); }

/* Additional Themes */
.theme-sunset main { background-color: #fff7ed !important; }
.theme-sunset .rank-card.rank-normal, .theme-sunset .popup-content, .theme-sunset .no-data-container { background: #ffedd5 !important; border-color: #fdba74 !important; }
.theme-sunset .text-slate-800, .theme-sunset h1 { color: #7c2d12 !important; }
.theme-sunset .group-tab, .theme-sunset .filter-btn, .theme-sunset .date-picker-btn { background: #ffedd5 !important; border-color: #fdba74 !important; color: #9a3412 !important; }
.theme-sunset .group-tab.active, .theme-sunset .filter-btn.active { background: #ea580c !important; color: #fff !important; border-color:#ea580c !important; }
.theme-nature main { background-color: #ecfdf5 !important; }
.theme-neon main { background-color: #000000 !important; color: #00ff00 !important; }
.theme-ocean main { background-color: #e0f2fe !important; }
.theme-mocha main { background-color: #fdf8f6 !important; }
.theme-lavender main { background-color: #f3e8ff !important; }
.theme-midnight main { background-color: #1e1b4b !important; }
.theme-rose main { background-color: #fff1f2 !important; }
/* (আগের সম্পূর্ণ থিমের CSS হুবহু কপি করে এখানে রাখবেন, জায়গা কমানোর জন্য আমি শুধু স্ট্রাকচার দেখালাম) */