.app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;gap:.75rem;padding:.75rem 1.25rem;background:var(--sidebar-bg);border-bottom:1px solid var(--border);flex-shrink:0}.back-link{color:var(--text-muted);text-decoration:none;font-size:.875rem;padding:.375rem .75rem;border-radius:var(--radius-sm);transition:all .2s ease-out}.back-link:hover{background:var(--hover-bg);color:var(--text)}.app-title{font-size:1rem;font-weight:600;margin:0;flex:1}.topbar-right{display:flex;gap:.5rem}.ghost-btn{background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:.375rem .75rem;border-radius:var(--radius-sm);font-size:.8125rem;cursor:pointer;transition:all .2s ease-out;font-family:inherit}.ghost-btn:hover{background:var(--hover-bg);color:var(--text);border-color:var(--primary)}.layout{flex:1;display:grid;grid-template-columns:1fr 22rem;gap:1rem;padding:1rem;min-height:0}.player-area{background:var(--card-bg);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;min-width:0}.video-player{flex:1;background:#000;position:relative;display:flex;align-items:center;justify-content:center;min-height:0;overflow:hidden}.video-player video{width:100%;height:100%;display:block;background:#000}.video-player.page-fs{position:fixed;inset:0;z-index:9999;border-radius:0}.video-player:fullscreen{background:#000}.placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#888;text-align:center;font-size:.9375rem;padding:2rem;pointer-events:none}.placeholder-icon{font-size:4rem;opacity:.3;margin-bottom:1rem}.error-overlay{position:absolute;inset:0;background:#000000d9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#fff;font-size:.9375rem;z-index:10}.error-overlay button{padding:.5rem 1.25rem;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);cursor:pointer;font-family:inherit}.controls-overlay{position:absolute;left:0;right:0;bottom:0;padding:0 1rem .75rem;background:linear-gradient(to top,rgba(0,0,0,.75),transparent);display:flex;flex-direction:column;gap:.5rem;z-index:5;transition:opacity .25s ease-out}.video-player.hide-controls .controls-overlay{opacity:0;pointer-events:none}.progress{position:relative;height:6px;background:#fff3;border-radius:3px;cursor:pointer;margin-top:.5rem;transition:height .15s ease-out}.progress:hover{height:8px}.progress-buffered{position:absolute;left:0;top:0;bottom:0;background:#ffffff4d;border-radius:3px;pointer-events:none}.progress-played{position:absolute;left:0;top:0;bottom:0;background:var(--primary);border-radius:3px;pointer-events:none}.progress-thumb{position:absolute;top:50%;width:14px;height:14px;background:var(--primary);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;transition:opacity .15s ease-out;box-shadow:0 1px 4px #0000004d}.progress:hover .progress-thumb{opacity:1}.progress-tooltip{position:absolute;bottom:100%;transform:translate(-50%);margin-bottom:.5rem;padding:.25rem .5rem;background:#000000e6;color:#fff;font-size:.75rem;font-family:var(--font-mono);border-radius:var(--radius-sm);pointer-events:none;white-space:nowrap}.controls-row{display:flex;align-items:center;gap:.5rem;color:#fff}.ctrl-btn{background:transparent;border:none;color:#fff;padding:.375rem .625rem;border-radius:var(--radius-sm);cursor:pointer;font-size:.875rem;font-family:inherit;transition:background .15s ease-out;min-width:2rem;display:flex;align-items:center;justify-content:center}.ctrl-btn:hover{background:#ffffff26}.jump-btn{background:#ffffff1f;font-weight:500;font-size:.8125rem;padding:.375rem .75rem}.jump-btn:hover{background:var(--primary)}.time-display{font-family:var(--font-mono);font-size:.8125rem;color:#ffffffd9;white-space:nowrap;margin-left:.25rem}.video-title{flex:1;font-size:.875rem;color:#ffffffe6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 .5rem;margin:0 auto;text-align:center;max-width:30%;opacity:0;transition:opacity .2s ease-out}.video-player.page-fs .video-title,.video-player:fullscreen .video-title{opacity:1}.volume-slider{width:5rem;height:4px;accent-color:var(--primary);cursor:pointer}.current-info{padding:.625rem 1rem;border-top:1px solid var(--border);flex-shrink:0;min-width:0}.current-title{font-size:.875rem;font-weight:500;color:var(--text)}.current-url{font-family:var(--font-mono);font-size:.75rem;color:var(--text-muted);margin-top:.25rem;word-break:break-all;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sidebar-panel{background:var(--card-bg);border-radius:var(--radius-card);box-shadow:var(--shadow-card);display:flex;flex-direction:column;overflow:hidden;min-width:0}.input-section{padding:.75rem;border-bottom:1px solid var(--border);flex-shrink:0;min-width:0}.input-label{font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.375rem;display:block}.sidebar-panel input[type=text]{display:block;width:100%;max-width:100%;min-width:0;padding:.375rem .625rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-size:.8125rem;font-family:inherit;margin-bottom:.375rem;transition:border .2s ease-out;box-sizing:border-box}.sidebar-panel input[type=text]:focus{outline:none;border-color:var(--primary)}.button-row{display:flex;gap:.375rem}.primary-btn,.secondary-btn{flex:1;min-width:0;padding:.4375rem;border:none;border-radius:var(--radius-sm);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .2s ease-out;font-family:inherit}.primary-btn{background:var(--primary);color:#fff}.primary-btn:hover{opacity:.9}.secondary-btn{background:var(--hover-bg);color:var(--text)}.secondary-btn:hover{background:var(--active-bg)}.filter-bar{display:flex;flex-wrap:wrap;gap:.3125rem;padding:.5rem .75rem;border-bottom:1px solid var(--border);flex-shrink:0;max-height:5rem;overflow-y:auto}.filter-chip{display:inline-flex;align-items:center;gap:.25rem;padding:.1875rem .5625rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-full);font-size:.6875rem;color:var(--text-muted);cursor:pointer;transition:all .15s ease-out;user-select:none;font-family:inherit}.filter-chip:hover{border-color:var(--primary);color:var(--text)}.filter-chip.active{background:var(--primary);border-color:var(--primary);color:#fff}.filter-chip .chip-count{opacity:.6;font-size:.625rem}.filter-chip.active .chip-count{opacity:.9}.playlist-section{flex:1;display:flex;flex-direction:column;min-height:0}.playlist-header{padding:.5rem .75rem;font-size:.6875rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--border)}.playlist-count{background:var(--hover-bg);padding:.0625rem .4375rem;border-radius:var(--radius-full);font-size:.625rem;flex:1}.ghost-btn-mini{background:transparent;border:none;color:var(--text-muted);cursor:pointer;padding:.1875rem .3125rem;border-radius:var(--radius-sm);font-size:.8125rem;font-family:inherit}.ghost-btn-mini:hover{background:var(--hover-bg);color:var(--text)}.playlist{flex:1;list-style:none;margin:0;padding:.375rem;overflow-y:auto;min-height:0}.item{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.5rem .625rem;margin-bottom:.3125rem;cursor:pointer;transition:all .15s ease-out;display:flex;flex-direction:column;gap:.1875rem;position:relative;min-width:0}.item:hover{background:var(--card-bg);border-color:var(--primary);box-shadow:var(--shadow-sm)}.item.active{border-color:var(--primary);background:var(--active-bg)}.item.active:before{content:"";position:absolute;left:-1px;top:.375rem;bottom:.375rem;width:2px;background:var(--primary);border-radius:1px}.item-top{display:flex;align-items:center;gap:.4375rem;min-width:0}.item-favicon{width:.875rem;height:.875rem;border-radius:2px;flex-shrink:0;background:var(--hover-bg);object-fit:contain}.item-title{font-size:.8125rem;color:var(--text);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:text;flex:1;min-width:0}.item.active .item-title{color:var(--primary)}.item-title-edit{flex:1;min-width:0;padding:.0625rem .25rem;background:var(--card-bg);border:1px solid var(--primary);border-radius:var(--radius-sm);color:var(--text);font-size:.8125rem;font-family:inherit;margin-bottom:0;box-sizing:border-box}.item-title-edit:focus{outline:none}.item-category{font-size:.625rem;padding:0 .375rem;background:var(--primary-dim);color:var(--primary);border-radius:var(--radius-full);font-weight:500;flex-shrink:0;max-width:4.5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.25rem}.item-meta{display:flex;align-items:center;gap:.375rem;font-family:var(--font-mono);font-size:.625rem;color:var(--text-muted);overflow:hidden;min-width:0}.item-domain{flex-shrink:0;max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.item-path{opacity:.7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}.item-actions{display:flex;gap:.1875rem;margin-top:.1875rem;height:0;overflow:hidden;opacity:0;transition:opacity .15s ease-out,height .15s ease-out,margin-top .15s ease-out}.item:hover .item-actions{opacity:1;height:1.375rem;margin-top:.25rem}.item-actions button{flex:1;min-width:0;background:transparent;border:1px solid var(--border);color:var(--text-muted);padding:0 .25rem;border-radius:var(--radius-sm);font-size:.625rem;cursor:pointer;transition:all .15s ease-out;font-family:inherit;line-height:1.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.item-actions button:hover{background:var(--hover-bg);color:var(--text)}.item-actions .btn-danger:hover{color:#dc2626;border-color:#dc2626}.playlist-empty{padding:1.5rem 1rem;text-align:center;color:var(--text-muted);font-size:.75rem}@media(max-width:900px){.layout{grid-template-columns:1fr;grid-template-rows:1fr auto}.sidebar-panel{max-height:60vh}.video-title{display:none}}