:root{
        --bg1:#0f0c29; --bg2:#24243e; --bg3:#302b63;
        --card:rgba(255,255,255,.07);
        --card-border:rgba(255,255,255,.12);
        --text:#eef0ff; --sub:#9aa3c7;
        --accent:#7c6cff; --accent2:#ff6ec7;
        --ok:#34d399; --err:#f87171;
    }
    *{margin:0;padding:0;box-sizing:border-box}
    body{
        min-height:100vh;color:var(--text);
        font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
        background:linear-gradient(135deg,var(--bg1),var(--bg2),var(--bg3));
        overflow-x:hidden;
    }
    /* 装饰光晕 */
    .glow{position:fixed;border-radius:50%;filter:blur(90px);opacity:.35;pointer-events:none;z-index:0}
    .glow-1{width:420px;height:420px;background:var(--accent);top:-120px;left:-100px;animation:float 14s ease-in-out infinite}
    .glow-2{width:360px;height:360px;background:var(--accent2);bottom:-100px;right:-80px;animation:float 18s ease-in-out infinite reverse}
    .glow-3{width:300px;height:300px;background:#22d3ee;top:40%;left:60%;animation:float 20s ease-in-out infinite}
    @keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,30px) scale(1.15)}}
    .wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:40px 20px 140px}
    /* 头部 */
    header{text-align:center;margin-bottom:34px}
    header .logo{
        width:72px;height:72px;margin:0 auto 16px;border-radius:22px;
        background:linear-gradient(135deg,var(--accent),var(--accent2));
        display:flex;align-items:center;justify-content:center;
        font-size:36px;box-shadow:0 12px 40px rgba(124,108,255,.45);
        animation:logoPulse 3s ease-in-out infinite;
    }
    @keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
    header h1{font-size:28px;font-weight:700;letter-spacing:1px;background:linear-gradient(90deg,#fff,#c7c3ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
    header p{color:var(--sub);font-size:13px;margin-top:8px}
    /* 毛玻璃卡片 */
    .glass{
        background:var(--card);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
        border:1px solid var(--card-border);border-radius:20px;
        box-shadow:0 8px 32px rgba(0,0,0,.3);
    }
    /* 搜索区 */
    .search-box{padding:22px;margin-bottom:22px}
    .tabs{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap}
    .tab{
        flex:1;min-width:100px;padding:10px 0;text-align:center;cursor:pointer;
        border-radius:12px;border:1px solid var(--card-border);
        color:var(--sub);font-size:14px;transition:.25s;user-select:none;background:transparent;
    }
    .tab:hover{color:#fff;border-color:rgba(255,255,255,.35)}
    .tab.active{
        color:#fff;border-color:transparent;
        background:linear-gradient(135deg,var(--accent),var(--accent2));
        box-shadow:0 6px 20px rgba(124,108,255,.4);
    }
    .tab .ic{margin-right:6px}
    .search-row{display:flex;gap:10px}
    .search-row input{
        flex:1;padding:13px 18px;border-radius:14px;border:1px solid var(--card-border);
        background:rgba(255,255,255,.06);color:var(--text);font-size:15px;outline:none;transition:.25s;
    }
    .search-row input::placeholder{color:var(--sub)}
    .search-row input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(124,108,255,.2)}
    .seg{display:flex;border:1px solid var(--card-border);border-radius:14px;overflow:hidden}
    .seg button{
        padding:0 16px;border:none;background:transparent;color:var(--sub);cursor:pointer;font-size:14px;transition:.2s;
    }
    .seg button.active{background:rgba(124,108,255,.25);color:#fff}
    .btn-search{
        padding:0 28px;border:none;border-radius:14px;cursor:pointer;font-size:15px;color:#fff;
        background:linear-gradient(135deg,var(--accent),var(--accent2));
        box-shadow:0 6px 20px rgba(124,108,255,.4);transition:.25s;
    }
    .btn-search:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(124,108,255,.55)}
    .btn-search:active{transform:translateY(0)}
    .btn-search:disabled{opacity:.5;cursor:not-allowed;transform:none}
    /* 列表 */
    .list{display:flex;flex-direction:column;gap:10px;min-height:120px}
    .item{
        display:flex;align-items:center;gap:14px;padding:12px 16px;cursor:pointer;
        transition:.2s;border-radius:14px;
    }
    .item:hover{background:rgba(255,255,255,.06);transform:translateX(4px)}
    .item.playing{background:rgba(124,108,255,.16);border:1px solid rgba(124,108,255,.35)}
    .cover{
        width:52px;height:52px;border-radius:12px;flex-shrink:0;object-fit:cover;
        background:linear-gradient(135deg,var(--accent),var(--accent2));
        display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;overflow:hidden;
    }
    .item .info{flex:1;min-width:0}
    .item .name{font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .item .singer{font-size:12.5px;color:var(--sub);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .item .dur{font-size:12px;color:var(--sub);flex-shrink:0}
    .vip-badge{
        display:inline-block;font-size:10px;line-height:1;padding:3px 6px;margin-left:6px;
        border-radius:6px;vertical-align:1px;color:#ffd666;
        background:rgba(255,214,102,.12);border:1px solid rgba(255,214,102,.4);
    }
    .item .play-ic{color:var(--accent2);font-size:18px;flex-shrink:0}
    .item.playing .play-ic{animation:bounce 1s ease-in-out infinite}
    @keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
    .empty{text-align:center;color:var(--sub);padding:60px 0;font-size:14px}
    .empty .big{font-size:46px;margin-bottom:12px;display:block}
    .loading{text-align:center;padding:50px 0}
    .spinner{
        width:38px;height:38px;margin:0 auto 14px;border-radius:50%;
        border:3px solid rgba(255,255,255,.15);border-top-color:var(--accent);
        animation:spin 0.9s linear infinite;
    }
    @keyframes spin{to{transform:rotate(360deg)}}
    .loading p{color:var(--sub);font-size:13px}
    .err-box{text-align:center;padding:40px 0;color:var(--err);font-size:14px}
    /* 播放器 */
    .player{
        position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:20;
        width:min(860px,calc(100vw - 32px));
        padding:14px 20px;display:flex;align-items:center;gap:16px;
    }
    .player .p-cover{width:52px;height:52px;border-radius:12px;overflow:hidden;flex-shrink:0;background:#1a1a2e}
    .player .p-cover img{width:100%;height:100%;object-fit:cover}
    .player .p-info{flex:1;min-width:0}
    .player .p-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .player .p-singer{font-size:12px;color:var(--sub);margin-top:2px}
    .player .p-btn{
        width:44px;height:44px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
        background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:16px;
        display:flex;align-items:center;justify-content:center;transition:.2s;
    }
    .player .p-btn:hover{transform:scale(1.08)}
    .player .p-link-btn{
        width:40px;height:40px;border-radius:12px;border:1px solid var(--card-border);cursor:pointer;flex-shrink:0;
        background:rgba(255,255,255,.06);color:#fff;font-size:16px;transition:.2s;display:none;
    }
    .player .p-link-btn:hover{background:rgba(124,108,255,.3);transform:translateY(-2px)}
    /* 外链弹层 */
    .modal-mask{
        position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
        background:rgba(10,8,25,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    }
    .modal-mask.show{display:flex}
    .modal{
        width:min(420px,calc(100vw - 40px));padding:24px;border-radius:20px;color:var(--text);
        background:linear-gradient(160deg,#1b1840,#241f4d);border:1px solid var(--card-border);
        box-shadow:0 24px 80px rgba(0,0,0,.5);
    }
    .modal-head{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:600;margin-bottom:16px}
    .modal-close{background:none;border:none;color:var(--sub);font-size:16px;cursor:pointer;padding:4px}
    .modal-close:hover{color:#fff}
    .modal-preview{display:flex;justify-content:center;padding:10px 0;background:rgba(255,255,255,.04);border-radius:14px;margin-bottom:14px;min-height:86px}
    .modal-msg{font-size:12.5px;color:var(--sub);margin-bottom:14px;word-break:break-all}
    .modal-msg a{color:var(--accent2);text-decoration:none}
    .modal-code-title{font-size:12px;color:var(--sub);margin-bottom:6px}
    .modal-code{
        width:100%;resize:none;padding:10px 12px;border-radius:10px;font-size:11.5px;line-height:1.5;
        background:rgba(0,0,0,.35);color:#c9d3ff;border:1px solid var(--card-border);
        font-family:Consolas,Menlo,monospace;outline:none;
    }
    .modal-copy{
        width:100%;margin-top:12px;padding:11px 0;border:none;border-radius:12px;cursor:pointer;
        background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:14px;transition:.2s;
    }
    .modal-copy:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(124,108,255,.4)}
    .player .p-progress{flex:1;min-width:60px}
    .player input[type=range]{
        width:100%;-webkit-appearance:none;appearance:none;height:4px;border-radius:4px;
        background:rgba(255,255,255,.18);outline:none;cursor:pointer;
    }
    .player input[type=range]::-webkit-slider-thumb{
        -webkit-appearance:none;width:12px;height:12px;border-radius:50%;
        background:var(--accent2);box-shadow:0 0 8px rgba(255,110,199,.8);
    }
    .player .p-time{font-size:11px;color:var(--sub);white-space:nowrap;margin-top:4px;text-align:right}
    .toast{
        position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-80px);z-index:99;
        padding:10px 22px;border-radius:12px;font-size:13.5px;color:#fff;transition:.35s;opacity:0;
        background:rgba(17,17,31,.9);border:1px solid var(--card-border);backdrop-filter:blur(12px);
    }
    .toast.show{transform:translateX(-50%) translateY(0);opacity:1}
    .toast.ok{border-color:var(--ok)} .toast.err{border-color:var(--err)}
    @media (max-width:560px){
        .wrap{padding:24px 14px 160px}
        .seg button{padding:0 12px}
        .player{padding:12px 14px;gap:10px}
        .player .p-cover{width:44px;height:44px}
    }