.video-player{display:flex;flex-direction:column;height:100%}.video-info{padding:1rem 1.5rem;border-bottom:1px solid #26262c;background:#18181b;flex-shrink:0}.video-info-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.5rem}.video-title{font-size:1.125rem;color:#efeff1;word-break:break-word;font-weight:500;line-height:1.4;flex:1;margin:0}.share-button{display:flex;align-items:center;gap:.5rem;padding:.5rem .875rem;background:#26262c;border:1px solid #3a3a3d;border-radius:4px;color:#efeff1;font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0}.share-button:hover{background:#3a3a3d;border-color:#464649}.share-button:active{background:#1f1f23}.share-icon{width:16px;height:16px;flex-shrink:0;stroke:currentColor}.share-button span:last-child{display:none}@media (min-width: 768px){.share-button span:last-child{display:inline}}.video-meta{display:flex;gap:1rem;font-size:.8125rem;color:#adadb8}.video-container{position:relative;flex:1;display:flex;align-items:center;justify-content:center;background:#000;overflow:hidden;min-height:0}.video-element{width:100%;height:100%;max-height:100%;object-fit:contain;touch-action:manipulation;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.video-loading,.video-error{color:#adadb8;text-align:center;padding:2rem}.video-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:10}.video-loading-spinner{color:#efeff1;font-size:.9375rem;display:flex;align-items:center;gap:.75rem;font-weight:500}.video-loading-spinner:before{content:"";width:20px;height:20px;border:2px solid rgba(145,71,255,.3);border-top-color:#9147ff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.video-error button{margin-top:1rem;padding:.625rem 1.25rem;background:#9147ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:500;transition:background .2s}.video-error button:hover{background:#772ce8}.video-list{display:flex;flex-direction:column;height:100%}.video-list-title{font-size:1rem;padding:1rem 1.25rem;color:#efeff1;font-weight:600;border-bottom:1px solid #26262c;background:#18181b;position:sticky;top:0;z-index:1}.video-list-items{display:flex;flex-direction:column;overflow-y:auto;flex:1}.video-item{display:flex;flex-direction:column;padding:.75rem;cursor:pointer;transition:background .15s;border-bottom:1px solid #26262c;position:relative}.video-item:last-child{border-bottom:none}.video-item:hover{background:#1f1f23}.video-item.selected{background:#26262c}.video-item.selected:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#9147ff}.video-item-header{display:flex;align-items:flex-start;gap:.75rem;margin-bottom:.375rem}.video-item-icon{font-size:.875rem;flex-shrink:0;opacity:.6;margin-top:.125rem;color:#adadb8}.video-item.selected .video-item-icon{opacity:1;color:#9147ff}.video-item-content{flex:1;min-width:0}.video-item-name{font-weight:500;font-size:.875rem;color:#efeff1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.4}.video-item.selected .video-item-name{color:#efeff1}.video-item-details{font-size:.75rem;color:#adadb8;display:flex;gap:.5rem;align-items:center;margin-top:.25rem}.video-item.selected .video-item-details{color:#adadb8}.empty-list{text-align:center;padding:3rem 1.5rem;color:#adadb8;font-size:.875rem}.video-list-items::-webkit-scrollbar{width:6px}.video-list-items::-webkit-scrollbar-track{background:transparent}.video-list-items::-webkit-scrollbar-thumb{background:#3a3a3d;border-radius:3px}.video-list-items::-webkit-scrollbar-thumb:hover{background:#464649}.app{min-height:100vh;display:flex;flex-direction:column;background:#0e0e10}@media (min-width: 1025px){.app{height:100vh;overflow:hidden}}.app-header{background:#18181b;border-bottom:1px solid #26262c;padding:1rem 2rem;display:flex;align-items:center}.app-header h1{font-size:1.25rem;font-weight:600;color:#efeff1;letter-spacing:-.01em;margin-bottom:.125rem}.app-header p{font-size:.8125rem;color:#adadb8;font-weight:400}.app-main{flex:1;padding:1.5rem;max-width:1600px;margin:0 auto;width:100%;display:flex;flex-direction:column}@media (min-width: 1025px){.app-main{overflow:hidden}}.app-content{display:grid;grid-template-columns:1fr 380px;gap:1.5rem;flex:1;min-height:0}@media (min-width: 1025px){.app-content{overflow:hidden}}.video-section{background:#18181b;border-radius:8px;overflow:hidden;display:flex;flex-direction:column;border:1px solid #26262c;min-height:0}.list-section{background:#18181b;border-radius:8px;overflow:hidden;border:1px solid #26262c;display:flex;flex-direction:column;min-height:0}.loading,.error{text-align:center;padding:3rem;color:#adadb8;background:#18181b;border-radius:8px;overflow:hidden;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}.error{color:#ef4444}.error button{margin-top:1rem;padding:.625rem 1.25rem;background:#9147ff;color:#fff;border:none;border-radius:4px;cursor:pointer;font-size:.875rem;font-weight:500;transition:background .2s}.error button:hover{background:#772ce8}.no-video-selected{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;min-height:0;color:#adadb8;font-size:.9375rem;background:#18181b;padding:2rem;text-align:center;overflow:hidden}.no-video-selected:before{content:"▶";font-size:3rem;opacity:.3;margin-bottom:1rem;color:#9147ff}@media (max-width: 1024px){.app-main{padding:1rem}.app-content{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:1rem}.list-section{min-height:0;max-height:none;flex:0 0 auto}.video-section{min-height:50vh}}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%}@media (min-width: 1025px){html,body{overflow:hidden}}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0e0e10;color:#efeff1}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}