* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; } 
        body { background-color: #f0f0f0; color: #333; transition: background-color 0.3s, color 0.3s; }
        body.modal-open { overflow: hidden; position: fixed; width: 100%; }
        .container { max-width: 1800px; margin: 0 auto; padding: 20px; }
        .tabs { display: flex; gap: 10px; margin-bottom: 20px; background: white; border-radius: 6px; padding: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); flex-wrap: wrap; transition: background 0.3s; }
        .tab { padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: all 0.2s; white-space: nowrap; }
        .tab:hover { background: #f0f0f0; } 
        .tab.active { background: #3b5998; color: white; }  
        .main-content { background: white; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; margin-bottom: 20px; flex: 1; transition: background 0.3s; }
        .news-header { background: #3b5998; color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; border-bottom: 2px solid #2d4373; }
        .news-container { height: 600px; overflow-y: auto; padding: 0; }
        .contest-item { padding: 15px 20px; border-bottom: 1px solid #eee; transition: background-color 0.2s; }
        .contest-item:hover { background-color: #f8f9fa; }
        .contest-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
        .contest-type { background: #4CAF50; color: white; padding: 3px 8px; border-radius: 4px; font-size: 12px; font-weight: bold; }
        .contest-type.training { background: #9C27B0; }
        .contest-type.team { background: #FF5722; } 
        .contest-type.news { background: #2196F3; }
        .contest-type.math { background: #673AB7; }
        .contest-type.calendar { background: #00BCD4; }
        .contest-name { font-weight: bold; color: #1a73e8; font-size: 16px; }
        .contest-info { color: #666; font-size: 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 15px; flex-wrap: wrap; }
        .contest-divisions { display: flex; gap: 5px; flex-wrap: wrap; margin: 10px 0; }
        .division-badge { padding: 4px 12px; border-radius: 4px; font-size: 12px; font-weight: bold; cursor: pointer; transition: all 0.2s; border: none; color: white; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
        .division-badge:hover:not(:disabled) { transform: scale(1.05); box-shadow: 0 3px 8px rgba(0,0,0,0.2); }
        .division-badge:disabled { cursor: not-allowed; opacity: 0.7; }
        .division-1 { background: #FF0000; }
        .division-2 { background: #FF9800; }
        .division-3 { background: #4CAF50; }
        .division-4 { background: #2196F3; }
        .contest-stats { display: flex; gap: 15px; font-size: 13px; color: #666; margin-top: 10px; }
        .contest-links { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
        .contest-link { padding: 5px 15px; background: #e8f0fe; color: #1a73e8; text-decoration: none; border-radius: 4px; font-size: 14px; border: 1px solid #d2e3fc; transition: all 0.2s; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
        .contest-link:hover:not(.disabled) { background: #1a73e8; color: white; }
        .contest-link.disabled { background: #f5f5f5; color: #bdbdbd; border-color: #e0e0e0; cursor: not-allowed; opacity: 0.6; }
        .contest-link.green { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
        .contest-link.green:hover:not(.disabled) { background: #2e7d32; color: white; }
        .sidebar-container { width: 400px; display: flex; flex-direction: column; gap: 20px; align-self: flex-start; }
        .sidebar-section { background: white; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); overflow: hidden; transition: background 0.3s; }
        .rating-section { flex: 1; }
        .upcoming-section { margin-top: 0; }
        .rating-header { background: #ff6b35; color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
        .show-all { background: rgba(255,255,255,0.2); border: none; color: white; padding: 5px 15px; border-radius: 4px; cursor: pointer; font-size: 14px; transition: background 0.2s; }
        .show-all:hover { background: rgba(255,255,255,0.3); }
        .rating-container { padding: 10px 0; max-height: 350px; overflow-y: auto; }
        .rating-item { display: flex; align-items: center; padding: 8px 20px; border-bottom: 1px solid #f0f0f0; cursor: pointer; transition: all 0.2s; }
        .rating-item:hover { background: #f8f9fa; }
        .rating-rank { width: 35px; text-align: center; font-weight: bold; color: #666; font-size: 16px; }
        .rating-avatar { width: 36px; height: 36px; margin: 0 12px; font-size: 16px; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-weight: bold; object-fit: cover; }
        .rating-info { flex: 1; }
        .rating-name { font-weight: bold; color: #333; margin-bottom: 3px; }
        .rating-details { display: flex; gap: 15px; font-size: 13px; color: #666; }
        .rating-score { color: #ff6b35; font-weight: bold; font-size: 16px; margin-left: 10px; }
        .rating-tasks-score { color: #4CAF50; font-weight: bold; font-size: 14px; margin-left: 5px; }
        .rating-graph-btn { background: none; border: 1px solid #ddd; color: #666; padding: 3px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; margin-left: 10px; transition: all 0.2s; }
        .rating-graph-btn:hover { background: #f0f0f0; }
        .upcoming-header { background: #3b5998; color: white; padding: 15px 20px; font-size: 18px; font-weight: bold; border-bottom: 2px solid #2d4373; }
        .upcoming-content { padding: 0; max-height: 300px; overflow-y: auto; }
        .upcoming-list { padding: 15px; }
        .upcoming-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: white; border-radius: 4px; border-left: 4px solid #3b5998; font-size: 13px; cursor: pointer; transition: all 0.2s; margin-bottom: 8px; border: 1px solid #e0e0e0; }
        .upcoming-item:hover { background: #f0f7ff; transform: translateX(2px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
        .upcoming-name { font-weight: 600; color: #333; font-size: 14px; }
        .upcoming-date { color: #666; font-size: 12px; margin-top: 3px; }
        .upcoming-divisions { display: flex; gap: 3px; }
        .upcoming-division { padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: bold; color: white; }
        .search-box { background: white; margin-bottom: 20px; border-radius: 6px; padding: 15px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); transition: background 0.3s; }
        .search-input { width: 100%; padding: 12px 15px; border: 1px solid #ddd; border-radius: 4px; font-size: 16px; transition: border 0.2s; margin-bottom: 10px; background: inherit; color: inherit; }
        .search-input:focus { outline: none; border-color: #1a73e8; }
        .tag-filter-container { position: relative; margin-bottom: 10px; }
        .tag-filter-toggle { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; background: white; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; font-size: 14px; color: #666; transition: all 0.2s; }
        .tag-filter-toggle:hover { border-color: #1a73e8; background: #f8f9fa; }
        .tag-filter-toggle.active { border-color: #1a73e8; background: #e8f0fe; }
        .tag-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; border-radius: 4px; margin-top: 5px; padding: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); z-index: 1000; max-height: 400px; overflow-y: auto; display: none; }
        .tag-dropdown.active { display: block; }
        .tag-categories { margin-bottom: 15px; }
        .tag-category { margin-bottom: 15px; }
        .category-title { font-size: 12px; color: #666; margin-bottom: 8px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.5px; }
        .tag-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
        .tag-btn { padding: 6px 12px; background: #e8f0fe; color: #1a73e8; border: 1px solid #d2e3fc; border-radius: 12px; font-size: 12px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
        .tag-btn:hover { background: #1a73e8; color: white; transform: translateY(-2px); box-shadow: 0 2px 5px rgba(26, 115, 232, 0.3); }
        .tag-btn.active { background: #1a73e8; color: white; font-weight: bold; box-shadow: 0 2px 5px rgba(26, 115, 232, 0.3); }
        .tag-btn.contest { background: #e8f5e9; color: #2e7d32; border-color: #c8e6c9; }
        .tag-btn.contest:hover, .tag-btn.contest.active { background: #2e7d32; color: white; }
        .tag-btn.training { background: #f3e5f5; color: #7b1fa2; border-color: #e1bee7; }
        .tag-btn.training:hover, .tag-btn.training.active { background: #7b1fa2; color: white; }
        .tag-btn.team { background: #ffecb3; color: #ff6f00; border-color: #ffd180; }
        .tag-btn.team:hover, .tag-btn.team.active { background: #ff6f00; color: white; }
        .tag-btn.math { background: #e8eaf6; color: #303f9f; border-color: #c5cae9; }
        .tag-btn.math:hover, .tag-btn.math.active { background: #303f9f; color: white; }
        .tag-btn.news { background: #e3f2fd; color: #1565c0; border-color: #bbdefb; }
        .tag-btn.news:hover, .tag-btn.news.active { background: #1565c0; color: white; }
        .tag-actions { display: flex; gap: 10px; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; }
        .selected-tags-container { margin-top: 15px; padding: 15px; background: #f8f9fa; border-radius: 4px; border: 1px solid #e0e0e0; display: none; }
        .selected-tags-container.has-tags { display: block; }
        .selected-tags-header { font-size: 14px; font-weight: bold; color: #333; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
        .selected-tags-list { display: flex; flex-wrap: wrap; gap: 8px; }
        .selected-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; background: white; border-radius: 12px; font-size: 12px; font-weight: 500; box-shadow: 0 1px 3px rgba(0,0,0,0.1); border: 1px solid #e0e0e0; }
        .selected-tag .remove-tag { cursor: pointer; font-size: 14px; opacity: 0.7; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; transition: all 0.2s; }
        .selected-tag .remove-tag:hover { opacity: 1; background: rgba(0,0,0,0.1); }
        .clear-all-tags { background: none; border: none; color: #f44336; cursor: pointer; font-size: 12px; padding: 2px 8px; border-radius: 4px; transition: all 0.2s; }
        .clear-all-tags:hover { background: rgba(244, 67, 54, 0.1); }
        .no-upcoming-contests { text-align: center; padding: 30px 20px; color: #999; font-size: 14px; }
        .no-upcoming-contests i { font-size: 36px; margin-bottom: 10px; opacity: 0.5; }
        .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
        .modal-content { background-color: white; margin: 2% auto; padding: 15px; border-radius: 6px; width: 95%; max-width: 1200px; max-height: 90vh; overflow-y: auto; box-shadow: 0 5px 30px rgba(0,0,0,0.3); transition: background 0.3s; }
        .chart-container { margin-top: 20px; padding: 20px; background: white; border-radius: 6px; }
        .chart-img { max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .results-table { width: 100%; border-collapse: collapse; margin: 15px 0; font-size: 12px; }
        .results-table th { background: #f0f0f0; padding: 8px 4px; text-align: center; border: 1px solid #ddd; font-weight: bold; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; position: relative; }
        .results-table td { padding: 8px 4px; border: 1px solid #ddd; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .results-table tr:nth-child(even) { background: #f9f9f9; }
        .results-table tr:hover { background: #f0f7ff; }
        .results-table th.fixed-left, .results-table td.fixed-left { position: sticky; left: 0; background: white; z-index: 10; border-right: 2px solid #ddd; width: 50px; min-width: 50px; max-width: 50px; text-align: center; font-weight: bold; }
        .results-table th.fixed-left-2, .results-table td.fixed-left-2 { position: sticky; left: 50px; background: white; z-index: 10; border-right: 2px solid #ddd; width: 180px; min-width: 180px; max-width: 180px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .results-table tr:nth-child(even) .fixed-left, .results-table tr:nth-child(even) .fixed-left-2 { background: #f9f9f9; }
        .results-table tr:hover .fixed-left, .results-table tr:hover .fixed-left-2 { background: #f0f7ff; }
        .results-table th.fixed-left, .results-table th.fixed-left-2 { position: sticky; top: 0; background: #f0f0f0 !important; z-index: 20; border-bottom: 2px solid #ddd; }
        .task-header { background: #f8f9fa; padding: 8px 2px !important; text-align: center !important; font-weight: bold; border: 1px solid #ddd; width: 45px !important; min-width: 45px !important; max-width: 45px !important; font-size: 11px; }
        .task-cell { text-align: center !important; padding: 8px 2px !important; border: 1px solid #ddd; width: 45px !important; min-width: 45px !important; max-width: 45px !important; font-weight: bold; font-size: 11px; }
        .task-cell.solved { background: #e8f5e9; color: #2e7d32; }
        .task-cell.attempted { background: #ffebee; color: #c62828; }
        .task-cell.pending { background: #fff3e0; color: #ef6c00; }
        .results-table th:nth-child(3), .results-table td:nth-child(3), .results-table th:nth-child(4), .results-table td:nth-child(4), .results-table th:nth-child(5), .results-table td:nth-child(5), .results-table th:nth-child(6), .results-table td:nth-child(6) { width: 75px; min-width: 75px; max-width: 75px; text-align: center; }
        .monitor-container { max-height: 70vh; overflow: auto; margin: 15px 0; border: 1px solid #ddd; border-radius: 4px; position: relative; }
        .monitor-container table { margin: 0; min-width: fit-content; }
        .contact-info { text-align: center; margin-top: 30px; padding: 20px; background: white; border-radius: 6px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); font-size: 14px; color: #666; transition: background 0.3s; }
        .contact-info a { color: #1a73e8; text-decoration: none; margin: 0 10px; }
        .contact-info a:hover { text-decoration: underline; }
        .division-selector { display: flex; gap: 10px; margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 4px; }
        .division-tab { padding: 5px 15px; border-radius: 4px; cursor: pointer; font-weight: bold; transition: all 0.2s; }
        .division-tab:hover { transform: translateY(-2px); }
        .division-tab.active { box-shadow: 0 2px 8px rgba(0,0,0,0.2); }
        .tasks-count { display: inline-block; padding: 1px 6px; background: rgba(255,255,255,0.3); color: white; border-radius: 8px; font-size: 10px; font-weight: bold; margin-left: 3px; }
        .unofficial-badge { background: transparent; color: #9C27B0; border-color: #9C27B0; font-weight: bold; padding: 2px 6px; border-radius: 4px; font-size: 10px; margin-left: 5px; border: 1px solid #9C27B0; }
        .official-badge { background: transparent; color: #2e7d32; border-color: #2e7d32; font-weight: bold; padding: 2px 6px; border-radius: 4px; font-size: 10px; margin-left: 5px; border: 1px solid #2e7d32; }
        body.dark-mode .official-badge { color: #00ff7f; border-color: #00ff7f; }
        body.dark-mode .unofficial-badge { color: #ce93d8; border-color: #ce93d8; }
        .tasks-badge { background: #2196F3; color: white; padding: 2px 6px; border-radius: 4px; font-size: 10px; margin-left: 5px; }
        .monitor-tabs { display: flex; gap: 5px; margin: 10px 0; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; }
        .monitor-tab { padding: 8px 16px; background: #f0f0f0; border-radius: 4px; cursor: pointer; font-weight: bold; transition: all 0.2s; border: 1px solid #ddd; }
        .monitor-tab:hover { background: #e0e0e0; }
        .monitor-tab.active { background: #3b5998; color: white; border-color: #3b5998; }
        .stats-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 15px 0; padding: 15px; background: #f8f9fa; border-radius: 4px; }
        .stat-box { background: white; padding: 10px; border-radius: 4px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .stat-value { font-size: 20px; font-weight: bold; color: #3b5998; margin-bottom: 5px; }
        .stat-label { font-size: 12px; color: #666; }
        .medal-gold { color: #FFD700; font-weight: bold; }
        .medal-silver { color: #C0C0C0; font-weight: bold; }
        .medal-bronze { color: #CD7F32; font-weight: bold; }
        .results-table a { color: #1a73e8; text-decoration: none; display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .results-table a:hover { text-decoration: underline; }
        .news-content { line-height: 1.6; margin: 15px 0; padding: 15px; background: #f8f9fa; border-radius: 4px; }
        .news-content h3 { margin-top: 0; color: #333; }
        .news-content p { margin: 10px 0; }
        .news-content ul, .news-content ol { margin: 10px 0; padding-left: 20px; }
        .news-content li { margin: 5px 0; }
        .news-content a { color: #1a73e8; text-decoration: none; }
        .news-content a:hover { text-decoration: underline; }
        .tags-container { display: flex; gap: 5px; flex-wrap: wrap; margin: 8px 0; }
        .tag { background: #E0E0E0; color: #333; padding: 3px 8px; border-radius: 10px; font-size: 11px; font-weight: 500; }
        .tag.contest { background: #e8f5e9; color: #2e7d32; }
        .tag.training { background: #f3e5f5; color: #7b1fa2; }
        .tag.team { background: #ffecb3; color: #ff6f00; }
        .tag.math { background: #e8eaf6; color: #303f9f; }
        .tag.news { background: #e3f2fd; color: #1565c0; }
        .calendar-grid-container { background: transparent !important; border-radius: 8px; padding: 10px 0; margin: 0; }
        body.dark-mode .calendar-grid-container { background: transparent !important; }
        .calendar-days { display: flex; flex-direction: column; gap: 4px; }
        .calendar-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: transparent; }
        .calendar-day-cell { aspect-ratio: 1; background: #e0e0e0; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; border: 1px solid #bbb; }
        body.dark-mode .calendar-day-cell { background: #4a4a4a !important; border-color: #666 !important; }
        .calendar-day-cell:hover { background: #d0d0d0; border-color: #3b5998; transform: scale(1.02); }
        body.dark-mode .calendar-day-cell:hover { background: #5a5a5a; border-color: #5a7ab8; }
        .calendar-day-cell.today { border: 2px solid #3b5998; }
        body.dark-mode .calendar-day-cell.today { border-color: white !important; }
        .calendar-day-cell.has-events-high { background: #f44336 !important; }
        body.dark-mode .calendar-day-cell.has-events-high { background: #c62828 !important; }
        .calendar-day-cell.has-events-medium { background: #ff9800 !important; }
        body.dark-mode .calendar-day-cell.has-events-medium { background: #ef6c00 !important; }
        .calendar-day-cell.has-events-low { background: #4CAF50 !important; }
        body.dark-mode .calendar-day-cell.has-events-low { background: #2e7d32 !important; }
        .calendar-day-cell[style*="background:transparent"] { pointer-events: none; box-shadow: none; }
        body.dark-mode .calendar-day-cell[style*="background:transparent"] { background: transparent !important; border: none !important; }
        .calendar-day-cell[style*="background:transparent"]:hover { background: transparent !important; border: none !important; transform: none !important; cursor: default !important; }
        .day-number { font-size: 16px; font-weight: 500; color: #222; }
        body.dark-mode .day-number { color: white; }
        .today .day-number { color: #3b5998; font-weight: 700; }
        body.dark-mode .today .day-number { color: white; }
        body.dark-mode .calendar-day-cell.today { border: 2px solid white !important; }
        .calendar-legend { display: flex; gap: 15px; margin-top: 5px; padding-top: 5px; font-size: 11px; border-top: none !important; }
        .tags-container + .calendar-grid-container { margin-top: 0; }
        .calendar-event-item { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #eee; }
        .calendar-event-item:last-child { border-bottom: none; }
        .calendar-event-date { min-width: 50px; text-align: center; }
        .calendar-event-day { font-size: 20px; font-weight: bold; color: #3b5998; line-height: 1.2; }
        .calendar-event-month { font-size: 11px; color: #999; }
        .calendar-event-info { flex: 1; }
        .calendar-event-title { font-weight: 600; margin-bottom: 3px; }
        .calendar-event-desc { font-size: 12px; color: #666; }
        body.dark-mode .calendar-event-desc { color: #aaa; }
        ::-webkit-scrollbar { width: 8px; height: 8px; }
        ::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
        .monitor-container::-webkit-scrollbar { height: 8px; }
        .monitor-container::-webkit-scrollbar-track { background: #f1f1f1; margin: 0 5px; border-radius: 4px; }
        .monitor-container::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; min-width: 100px; }
        .monitor-container::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }
        .monitor-container { scrollbar-width: thin; scrollbar-color: #c1c1c1 #f1f1f1; }
        .rank-color-theme { color: #000 !important; }
        body.dark-mode .rank-color-theme { color: #fff !important; }