@import"https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";:root{--bg:#f7f8fb;--surface:#fff;--border:#e8eaf0;--border-strong:#d4d8e3;--ink:#14161d;--ink-dim:#71768a;--accent:#5b6cff;--accent-soft:#eef0ff;--accent-hover:#4553e6;--fav:#ff4d6d;--fav-soft:#ffe9ee;--err:#e2445c}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0}.app{min-height:100vh;background:var(--bg);color:var(--ink);font-family:Plus Jakarta Sans,system-ui,sans-serif;display:flex;flex-direction:column}.nav{display:flex;align-items:center;justify-content:space-between;padding:1.2rem clamp(1.25rem,4vw,3.5rem)}.brand{display:flex;align-items:center;gap:.55rem}.brand-mark{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--accent);color:#fff}.brand-name{font-weight:800;font-size:1.35rem;letter-spacing:-.02em}.q-badge{font-size:.78rem;font-weight:700;color:var(--accent);background:var(--accent-soft);padding:.35rem .7rem;border-radius:20px}.hero{text-align:center;padding:3rem 1.25rem 2.5rem;transition:padding .3s ease}.hero.compact{padding:1.4rem 1.25rem 2rem}.hero-title{font-weight:800;font-size:clamp(2rem,5vw,3.2rem);line-height:1.1;letter-spacing:-.03em;margin:0 0 .6rem}.accent{color:var(--accent)}.hero-sub{color:var(--ink-dim);font-size:1.05rem;margin:0 0 2rem;font-weight:500}.search-wrap{max-width:600px;margin:0 auto;position:relative}.search{display:flex;align-items:center;gap:.6rem;background:var(--surface);border:1px solid var(--border-strong);border-radius:16px;padding:.9rem 1.1rem;box-shadow:0 4px 20px -8px #1e285a1f;transition:border-color .18s,box-shadow .18s}.search:focus-within{border-color:var(--accent);box-shadow:0 6px 26px -6px #5b6cff47}.search-icon{color:var(--ink-dim);flex-shrink:0}.search input{flex:1;min-width:0;background:transparent;border:none;outline:none;color:var(--ink);font-size:1.05rem;font-family:inherit;font-weight:500}.search input::placeholder{color:var(--ink-dim);font-weight:400}.clear-btn{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;border:none;background:transparent;color:var(--ink-dim);cursor:pointer;transition:background .15s}.clear-btn:hover{background:var(--bg)}.spinner-sm{display:inline-block;width:16px;height:16px;border-radius:50%;flex-shrink:0;border:2px solid var(--border-strong);border-top-color:var(--accent);animation:spin .7s linear infinite}.spinner-sm.light{border-color:#fff6;border-top-color:#fff}@keyframes spin{to{transform:rotate(360deg)}}.dropdown{position:absolute;left:0;right:0;top:calc(100% + .6rem);background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 50px -16px #1e285a47;padding:.5rem;z-index:20;max-height:min(65vh,560px);overflow-y:auto;text-align:left}.drop-enter-active{transition:opacity .22s,transform .22s}.drop-leave-active{transition:opacity .15s,transform .15s}.drop-enter-from,.drop-leave-to{opacity:0;transform:translateY(-8px)}.list{list-style:none;margin:0;padding:0}.card-list{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:.5rem}.block{width:100%;max-width:760px;margin:2.5rem auto 0;padding:0 1.25rem}.chips-wrap{width:100%;max-width:600px;margin:1.6rem auto 0;padding:0 1.25rem;text-align:center}.section-label{font-size:.78rem;color:var(--ink-dim);font-weight:600;margin:0 0 .7rem;text-transform:uppercase;letter-spacing:.04em}.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}.block .chips{justify-content:flex-start}.chip{display:inline-flex;align-items:center;gap:.35rem;background:var(--surface);border:1px solid var(--border-strong);color:var(--ink);border-radius:20px;padding:.45rem 1rem;font-family:inherit;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s}.chip:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}.chip:active{transform:scale(.95)}.chip.recent{color:var(--ink-dim)}.row-head{display:flex;align-items:baseline;gap:.6rem;margin:0 0 .9rem .3rem}.row-head h2{font-size:1.15rem;font-weight:700;margin:0}.row-count{color:var(--accent);background:var(--accent-soft);font-size:.78rem;font-weight:700;padding:.1rem .55rem;border-radius:20px}.item{display:flex;align-items:center;gap:.85rem;padding:.6rem .7rem;border-radius:12px;transition:background .14s;opacity:0;transform:translateY(-6px);animation:slideIn .3s ease forwards}.item.static{opacity:1;transform:none;animation:none}.item:hover{background:var(--bg)}@keyframes slideIn{to{opacity:1;transform:translateY(0)}}.thumb{position:relative;flex-shrink:0;width:56px;height:56px;border-radius:10px;overflow:hidden;background:var(--bg);border:none;padding:0;display:block}.thumb-btn{cursor:pointer}.thumb img{width:100%;height:100%;object-fit:cover;display:block}.play-veil{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#00000059;opacity:0;transition:opacity .15s}.thumb-btn:hover .play-veil{opacity:1}.dur{position:absolute;bottom:3px;right:3px;background:#000000b8;color:#fff;font-size:.6rem;font-weight:700;padding:.05rem .3rem;border-radius:4px;font-variant-numeric:tabular-nums}.meta{flex:1;min-width:0}.title{margin:0 0 .2rem;font-size:.95rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sub{margin:0;font-size:.78rem;color:var(--ink-dim);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.play-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid var(--border-strong);color:var(--ink-dim);cursor:pointer;transition:all .15s}.play-btn:hover{border-color:var(--accent);color:var(--accent)}.play-btn:active{transform:scale(.9)}.play-btn.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}.fav-btn{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background:transparent;border:1px solid var(--border-strong);color:var(--ink-dim);cursor:pointer;transition:all .15s}.fav-btn:hover{border-color:var(--fav);color:var(--fav)}.fav-btn:active{transform:scale(.9)}.fav-btn.active{background:var(--fav-soft);border-color:var(--fav);color:var(--fav)}.dl-btn{display:flex;align-items:center;justify-content:center;gap:.4rem;background:var(--accent);color:#fff;border:none;border-radius:10px;height:40px;padding:0 1rem;font-family:inherit;font-weight:700;font-size:.85rem;cursor:pointer;transition:background .15s,transform .1s}.dl-btn:hover:not(:disabled){background:var(--accent-hover)}.dl-btn:active:not(:disabled){transform:scale(.95)}.dl-btn:disabled{opacity:.75;cursor:default}.dl-text{white-space:nowrap}.sk{background:linear-gradient(90deg,var(--bg) 25%,#eef0f6 50%,var(--bg) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:6px}.sk-line{height:11px;margin:5px 0}.skeleton .thumb{background:none}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.error{color:var(--err);font-size:.9rem;padding:1.2rem;text-align:center;margin:0}.empty{text-align:center;padding:2.5rem 1rem}.empty p{margin:.2rem 0;font-size:.95rem;color:var(--ink);font-weight:600}.empty-sub{font-size:.82rem!important;color:var(--ink-dim)!important;font-weight:500!important}.stats{max-width:760px;margin:2.5rem auto 0;padding:0 1.25rem;display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}.stat{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:1.3rem .8rem;text-align:center}.stat-num{display:block;font-size:1.5rem;font-weight:800;color:var(--accent);letter-spacing:-.02em}.stat-num small{font-size:.7rem;font-weight:700}.stat-lbl{font-size:.78rem;color:var(--ink-dim);font-weight:600}.toast{position:fixed;left:50%;bottom:1.8rem;transform:translate(-50%);z-index:30;display:flex;align-items:center;gap:.5rem;background:var(--ink);color:#fff;padding:.75rem 1.15rem;border-radius:12px;font-size:.86rem;font-weight:600;box-shadow:0 15px 40px -12px #00000059;max-width:90vw}.toast svg{color:#7ee6a0;flex-shrink:0}.toast-enter-active,.toast-leave-active{transition:opacity .22s,transform .22s}.toast-enter-from,.toast-leave-to{opacity:0;transform:translate(-50%,10px)}.foot{margin-top:auto;text-align:center;padding:2.5rem 1rem 2rem;font-size:.75rem;color:var(--ink-dim);font-weight:500}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;background:#14161d80;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow-y:auto}.modal{position:relative;width:100%;max-width:560px;background:var(--surface);border-radius:20px;box-shadow:0 30px 80px -20px #14161d66;padding:1.6rem}.modal-close{position:absolute;top:1rem;right:1rem;width:36px;height:36px;border-radius:50%;border:none;background:var(--bg);color:var(--ink-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s}.modal-close:hover{background:var(--border)}.detail-head{display:flex;gap:1.1rem;margin-bottom:1.6rem}.detail-cover{width:120px;height:120px;border-radius:14px;object-fit:cover;flex-shrink:0;background:var(--bg)}.detail-info{flex:1;min-width:0;padding-top:.2rem}.detail-title{font-size:1.15rem;font-weight:700;margin:0 0 .3rem;line-height:1.3}.detail-sub{font-size:.88rem;color:var(--ink-dim);font-weight:500;margin:0 0 1rem}.detail-actions{display:flex;flex-wrap:wrap;gap:.5rem}.play-btn.lg,.dl-btn.lg{width:auto;padding:0 1rem;gap:.4rem}.play-btn.lg span,.dl-btn.lg span{font-size:.85rem;font-weight:700}.fav-btn.lg{width:44px;height:44px}.play-btn.lg,.dl-btn.lg,.fav-btn.lg{height:44px}.detail-related .section-label{margin-bottom:.6rem}.fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter-from,.fade-leave-to{opacity:0}@media (max-width:520px){.dl-text{display:none}.dl-btn{padding:0;width:40px}.stats{grid-template-columns:repeat(2,1fr)}.nav{padding:1rem 1.25rem}}@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition:none!important}}