*{margin:0;padding:0;box-sizing:border-box;font-family:"微软雅黑",sans-serif}
body{background-color:#f0f2f5;padding:20px 15px;display:flex;flex-direction:column;align-items:center;min-height:100vh;padding-bottom:100px}
.page-title{font-size:18px;color:#ff0000;font-weight:bold;margin:15px 0 25px;text-align:center}
.input-container{display:flex;flex-direction:column;gap:20px;width:100%;max-width:800px;margin-bottom:30px}
.input-box{width:100%;height:60px;border-radius:15px;background:#fff;display:flex;align-items:center;justify-content:center;padding:0 20px}
.input-box input{width:100%;height:100%;border:none;background:transparent;font-size:16px;color:#333;outline:none}
.input-box input:focus{outline:1px solid #00cc66;outline-offset:-1px}
.input-box input::placeholder{color:#999}
.radio-group{max-width:800px;width:100%;margin:0 auto;display:flex;justify-content:center;gap:30px}
.radio-group label{display:flex;align-items:center;gap:5px;color:#333;cursor:pointer}
.select-box{width:100%;max-width:800px;height:60px;border-radius:15px;background:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:15px;position:relative}
.select-box select{width:100%;height:100%;border:none;background:transparent;font-size:16px;color:#333;outline:none;appearance:none;padding-right:30px;cursor:pointer}
.select-box::after{content:"▼";position:absolute;right:20px;color:#999;pointer-events:none;font-size:14px}
.top-wrap{width:100%;max-width:800px;display:flex;gap:10px;margin-bottom:15px}
.platform-select{width:120px;height:60px;border-radius:15px;background:#fff;border:none;padding:0 8px;font-size:15px;outline:none;flex-shrink:0;cursor:pointer}
.btn-group{display:flex;gap:15px;width:100%;max-width:800px}
.convert-btn,.query-btn{width:100%;max-width:800px;height:55px;border-radius:15px;background:#00cc66;border:none;font-size:16px;color:#fff;font-weight:bold;cursor:pointer;transition:background 0.2s ease}
.convert-btn:active,.query-btn:active{background:#00b85c}
.convert-btn:disabled,.query-btn:disabled{background:#ccc;cursor:not-allowed}
.load-more-box{width:100%;max-width:800px;margin-top:20px;display:none}
.load-more-btn{width:100%;height:45px;background:#00cc66;color:#fff;border:none;border-radius:10px;cursor:pointer;font-size:15px;transition:background 0.2s ease}
.load-more-btn:active{background:#00b85c}
.load-more-btn:disabled{background:#ccc;cursor:not-allowed}
.result-box{width:100%;max-width:800px;min-height:200px;border-radius:20px;background:#fff;padding:20px;overflow:auto;white-space: pre-line;text-align: left;}
.error-title{color:#e74c3c;font-weight:bold;margin-bottom:8px}
.error-detail{color:#666;margin-left:10px}
.player-container{width:100%;max-width:500px;margin:0 auto;text-align:center;}
.song-cover{width:200px;height:200px;border-radius:10px;margin:0 auto 20px;object-fit:cover;display:block}
.song-info{text-align:center;margin-bottom:25px}
.song-title{font-size:20px;font-weight:bold;color:#333;margin-bottom:8px}
.song-singer{font-size:16px;color:#666}
.back-to-list{display:inline-block;margin-top:20px;padding:10px 20px;background:#00cc66;color:#fff;text-decoration:none;border-radius:8px;transition:background 0.2s ease}
.back-to-list:active{background:#00b85c}
.loading{color:#666;font-size:16px}
.song-item{display:flex;align-items:center;padding:10px;border-bottom:1px solid #eee;margin-bottom:10px;width:100%}
.song-item img{width:50px;height:50px;border-radius:5px;margin-right:10px;flex-shrink:0;object-fit:cover}
.song-details{flex:1}
.song-name{font-weight:bold;color:#333;font-size:16px}
.song-artist{font-size:13px;color:#666;margin-top:3px}
.play-btn{padding:6px 12px;background:#00cc66;color:#fff;border:none;border-radius:8px;cursor:pointer;text-decoration:none;display:inline-block;white-space:nowrap;transition:background 0.2s ease}
.play-btn:active{background:#00b85c}
.img-container{width:100%;max-width:800px;display:flex;flex-direction:column;gap:20px;margin-bottom:20px}
.img-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:15px;width:100%;align-items:flex-start}
.img-item{width:100%;border-radius:10px;overflow:hidden;background:transparent;display:flex;align-items:center;justify-content:center;padding:5px}
.img-item img{width:100%;height:auto;object-fit:contain;border-radius:8px}
.page-btn-group{align-self:center;display:flex;gap:15px;width:100%;max-width:800px;justify-content:center}
.page-btn,.clear-btn{padding:8px 20px;border-radius:10px;border:none;font-size:14px;font-weight:bold;cursor:pointer;transition:background 0.2s ease;display:none}
.page-btn{background:#00cc66;color:#fff}
.page-btn:active{background:#00b85c}
.page-btn:disabled{background:#99e6b8;cursor:not-allowed}
.clear-btn{background:#e74c3c;color:#fff}
.clear-btn:active{background:#c0392b}
.result-box video{width:100%;height:auto;max-height:600px;border-radius:12px;outline:none}
audio{width:100%;max-width:500px;margin:20px auto;display:block}
.back-btn{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:rgba(255,255,255,0.85);border:none;font-size:16px;color:#00cc66;cursor:pointer;padding:8px 16px;border-radius:20px;z-index:999;transition:background 0.2s ease}
.back-btn:hover{background:#fff}
.back-corner{position:fixed;bottom:20px;right:20px;width:50px;height:50px;border-radius:50%;background-color:#00cc66;color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;z-index:999;transition:background 0.2s ease}
.back-corner:active{background:#00b85c}

/* 平板尺寸 */
@media (min-width:768px){
.page-title{font-size:22px;margin:20px 0 30px}
.input-container{gap:22px}
.input-box{height:68px;border-radius:18px}
.input-box input{font-size:17px}
.radio-group{gap:40px}
.select-box{height:68px;border-radius:18px;margin-bottom:20px}
.select-box select{font-size:17px}
.select-box::after{font-size:16px}
.top-wrap .platform-select{height:68px}
.convert-btn,.query-btn{height:62px;border-radius:18px;font-size:17px}
.result-box{min-height:240px;border-radius:22px;font-size:15px;padding:24px;text-align: left;}
.page-btn,.clear-btn{padding:10px 24px;font-size:16px}
.back-btn{font-size:17px;padding:9px 18px}
.back-corner{width:56px;height:56px;font-size:22px;bottom:26px;right:26px}
}
/* 电脑大屏，比例协调不笨重 */
@media (min-width:1200px){
.page-title{font-size:26px;margin:30px 0 36px}
.input-container{max-width:900px;gap:24px}
.top-wrap{max-width:900px}
.select-box{max-width:900px;height:66px;border-radius:20px}
.select-box select{font-size:19px}
.input-box{max-width:900px;height:66px;border-radius:20px}
.input-box input{font-size:19px}
.radio-group{max-width:900px;gap:46px}
.top-wrap .platform-select{height:66px;width:130px}
.btn-group{max-width:900px}
.convert-btn,.query-btn{max-width:900px;height:60px;border-radius:20px;font-size:19px}
.result-box{max-width:900px;width:100%;min-height:260px;border-radius:26px;font-size:16px;padding:28px;text-align: left;}
.img-container{max-width:900px}
.img-list{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.page-btn-group{max-width:900px}
.back-btn{font-size:18px;padding:10px 22px}
}