:root{--primary-color:#4CAF50;--primary-hover:#45a049;--primary-active:#2a832d;--secondary-color:#2196F3;--secondary-hover:#1976D2;--bg-primary:#f5f7fa;--bg-secondary:#fff;--bg-card:#fff;--text-primary:#333;--text-secondary:#666;--text-muted:#888;--text-light:#999;--border-color:#e8e8e8;--border-light:#eee;--border-focus:#4CAF50;--shadow-sm:0 2px 8px rgba(0,0,0,0.04);--shadow-md:0 4px 12px rgba(0,0,0,0.08);--shadow-lg:0 8px 24px rgba(0,0,0,0.12);--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-full:50px;--spacing-xs:6px;--spacing-sm:10px;--spacing-md:16px;--spacing-lg:24px;--spacing-xl:32px;--gold:#FFD700;--silver:#C0C0C0;--bronze:#B87333;--highlight:#FF9800;--success-bg:#e8f5e9;--success-color:#2e7d32;--error-bg:#ffebee;--error-color:#c62828;--transition-fast:0.2s ease;--transition-normal:0.3s ease}body.dark-mode{--bg-primary:#1a1d23;--bg-secondary:#242830;--bg-card:#2a2f38;--text-primary:#e8e8e8;--text-secondary:#aaa;--text-muted:#777;--text-light:#666;--border-color:#3a3f48;--border-light:#3a3f48;--border-focus:#00ADB5;--primary-color:#00ADB5;--primary-hover:#00CED1;--primary-active:#009DAE;--secondary-color:#00ADB5;--secondary-hover:#00FFF5;--shadow-sm:0 2px 8px rgba(0,0,0,0.2);--shadow-md:0 4px 12px rgba(0,0,0,0.25);--shadow-lg:0 8px 24px rgba(0,173,181,0.15);--success-bg:rgba(0,173,181,0.15);--success-color:#00CED1;--error-bg:rgba(255,82,82,0.15);--error-color:#ff5252;--silver:#E0E0E0;--bronze:#CD7F32}*{box-sizing:border-box;margin:0;padding:0}body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh}.container{width:100%;max-width:100%;margin:0 auto;padding:var(--spacing-md);background-color:var(--bg-secondary);min-height:100vh}.level-icon,.level-icon-img{width:18px;height:auto;vertical-align:middle;flex-shrink:0;object-fit:contain;display:inline-block}.level-badge,.level-title-img{width:60px;height:auto;vertical-align:middle;flex-shrink:0;object-fit:contain;display:inline-block}.level-icons-container,.level-icons-display,.icons-wrapper,.level-icons-group{display:inline-flex;align-items:center;flex-wrap:wrap;gap:2px}.level-display-wrapper{display:inline-flex;align-items:center;gap:6px}.level-title-container,.title-wrapper{display:inline-flex;align-items:center;flex-shrink:0}.select2-results__option .level-display-wrapper,.select2-selection__rendered .level-display-wrapper{gap:4px}.select2-results__option .level-icon,.select2-results__option .level-icon-img,.select2-selection__rendered .level-icon,.select2-selection__rendered .level-icon-img{width:20px;height:auto}.select2-results__option .level-badge,.select2-results__option .level-title-img,.select2-selection__rendered .level-badge,.select2-selection__rendered .level-title-img{width:65px;height:auto}.level-filter-icons .level-icon,.level-filter-icons .level-icon-img,.level-filter-option .level-icon,.level-filter-option .level-icon-img{width:15px;height:auto}.card{background-color:var(--bg-card);border-radius:var(--radius-md);border:1px solid var(--border-color);margin-bottom:var(--spacing-md);overflow:hidden;transition:box-shadow var(--transition-fast);display:block}.card-header{display:flex;align-items:center;gap:var(--spacing-sm);padding:var(--spacing-sm) var(--spacing-md);background-color:var(--bg-primary);border-bottom:1px solid var(--border-color)}body.dark-mode .card-header{background-color:rgba(0,173,181,0.08)}.card-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;background-color:rgba(76,175,80,0.1);border-radius:var(--radius-sm);flex-shrink:0}.card-icon i{color:var(--primary-color);font-size:14px}body.dark-mode .card-icon{background-color:rgba(0,173,181,0.15)}.card-title{font-size:14px;font-weight:600;color:var(--text-primary)}.card-body{padding:var(--spacing-md)}.qq-input,.level-input,.add-qq-input,.filter-select{width:100%;padding:12px 14px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:15px;background-color:var(--bg-secondary);color:var(--text-primary);transition:border-color var(--transition-fast),box-shadow var(--transition-fast);-webkit-appearance:none;appearance:none}.qq-input:focus,.level-input:focus,.add-qq-input:focus,.filter-select:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(76,175,80,0.1)}body.dark-mode .qq-input,body.dark-mode .level-input,body.dark-mode .add-qq-input,body.dark-mode .filter-select{background-color:var(--bg-primary);border-color:var(--border-color)}body.dark-mode .qq-input:focus,body.dark-mode .level-input:focus,body.dark-mode .add-qq-input:focus,body.dark-mode .filter-select:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,173,181,0.15)}.fetch-btn,.calc-btn,.add-qq-btn{padding:12px 20px;background-color:var(--primary-color);color:white;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.fetch-btn:active,.calc-btn:active,.add-qq-btn:active{background-color:var(--primary-active);transform:translateY(0)}.add-qq-btn:disabled{background-color:#ccc;cursor:not-allowed;transform:none}.filter-confirm-btn{padding:0 20px;background-color:var(--primary-color);color:white;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;height:44px}.filter-confirm-btn:active{background-color:var(--primary-active)}body.dark-mode .filter-confirm-btn{background-color:var(--primary-color)}.app-header{margin-bottom:var(--spacing-lg)}.logo-title-container{display:flex;align-items:center;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.app-logo{width:48px;height:48px;border-radius:50%;cursor:pointer;box-shadow:-8px 5px 10px rgba(0,0,0,0.5);transition:transform var(--transition-fast),box-shadow var(--transition-fast);flex-shrink:0}.app-logo:active{transform:scale(0.98);box-shadow:var(--shadow-sm)}.title{font-size:20px;font-weight:700;color:var(--text-primary);margin:0}body.dark-mode .title{color:var(--primary-color)}.logo-title-container-rank{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg) 0;text-align:center}.logo-title-container-rank img{width:64px;height:64px;border-radius:50%;cursor:pointer;box-shadow:-8px 5px 10px rgba(0,0,0,0.5);transition:transform var(--transition-fast)}.logo-title-container-rank img:active{transform:scale(0.98)}body.dark-mode .logo-title-container-rank img,body.dark-mode .app-logo{box-shadow:-8px 5px 10px rgba(0,173,181,0.75)}.nav-bar{display:flex;gap:var(--spacing-sm);flex-wrap:wrap}.nav-btn{flex:1;min-width:0;padding:10px 12px;font-size:13px;font-weight:500;border-radius:var(--radius-sm);background-color:var(--primary-color);color:white;text-decoration:none;cursor:pointer;border:none;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.nav-btn:active{background-color:var(--primary-active);transform:translateY(0)}body.dark-mode .nav-btn{background-color:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color)}body.dark-mode .nav-btn:active{background-color:var(--primary-active);color:#000;border-color:var(--primary-active)}.control-bar{display:flex;justify-content:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-lg);flex-wrap:wrap}.theme-switch,.nav-link,.tools-btn{padding:10px 16px;font-size:13px;font-weight:500;border-radius:var(--radius-sm);background-color:var(--primary-color);color:white;text-decoration:none;cursor:pointer;border:none;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:6px}.theme-switch:active,.nav-link:active,.tools-btn:active{background-color:var(--primary-active)}body.dark-mode .theme-switch,body.dark-mode .nav-link,body.dark-mode .tools-btn{background-color:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color)}body.dark-mode .theme-switch:active,body.dark-mode .nav-link:active,body.dark-mode .tools-btn:active{background-color:var(--primary-active);color:#000;border-color:var(--primary-active)}.tools-btn.has-filter{position:relative}.tools-btn.has-filter::after{content:'';position:absolute;top:-4px;right:-4px;width:10px;height:10px;background-color:var(--highlight);border-radius:50%;border:2px solid var(--bg-secondary)}.qq-input-row{display:flex;gap:var(--spacing-sm)}.qq-input-row .qq-input{flex:1;min-width:0}.qq-info-display{width:100%;display:flex;align-items:center;gap:var(--spacing-md);margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:var(--bg-primary);border-radius:var(--radius-md)}body.dark-mode .qq-info-display{background-color:rgba(0,173,181,0.08)}.qq-avatar{width:48px;height:48px;border-radius:50%;border:2px solid var(--border-color);object-fit:cover;flex-shrink:0}body.dark-mode .qq-avatar{border-color:var(--primary-color)}.qq-details{display:flex;flex-direction:column;gap:2px;min-width:0}.qq-nickname{font-size:15px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.qq-number-display{font-size:13px;color:var(--text-muted);font-family:'SF Mono',Monaco,monospace}.qq-info-display[style*="display:none"]{display:none !important}.style-row{display:grid;grid-template-columns:1fr;gap:var(--spacing-md)}.style-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.style-item label{font-size:12px;font-weight:500;color:var(--text-secondary)}.style-item select{width:100%;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;background-color:var(--bg-secondary);color:var(--text-primary);cursor:pointer}body.dark-mode .style-item select{background-color:var(--bg-primary);border-color:var(--border-color)}.level-input-group{margin-bottom:var(--spacing-md)}.level-input-group:last-of-type{margin-bottom:var(--spacing-lg)}.level-input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-xs);flex-wrap:wrap;gap:var(--spacing-xs)}.level-input-header label{font-size:13px;font-weight:500;color:var(--text-secondary);display:flex;align-items:center;gap:4px}body.dark-mode .level-input-header label{color:var(--text-primary)}.level-input-header label i{color:var(--text-muted);font-size:12px}body.dark-mode .level-input-header label i{color:var(--primary-color)}.active-days-badge{font-size:12px;color:var(--highlight);font-weight:500}.help-link{font-size:12px;color:var(--secondary-color);text-decoration:none;display:flex;align-items:center;gap:4px;transition:color var(--transition-fast)}body.dark-mode .help-link{color:var(--primary-color)}.calc-card .level-icons-display{min-height:24px;margin-top:var(--spacing-sm)}.calc-btn{width:100%;padding:14px;font-size:15px;border-radius:var(--radius-md)}.result-box{margin-top:var(--spacing-md);padding:var(--spacing-md);background-color:#e3f2fd;border:1px solid #90caf9;border-radius:var(--radius-md);font-size:14px;line-height:1.8;color:var(--text-primary);display:block}body.dark-mode .result-box{background-color:rgba(0,173,181,0.1);border-color:var(--primary-color)}.result-box[style*="display:none"]{display:none !important}.ranking-container{margin-top:var(--spacing-md);padding-bottom:100px}.stats-card{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;align-items:end;background-color:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-lg) var(--spacing-md);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}.stat-item{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 var(--spacing-xs)}.stat-value{font-size:20px;font-weight:800;color:var(--text-primary);line-height:1.2;margin-bottom:4px}.stat-value.highlight{color:var(--highlight)}.stat-value.stat-time{font-size:16px;font-weight:600;line-height:1.4;white-space:pre-line;color:var(--text-secondary)}body.dark-mode .stat-value.stat-time{color:var(--primary-color)}.stat-label{font-size:11px;color:var(--text-muted);font-weight:500}body.dark-mode .stat-label{color:var(--text-secondary)}.stat-divider{width:1px;height:40px;background-color:var(--border-color)}.update-notice{text-align:center;font-size:12px;color:var(--text-muted);margin-bottom:var(--spacing-lg);padding:var(--spacing-sm) var(--spacing-md);background-color:rgba(0,0,0,0.03);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;gap:6px}body.dark-mode .update-notice{background-color:rgba(255,255,255,0.03);color:var(--text-secondary)}.add-qq-card{background-color:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-md) var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-color)}.add-qq-header{display:flex;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-md);color:var(--text-primary);font-weight:600;font-size:14px}.add-qq-header i{font-size:16px;color:var(--primary-color)}.add-qq-body{display:flex;gap:var(--spacing-sm);flex-direction:column}.add-qq-input{flex:1}.add-qq-result{margin-top:var(--spacing-sm);padding:var(--spacing-md);border-radius:var(--radius-sm);font-size:13px;display:none}.add-qq-result.success{background-color:var(--success-bg);color:var(--success-color)}.add-qq-result.error{background-color:var(--error-bg);color:var(--error-color)}.filter-bar{display:flex;flex-wrap:wrap;gap:var(--spacing-md);margin-bottom:var(--spacing-md);align-items:flex-end}.filter-item{display:flex;flex-direction:column;gap:var(--spacing-xs);flex:1;min-width:120px}.filter-item label{font-size:12px;font-weight:500;color:var(--text-secondary)}.filter-actions{display:flex;align-items:flex-end}.filter-result-count{text-align:center;font-size:13px;color:var(--text-secondary);padding:var(--spacing-sm);background-color:rgba(0,0,0,0.03);border-radius:var(--radius-sm);margin-bottom:var(--spacing-md);display:none}.filter-result-count.visible{display:block}.filter-result-count strong{color:var(--secondary-color);font-weight:700}body.dark-mode .filter-result-count{background-color:rgba(255,255,255,0.03)}body.dark-mode .filter-result-count strong{color:var(--primary-color)}.search-wrapper{position:relative;display:flex;align-items:center;background-color:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--radius-full);padding:12px var(--spacing-lg);margin-bottom:var(--spacing-lg);box-shadow:var(--shadow-sm);transition:all var(--transition-normal)}.search-wrapper:focus-within{box-shadow:var(--shadow-md);border-color:var(--secondary-color)}body.dark-mode .search-wrapper:focus-within{border-color:var(--primary-color);box-shadow:var(--shadow-lg)}.search-icon{color:var(--text-light);margin-right:var(--spacing-sm);font-size:16px;flex-shrink:0}body.dark-mode .search-icon{color:var(--primary-color)}.search-input{flex:1;border:none;background:transparent;font-size:15px;color:var(--text-primary);min-width:0}.search-input:focus{outline:none;box-shadow:none}.search-input::placeholder{color:var(--text-light)}.clear-btn{background:none;border:none;color:var(--text-light);cursor:pointer;padding:var(--spacing-xs);font-size:14px;transition:color var(--transition-fast);flex-shrink:0}.search-confirm-btn{padding:8px 16px;background-color:var(--primary-color);color:white;border:none;border-radius:var(--radius-full);font-size:13px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;flex-shrink:0;margin-left:var(--spacing-xs)}.search-confirm-btn:active{background-color:var(--primary-active)}.ranking-list{display:flex;flex-direction:column;gap:var(--spacing-md)}.ranking-card{background-color:var(--bg-card);border-radius:var(--radius-lg);padding:var(--spacing-md);box-shadow:var(--shadow-sm);border:1px solid var(--border-color);transition:transform var(--transition-fast),box-shadow var(--transition-fast)}.ranking-card:active{transform:translateY(0);box-shadow:var(--shadow-sm)}.card-top-row{display:flex;justify-content:space-between;align-items:center;gap:var(--spacing-sm);margin-bottom:var(--spacing-sm)}.card-left-group{display:flex;align-items:center;gap:var(--spacing-sm);flex:1;min-width:0}.rank-badge{font-size:16px;font-weight:bold;color:var(--text-light);min-width:28px;text-align:center;font-family:'SF Mono',Monaco,monospace;flex-shrink:0}.rank-badge.rank-1{color:var(--gold);font-size:20px;text-shadow:1px 1px 2px rgba(0,0,0,0.2)}.rank-badge.rank-2{color:var(--silver);font-size:18px}.rank-badge.rank-3{color:var(--bronze);font-size:18px}.card-avatar{width:40px;height:40px;border-radius:50%;border:2px solid var(--border-color);object-fit:cover;flex-shrink:0}body.dark-mode .card-avatar{border-color:var(--primary-color)}.user-info-col{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}.card-name{font-size:14px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-qq{font-size:12px;color:var(--text-muted);font-family:'SF Mono',Monaco,monospace}body.dark-mode .card-qq{color:var(--primary-color)}.level-info-col{text-align:right;flex-shrink:0}.level-num-display{font-size:15px;font-weight:800;color:var(--secondary-color);white-space:nowrap}body.dark-mode .level-num-display{color:var(--primary-color)}.active-days{font-size:11px;color:var(--text-muted);margin-top:2px}.card-bottom-row{display:flex;align-items:center;gap:var(--spacing-xs);padding-top:var(--spacing-sm);border-top:1px solid var(--border-light);flex-wrap:wrap}.card-bottom-row .level-display-wrapper{gap:4px}.rank-change{font-size:10px;padding:2px 6px;border-radius:var(--radius-sm);display:inline-flex;align-items:center;gap:2px;font-weight:500;flex-shrink:0}.rank-change.rank-up{background-color:var(--success-bg);color:var(--success-color)}.rank-change.rank-down{background-color:var(--error-bg);color:var(--error-color)}.rank-change.rank-same{background-color:rgba(0,0,0,0.05);color:var(--text-light)}body.dark-mode .rank-change.rank-same{background-color:var(--border-color);color:var(--text-muted)}.pagination-container{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);padding:var(--spacing-lg) 0;flex-wrap:wrap}.pagination-wrapper{display:flex;flex-direction:column;align-items:center;gap:var(--spacing-md);padding:var(--spacing-lg) 0}.pagination-main{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);flex-wrap:wrap}.pagination-jump{display:flex;align-items:center;justify-content:center;gap:var(--spacing-xs);flex-wrap:wrap}.page-numbers{display:flex;gap:var(--spacing-xs);align-items:center;flex-wrap:wrap;justify-content:center}.page-btn,.page-num{min-width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border-light);background-color:var(--bg-card);color:var(--text-primary);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;transition:all var(--transition-fast)}.page-btn:active:not(:disabled),.page-num:active{background-color:var(--primary-color);color:white;border-color:var(--primary-color)}.page-btn:disabled{opacity:0.5;cursor:not-allowed}.page-num.active{background-color:var(--primary-color);color:white;border-color:var(--primary-color)}body.dark-mode .page-btn,body.dark-mode .page-num{background-color:var(--bg-card);border-color:var(--border-color)}body.dark-mode .page-btn:active:not(:disabled),body.dark-mode .page-num:active,body.dark-mode .page-num.active{background-color:var(--primary-color);color:#000}.page-ellipsis{padding:0 var(--spacing-xs);color:var(--text-light)}.page-info{font-size:13px;color:var(--text-secondary);white-space:nowrap;width:100%;text-align:center;margin-top:var(--spacing-sm)}.page-jump-container{display:flex;align-items:center;gap:var(--spacing-xs);margin-left:var(--spacing-sm)}.page-jump-label{font-size:13px;color:var(--text-secondary);white-space:nowrap}.page-jump-input{width:60px;height:36px;padding:0 8px;border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:14px;text-align:center;background-color:var(--bg-card);color:var(--text-primary);-webkit-appearance:none;appearance:none}.page-jump-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(76,175,80,0.1)}body.dark-mode .page-jump-input{background-color:var(--bg-card);border-color:var(--border-color)}body.dark-mode .page-jump-input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,173,181,0.15)}.page-jump-btn{min-width:50px;height:36px;padding:0 12px;border-radius:var(--radius-sm);border:1px solid var(--border-color);background-color:var(--primary-color);color:white;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:500;transition:all var(--transition-fast)}.page-jump-btn:active{background-color:var(--primary-active)}body.dark-mode .page-jump-btn{background-color:var(--primary-color);border-color:var(--primary-color)}.loading-spinner,.error-message,.empty-message{text-align:center;padding:60px 20px;color:var(--text-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}.loading-spinner i{font-size:28px;color:var(--primary-color);margin-bottom:var(--spacing-md);display:block}.error-message{color:var(--error-color)}.error-message i{font-size:28px;margin-bottom:var(--spacing-md);display:block}.empty-message i{font-size:48px;color:var(--text-muted);margin-bottom:var(--spacing-md);display:block}.empty-message p{margin:0}.fab-container{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:var(--spacing-sm);z-index:1000;opacity:0;pointer-events:none;transition:opacity var(--transition-normal)}.fab-container.visible{opacity:1;pointer-events:auto}.fab-btn{width:48px;height:48px;border-radius:50%;background-color:var(--secondary-color);color:white;border:none;box-shadow:var(--shadow-md);cursor:pointer;display:flex;justify-content:center;align-items:center;font-size:18px;transition:all var(--transition-fast)}.fab-btn:active{transform:scale(0.95)}body.dark-mode .fab-btn{background-color:var(--primary-color);box-shadow:0 4px 12px rgba(0,173,181,0.3);color:var(--bg-primary)}body.dark-mode .fab-btn:active{transform:scale(0.95)}.tools-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:10000;opacity:0;visibility:hidden;transition:all 0.3s ease;padding:var(--spacing-md)}.tools-modal-overlay.active{opacity:1;visibility:visible}body.dark-mode .tools-modal-overlay{background-color:rgba(0,0,0,0.7)}.tools-modal{background-color:var(--bg-card);border-radius:var(--radius-lg);width:100%;max-width:420px;max-height:90vh;overflow:hidden;box-shadow:var(--shadow-lg);transform:scale(0.9) translateY(20px);transition:transform 0.3s ease}.tools-modal-overlay.active .tools-modal{transform:scale(1) translateY(0)}.tools-modal-header{display:flex;align-items:center;justify-content:space-between;padding:var(--spacing-md) var(--spacing-lg);background-color:var(--bg-primary);border-bottom:1px solid var(--border-color)}.tools-modal-header h3{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--text-primary);margin:0}.tools-modal-header h3 i{color:var(--primary-color)}body.dark-mode .tools-modal-header{background-color:rgba(0,173,181,0.08)}.tools-modal-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background:none;border:none;border-radius:50%;color:var(--text-muted);cursor:pointer;transition:all var(--transition-fast)}.tools-modal-close:hover{background-color:var(--error-bg);color:var(--error-color)}.tools-modal-body{padding:var(--spacing-lg);overflow-y:auto;max-height:calc(90vh - 60px)}.tools-section{margin-bottom:0}.tools-section-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-md)}.tools-section-title i{color:var(--primary-color);font-size:14px}.tools-divider{height:1px;background-color:var(--border-color);margin:var(--spacing-lg) 0}.tools-modal .add-qq-body{display:flex;gap:var(--spacing-sm);flex-direction:row}.tools-modal .add-qq-input{flex:1}.tools-modal .add-qq-result{margin-top:var(--spacing-sm)}.filter-bar-modal{display:flex;flex-direction:column;gap:var(--spacing-md);margin-bottom:var(--spacing-md)}.filter-bar-modal .filter-item{display:flex;flex-direction:column;gap:var(--spacing-xs)}.filter-bar-modal .filter-item label{font-size:12px;font-weight:500;color:var(--text-secondary)}.filter-confirm-btn-modal{width:100%;padding:14px;background-color:var(--primary-color);color:white;border:none;border-radius:var(--radius-md);font-size:15px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;justify-content:center;gap:8px}.filter-confirm-btn-modal:hover{background-color:var(--primary-hover)}.filter-confirm-btn-modal:active{background-color:var(--primary-active)}.select2-container{width:100% !important}.select2-container--default .select2-selection--single{height:44px;border:1px solid var(--border-color);border-radius:var(--radius-sm);background-color:var(--bg-secondary);display:flex;align-items:center;transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}.select2-container--default.select2-container--open .select2-selection--single,.select2-container--default.select2-container--focus .select2-selection--single{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(76,175,80,0.1)}.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:42px;padding-left:12px;padding-right:36px;color:var(--text-primary);display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.select2-container--default .select2-selection--single .select2-selection__arrow{height:42px;right:10px;display:flex;align-items:center}.select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--text-muted) transparent transparent transparent;border-width:5px 5px 0 5px}.select2-dropdown{border:1px solid var(--border-color);border-radius:var(--radius-sm);box-shadow:var(--shadow-lg);background-color:var(--bg-card);overflow:hidden;z-index:9999}.select2-container--open .select2-dropdown{min-width:100%;width:max-content !important;max-width:90vw}.select2-container--open .select2-dropdown--below{border-top:none;border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}.select2-container--open .select2-dropdown--above{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0;margin-bottom:-1px}.select2-results__option{padding:10px 14px;color:var(--text-primary);cursor:pointer;transition:background-color var(--transition-fast);white-space:nowrap;overflow:visible}.select2-results__option span{display:inline-flex !important;align-items:center;white-space:nowrap}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--primary-color);color:#fff}.select2-container--default .select2-results__option[aria-selected="true"]{background-color:var(--success-bg);color:var(--success-color)}.select2-container--default .select2-results__option[aria-disabled="true"]{color:var(--text-muted);cursor:not-allowed}body.dark-mode .select2-container--default .select2-selection--single{background-color:var(--bg-primary);border-color:var(--border-color)}body.dark-mode .select2-container--default.select2-container--open .select2-selection--single,body.dark-mode .select2-container--default.select2-container--focus .select2-selection--single{border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,173,181,0.15)}body.dark-mode .select2-container--default .select2-selection--single .select2-selection__rendered{color:var(--text-primary)}body.dark-mode .select2-container--default .select2-selection--single .select2-selection__arrow b{border-color:var(--text-muted) transparent transparent transparent}body.dark-mode .select2-dropdown{background-color:var(--bg-card);border-color:var(--border-color);box-shadow:var(--shadow-lg)}body.dark-mode .select2-results__option{color:var(--text-primary)}body.dark-mode .select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:var(--primary-color);color:#000}body.dark-mode .select2-container--default .select2-results__option[aria-selected="true"]{background-color:var(--success-bg);color:var(--success-color)}.style-item .select2-container,.style-item .select2-container--default .select2-selection--single{width:100% !important;max-width:100% !important}.filter-item .select2-container{width:100% !important;max-width:100% !important}.filter-item .select2-dropdown{min-width:200px}.filter-item .select2-results__option{padding:10px 14px}.level-filter-option{display:inline-flex !important;align-items:center;gap:6px;white-space:nowrap;width:100%}.level-filter-icons{display:inline-flex !important;align-items:center;gap:2px;margin-left:4px}.fade-in{animation:fadeIn 0.3s ease-out}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@media (hover:hover){.app-logo:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}.nav-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}body.dark-mode .nav-btn:hover{background-color:var(--primary-color);color:#000;border-color:var(--primary-color)}.logo-title-container-rank img:hover{transform:scale(1.05)}.theme-switch:hover,.nav-link:hover,.tools-btn:hover{background-color:var(--primary-hover)}body.dark-mode .theme-switch:hover,body.dark-mode .nav-link:hover,body.dark-mode .tools-btn:hover{background-color:var(--primary-color);color:#000;border-color:var(--primary-color)}.card:hover{box-shadow:var(--shadow-sm)}.fetch-btn:hover,.calc-btn:hover,.add-qq-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.help-link:hover{color:var(--secondary-hover);text-decoration:underline}.clear-btn:hover{color:var(--text-secondary)}.ranking-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.page-btn:hover:not(:disabled),.page-num:hover{background-color:var(--bg-primary);border-color:var(--primary-color)}body.dark-mode .page-btn:hover:not(:disabled),body.dark-mode .page-num:hover{background-color:var(--primary-color);color:#000}.fab-btn:hover{background-color:var(--secondary-hover);transform:scale(1.1)}body.dark-mode .fab-btn:hover{background-color:var(--secondary-hover);transform:scale(1.1)}.filter-confirm-btn:hover{background-color:var(--primary-hover);transform:translateY(-1px)}.search-confirm-btn:hover{background-color:var(--primary-hover)}.page-jump-btn:hover{background-color:var(--primary-hover)}}@media (min-width:480px){.style-row{grid-template-columns:1fr 1fr}.add-qq-body{flex-direction:row}.page-info{width:auto;margin-top:0;margin-left:var(--spacing-sm)}.select2-container--open .select2-dropdown{max-width:400px}.filter-bar-modal{flex-direction:row}.filter-bar-modal .filter-item{flex:1}}@media (min-width:768px){.container{max-width:680px;margin:var(--spacing-lg) auto;padding:var(--spacing-xl);border-radius:var(--radius-lg);min-height:auto;box-shadow:var(--shadow-md)}.logo-title-container{margin-bottom:var(--spacing-lg)}.app-logo{width:56px;height:56px}.title{font-size:24px}.nav-bar{gap:var(--spacing-md)}.nav-btn{flex:none;padding:10px 20px;font-size:14px}.card{margin-bottom:var(--spacing-lg);border-radius:var(--radius-lg)}.card-header{padding:var(--spacing-md) var(--spacing-lg)}.card-icon{width:32px;height:32px}.card-icon i{font-size:16px}.card-title{font-size:15px}.card-body{padding:var(--spacing-lg)}.qq-input,.level-input,.add-qq-input{font-size:16px}.fetch-btn,.add-qq-btn{padding:12px 24px}.calc-btn{padding:16px;font-size:16px}.qq-avatar{width:56px;height:56px}.qq-nickname{font-size:16px}.level-input-header label{font-size:14px}.result-box{padding:var(--spacing-lg);font-size:15px}.logo-title-container-rank{flex-direction:row;justify-content:center}.logo-title-container-rank img{width:72px;height:72px}.theme-switch,.nav-link,.tools-btn{padding:10px 24px;font-size:14px}.stats-card{padding:var(--spacing-xl) var(--spacing-lg)}.stat-value{font-size:26px}.stat-value.stat-time{font-size:18px}.stat-label{font-size:13px}.stat-divider{height:50px}.ranking-card{padding:var(--spacing-lg)}.card-top-row{margin-bottom:var(--spacing-md)}.card-left-group{gap:var(--spacing-md)}.rank-badge{font-size:18px;min-width:32px}.card-avatar{width:48px;height:48px}.card-name{font-size:15px}.card-qq{font-size:13px}.level-num-display{font-size:17px}.page-btn,.page-num{min-width:40px;height:40px}.select2-container--open .select2-dropdown{max-width:450px}.page-jump-input{width:70px;height:40px}.page-jump-btn{height:40px}.pagination-wrapper{flex-direction:row;justify-content:center;flex-wrap:wrap}}@media (min-width:1024px){.container{max-width:720px;margin:var(--spacing-xl) auto;padding:var(--spacing-xl) 40px}}@media (max-width:480px){.select2-container--open .select2-dropdown{max-width:calc(100vw - 32px)}.select2-results__option{padding:12px 14px;font-size:14px}.tools-modal{max-width:100%;margin:var(--spacing-sm);max-height:85vh}.tools-modal-body{max-height:calc(85vh - 60px)}.tools-modal .add-qq-body{flex-direction:column}}@media (max-width:767px){.fab-container{bottom:16px;right:16px}.fab-btn{width:44px;height:44px;font-size:16px}}