* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    touch-action: manipulation;
}

html {
    min-height: 100%;
    background: linear-gradient(135deg, #ffcfe5 0%, #e6bfff 50%, #c2a6ff 100%);
    background-attachment: fixed; /* 可选：固定背景 */
}

body {
    /* Safari 100vh修复 */
    min-height: 100vh;
    min-height: -webkit-fill-available;
    
    /* 背景设为透明，显示html的渐变 */
    background: transparent;
    
    color: #5a2d81;
    padding: 20px 15px;
    position: relative;
}

a {
/* 去掉下划线 */
text-decoration: none;

/* 去掉默认颜色，继承父元素的颜色 */
color: inherit;

/* 去掉点击后的轮廓线（在focus状态时） */
outline: none;

/* 去掉移动端的点击高亮效果 */
-webkit-tap-highlight-color: transparent;

/* 确保没有背景颜色 */
background-color: transparent;

/* 去掉其他可能的浏览器特定样式 */
-webkit-appearance: none;
-moz-appearance: none;
    appearance: none;
}

/* 如果需要去掉所有状态下的样式，可以加上伪类 */
a:link, a:visited, a:hover, a:active, a:focus {
    text-decoration: none;
    color: inherit;
    outline: none;
    background-color: transparent;
}
.page-container {
    max-width: 600px;
    margin: 0 auto;
    /*width: 100%;*/
    min-height: 100vh;
    min-height: -webkit-fill-available; /* Safari修复 */
    background-color: transparent;
}

/* Safari特定修复 */
@supports (-webkit-touch-callout: none) {
    body {
        min-height: -webkit-fill-available;
    }
}

/* 针对iOS Safari的修复 */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    body {
        background-attachment: scroll;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        background-size: cover;
    }
}

/* 装饰元素 */
.decoration {
    position: absolute;
    z-index: -1;
    font-size: 28px;
    color: rgba(255, 105, 180, 0.6);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: none;
}

.decoration.note {
    color: rgba(255, 105, 180, 0.4);
}

.decoration.heart {
    color: rgba(255, 0, 0, 0.3);
}

.decoration.music {
    color: rgba(204, 102, 255, 0.4);
}

.decoration.star {
    color: rgba(255, 179, 230, 0.9);
}

.decoration:nth-child(1) {
    top: 4%;
    left: 5%;
    animation: float 8s infinite ease-in-out;
    font-size: 32px;
}

.decoration:nth-child(2) {
    top: 12%;
    right: 8%;
    animation: float 7s infinite ease-in-out reverse;
    font-size: 36px;
}

.decoration:nth-child(3) {
    top: 30%;
    left: 3%;
    animation: float 9s infinite ease-in-out;
    font-size: 30px;
}

.decoration:nth-child(4) {
    top: 16%;
    right: 18%;
    animation: float 6s infinite ease-in-out reverse;
    font-size: 34px;
}

.decoration:nth-child(5) {
    top: 9%;
    right: 3%;
    animation: float 10s infinite ease-in-out;
    font-size: 28px;
}

.decoration:nth-child(6) {
    top: 43%;
    left: 15%;
    animation: float 8s infinite ease-in-out reverse;
    font-size: 32px;
}

.decoration:nth-child(7) {
    top: 43%;
    right: 11%;
    animation: float 8s infinite ease-in-out reverse;
    font-size: 32px;
}

.decoration:nth-child(8) {
    top: 63%;
    left: 5%;
    animation: float 8s infinite ease-in-out reverse;
    font-size: 32px;
}

@keyframes float {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
    }
    25% { 
        transform: translateY(-15px) translateX(5px) rotate(5deg); 
    }
    50% { 
        transform: translateY(-10px) translateX(-5px) rotate(-5deg); 
    }
    75% { 
        transform: translateY(-5px) translateX(3px) rotate(3deg); 
    }
}

/* 头部样式 */
header {
    text-align: center;
    margin-bottom: 25px;
    padding-top: 50px;
    position: relative;
}

h1 {
    font-size: 2.2rem;
    color: #ff66b2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 8px;
    font-weight: bold;
    position: relative;
    z-index: 1;
}

.subtitle {
    font-size: 1rem;
    color: #8a4db3;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

/* 搜索和筛选区域 */
.controls {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(173, 102, 255, 0.15);
    border: 2px solid #ffb3e6;
}

.search-box {
    display: flex;
    margin-bottom: 15px;
}

.search-input-container {
    flex: 1;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 8px 50px 8px 18px;
    border: none;
    border-radius: 15px 0 0 15px;
    background-color: #f9f0ff;
    font-size: 1rem;
    color: #6b3b8a;
    border: 2px solid #e6ccff;
    border-right: none;
}

.search-box input::placeholder {
    color: #b38cd9;
}

/* 清空按钮 - SVG版本 */
.clear-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    background-color: rgba(179, 140, 217, 0.3);
    color: #6b3b8a;
    display: none;
    z-index: 2;
    padding: 0;
}

.clear-btn:hover {
    background-color: rgba(179, 140, 217, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.clear-btn:active {
    background-color: rgba(179, 140, 217, 0.7);
    transform: translateY(-50%) scale(0.95);
}

.clear-btn svg {
    width: 16px;
    height: 16px;
}

/* 盲盒按钮 */
.blind-box-btn {
    background: linear-gradient(to right, #ffcc00, #ff9900);
    color: white;
    border: none;
    padding: 0 20px;
    border-radius: 0 15px 15px 0;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
    font-weight: bold;
    white-space: nowrap;
    border: 2px solid #e6b800;
    border-left: none;
}

.blind-box-btn:hover {
    background: linear-gradient(to right, #e6b800, #e68700);
    transform: scale(1.02);
}

.blind-box-btn.active {
    background: linear-gradient(to right, #ff9900, #ff6600);
    box-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

.filter-section h3 {
    margin-bottom: 10px;
    color: #ff66b2;
    font-size: 1.1rem;
}

.filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    max-height: 104px; /* 大约2.5行的高度 */
    overflow-y: auto;
    padding-right: 5px;
}

.filter-tags::-webkit-scrollbar {
    width: 6px;
}

.filter-tags::-webkit-scrollbar-track {
    background: #f0d9ff;
    border-radius: 3px;
}

.filter-tags::-webkit-scrollbar-thumb {
    background: #cc99ff;
    border-radius: 3px;
}

.filter-tags::-webkit-scrollbar-thumb:hover {
    background: #b84dff;
}

.tag {
    padding: 8px 16px;
    background-color: #f0d9ff;
    border-radius: 20px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
    color: #6b3b8a;
    flex-shrink: 0;
}

.tag:hover {
    /*transform: translateY(-3px);*/
    box-shadow: 0 5px 10px rgba(204, 102, 255, 0.2);
}

.tag.active {
    background: linear-gradient(to right, #ff80bf, #cc99ff);
    color: white;
    border-color: #ff66b2;
}

.tag-all {
    background-color: #ffe6f2;
}

/* 歌单表格 */
.song-table-container {
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 10px;
    box-shadow: 0 8px 20px rgba(173, 102, 255, 0.15);
    border: 2px solid #ffb3e6;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
}

thead {
    background: linear-gradient(to right, #ffb3e6, #d9b3ff);
    border-radius: 15px 15px 0 0;
    overflow: hidden;
}

/* 修改2：调整表格列布局 */
th {
    padding: 12px 8px;
    text-align: left;
    color: #6b3b8a;
    font-size: 0.9rem;
    border-bottom: 3px solid #ff99cc;
    font-weight: bold;
}

th:first-child {
    border-radius: 15px 0 0 0;
    /*width: 50%;  给歌曲信息列更多空间 */
    min-width: 100px;
}

/* 修改2：歌手、分类、操作列对齐 */
th:nth-child(2){
    text-align: center;
    width: 20%; 
    /*white-space: nowrap;  防止换行 */
}
th:nth-child(3),
th:nth-child(4) {
    text-align: center;
    width: 15%; 
    /*white-space: nowrap;  防止换行 */
}

th:last-child {
    border-radius: 0 15px 0 0;
}

tbody tr {
    border-bottom: 1px solid #f0d9ff;
    transition: all 0.3s;
}

tbody tr:hover {
    background-color: #fcf2ff;
    transform: scale(1.005);
}

td {
    padding: 12px 8px;
    color: #5a2d81;
    font-size: 0.95rem;
    vertical-align: top;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

/* 修改2：歌手、分类、操作列靠右对齐 */
td:nth-child(2),
td:nth-child(3){
    text-align: left;
}
td:nth-child(4){
    text-align: center;
}

.song-info {
    display: flex;
    flex-direction: column;
}

.song-title-container {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
    flex-wrap: wrap;
    gap: 8px;
}

.song-title {
    font-weight: bold;
    color: #cc66ff;
    font-size: 1.05rem;
    line-height: 1.2;
}

.song-links {
    display: flex;
    gap: 6px;
}

.song-link {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.2s;
    position: relative;
}

.song-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.song-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.netease-link {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAEr2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICB4bWxuczp0aWZmPSJodHRwOi8vbnMuYWRvYmUuY29tL3RpZmYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgZXhpZjpQaXhlbFhEaW1lbnNpb249IjMyIgogICBleGlmOlBpeGVsWURpbWVuc2lvbj0iMzIiCiAgIGV4aWY6Q29sb3JTcGFjZT0iMSIKICAgdGlmZjpJbWFnZVdpZHRoPSIzMiIKICAgdGlmZjpJbWFnZUxlbmd0aD0iMzIiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249Ijk2LjAiCiAgIHRpZmY6WVJlc29sdXRpb249Ijk2LjAiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjYtMDEtMDJUMTg6Mzk6MjUrMDg6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjYtMDEtMDJUMTg6Mzk6MjUrMDg6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgUGhvdG8gMS44LjUiCiAgICAgIHN0RXZ0OndoZW49IjIwMjYtMDEtMDJUMTg6Mzk6MjUrMDg6MDAiLz4KICAgIDwvcmRmOlNlcT4KICAgPC94bXBNTTpIaXN0b3J5PgogIDwvcmRmOkRlc2NyaXB0aW9uPgogPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KPD94cGFja2V0IGVuZD0iciI/PrRzNyIAAAGCaUNDUHNSR0IgSUVDNjE5NjYtMi4xAAAokXWRuUtDQRCHvyRKxIMIWlgIBvFoEvGAoI1FgheoRfIEozbJM4eQ4/FeggRbwVZQEG28Cv0LtBWsBUFRBLEWS0Ublec8E0gQM8vOfvvbmWF3FuxKSk0bNf2QzuT04ITfPR9ecDtfsGHHSS8dEdXQZkLjClXt406ixW68Vq3qcf9aw3LMUMFWJzyqanpOeFJ4ejWnWbwt3KomI8vCp8IeXS4ofGvp0SI/W5wo8pfFuhIMgL1Z2J2o4GgFq0k9LSwvpyudyqul+1gvaYxl5kKydspsxyDIBH7cTDFGAB8DjIj34WWQPtlRJb//N3+WrOSq4jUK6KyQIEkOj6h5qR6TNS56TEaKgtX/v3014kODxeqNfqh9Ms23bnBuwfemaX4emub3ETge4SJTzs8ewPC76JtlrWsfXOtwdlnWojtwvgFtD1pEj/xKDpn2eBxeT6ApDC3XUL9Y7FnpnON7UNbkq65gdw96JN619ANMlWfaRGsdVQAAARpQTFRFAAAA/zY2/w4O/woK/wcH/1dX/xER/zw8/x0d/wUF/wIC//T0/2Zm/yws/0dH/+7u/15e/5aW/xIS/2Nj/ycn//Dw//z8/3V1/0BA/3Jy/9HR/zIy/6Cg/76+/wwM/7i4/4eH/5KS/8DA/729/ygo/1VV/5GR/4CA/9vb/yoq/zEx/6en/zg4/+fn//r6/wAA/6qq/+vr/3d3//j4/39//xoa/xcX/8rK/2pq/6Wl/xUV/+jo/29v/42N/+Hh/319/+Tk/xgY/1tb/////3h4/1BQ/97e/01N/2lp/5iY/+zs/0RE/11d/9fX/8LC/yUl/2Rk/yEh/8TE/66u/0JC/+Li/x4e/9zc/z8//7Ky//b2/7W1/4+PyUUmd1QeoQAAAF50Uk5T////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////ALHILiYAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAGPSURBVDiNjZN7U4FBFMaFGvdSPFG6kUaKU71DQ6Q8hZFqmjSl0ff/Gu3iZZHq/LFn95zfnN09F8fXQNwyJ+6hx6GXee9QRoBvkV/ENwAW+3UMx7zfuRwIToh5INQmGfaNAeP96xsRkZUo4Cdj9l8ckwfFo9wSSRPbrsTOum0eA7t7JPZFOoTLvNEG3Eky9aw2QTD9E3BE9pVaqT0CaCeCs0AWPFHq9IYDgbU5A5zx3CkSWUW+dAAk2sTFFOC0WFMqRf+HFMB6+RJYMoEQcagCEC112EJJyjdImUAFfhn/sIprbYHHAGp4U2sAltiqSNQNII6oWmNkaPBjTbdHzxwC96AK6Gsw1yy0LIY1wDsDKIIBpR7yhEpC7lakDHbMPOzwURe4m1F5TOqMb5AvJtDE6MpsSLtl9x1P07XYY96okfeV6E4DxQZQ844OnhTQn66FSuM1kIkfe8X1EfYDJbvnJi1X7ukyIqqr+VmxrW6zabs9CwrBVbUwts10tbO71qpnzUn6z+D8PXp/Du/v4/8NjXrA0FJzcTAAAAAASUVORK5CYII=');
}

.bilibili-link {
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAAAXNSR0IArs4c6QAABEhJREFUWAm9Vk1oXFUU/s57Q8bYZLLowlIXbRUFkxS6iFhaUUKhixbclGYlJNNKbSmK4MKFLmbhRnCjpdSKzkzAVfxDsUIEjT80tDTVVmdS3CWC0OIPTNqkyaTvHc+9b+6b+968+Qupd3Pv/e53fu7POecCsUbITfXQruE1g6fUhJluY+KJjAapOM9mNbEnmowyKKQVbywRcT9wdMo1YIStJ+fnBvRisTQdLsrAR67cY6TsXpEcAcT5oSoK1/eGi9aY8NLXaRrZuRoubmwwWb4kJ3DPCGsHczN9aq42rg4u0UlmfAPNNqKx3uxCwzbRHqtt6sagT5LGbU2kRMqzVRotqhets/XbEsAQubI0gJf3LtlkPS6ULpLj7GPPn8Cx4UmFBQrkHWHn8AWZPClIcKEMT9bvaMGAGeIMvimrb+L40HuEfPkLcuk5AS+DnNdCgZaDe1uJ3U81RbltXNdA4ZfHULzxaoN8DDdy4TEbAXLSJXm5b5u56Zvh6pQjjccH0xGgNmmGp+S9/EiEZ1Ccn8aD6bEk4QassrLdYNYtDF4kckbMQquemZfB/uvI7n6nFa+jtcADRc2Xxsl1iuz7s8gO72+QfvdShgYyFYXLeYRy9Vv44y99r+qlQbJCRIESzmT+1cLqvVgt0PRh+SRcvEGgbfISg7zD0NZq3D4bl+R2BQulw8iNVQnF36aJ3IOW0k6HVZ5byIS5kMk7AqT+6Uia/bfE26fY4y/rCqyDaatEEiXtIpWLdGKM8lUcqHcfbzauEmnQqH4LBlFxQA9cjcvr+EjAGxQoQSEnxkMS3qCAPe9z9tefjXvQDN/YISova5WswYO45cR5vchxPR9MXnscvf23EgXi4MralIIkFfwk+YAkjHk/oed33A3rc1wkOlcBwOzj6uJBRwr40+x7r+gYj9KazkR2jhfKvThzaC0Mywg7N5PCjoc+kAA6BOLvULl9IrFORIRiE4lgDPS/D6YDUoEuYPHWC8iNhiXWsJMdyP+aJTeVNyRR4DH8b7F052hbR5ThTN/HBOdAmAFEkag4jvHddZ015ckOqMUzP29HJv2ZCtoaV2vRjqytjuHFETvdAE0NS/5aWT+CU3v+DPVYg8CBs+Vt2MJ58VoZ2yKeqw9Hc+csBV0MpfZC5YBl2cRlLNMxnB66SSiUJ8ih87KQ+MvpwkB3VOZ1CYMTkpDLfxPRViMtL3oUi86s/voZcDN69dfc4e8jx50x6qQyiO3Y59YuWIa4mX3cXj2TNLNSmD9HDj+vltmnj5AdPNWMqvEu+W1zoVSMk/Ie5UtMfcG4pXn54HXHb+uAJLzvxWRVUl9VSsIPrc2rU+qO3/4KsoOj8lg6b13y255A55Y3xnSkiNyNiBbnHpWD3OwkJCpFZ/7KI7Yt9rlCkF8duTgrH4n/9zSkJLKH08FOz117GL2pr8SHPbaH92sspq9jdf1ws/pwv+wm6v0PqUzJKtyXGdkAAAAASUVORK5CYII=');
}

.song-subinfo {
    font-size: 0.85rem;
    color: #ff66b2;
    font-style: italic;
    line-height: 1.4;
    margin-bottom: 4px;
}

.song-threshold {
    font-size: 0.8rem;
    color: #ff3366;
    background-color: #ffe6f0;
    padding: 3px 8px;
    border-radius: 8px;
    display: inline-block;
    font-weight: bold;
    margin-top: 4px;
}

.song-artist {
    color: #ff66b2;
    font-size: 0.8rem;
}

.song-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: flex-end; /* 修改2：标签右对齐 */
}

.song-tag {
    padding: 2px 5px;
    background-color: #f0d9ff;
    border-radius: 12px;
    font-size: 0.7rem;
    color: #6b3b8a;
    text-align: center;
}

.copy-btn {
    background: linear-gradient(to right, #ff80bf, #cc99ff);
    color: white;
    border: none;
    padding: 8px 8px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.3s;
    display: inline-block;
    /*white-space: nowrap;*/
}

.copy-btn:hover {
    background: linear-gradient(to right, #ff66b2, #b84dff);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(204, 102, 255, 0.3);
}

.copy-btn.copied {
    background: linear-gradient(to right, #80ffbf, #66ccff);
}

/* 底部信息 */
footer {
    /*position: fixed;*/
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to right, #ff99cc, #cc99ff);
    padding: 8px;
    text-align: center;
    color: white;
    font-size: 0.9rem;
    border-top: 3px solid #ffb3e6;
}

/* 响应式调整 */
@media (max-width: 600px) {
    th, td {
        padding: 10px 6px;
    }
    
    .song-tags {
        flex-direction: column;
        gap: 3px;
        align-items: flex-end; /* 修改2：在移动端标签右对齐 */
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    /* 装饰元素在移动端调整 */
    .decoration {
        font-size: 22px;
    }
    
    .decoration:nth-child(1) {
        font-size: 24px;
        left: 3%;
    }
    
    .decoration:nth-child(2) {
        font-size: 26px;
        right: 3%;
    }
    
    .decoration:nth-child(3) {
        font-size: 22px;
        left: 10%;
    }
    
    .decoration:nth-child(4) {
        font-size: 24px;
        right: 1%;
    }
    
    .decoration:nth-child(5),
    .decoration:nth-child(6) {
        display: none; /* 在移动端隐藏部分装饰元素 */
    }
    
    /* 修改2：在移动端表格列调整 */
    th:nth-child(2),
    th:nth-child(3),
    th:nth-child(4),
    td:nth-child(4) {
        text-align: center;
    }
    td:nth-child(2),
    td:nth-child(3) {
        text-align: left;
    }
}

@media (max-width: 480px) {

    th:nth-child(2){
        width: 25%; 
        text-align: center;
    }
    th:nth-child(3),
    th:nth-child(4) {
        width: 15%; /* 分类和操作列平分剩余空间 */
        text-align: center;
    }
    
    .tag {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .copy-btn {
        padding: 7px 7px;
        font-size: 0.8rem;
        /*white-space: nowrap;*/
    }
    
    .song-link {
        width: 18px;
        height: 18px;
    }
    
    .blind-box-btn {
        padding: 0 15px;
        font-size: 0.9rem;
    }
    
    .clear-btn {
        width: 20px;
        height: 20px;
        right: 12px;
    }
    
    .clear-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .search-box input {
        padding: 8px 40px 8px 15px;
    }
}

@media (max-width: 360px) {
    .song-title-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .song-links {
        margin-top: 2px;
    }
    
    .blind-box-btn {
        padding: 0 12px;
        font-size: 0.85rem;
    }
    
    .clear-btn {
        right: 10px;
    }
    
    /* 装饰元素在更小的屏幕上调整 */
    .decoration {
        font-size: 18px;
    }
    
    /* 修改2：在更小的屏幕上调整表格布局 */
    th:nth-child(3),
    th:nth-child(4),
    td:nth-child(3),
    td:nth-child(4) {
        padding: 6px 4px;
        text-align: center;
    }

}

/* 空状态提示 */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #b38cd9;
    font-size: 1.1rem;
}

/* 提示框样式 */
.toast {
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to right, #ff66b2, #cc66ff);
    color: white;
    padding: 15px 25px;
    border-radius: 20px;
    z-index: 1000;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    font-weight: bold;
    animation: fadeInOut 6s ease-in-out;
    max-width: 90%;
    text-align: center;
}

.toast-content {
    font-size: 0.9rem;
    margin-bottom: 5px;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
}

.toast-threshold {
    font-size: 0.8rem;
    background-color: rgba(255, 255, 255, 0.2);
    padding: 5px 10px;
    border-radius: 8px;
    margin-top: 5px;
    display: inline-block;
}

@keyframes fadeInOut {
    0% { opacity: 0; top: 15%; }
    10% { opacity: 1; top: 20%; }
    90% { opacity: 1; top: 20%; }
    100% { opacity: 0; top: 25%; }
}

/* 链接提示 */
.link-tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    z-index: 10;
    margin-bottom: 4px;
}

.song-link:hover .link-tooltip {
    opacity: 1;
}

/* 盲盒状态提示 */
.blind-box-status {
    text-align: center;
    padding: 10px;
    color: #ff9900;
    font-size: 0.9rem;
    font-weight: bold;
    margin-top: 5px;
}



/* 加载动画样式 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5); /* 半透明白色 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.spinner {
    width: 50px;
    height: 50px;
    position: relative;
    margin-bottom: 20px; /* 增加与文字的间距 */
}

.spinner-circle {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-radius: 50%;
    border-top-color: #ff66b2;
    animation: spin 1s linear infinite;
}

.spinner-circle:nth-child(2) {
    border-top-color: #cc99ff;
    animation-delay: 0.2s;
}

.spinner-circle:nth-child(3) {
    border-top-color: #ff99cc;
    animation-delay: 0.4s;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.loading-text {
    color: #6b3b8a;
    font-size: 16px;
    text-align: center;
    width: 100%;
}

/* 返回页首按钮 */
.back-to-top {
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: linear-gradient(135deg, #cc66ff, #ff66b2);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(204, 102, 255, 0.3);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: linear-gradient(135deg, #ff3385, #b84dff);
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(204, 102, 255, 0.4);
}

.back-to-top:active {
    transform: translateY(-2px);
}

/* 更明显的向上箭头 */
.back-to-top svg {
    width: 24px;
    height: 24px;
    fill: white;
    stroke: white;
    stroke-width: 2;
}

/* 箭头动画效果 */
.back-to-top svg {
    transition: transform 0.3s ease;
}

.back-to-top:hover svg {
    transform: translateY(-2px);
}

/* 副标题轮播样式 - 简化版 */
.subtitle-slider {
    height: 24px; /* 固定高度防止跳动 */
    position: relative;
    overflow: hidden;
    margin: 10px auto;
    width: 100%;
    max-width: 400px;
}

.subtitle-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1rem;
    color: #8a4db3;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.8s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
}

.subtitle-text.active {
    opacity: 1;
    transform: translateY(0);
}