/*
 * 全局样式、主题变量和组件特定样式。
 */
@keyframes flash-bg-effect { 0%, 50% { background-color: var(--highlight-flash-bg-color); } 100% { background-color: transparent; } }
@keyframes flash-glow-effect { 0%, 50% { border-color: var(--highlight-flash-glow-color); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--highlight-flash-glow-color) 70%, transparent); } }
@keyframes marquee { 0% { transform: translateX(0); } 20% { transform: translateX(0); } 80% { transform: translateX(calc(-100% + var(--marquee-parent-width, 200px))); } 100% { transform: translateX(calc(-100% + var(--marquee-parent-width, 200px))); } }
@keyframes pulse-effect { 0% { transform: scale(1); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--primary-color) 70%, transparent); } 50% { transform: scale(1.02); box-shadow: 0 0 15px 4px color-mix(in srgb, var(--primary-color) 90%, transparent); } 100% { transform: scale(1); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--primary-color) 70%, transparent); } }

html {
    --bg-color: #1a1a2e; --text-color: #e0e0e0; --card-bg-color: #2a2a4e; --primary-color: #ff69b4;
    --primary-text-color: #1a1a2e; --primary-hover-color: #ff85c1; --input-bg-color: #2a2a4e;
    --input-border-color: #4a4a6a; --input-focus-border-color: #ff69b4; --stat-value-color: #ffc107;
    --stat-value-secondary-color: #94a3b8; --stat-value-imperfect-color: #facc15;
    --stat-value-increase-color: #f87171; --stat-value-decrease-color: #4ade80;
    --section-title-color: #ff69b4; --section-title-border-color: #ff69b4;
    --analysis-subtitle-color: #ff85c1; --link-color: #ff85c1; --link-hover-color: #ff69b4;
    --nav-link-active-bg: rgba(255, 105, 180, 0.1); --nav-link-active-color: #ff69b4;
    --rank-d-color: #ef4444; --rank-c-color: #f97316; --rank-b-color: #eab308;
    --rank-a-color: #22c55e; --rank-s-gold-color: #facc15; --rank-s-silver-color: #9ca3af;
    --rank-f-color: #9ca3af; --rank-x { color: var(--rank-s-gold-color); } .rank-xh { color: var(--rank-s-silver-color); }
    --chart-grid-color: rgba(224, 224, 224, 0.2); --chart-tick-color: #e0e0e0;
    --tooltip-bg-color: #1a1a2e; --tooltip-border-color: #ff69b4;
    --scrollbar-track-color: #2a2a4e; --scrollbar-thumb-color: #ff69b4;
    --highlight-bg-color: rgba(255, 105, 180, 0.3); --highlight-flash-bg-color: rgba(57, 255, 20, 0.5);
    --highlight-flash-glow-color: rgb(57, 255, 20); --bp-display-bg: rgba(0, 0, 0, 0.6);
    --bp-display-text: #ffffff; --sort-header-active-bg: rgba(255, 105, 180, 0.1);
    --sort-header-hover-bg: rgba(255, 105, 180, 0.05); --download-btn-bg: rgba(255, 105, 180, 0.2);
    --download-btn-hover-bg: rgba(255, 105, 180, 0.4); --glass-card-bg: rgba(0, 0, 0, 0.25);
    --glass-card-border: rgba(255, 255, 255, 0.125); --glass-card-overlay-color: rgba(26, 26, 46, 0.58);
    --player-overlay-color: rgba(26, 26, 46, 0.6); --player-bg-color: #2a2a4e;
    --glass-ui-bg-color: rgba(42, 42, 78, 0.25); --glass-ui-border-color: rgba(74, 74, 106, 0.6);
    --banner-overlay-color-start: rgba(26, 26, 46, 0); --banner-overlay-color-end: var(--bg-color);
}

#background-animation-canvas { position: fixed; inset: 0px; z-index: -1; pointer-events: none; }
#theme-background { position: fixed; inset: 0px; z-index: -2; background-color: var(--bg-color); }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: var(--text-color); }
#pageHeader { background-color: transparent !important; }

/* 卡片和按钮样式 */
.card {
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    background-color: var(--glass-ui-bg-color);
    border: 1px solid var(--glass-ui-border-color);
    border-radius: 0.75rem;
    box-shadow: none;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
}
.glass-card { backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); border: 1px solid var(--glass-card-border); box-shadow: none; margin-bottom: 0.75rem; position: relative; overflow: hidden; z-index: 1; transition: border 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; }
.glass-card .main-content { cursor: pointer; }
.glass-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(var(--glass-card-overlay-color), var(--glass-card-overlay-color)), var(--bg-image-url); background-size: cover; background-position: center; z-index: -1; transition: opacity 0.3s ease; filter: blur(2px); }
.glass-card.selected { border-color: var(--primary-color); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--primary-color) 70%, transparent); background-color: var(--highlight-bg-color); }
.bp-highlight.selected {border-color: var(--primary-color);box-shadow: 0 0 10px 2px color-mix(in srgb, var(--primary-color) 70%, transparent);background-color: var(--highlight-bg-color);}
.glass-card.drag-start { animation: pulse-effect 1.5s infinite; }
.glass-card.drag-over {background-color: rgba(255, 105, 180, 0.3);box-shadow: 0 0 12px 3px color-mix(in srgb, var(--primary-color) 80%, transparent); transform: scale(1.02);transition: none;}
.beatmap-card.drag-over { background-color: rgba(255, 105, 180, 0.3); border-color: var(--primary-color); box-shadow: 0 0 12px 3px color-mix(in srgb, var(--primary-color) 80%, transparent); transform: scale(1.02); transition: none; }
.beatmap-card.selected { border: 2px solid var(--primary-color); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--primary-color) 70%, transparent); }
.btn-primary { background-color: transparent; color: #ffffff; border: 1px solid var(--primary-color); font-weight: 600; padding: 0.75rem 1.5rem; border-radius: 0.5rem; transition: background-color 0.3s ease, color 0.3s ease; }
.btn-primary:hover { background-color: var(--primary-hover-color); color: var(--primary-text-color); }
.input-field, .select-field { background-color: var(--input-bg-color); border: 1px solid var(--input-border-color); color: var(--text-color); border-radius: 0.5rem; padding: 0.75rem; font-size: 1rem; }
.input-field:focus, .select-field:focus { border-color: var(--input-focus-border-color); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-focus-border-color) 50%, transparent); }
.bp-highlight {border-color: var(--highlight-flash-glow-color); border-width: 2px;}

/* 导航链接样式 */
.nav-link { cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.nav-link.active { background-color: var(--nav-link-active-bg); color: var(--nav-link-active-color); font-weight: 600; }

/* 玩家信息横幅样式 */
#player-banner { height: 320px; background-size: cover; background-position: center; position: relative; border-radius: 0.75rem; overflow: hidden; }
#player-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, var(--banner-overlay-color-end) 0%, var(--banner-overlay-color-start) 60%); }
#player-banner-content { position: relative; z-index: 10; }

/* 谱面封面和BP指示器样式 */
.beatmap-cover-container { position: relative; width: 80px; height: 56px; flex-shrink: 0; cursor: pointer; align-self: center; }
.beatmap-cover-container::after { content: '▶'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 24px; text-shadow: 0 0 5px black; opacity: 0; transition: opacity 0.2s ease; }
.beatmap-cover-container:hover::after { opacity: 0.8; }
.beatmap-cover { width: 100%; height: 100%; object-fit: cover; border-radius: 0.375rem; }
.bp-indicator { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); background-color: var(--bp-display-bg); color: var(--bp-display-text); padding: 2px 6px; min-width: 55px; white-space: nowrap; text-align: center; border-radius: 0.25rem; font-size: 0.7rem; font-weight: 600; z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }

/* 统计值和标题样式 */
.stat-value { color: var(--stat-value-color); font-weight: 600; }
.stat-value-secondary { color: var(--stat-value-secondary-color); font-weight: 600; }
.stat-value-imperfect { color: var(--stat-value-imperfect-color); font-weight: 600; }
.stat-increase { color: var(--stat-value-increase-color); font-weight: 600; }
.stat-decrease { color: var(--stat-value-decrease-color); font-weight: 600; }
.section-title { color: var(--section-title-color); font-size: 1.25rem; font-weight: 700; text-align: left; padding-left: 0.4rem; }
.analysis-subtitle { color: var(--analysis-subtitle-color); font-size: 1.1rem; font-weight: 600; margin-top: 0.75rem; margin-bottom: 0.5rem; }
.beatmap-title-link { text-decoration: none; color: inherit; }
.beatmap-title-link:hover { color: var(--link-hover-color); text-decoration: underline; }
.pp-display { color: var(--stat-value-color); font-weight: bold; }
.pp-label { color: var(--stat-value-color); font-size: 0.75rem; }

/* 排名颜色样式 */
.rank-d { color: var(--rank-d-color); } .rank-c { color: var(--rank-c-color); } .rank-b { color: var(--rank-b-color); } .rank-a { color: var(--rank-a-color); } .rank-s { color: var(--rank-s-gold-color); } .rank-sh { color: var(--rank-s-silver-color); } .rank-x { color: var(--rank-s-gold-color); } .rank-xh { color: var(--rank-s-silver-color); } .rank-f { color: var(--rank-f-color); }

/* 图表样式 */
.chart-container { position: relative; height: 280px; width: 100%; margin-top: 0.5rem; margin-bottom: 1rem; }
.pie-chart-container { position: relative; height: 300px; width: 100%; }
#modsChartContainer canvas { cursor: pointer; }
.chart-stats-overlay { position: absolute; top: 35px; right: 5px; background-color: color-mix(in srgb, var(--card-bg-color) 80%, transparent); padding: 4px 8px; border-radius: 4px; font-size: 0.75rem; color: var(--text-color); z-index: 10; }

/* 排序和筛选控件样式 */
.sort-controls-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
@media (min-width: 640px) { .sort-controls-row { flex-direction: row; align-items: center; } }
.sort-label { font-weight: 500; font-size: 0.875rem; color: #ffffff; opacity: 1; }
.sort-header-container { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; }
.sort-header { cursor: pointer; padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-weight: 500; font-size: 0.875rem; transition: background-color 0.2s ease, color 0.2s ease; display: flex; align-items: center; white-space: nowrap; }
.sort-header:hover { background-color: var(--sort-header-hover-bg); }
.sort-header.active { background-color: var(--sort-header-active-bg); color: var(--primary-color); font-weight: 600; }
.sort-arrow { margin-left: 0.35rem; font-size: 0.9em; }
.filter-controls-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
@media (min-width: 1024px) { .filter-controls-row { flex-direction: row; align-items: center; justify-content: space-between; } }
.filter-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.filter-group label:first-child { font-weight: 500; font-size: 0.875rem; margin-right: 0.25rem; }
.filter-group label { display: flex; align-items: center; font-size: 0.875rem; padding: 0.1rem 0.2rem; }
.filter-group label input[type="checkbox"] { margin-right: 0.25rem; accent-color: var(--primary-color); height: 1rem; width: 1rem; }
.filter-group .select-field { font-size: 0.875rem; padding: 0.5rem; }
.download-btn { background-color: transparent; color: #ffffff; border: 1px solid var(--primary-color); padding: 0.5rem 0.75rem; border-radius: 0.375rem; transition: background-color 0.2s ease, color 0.2s ease; font-size: 0.875rem; font-weight: 500; cursor: pointer; }
.download-btn:hover { background-color: var(--primary-hover-color); color: var(--primary-text-color); border-color: var(--primary-hover-color); }
#recentPlaysControls label { cursor: pointer; }
#recentPlaysControls input[type="checkbox"] { accent-color: var(--primary-color); }
#recentPpGainDisplay .pp-gain-icon { margin-right: 0.5rem; }
#beatmapStatusFilters.disabled .sort-header {pointer-events: none;opacity: 0.5;cursor: not-allowed;}

/* 音频播放器样式 */
#audioPlayer { position: fixed; bottom: 1rem; right: 1rem; width: 320px; border-radius: 0.75rem; padding: 0.75rem 1rem; z-index: 1000; display: flex; flex-direction: column; gap: 0.5rem; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; transform: translateY(20px); opacity: 0; pointer-events: none; backdrop-filter: blur(10px) saturate(180%); -webkit-backdrop-filter: blur(10px) saturate(180%); border: 1px solid var(--glass-card-border); overflow: hidden; }
#audioPlayer.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
#player-top-row { display: flex; justify-content: space-between; align-items: center; }
#player-info-container { overflow: hidden; flex-grow: 1; padding-right: 0.5rem; }
#player-info { font-size: 0.875rem; font-weight: 600; color: var(--primary-color); white-space: nowrap; display: inline-block; }
#player-info.is-overflowing > #player-info-text { padding-left: 100%; animation: marquee 10s linear infinite; animation-delay: 1.5s; display: inline-block; }
#player-close-btn { background: color-mix(in srgb, var(--primary-color) 20%, transparent); border: none; cursor: pointer; color: var(--text-color); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; }
#player-close-btn:hover { background: color-mix(in srgb, var(--primary-color) 40%, transparent); }
#player-progress-container { width: 100%; }
#player-progress-bar { width: 100%; }
#player-time-container { display: flex; justify-content: space-between; font-size: 0.75rem; opacity: 0.7; margin-top: 0.125rem; }
#player-controls { display: flex; align-items: center; gap: 1rem; }
#player-play-pause-btn { background: none; border: none; cursor: pointer; color: var(--text-color); padding: 0.25rem; flex-shrink: 0; }
#player-volume-container { display: flex; align-items: center; gap: 0.5rem; width: 80px; margin-left: auto; }
#player-volume-icon { flex-shrink: 0; opacity: 0.7; }
#player-progress-bar, #player-volume-slider { -webkit-appearance: none; appearance: none; background: var(--input-border-color); outline: none; border-radius: 5px; cursor: pointer; }
#player-progress-bar { height: 5px; width: 100%; }
#player-volume-slider { height: 5px; width: 100%; }
#player-progress-bar::-webkit-slider-thumb, #player-volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; background: var(--primary-color); border-radius: 50%; }
#player-progress-bar::-moz-range-thumb, #player-volume-slider::-moz-range-thumb { width: 14px; height: 14px; background: var(--primary-color); border-radius: 50%; }

/* 动画效果 */
.flash-bg-animation { animation: flash-bg-effect 1.8s ease-out; }
.flash-glow-animation { animation: flash-glow-effect 1.8s ease-out; }
@keyframes btn-flash-effect { 50% { background-color: #ff69b4; color: black; } }
.animate-flash { animation: btn-flash-effect 0.2s ease-in-out; }

/* Toast 提示样式 */
#toast { position: fixed; bottom: 2rem; right: 2rem; background-color: var(--card-bg-color); color: var(--text-color); padding: 0.75rem 1.25rem; border-radius: 0.5rem; border: 1px solid var(--primary-color); box-shadow: 0 4px 15px rgba(0,0,0,0.2); z-index: 2000; opacity: 0; transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; transform: translateY(20px); pointer-events: none; }
#toast.visible { opacity: 1; transform: translateY(0); }

/* PP 计算器模态框样式 */
#pp-calculator-card { max-width: 52rem; }
#pp-calculator-body { padding: 0.75rem 1.25rem; space-y: 0.75rem; }
#pp-calculator-modal .card { background-color: var(--card-bg-color); padding: 0.75rem; }
#pp-calc-beatmap-info { font-size: 0.8rem; }
#pp-calc-beatmap-info > div { display: flex; justify-content: space-between; }
#pp-calc-pp-display { font-size: 2.5rem; }
#pp-calc-pp-breakdown { font-size: 0.8rem; }
#pp-calc-score-sim-container { space-y: 0.5rem !important; }

/* PP 计算器加载动画 */
.pp-calc-loader { border: 4px solid #f3f3f3; border-radius: 50%; border-top: 4px solid var(--primary-color); width: 20px; height: 20px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* PP 计算器 Mods 按钮样式 */
.pp-calc-mod-checkbox { display: none; }
.pp-calc-mod-label { padding: 0.35rem 0.75rem; border: 1px solid var(--input-border-color); border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease-in-out; font-weight: 500; font-size: 0.875rem; user-select: none; }
.pp-calc-mod-checkbox:checked + .pp-calc-mod-label, .pp-calc-mod-label.active { background-color: var(--primary-color); border-color: var(--primary-color); color: var(--primary-text-color); }
.pp-calc-mod-label:hover { border-color: var(--primary-color); }

/* PP 计算器输入框和滑块样式 */
.pp-calc-input-number { -moz-appearance: textfield; }
.pp-calc-input-number::-webkit-outer-spin-button, .pp-calc-input-number::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pp-calc-switch { position: relative; display: inline-block; width: 44px; height: 24px; }
.pp-calc-switch input { opacity: 0; width: 0; height: 0; }
.pp-calc-slider-toggle { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #4a4a6a; transition: .4s; border-radius: 24px; }
.pp-calc-slider-toggle:before { position: absolute; content: ""; height: 18px; width: 18px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
input:checked + .pp-calc-slider-toggle { background-color: var(--primary-color); }
input:focus + .pp-calc-slider-toggle { box-shadow: 0 0 1px var(--primary-color); }
input:checked + .pp-calc-slider-toggle:before { transform: translateX(20px); }

.pp-calc-input-slider { -webkit-appearance: none; width: 100%; height: 6px; background: var(--input-border-color); outline: none; opacity: 0.7; transition: opacity .2s; border-radius: 3px; }
.pp-calc-input-slider:hover { opacity: 1; }
.pp-calc-input-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; background: var(--primary-color); cursor: pointer; border-radius: 50%; }
.pp-calc-input-slider::-moz-range-thumb { width: 18px; height: 18px; background: var(--primary-color); cursor: pointer; border-radius: 50%; }
input[type=number]:disabled, .pp-calc-input-number:disabled { background: #4a4a6a; color: #9ca3af; cursor: not-allowed; }
input[type=range]:disabled, .pp-calc-input-slider:disabled { opacity: 0.4; cursor: not-allowed; }
.pp-calc-input-slider:disabled::-webkit-slider-thumb { background: #9ca3af; }
.pp-calc-input-slider:disabled::-moz-range-thumb { background: #9ca3af; }

.pp-calc-stepper-btn { background-color: #4a4a6a; color: #e0e0e0; width: 24px; height: 20px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 0.2s; border: 1px solid #718096; user-select: none; }
.pp-calc-stepper-btn:hover { background-color: #2a2a4e; }
#pp-calc-score-sim-container .grid { grid-template-columns: 80px 1fr 110px; gap: 0.75rem; }

/* 搜索历史样式 */
#searchHistoryContainer { max-height: 220px; overflow-y: auto; }
.history-item { display: flex; align-items: center; padding: 0.5rem; border-radius: 0.375rem; cursor: pointer; transition: background-color 0.2s ease; justify-content: space-between; }
.history-item:hover { background-color: var(--sort-header-hover-bg); }
.history-item img { width: 32px; height: 32px; border-radius: 50%; margin-right: 0.75rem; flex-shrink: 0; }
.history-item span { font-weight: 500; color: var(--text-color); opacity: 0.9; }
.history-item-main { display: flex; align-items: center; flex-grow: 1; }
.history-item-delete { background-color: transparent; border: none; color: #9ca3af; font-size: 1.5rem; line-height: 1; padding: 0 0.5rem; cursor: pointer; border-radius: 50%; width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; }
.history-item-delete:hover { background-color: rgba(239, 68, 68, 0.2); }

/* 谱面卡片样式 */
.beatmap-grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(450px, 1fr)); gap: 1rem; justify-content: start; }
.beatmap-card { display: flex; flex-direction: column; background-color: #2E343C; border-radius: 8px; overflow: hidden; height: 100%; }
.beatmap-card__header { position: relative; height: 100px; padding: 0.75rem; display: flex; flex-direction: column; justify-content: center; color: white; background-size: cover; background-position: center; }
.beatmap-card__header::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0.7) 30%, rgba(0,0,0,0.1) 100%); }
.beatmap-card__header > * { position: relative; z-index: 2; }
.beatmap-card__title { font-size: 1.1rem; font-weight: 600; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.beatmap-card__artist { font-size: 0.8rem; opacity: 0.9; text-shadow: 1px 1px 3px rgba(0,0,0,0.8); }
.beatmap-card__creator { font-size: 0.8rem; opacity: 0.8; margin-top: 4px; }
.beatmap-card__creator a { color: var(--primary-color); text-decoration: none; }
.beatmap-card__creator a:hover { text-decoration: underline; }

.beatmap-card__body { padding: 0.75rem; background-color: #242930; flex-grow: 1; display: flex; flex-direction: column; }
.beatmap-card__stats { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; opacity: 0.7; padding-bottom: 0.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.beatmap-card__stats-group { display: flex; gap: 1rem; }

/* 状态标签样式 */
.status-tag { padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 0.7rem; text-transform: uppercase; color: white; border: 1px solid rgba(0,0,0,0.2); }
.status-ranked { background-color: #4CAF50; }
.status-loved { background-color: #E91E63; }
.status-qualified { background-color: #2196F3; }
.status-pending, .status-wip { background-color: #ffd966; }
.status-graveyard { background-color: #000000; color: #ffffff; }
.beatmap-card__header .status-tag { position: absolute; top: 0.5rem; right: 0.5rem; z-index: 3; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }

/* 谱面卡片操作按钮样式 */
.beatmap-card__actions { position: absolute; bottom: 0.5rem; right: 0.5rem; z-index: 3; display: flex; gap: 0.375rem; }
.beatmap-card__actions .download-btn { padding: 0.5rem; border-radius: 0.375rem; line-height: 1; }
.beatmap-card__actions .download-btn svg { width: 16px; height: 16px; }

/* 难度条样式 */
.beatmap-card__difficulty-bar { position: relative; width: 100%; height: 55px; display: flex; align-items: flex-start; }
.difficulty-gradient { margin-top: 9px; width: 100%; height: 6px; border-radius: 3px; opacity: 0.6; }
.difficulty-indicator { position: absolute; top: 0px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.indicator-line { width: 3px; height: 22px; border-radius: 2px; border: 1px solid rgba(255, 255, 255, 0.5); box-shadow: 0 0 3px rgba(0,0,0,0.5); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.indicator-info { position: absolute; top: 28px; color: var(--text-color); font-size: 0.7rem; line-height: 1.2; text-align: center; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s ease; text-shadow: 1px 1px 2px rgba(0,0,0,0.7); }
.indicator-info__name { font-size: 0.7rem; font-weight: 600; }
.indicator-info__mapper { font-size: 0.7rem; opacity: 0.8; }

.difficulty-indicator.is-selected .indicator-line { transform: scale(1.2, 1.5); box-shadow: 0 0 10px 3px var(--indicator-color); }
.difficulty-indicator.is-selected .indicator-info { opacity: 1; visibility: visible; }

/* 错误输入样式 */
.input-error { border-color: #ef4444 !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.5) !important; }

/* 加载状态样式 */
.is-loading .nav-link { pointer-events: none; opacity: 0.5; cursor: not-allowed; }
.beatmap-card { cursor: pointer; }

/* 自定义工具提示样式 */
.custom-tooltip-container { position: relative; display: inline-flex; align-items: center; }
.custom-tooltip-container .custom-tooltip { background-color: transparent; color: var(--text-color); border: 1px solid var(--tooltip-border-color); padding: 10px; font-size: 0.875rem; border-radius: 6px; visibility: hidden; opacity: 0; transition: none; position: absolute; z-index: 50; bottom: 140%; left: 50%; transform: translateX(-50%); box-shadow: none; white-space: nowrap; }
.custom-tooltip-container:hover .custom-tooltip { visibility: visible; opacity: 1; }
.custom-tooltip-container .custom-tooltip::after { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--tooltip-border-color) transparent transparent transparent; }
.custom-tooltip-container .custom-tooltip::before { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -6px; border-width: 6px; border-style: solid; border-color: var(--tooltip-border-color) transparent transparent transparent; } .custom-tooltip-container .custom-tooltip::after { content: " "; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: var(--tooltip-bg-color) transparent transparent transparent; }

/* 搜索卡片标题样式 */
.beatmap-card__title a {transition: color 0.2s ease;}
.beatmap-card__title a:hover { color: var(--primary-hover-color) !important;text-decoration: underline !important;}

/* 返回顶部按钮样式 */
.back-to-top-button { position: fixed; bottom: 25px; right: 25px; width: 48px; height: 48px; border-radius: 50%; background-color: var(--primary-color); color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 1000; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; } 
.back-to-top-button:hover { background-color: var(--primary-hover-color); } 
.back-to-top-button.show { opacity: 1; visibility: visible; transform: translateY(0); }