*,::after,::before{box-sizing:border-box;margin:0;padding:0}body{font-family:'Segoe UI',sans-serif;background:#0f0f0f;color:#f1f1f1;min-height:100vh;padding:16px;font-size:16px}.container{width:100%;max-width:900px;margin:0 auto}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}h1{font-size:1.5rem;color:red;letter-spacing:-.5px}.lang-btn{padding:8px 14px;min-height:44px;background:0 0;color:#aaa;border:1px solid #444;border-radius:6px;font-size:.85rem;cursor:pointer;transition:border-color .2s,color .2s}.lang-btn:hover{border-color:red;color:#f1f1f1}.search-area{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}#url-input{width:100%;padding:12px 14px;border-radius:6px;border:1px solid #333;background:#1a1a1a;color:#f1f1f1;font-size:1rem;outline:0;transition:border-color .2s;min-height:44px}#url-input:focus{border-color:red}.search-btns{display:flex;gap:8px}.search-btns button{flex:1;min-height:44px;padding:10px 12px;border:none;border-radius:6px;font-size:.95rem;cursor:pointer;transition:background .2s}#load-btn{background:red;color:#fff}#load-btn:hover{background:#c00}#add-playlist-btn{background:#1a6bab;color:#fff}#add-playlist-btn:hover{background:#1d7fc4}#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:44px;background:#1e1e1e;color:#f1f1f1;border:1px solid #333;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background .2s}.playlist-play-btn:hover{background:#2a2a2a}.playlist-item.active .playlist-play-btn{border-color:red;color:#f66}.playlist-delete-btn{padding:10px 12px;min-height:44px;min-width:44px;background:#3a1a1a;color:#e74c3c;border:none;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background .2s}.playlist-delete-btn:hover{background:#4a2020}.loop-badge{display:inline-block;margin-left:8px;padding:2px 7px;background:#2c7a4b;color:#fff;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;min-height:44px;padding:10px 8px;border:none;border-radius:6px;font-size:.9rem;cursor:pointer;transition:opacity .2s}.playback-btns button:hover{opacity:.8}#play-btn{background:#2ecc71;color:#fff}#pause-btn{background:#f39c12;color:#fff}.settings-row{display:flex;flex-direction:column;gap:10px}.speed-control{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#1a1a1a;border-radius:6px;min-height:44px}.speed-control label{font-size:.85rem;color:#aaa;min-width:44px;flex-shrink:0}#speed{flex:1;background:#2a2a2a;color:#f1f1f1;border:1px solid #333;border-radius:4px;padding:6px 8px;font-size:.9rem;cursor:pointer;min-height:36px}#speed:focus{outline:0;border-color:red}.ab-loop{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;padding:12px;background:#1a1a1a;border-radius:8px}.ab-points{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.ab-label{font-size:.85rem;color:#aaa;flex-shrink:0}.ab-loop button{padding:8px 14px;min-height:44px;border:none;border-radius:6px;font-size:.85rem;cursor:pointer;color:#f1f1f1;transition:background .2s}#set-a-btn{background:#1a6bab}#set-a-btn:hover{background:#1d7fc4}#set-b-btn{background:#7b2d8b}#set-b-btn:hover{background:#962fa6}#save-ab-btn{background:#2c7a4b}#save-ab-btn:hover{background:#38a363}#clear-ab-btn{background:#444}#clear-ab-btn:hover{background:#555}.ab-time{font-size:.9rem;font-variant-numeric:tabular-nums;color:#ccc;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:44px;background:#1e1e1e;color:#f1f1f1;border:1px solid #333;border-radius:6px;cursor:pointer;font-size:.85rem;transition:background .2s}.ab-activate-btn:hover{background:#2a2a2a}.ab-delete-btn{padding:10px 12px;min-height:44px;min-width:44px;background:#3a1a1a;color:#e74c3c;border:none;border-radius:6px;cursor:pointer;font-size:.85rem;transition:background .2s}.ab-delete-btn:hover{background:#4a2020}#status{font-size:.85rem;color:#888;text-align:center;padding:10px;background:#1a1a1a;border-radius:6px}@media (min-width:600px){body{padding:24px}h1{font-size:1.8rem}.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{width:auto}.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}}