:root{--accent: #00f2ff;--accent-glow: rgba(0, 242, 255, .4);--bg-dark: #0a0b14;--card-bg: rgba(255, 255, 255, .04);--text-main: #e0e0ff;--text-mute: #8a8aae;--gold: #ffcc00;--danger: #ff4d4d}body{margin:0;background:var(--bg-dark);color:var(--text-main);font-family:Inter,PingFang SC,sans-serif;overflow-x:hidden}body:before{content:"";position:fixed;top:-10%;left:-10%;width:40%;height:40%;background:radial-gradient(circle,rgba(0,242,255,.05) 0%,transparent 70%);z-index:-1}.app-container{max-width:960px;margin:0 auto;padding:40px 24px}.main-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:60px}.brand{display:flex;align-items:center;gap:14px;cursor:pointer}.logo-icon{color:var(--accent);width:32px;height:32px;filter:drop-shadow(0 0 8px var(--accent))}.title-group h1{margin:0;font-size:1.6rem;font-weight:800;letter-spacing:-.5px}.cloud-tag{font-size:.75rem;color:var(--accent);opacity:.7;font-weight:500}.search-area{position:relative;width:340px}.search-box{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 18px;display:flex;align-items:center;gap:12px;transition:all .3s cubic-bezier(.4,0,.2,1)}.search-box:focus-within{border-color:var(--accent);background:#ffffff14;box-shadow:0 0 20px var(--accent-glow)}.search-box input{background:none;border:none;color:#fff;outline:none;width:100%;font-size:.95rem}.history-pop{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#151726;border:1px solid rgba(255,255,255,.1);border-radius:12px;z-index:100;box-shadow:0 10px 30px #00000080}.history-row{padding:12px 18px;font-size:.85rem;cursor:pointer;display:flex;align-items:center;gap:10px;color:var(--text-mute)}.history-row:hover{background:var(--accent-glow);color:var(--accent)}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:24px}.card{background:var(--card-bg);border:1px solid rgba(255,255,255,.06);border-radius:24px;padding:40px 24px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:.3s}.card:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0;transition:.3s}.card:hover:after{opacity:1}.card.is-official{border-color:#ffcc004d;background:#ffcc0005}.gold-glow{color:var(--gold);width:44px;height:44px;filter:drop-shadow(0 0 12px var(--gold))}.disc-icon{color:var(--text-mute);opacity:.6}.card h3{margin:15px 0 8px;font-size:1.1rem;font-weight:600}.badge{display:inline-block;padding:4px 12px;background:#ffffff0d;border-radius:20px;font-size:.75rem;color:var(--text-mute)}.add-btn{border:2px dashed rgba(255,255,255,.1);background:none;border-radius:24px;color:var(--text-mute);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:.3s}.add-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-glow)}.list-header{display:flex;align-items:center;gap:20px;margin-bottom:35px}.back-btn{background:#ffffff0d;border:none;color:#fff;padding:10px;border-radius:12px;cursor:pointer;transition:.2s}.back-btn:hover{background:#ffffff1a;transform:translate(-3px)}.info h2{margin:0;font-size:1.5rem;font-weight:700}.info p{margin:4px 0 0;font-size:.85rem;color:var(--text-mute)}.song-container{background:var(--card-bg);border-radius:20px;border:1px solid rgba(255,255,255,.05);overflow:hidden}.song-row{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.03);transition:.2s}.song-row:hover{background:#ffffff08}.song-row.active{background:var(--accent-glow);border-left:4px solid var(--accent)}.song-info{display:flex;align-items:center;gap:18px;flex:1;cursor:pointer}.play-indicator{color:var(--accent);width:24px;display:flex;justify-content:center}.meta{display:flex;flex-direction:column;gap:2px}.title{font-size:1rem;font-weight:600;color:var(--text-main)}.artist{font-size:.8rem;color:var(--text-mute)}.highlight-mark{color:var(--accent);text-decoration:underline;text-underline-offset:4px}.song-ops{display:flex;gap:12px;align-items:center}.jump-btn{background:var(--accent);color:#000;border:none;padding:8px 14px;border-radius:10px;font-size:.8rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:6px;transition:.2s}.jump-btn:hover{transform:scale(1.05);box-shadow:0 0 15px var(--accent-glow)}.del-btn{background:none;border:none;color:var(--text-mute);cursor:pointer;padding:8px;transition:.2s}.del-btn:hover{color:var(--danger);transform:rotate(10deg)}.insert-btn{width:100%;padding:20px;background:none;border:none;color:var(--accent);cursor:pointer;font-size:.9rem;font-weight:600;border-top:1px solid rgba(255,255,255,.05)}.insert-btn:hover{background:var(--accent-glow)}.form-container{display:flex;justify-content:center;padding-top:40px}.form-box{background:#121422;padding:40px;border-radius:28px;width:100%;max-width:420px;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px #0009}.form-box h3{margin:0 0 25px;font-size:1.3rem;text-align:center}.inputs{display:flex;flex-direction:column;gap:16px;margin-bottom:30px}.inputs input{background:#ffffff0a;border:1px solid rgba(255,255,255,.1);padding:14px 18px;border-radius:12px;color:#fff;outline:none;font-size:1rem;transition:.3s}.inputs input:focus{border-color:var(--accent);background:#ffffff14}.btns{display:flex;gap:14px}.btns button{flex:1;padding:14px;border-radius:12px;border:none;cursor:pointer;font-weight:700;font-size:1rem;transition:.2s}.btn-save{background:var(--accent);color:#000}.btn-save:hover{transform:translateY(-2px);box-shadow:0 5px 15px var(--accent-glow)}.btn-cancel{background:#ffffff0d;color:#fff}.toast-msg{position:fixed;bottom:40px;left:50%;transform:translate(-50%);padding:12px 30px;border-radius:40px;background:#1a1b2e;border:1px solid var(--accent);font-size:.9rem;z-index:1000;box-shadow:0 10px 30px #0006;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translate(-50%,20px);opacity:0}to{transform:translate(-50%);opacity:1}}.loading-screen{height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent);gap:20px;font-weight:600}.pulse{animation:pulse 1.5s infinite;width:48px;height:48px}@keyframes pulse{0%,to{opacity:.3;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}.empty-state{padding:60px;text-align:center;color:var(--text-mute);display:flex;flex-direction:column;align-items:center;gap:15px}