:root{--pink:#cc6b84;--pink-hover:#b3566d;--pink-dim:#251018;--bg:#0d0d0d;--surface:#151515;--surface-2:#1c1c1c;--border:#2a2a2a;--text:#f0ece8;--text-muted:#6e6460;--radius:6px;--touch:44px}*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{font-family:'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;padding:16px;font-size:16px}.container{width:100%;max-width:900px;margin:0 auto}button{min-height:var(--touch);padding:10px 16px;border:none;border-radius:var(--radius);font-size:.9rem;cursor:pointer;transition:background .15s,opacity .15s;color:var(--text)}.btn-primary{background:var(--pink);color:#fff}.btn-primary:hover{background:var(--pink-hover)}.btn-secondary{background:var(--surface-2);border:1px solid var(--border)}.btn-secondary:hover{background:#272727}.btn-destructive{background:var(--pink-dim);color:var(--pink);min-width:var(--touch)}.btn-destructive:hover{background:#4a1535}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}h1{font-size:1.2rem;color:var(--text);font-weight:600;letter-spacing:.02em}.lang-btn{background:0 0;color:var(--text-muted);border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;min-height:var(--touch);padding:8px 14px;cursor:pointer;transition:border-color .15s,color .15s}.lang-btn:hover{border-color:var(--pink);color:var(--text)}.search-area{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}#url-input{width:100%;padding:12px 14px;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem;outline:0;min-height:var(--touch);transition:border-color .15s}#url-input:focus{border-color:var(--pink)}#url-input::placeholder{color:var(--text-muted)}.search-btns{display:flex;gap:8px}.search-btns button{flex:1}#load-btn{background:var(--pink);color:#fff}#load-btn:hover{background:var(--pink-hover)}#add-playlist-btn{background:var(--surface-2);border:1px solid var(--border)}#add-playlist-btn:hover{background:#272727}#playlist{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.playlist-item{display:flex;gap:6px}.playlist-play-btn{flex:1;text-align:left;padding:10px 12px;min-height:var(--touch);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:.9rem;transition:background .15s}.playlist-play-btn:hover{background:var(--surface-2)}.playlist-item.active .playlist-play-btn{border-color:var(--pink);color:var(--pink)}.playlist-delete-btn{padding:10px 12px;min-height:var(--touch);min-width:var(--touch);background:var(--pink-dim);color:var(--pink);border:none;border-radius:var(--radius);cursor:pointer;font-size:.9rem;transition:background .15s}.playlist-delete-btn:hover{background:#4a1535}.loop-badge{display:inline-block;margin-left:8px;padding:2px 7px;background:var(--pink-dim);color:var(--pink);border-radius:10px;font-size:.72rem;vertical-align:middle}#player-wrapper{position:relative;width:100%;padding-top:56.25%;background:#000;border-radius:8px;overflow:hidden;margin-bottom:12px}#player{position:absolute;inset:0;width:100%;height:100%}.controls{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}.playback-btns{display:flex;gap:8px}.playback-btns button{flex:1}#play-btn{background:var(--pink);color:#fff}#play-btn:hover{background:var(--pink-hover)}#pause-btn{background:var(--surface-2);border:1px solid var(--border)}#pause-btn:hover{background:#272727}.settings-row{display:flex;flex-direction:column;gap:10px}.speed-control{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--surface);border-radius:var(--radius);min-height:var(--touch);flex-wrap:wrap}.speed-control label{font-size:.85rem;color:var(--text-muted);flex-shrink:0}#speed{flex:1;accent-color:var(--pink);cursor:pointer}#speed-value{font-size:.85rem;color:var(--text-muted);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}.playlist-details{margin-bottom:12px}.playlist-details summary{list-style:none;display:flex;align-items:center;gap:6px;padding:8px 4px;font-size:.85rem;color:var(--text-muted);cursor:pointer;user-select:none}.playlist-details summary::-webkit-details-marker{display:none}.playlist-details summary::before{content:'▶';font-size:.65rem;transition:transform .2s;color:var(--text-muted)}.playlist-details[open] summary::before{transform:rotate(90deg)}.playlist-details summary:hover{color:var(--text)}.ab-loop{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;padding:12px;background:var(--surface);border-radius:8px}.ab-points{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ab-label{font-size:.85rem;color:var(--text-muted);flex-shrink:0}.ab-loop button{min-height:var(--touch);padding:8px 14px;border:none;border-radius:var(--radius);font-size:.85rem;cursor:pointer;transition:background .15s}#set-a-btn,#set-b-btn{background:var(--surface-2);color:var(--text);border:1px solid var(--border)}#set-a-btn:hover,#set-b-btn:hover{background:#272727}#save-ab-btn{background:var(--pink);color:#fff}#save-ab-btn:hover{background:var(--pink-hover)}#clear-ab-btn{background:var(--surface-2);color:var(--text-muted);border:1px solid var(--border)}#clear-ab-btn:hover{background:#272727;color:var(--text)}.ab-time{font-size:.9rem;font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:38px}.ab-actions{display:flex;gap:8px}.ab-actions button{flex:1}#ab-list{list-style:none;display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.ab-list-item{display:flex;gap:6px}.ab-activate-btn{flex:1;text-align:left;padding:10px 12px;min-height:var(--touch);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:.85rem;transition:background .15s}.ab-activate-btn:hover{background:var(--surface-2)}.ab-delete-btn{padding:10px 12px;min-height:var(--touch);min-width:var(--touch);background:var(--pink-dim);color:var(--pink);border:none;border-radius:var(--radius);cursor:pointer;font-size:.85rem;transition:background .15s}.ab-delete-btn:hover{background:#4a1535}#toast-container{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:1000;pointer-events:none}.toast{padding:10px 18px;background:var(--pink-dim);color:var(--pink);border:1px solid var(--pink);border-radius:var(--radius);font-size:.9rem;box-shadow:0 4px 16px rgba(0,0,0,.5);pointer-events:auto;animation:toast-in .2s ease forwards;max-width:min(360px,90vw);text-align:center;line-height:1.4}.toast.toast-out{animation:toast-out .3s ease forwards}@keyframes toast-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes toast-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(12px)}}@media (min-width:600px){body{padding:24px}.search-area{flex-direction:row;align-items:center}#url-input{flex:1}.search-btns{flex-shrink:0}.search-btns button{flex:none;width:auto;padding:10px 18px}.settings-row{flex-direction:row;align-items:center}.speed-control{flex-shrink:0}.ab-actions button{flex:none}}@media (min-width:900px){body{padding:40px 24px}.controls{flex-direction:row;align-items:center}.playback-btns{flex-shrink:0}.settings-row{flex:1;justify-content:flex-end}}