:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}html,body,#root{height:100%;margin:0;padding:0}body{min-width:320px}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.app{min-height:100vh;height:100%;display:flex;flex-direction:column;align-items:center;padding:2rem;background:linear-gradient(135deg,#e0f7fa,#b2ebf2,#e0f7fa);width:100%;box-sizing:border-box}.app.menu-mode{background:#0a1929;padding:3rem 2rem;width:100%;align-items:stretch;min-height:100vh;height:100%;box-sizing:border-box;overflow-x:hidden}.app:not(.menu-mode){background:#0a1929;padding:2rem;overflow-x:hidden}.app.menu-mode .app-header h1{color:#fffbf0;-webkit-text-fill-color:#FFFBF0;background:none}.app.menu-mode .app-header .subtitle{color:#fffbf0cc}.app.menu-mode .status-card{display:none}.app.menu-mode .app-header{width:100%;max-width:100%}.app.menu-mode .display-name-indicator{background:#fffbf033;border-color:#fffbf066}.app.menu-mode .name-label,.app.menu-mode .name-value{color:#fffbf0e6}.app.menu-mode .change-name-button{color:#fffbf0cc}.app.menu-mode .change-name-button:hover{background:#fffbf033;color:#fffbf0}.app-header{margin-bottom:3rem}.header-content{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;width:100%}.header-content>div:first-child{grid-column:2;text-align:center;justify-self:center}.header-auth-section{grid-column:3;justify-self:end;display:flex;align-items:center;gap:1rem}.auth-buttons{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.auth-button{padding:.6rem 1.2rem;border-radius:8px;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;border:none;white-space:nowrap}.google-sign-in-button{background:#4285f4;color:#fff}.google-sign-in-button:hover{background:#357ae8;box-shadow:0 2px 8px #4285f44d}.guest-button{background:#fff3;color:#fffbf0e6;border:1px solid rgba(255,251,240,.3)}.guest-button:hover{background:#ffffff4d;color:#fffbf0}.app.menu-mode .guest-button{background:#fffbf026;color:#fffbf0e6;border-color:#fffbf066}.app.menu-mode .guest-button:hover{background:#fffbf040;color:#fffbf0}.header-auth-section{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}.google-auth-button-container{display:flex;align-items:center}.google-user-name{font-weight:600;color:#fffbf0e6;font-size:.9rem}.auth-badge{font-size:.75rem;color:#fffbf099;font-style:italic}.google-sign-out-button{padding:.5rem 1rem;background:#e0f7fa33;border:1px solid rgba(79,195,247,.3);border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .2s;color:#fffbf0e6}.google-sign-out-button:hover{background:#e0f7fa4d;border-color:#4fc3f780;color:#fffbf0}.app:not(.menu-mode) .google-user-name,.app:not(.menu-mode) .google-sign-out-button,.app:not(.menu-mode) .auth-badge{color:#fffbf0e6}.app.menu-mode .google-user-name,.app.menu-mode .google-sign-out-button,.app.menu-mode .auth-badge{color:#fffbf0e6}@media(max-width:768px){.header-content{grid-template-columns:1fr;gap:1.5rem}.header-content>div:first-child{grid-column:1}.header-auth-section{grid-column:1;justify-self:center;flex-wrap:wrap;justify-content:center}.display-name-indicator{font-size:.85rem;padding:.4rem .75rem}.auth-buttons{flex-direction:column;width:100%}.auth-button{width:100%}}.display-name-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;background:#e0f7fa80;border-radius:20px;border:1px solid rgba(79,195,247,.3);font-size:.9rem}.name-label{color:#546e7a;font-weight:500}.name-value{color:#0277bd;font-weight:600}.change-name-button{background:none;border:none;color:#4fc3f7;cursor:pointer;font-size:1rem;padding:.25rem .5rem;border-radius:4px;transition:all .2s;line-height:1}.change-name-button:hover{background:#4fc3f733;color:#0288d1}.guest-sign-out-button{background:#ffffff1a;border:1px solid rgba(79,195,247,.3);color:#4fc3f7;cursor:pointer;font-size:.85rem;padding:.4rem .75rem;border-radius:6px;transition:all .2s;font-weight:500;margin-left:.25rem}.guest-sign-out-button:hover{background:#4fc3f733;color:#0288d1;border-color:#4fc3f7}.app.menu-mode .guest-sign-out-button{background:#fffbf026;color:#fffbf0e6;border-color:#fffbf066}.app.menu-mode .guest-sign-out-button:hover{background:#fffbf040;color:#fffbf0;border-color:#fffbf099}.google-auth-button-container{display:inline-block}.google-auth-signed-in{display:flex;align-items:center;gap:.75rem}.google-auth-with-display-name{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.google-display-name{margin-left:0}.google-user-info{display:flex;align-items:center;gap:.5rem}.google-user-avatar{width:32px;height:32px;border-radius:50%;border:2px solid rgba(79,195,247,.3)}.google-user-name{color:#fffbf0e6;font-weight:500;font-size:.9rem}.app.menu-mode .google-user-name{color:#fffbf0e6}.google-sign-out-button{padding:.5rem 1rem;background:#ffffff1a;color:#fffbf0e6;border:1px solid rgba(255,251,240,.3);border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .2s}.google-sign-out-button:hover{background:#fff3;color:#fffbf0}.app.menu-mode .google-sign-out-button{background:#fffbf026;color:#fffbf0e6;border-color:#fffbf066}.app.menu-mode .google-sign-out-button:hover{background:#fffbf040;color:#fffbf0}.display-name-prompt-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.display-name-prompt-card{background:#fffbf0;border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000004d;border:2px solid rgba(79,195,247,.3);max-width:400px;width:90%;position:relative;animation:slideIn .3s ease-out}.display-name-prompt-close{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.5rem;color:#546e7a;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;line-height:1;padding:0}.display-name-prompt-close:hover{background:#4fc3f71a;color:#0277bd}@keyframes slideIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.display-name-prompt-card h3{margin:0 0 .75rem;color:#0277bd;font-size:1.5rem;font-weight:600}.prompt-description{color:#546e7a;font-size:.9rem;margin:0 0 1.5rem;line-height:1.5}.display-name-input{width:100%;padding:.75rem;border:2px solid rgba(79,195,247,.3);border-radius:8px;font-size:1rem;margin-bottom:.5rem;background:#fff;color:#212121;transition:border-color .2s}.display-name-input:focus{outline:none;border-color:#4fc3f7}.prompt-error{color:#e53935;font-size:.85rem;margin:0 0 1rem}.prompt-actions{display:flex;gap:.75rem;justify-content:flex-end}.prompt-submit{padding:.75rem 1.5rem;background:#4fc3f7;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.prompt-submit:hover{background:#0288d1}.prompt-cancel{padding:.75rem 1.5rem;background:#e0f7fa80;color:#546e7a;border:1px solid rgba(79,195,247,.3);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.prompt-cancel:hover{background:#e0f7facc;color:#0277bd}.name-required-message{text-align:center;padding:1rem;background:#e0f7fa4d;border-radius:8px;border:1px dashed rgba(79,195,247,.4)}.name-required-message p{margin:0 0 .75rem;color:#546e7a;font-size:.9rem}.set-name-button{padding:.5rem 1.25rem;background:#4fc3f7;color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s}.set-name-button:hover{background:#0288d1}.app-header h1{font-size:3rem;margin:0;background:linear-gradient(135deg,#4fc3f7,#29b6f6,#0288d1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;transition:all .2s}.app-header>div>div:first-child{transition:all .2s}.app-header>div>div:first-child:hover{opacity:.8;transform:scale(1.02)}.app-header>div>div:first-child:hover h1{background:linear-gradient(135deg,#29b6f6,#0288d1,#0277bd);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.subtitle{color:#546e7a;font-size:1.2rem;margin-top:.5rem}.version-marker{display:inline-block;margin-top:.25rem;font-size:.7rem;color:#4fc3f799;font-weight:400;font-family:Courier New,monospace;opacity:.7;cursor:help}.app.menu-mode .version-marker{color:#fffbf080}.app-main{width:100%;max-width:1400px;display:flex;flex-direction:column;gap:2rem}.app.menu-mode .app-main{max-width:100%;width:100%;padding:0}.status-card,.info-card,.moments-card,.add-moment-card{background:#fffbf0;border-radius:12px;padding:2rem;box-shadow:0 4px 12px #4fc3f726;border:2px solid rgba(79,195,247,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.status-card h2,.info-card h3,.moments-card h2,.add-moment-card h2{margin-top:0;color:#0277bd}.status{font-size:1.2rem;font-weight:600;margin:1rem 0}.status.connected{color:#10b981}.status.disconnected{color:#ef4444}.api-message{color:#666;font-style:italic;margin-top:.5rem}.info-card p{color:#666;line-height:1.6}.moments-list{display:flex;flex-direction:column;gap:1rem;margin-top:1rem}.moment-item{display:flex;gap:1rem;padding:1rem;background:#e0f7fa80;border-radius:8px;border-left:3px solid #4FC3F7}.moment-timestamp{font-weight:600;color:#0288d1;min-width:80px}.moment-text{color:#333;flex:1}.error{color:#ef4444;margin-top:1rem}.form-group{margin-bottom:1rem}.form-group label{display:block;margin-bottom:.5rem;color:#333;font-weight:500}.form-group input{width:100%;padding:.75rem;border:1px solid rgba(79,195,247,.3);border-radius:8px;font-size:1rem;box-sizing:border-box}.form-group input:focus{outline:none;border-color:#4fc3f7}.form-group input:disabled{background:#e0f7fa80;cursor:not-allowed}.add-moment-card form button{width:100%;padding:.75rem;background:#4fc3f7;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.add-moment-card form button:hover:not(:disabled){background:#0288d1}.add-moment-card form button:disabled{background:#ccc;cursor:not-allowed}.video-layout{display:flex;gap:2rem;width:100%}.video-column{flex:1;min-width:0;display:flex;flex-direction:column;gap:1rem}.live-comments-feed{background:#fffbf0;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;border:2px solid rgba(79,195,247,.2);max-height:300px;display:flex;flex-direction:column}.feed-header{display:flex;align-items:center;gap:1rem;margin:0 0 1rem;padding-bottom:.5rem;border-bottom:2px solid rgba(79,195,247,.3)}.feed-header h2{margin:0;color:#0277bd;font-size:1.5rem;font-weight:600;flex:1}.live-pill{background:#4fc3f7;color:#fff;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.timeline-feed{flex:1;overflow-y:auto;padding-right:.5rem;margin-bottom:1rem}.timeline-feed::-webkit-scrollbar{width:8px}.timeline-feed::-webkit-scrollbar-track{background:#e0f7fa4d;border-radius:4px}.timeline-feed::-webkit-scrollbar-thumb{background:#4fc3f780;border-radius:4px}.timeline-feed::-webkit-scrollbar-thumb:hover{background:#4fc3f7b3}.timeline-header{padding:1rem;margin-bottom:.5rem;border-radius:8px;background:#e0f7fa4d;border-left:3px solid rgba(79,195,247,.5);transition:all .3s ease}.timeline-header.active{background:#4fc3f726;border-left:4px solid #4FC3F7;box-shadow:0 2px 8px #4fc3f74d}.timestamp-button{background:none;border:none;color:#0277bd;font-size:1.1rem;font-weight:700;cursor:pointer;padding:0;margin-right:.75rem;transition:color .2s}.timestamp-button:hover{color:#0288d1;text-decoration:underline}.timeline-header .moment-text{display:block;color:#546e7a;font-size:.9rem;margin-top:.25rem;font-weight:400}.current-indicator{display:inline-block;margin-left:.5rem;color:#4fc3f7;font-size:.85rem;font-weight:600}.timeline-comment{padding:.75rem 1rem .75rem 2.5rem;margin-bottom:.5rem;border-left:2px solid rgba(79,195,247,.2);transition:all .2s}.timeline-comment:hover{background:#e0f7fa33;border-left-color:#4fc3f766}.timeline-comment .comment-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.25rem}.timeline-comment .comment-author{font-weight:600;color:#0277bd;font-size:.9rem}.timeline-comment .comment-time{font-size:.75rem;color:#999}.timeline-comment .comment-text{color:#333;line-height:1.5;font-size:.9rem}.comment-input-section{padding-top:1rem;border-top:2px solid rgba(79,195,247,.2);margin-top:auto}.comment-input-section form{display:flex;gap:.5rem}.feed-empty{color:#999;font-style:italic;text-align:center;padding:2rem;margin:0}.feed-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.75rem;padding-right:.5rem}.feed-container::-webkit-scrollbar{width:6px}.feed-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:3px}.feed-container::-webkit-scrollbar-thumb{background:#4fc3f7;border-radius:3px}.feed-container::-webkit-scrollbar-thumb:hover{background:#0288d1}.live-comment-item{padding:.75rem;background:#e0f7fa66;border-radius:8px;border-left:3px solid #4FC3F7;animation:slideIn .3s ease-out}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.live-comment-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.5rem}.live-comment-author{font-weight:600;color:#4fc3f7;font-size:.9rem}.live-comment-moment{font-size:.8rem;color:#666;background:#b2ebf299;padding:.2rem .5rem;border-radius:4px;font-weight:500}.live-comment-text{color:#333;line-height:1.4;margin-bottom:.25rem}.live-comment-time{font-size:.75rem;color:#999}.menu-full-width{width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;flex:1;padding:0 2rem}.menu-header-with-button{display:flex;justify-content:space-between;align-items:center;margin-bottom:3rem;gap:2rem;flex-wrap:wrap}.menu-title{text-align:center;color:#fffbf0;font-size:2.5rem;margin:0 0 2.5rem;font-weight:600}.import-video-button{padding:.75rem 1.5rem;background:#4fc3f7;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.import-video-button:hover{background:#0288d1;transform:translateY(-2px);box-shadow:0 4px 12px #4fc3f766}.menu-layout{display:flex;gap:2rem;width:100%;align-items:stretch;min-height:60vh}.video-menu{flex:1;min-width:0}.menu-placeholder{flex:0 0 400px;min-width:0;display:flex;align-items:stretch}.placeholder-card{background:#fffbf0;border-radius:16px;padding:3rem 2rem;box-shadow:0 4px 16px #4fc3f733;border:2px solid rgba(79,195,247,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.placeholder-card h3{margin:0 0 1rem;color:#0277bd;font-size:1.5rem;font-weight:600}.placeholder-card p{margin:0;color:#546e7a;font-size:1rem;line-height:1.6}.video-menu h2{text-align:center;color:#0277bd;margin-bottom:2rem;font-size:2rem;font-weight:600}.video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;width:100%;margin-bottom:2.5rem;padding:0;box-sizing:border-box}.video-card{background:#fffbf0;border-radius:16px;padding:0;box-shadow:0 4px 16px #4fc3f733;border:2px solid rgba(79,195,247,.3);cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;overflow:hidden;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.video-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px #4fc3f740;border-color:#4fc3f766}.video-import-row{width:100%;background:#fffbf066;border-radius:12px;padding:1.25rem 1.5rem;border:1px solid rgba(79,195,247,.2);box-shadow:0 2px 8px #0000001a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.import-row-form{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.import-row-label-section{display:flex;flex-direction:column;gap:.25rem;min-width:160px}.import-row-label{color:#fffbf0;font-size:.95rem;font-weight:600;margin:0;cursor:default}.import-row-helper{color:#fffbf0b3;font-size:.8rem}.import-row-inputs{display:flex;gap:1rem;flex:1;min-width:300px}.import-row-url-input,.import-row-title-input{flex:1;padding:.65rem 1rem;border:1px solid rgba(79,195,247,.3);border-radius:8px;font-size:.9rem;background:#fffffff2;color:#333;transition:all .2s;box-sizing:border-box}.import-row-url-input:focus,.import-row-title-input:focus{outline:none;border-color:#4fc3f7;background:#fff;box-shadow:0 0 0 3px #4fc3f71a}.import-row-url-input:disabled,.import-row-title-input:disabled{background:#fff9;cursor:not-allowed}.import-row-title-input{min-width:180px;flex:0 0 auto}.import-row-submit{padding:.65rem 1.5rem;background:#4fc3f7;color:#fff;border:none;border-radius:8px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.import-row-submit:hover:not(:disabled){background:#0288d1;transform:translateY(-1px);box-shadow:0 2px 8px #4fc3f74d}.import-row-submit:disabled{opacity:.6;cursor:not-allowed}.import-row-error{margin-top:.75rem;padding:.65rem 1rem;background:#e5393526;border:1px solid rgba(229,57,53,.3);border-radius:6px;color:#ffcdd2;font-size:.85rem}@media(max-width:768px){.import-row-form{flex-direction:column;align-items:stretch;gap:1rem}.import-row-label-section{min-width:auto}.import-row-inputs{flex-direction:column;min-width:auto;gap:.75rem}.import-row-title-input{min-width:auto;flex:1}.import-row-submit{width:100%}}.badge-custom{background:#9c27b0e6}.video-card-thumbnail{width:100%;aspect-ratio:16 / 9;background:linear-gradient(135deg,#b2ebf2,#80deea);border-radius:12px 12px 0 0;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.thumbnail-video{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0}.play-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#0003;display:flex;align-items:center;justify-content:center;transition:background .3s}.video-card:hover .play-overlay{background:#0000001a}.play-icon{font-size:4rem;color:#fff;opacity:.95;text-shadow:0 2px 12px rgba(0,0,0,.5);transition:transform .3s}.video-card:hover .play-icon{transform:scale(1.1)}.video-card-title{margin:1rem 1.5rem .75rem;color:#0277bd;font-size:1.2rem;font-weight:600;text-align:left}.video-card-button{margin:0 1.5rem 1.5rem;padding:.75rem 2rem;background:linear-gradient(135deg,#4fc3f7,#29b6f6);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;width:auto;align-self:flex-start}.video-card-button:hover{background:linear-gradient(135deg,#29b6f6,#0288d1);transform:translateY(-2px);box-shadow:0 4px 12px #4fc3f766}.video-card-missing{opacity:.7;border-color:#e5393580}.video-card-placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#e0f7fa4d;color:#546e7a}.placeholder-icon{font-size:3rem;margin-bottom:.5rem}.video-card-placeholder p{margin:0;font-size:.9rem;font-weight:500}.thumbnail-image{width:100%;height:100%;object-fit:cover}.video-card-badges{position:absolute;top:.5rem;right:.5rem;display:flex;gap:.5rem;z-index:2}.video-badge{padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;background:#000000b3;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.badge-local{background:#4fc3f7e6}.badge-remote{background:#29b6f6e6}.video-card-actions{display:flex;gap:.5rem;margin:0 1.5rem 1.5rem;align-items:center}.video-card-button{flex:1;margin:0}.video-card-reconnect{flex:1;padding:.75rem 2rem;background:#ffa726;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.video-card-reconnect:hover:not(:disabled){background:#ff9800;transform:translateY(-2px);box-shadow:0 4px 12px #ffa72666}.video-card-reconnect:disabled{opacity:.6;cursor:not-allowed}.video-card-remove{width:2.5rem;height:2.5rem;padding:0;background:#e53935e6;color:#fff;border:none;border-radius:8px;font-size:1.5rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;line-height:1}.video-card-remove:hover{background:#e53935;transform:scale(1.1)}.video-header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;padding:1rem;background:#fffbf0;border-radius:8px;box-shadow:0 2px 8px #4fc3f726;border:2px solid rgba(79,195,247,.2)}.back-to-menu-button{padding:.5rem 1rem;background:#e0f7fa80;border:1px solid rgba(79,195,247,.3);border-radius:6px;font-size:.9rem;cursor:pointer;transition:all .2s;color:#333}.back-to-menu-button:hover{background:#b2ebf299;border-color:#4fc3f7;color:#4fc3f7}.video-title-header{margin:0;color:#333;font-size:1.5rem;font-weight:600;flex:1}.video-player-wrapper{width:100%}.video-player-container{width:100%;background:#000;border-radius:12px;overflow:hidden;position:relative}.video-player{width:100%;height:auto;display:block}.video-progress-bar-container{width:100%;margin-top:.5rem;position:relative;z-index:5}.progress-bar{width:100%;height:6px;background:#0003;border-radius:3px;position:relative;cursor:pointer}.progress-fill{height:100%;background:#4fc3f7;border-radius:3px;transition:width .1s}.moment-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:2px;height:10px;background:#4fc3f7;cursor:pointer;z-index:10;transition:all .2s}.moment-marker:hover{height:14px;background:#0288d1;width:3px}.marker-tooltip{position:absolute;bottom:calc(100% + 8px);width:250px;background:#fffbf0;border-radius:8px;box-shadow:0 4px 12px #4fc3f740;border:2px solid rgba(79,195,247,.3);padding:.75rem;z-index:1000;pointer-events:none}.marker-tooltip:after{content:"";position:absolute;top:100%;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid white}.tooltip-header{margin-bottom:.5rem}.tooltip-timestamp{font-weight:600;color:#4fc3f7;font-size:.9rem}.tooltip-text{font-size:.85rem;color:#333;margin-bottom:.75rem;line-height:1.4}.tooltip-comment-count{font-size:.85rem;color:#666;margin-top:.5rem;padding-top:.5rem;border-top:1px solid rgba(79,195,247,.2)}.moment-details-panel{margin-top:1.5rem;background:#fffbf0;border-radius:12px;padding:1.5rem;box-shadow:0 4px 12px #4fc3f726;border:2px solid rgba(79,195,247,.2)}.moment-details-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid rgba(79,195,247,.2)}.moment-details-header h3{margin:0;color:#333;font-size:1.3rem}.close-moment-button{background:#e0f7fa80;border:1px solid rgba(79,195,247,.3);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.5rem;line-height:1;color:#666;transition:all .2s}.close-moment-button:hover{background:#b2ebf299;color:#333}.moment-details-content{display:flex;flex-direction:column;gap:1.5rem}.moment-details-content .moment-description{font-size:1.1rem;color:#333;margin:0;padding:1rem;background:#e0f7fa66;border-radius:8px}.moment-details-content .comments-section h4{margin-top:0;margin-bottom:1rem;color:#333;font-size:1rem}.moment-details-content .comments-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.moment-details-content .comment-item{padding:.75rem;background:#e0f7fa66;border-radius:6px;display:flex;flex-direction:column;gap:.5rem}.moment-details-content .comment-header{display:flex;gap:.75rem;align-items:center}.moment-details-content .comment-author{font-weight:600;color:#4fc3f7}.moment-details-content .comment-time{font-size:.85rem;color:#999}.moment-details-content .comment-text{color:#333}.moment-details-content .add-comment-section{display:flex;gap:.5rem}.moment-details-content .comment-input{flex:1;padding:.75rem;border:1px solid rgba(79,195,247,.3);border-radius:6px;font-size:.9rem}.moment-details-content .comment-input:focus{outline:none;border-color:#4fc3f7}.moment-details-content .comment-submit{padding:.75rem 1.5rem;background:#4fc3f7;color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s}.moment-details-content .comment-submit:hover{background:#0288d1}.panel-column{flex:0 0 400px;min-width:0}.moments-panel{background:#fffbf0;border-radius:12px;padding:2rem;box-shadow:0 2px 8px #0000001a;border:1px solid rgba(79,195,247,.3);display:flex;flex-direction:column;max-height:80vh;overflow:hidden}.moments-panel h2{margin-top:0;color:#333;margin-bottom:1.5rem}.moments-section{margin-bottom:2rem}.moments-section:last-child{margin-bottom:0}.section-title{font-size:.9rem;font-weight:600;color:#4fc3f7;text-transform:uppercase;letter-spacing:.5px;margin-bottom:1rem;margin-top:0}.moments-panel .moments-list{display:flex;flex-direction:column;gap:.75rem}.moments-panel .moment-item{display:flex;gap:1rem;padding:.75rem;background:#e0f7fa66;border-radius:8px;border-left:3px solid #4FC3F7;transition:all .2s}.moments-panel .moment-item.active{background:#e0f7fa99;border-left-color:#4fc3f7;border-left-width:4px;box-shadow:0 2px 4px #4fc3f74d}.moments-panel .moment-timestamp{font-weight:600;color:#4fc3f7;min-width:80px;font-size:.9rem}.moments-panel .moment-text{color:#333;flex:1;font-size:.9rem}.moments-panel .empty-state{color:#999;text-align:center;padding:1rem}.moments-panel .moment-timestamp.clickable{cursor:pointer;text-decoration:underline;transition:color .2s}.moments-panel .moment-timestamp.clickable:hover{color:#0288d1}.moments-panel .moment-item.selected{background:#e0f7fa99;border-left-width:4px}.selected-moment-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem}.back-button{background:#e0f7fa80;border:1px solid rgba(79,195,247,.3);border-radius:6px;padding:.5rem 1rem;cursor:pointer;font-size:.9rem;transition:all .2s}.back-button:hover{background:#b2ebf299}.selected-moment-header h2{margin:0;color:#333;flex:1}.follow-live-button{background:#4fc3f7;border:1px solid #4FC3F7;border-radius:6px;padding:.5rem 1rem;font-size:.9rem;cursor:pointer;transition:all .2s;color:#fff;font-weight:600}.follow-live-button:hover{background:#0288d1;border-color:#0288d1}.live-timestamp{color:#4fc3f7;font-weight:600}.selected-moment-content{display:flex;flex-direction:column;gap:1.5rem}.moment-description{font-size:1.1rem;color:#333;margin:0;padding:1rem;background:#e0f7fa66;border-radius:8px}.comments-section h3{margin-top:0;margin-bottom:1rem;color:#333;font-size:1rem}.comments-list{display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.5rem}.comment-item{padding:.75rem;background:#e0f7fa66;border-radius:6px;display:flex;flex-direction:column;gap:.5rem}.comment-header{display:flex;gap:.75rem;align-items:center}.comment-author{font-weight:600;color:#4fc3f7}.comment-time{font-size:.85rem;color:#999}.comment-text{color:#333}.add-comment-section{display:flex;gap:.5rem}.comment-input{flex:1;padding:.75rem;border:1px solid rgba(79,195,247,.3);border-radius:6px;font-size:.9rem}.comment-input:focus{outline:none;border-color:#4fc3f7}.comment-submit{padding:.75rem 1.5rem;background:#4fc3f7;color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s}.comment-submit:hover:not(:disabled){background:#0288d1}.comment-submit:disabled{background:#ccc;cursor:not-allowed}@media(max-width:1024px){.video-layout{flex-direction:column}.panel-column{flex:1}}.import-modal-overlay{position:fixed;inset:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.import-modal-card{background:#fffbf0;border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000004d;border:2px solid rgba(79,195,247,.3);max-width:500px;width:90%;max-height:90vh;overflow-y:auto;animation:slideIn .3s ease-out}.import-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.import-modal-header h2{margin:0;color:#0277bd;font-size:1.75rem;font-weight:600}.import-modal-close{background:none;border:none;font-size:2rem;color:#546e7a;cursor:pointer;padding:0;width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;line-height:1;transition:color .2s}.import-modal-close:hover{color:#0277bd}.import-modal-tabs{display:flex;gap:.5rem;margin-bottom:1.5rem;border-bottom:2px solid rgba(79,195,247,.2)}.import-tab{padding:.75rem 1.5rem;background:none;border:none;border-bottom:3px solid transparent;color:#546e7a;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s;margin-bottom:-2px}.import-tab:hover{color:#0277bd}.import-tab.active{color:#0277bd;border-bottom-color:#4fc3f7;font-weight:600}.import-form-group{margin-bottom:1.5rem}.import-form-group label{display:block;margin-bottom:.5rem;color:#0277bd;font-weight:600;font-size:.9rem}.import-input{width:100%;padding:.75rem;border:2px solid rgba(79,195,247,.3);border-radius:8px;font-size:1rem;background:#fff;transition:border-color .2s;box-sizing:border-box}.import-input:focus{outline:none;border-color:#4fc3f7}.import-file-input{width:100%;padding:.75rem;border:2px dashed rgba(79,195,247,.4);border-radius:8px;background:#e0f7fa33;cursor:pointer;transition:all .2s}.import-file-input:hover{border-color:#4fc3f7;background:#e0f7fa4d}.import-file-name{margin-top:.5rem;color:#546e7a;font-size:.9rem;font-style:italic}.import-error{padding:.75rem;background:#e539351a;border:1px solid rgba(229,57,53,.3);border-radius:8px;color:#e53935;font-size:.9rem;margin-bottom:1rem}.import-form-actions{display:flex;gap:.75rem;justify-content:flex-end;margin-top:2rem}.import-cancel-button{padding:.75rem 1.5rem;background:#e0f7fa80;color:#546e7a;border:1px solid rgba(79,195,247,.3);border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.import-cancel-button:hover:not(:disabled){background:#e0f7facc;color:#0277bd}.import-cancel-button:disabled{opacity:.6;cursor:not-allowed}.import-submit-button{padding:.75rem 1.5rem;background:#4fc3f7;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.import-submit-button:hover:not(:disabled){background:#0288d1}.import-submit-button:disabled{opacity:.6;cursor:not-allowed}.app:not(.menu-mode) .app-header h1{color:#fffbf0;-webkit-text-fill-color:#FFFBF0;background:none}.app:not(.menu-mode) .app-header .subtitle{color:#fffbf0cc}.app:not(.menu-mode) .display-name-indicator{background:#fffbf033;border-color:#fffbf066}.app:not(.menu-mode) .name-label,.app:not(.menu-mode) .name-value{color:#fffbf0e6}.app:not(.menu-mode) .change-name-button{color:#fffbf0cc}.app:not(.menu-mode) .change-name-button:hover{background:#fffbf033;color:#fffbf0}.app:not(.menu-mode) .status-card{display:none}.watch-page-container{width:100%;max-width:1200px;margin:0 auto;background:#0a1929;border-radius:16px;padding:2rem;box-shadow:0 8px 32px #0000004d}.watch-page-header{display:flex;align-items:center;gap:1rem;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,251,240,.1)}.watch-page-title{margin:0;color:#fffbf0;font-size:1.5rem;font-weight:600;flex:1}.watch-page-content{display:flex;flex-direction:column;gap:1.5rem}.watch-video-section,.watch-timeline-section{width:100%}.watch-feed-section{width:100%;max-height:400px;min-height:200px}.watch-comment-bar-section{width:100%}.timeline-strip-container{width:100%;padding:.5rem 0}.timeline-strip{position:relative;width:100%;height:40px;background:#ffffff0d;border-radius:4px}.timeline-progress-line{position:absolute;top:50%;left:0;right:0;height:2px;background:#4fc3f74d;transform:translateY(-50%)}.timeline-tick{position:absolute;top:50%;width:1px;height:8px;background:#fff3;transform:translate(-50%,-50%)}.timeline-marker{position:absolute;top:50%;width:8px;height:8px;background:#4fc3f7;border-radius:50%;transform:translate(-50%,-50%);cursor:pointer;transition:all .2s;z-index:10}.timeline-marker:hover{width:10px;height:10px;background:#0288d1;box-shadow:0 0 8px #4fc3f799}.timeline-marker.selected{width:12px;height:12px;background:#fffbf0;box-shadow:0 0 12px #4fc3f7}.timeline-current-indicator{position:absolute;top:50%;width:3px;height:16px;background:#4fc3f7;transform:translate(-50%,-50%);z-index:5;border-radius:2px;box-shadow:0 0 4px #4fc3f7cc}.live-reactions-feed{width:100%;height:100%;display:flex;flex-direction:column;background:#ffffff08;border-radius:8px;border:1px solid rgba(79,195,247,.2);overflow:hidden}.live-reactions-feed .feed-header{padding:.75rem 1rem;border-bottom:1px solid rgba(79,195,247,.2);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}.feed-header-left{display:flex;align-items:center;gap:.5rem}.comments-count{font-size:.85rem;color:#fffbf0cc;font-weight:500}.comments-loading{font-size:.85rem;color:#4fc3f7cc;font-style:italic}.show-all-comments-toggle{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.85rem;color:#fffbf0cc;-webkit-user-select:none;user-select:none}.show-all-comments-toggle:hover{color:#fffbf0}.show-all-comments-toggle input[type=checkbox]{cursor:pointer;width:16px;height:16px;accent-color:#4FC3F7}.show-all-comments-toggle span{font-size:.85rem}.feed-container-wrapper{flex:1;display:flex;flex-direction:column;position:relative;min-height:0}.live-reactions-feed .feed-container{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.75rem;min-height:0}.live-reactions-feed .feed-container::-webkit-scrollbar{width:6px}.live-reactions-feed .feed-container::-webkit-scrollbar-track{background:#ffffff0d;border-radius:3px}.live-reactions-feed .feed-container::-webkit-scrollbar-thumb{background:#4fc3f780;border-radius:3px}.live-reactions-feed .feed-container::-webkit-scrollbar-thumb:hover{background:#4fc3f7b3}.live-reactions-feed .feed-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#fffbf080;font-style:italic;text-align:center;padding:2rem}.live-reactions-feed .feed-empty p{margin:0}.reaction-comment-item{display:flex;gap:.75rem;padding:.75rem;background:#ffffff0d;border-radius:8px;border-left:2px solid rgba(79,195,247,.3);transition:all .2s;animation:slideIn .3s ease-out}.reaction-comment-item.comment-revealed{opacity:1}.reaction-comment-item.comment-upcoming{opacity:.5}.reaction-comment-item.comment-upcoming .comment-upcoming-label{font-size:.75rem;color:#fffbf080;font-style:italic;margin-left:.5rem}.jump-to-latest-button{position:absolute;bottom:4rem;left:50%;transform:translate(-50%);background:#4fc3f7e6;color:#fff;border:none;border-radius:20px;padding:.5rem 1rem;font-size:.85rem;font-weight:600;cursor:pointer;z-index:10;box-shadow:0 2px 8px #0000004d;transition:all .2s}.jump-to-latest-button:hover{background:#4fc3f7;transform:translate(-50%) translateY(-2px);box-shadow:0 4px 12px #0006}.feed-composer{flex-shrink:0;border-top:1px solid rgba(79,195,247,.2);padding:.75rem 1rem;background:#0003}.feed-composer .add-comment-bar{margin:0;padding:0;background:transparent;border:none}.feed-composer .add-comment-form{display:flex;gap:.5rem;align-items:center}.feed-composer .add-comment-input{flex:1;background:#ffffff1a;border:1px solid rgba(79,195,247,.3);border-radius:6px;padding:.625rem .75rem;color:#fffbf0;font-size:.9rem}.feed-composer .add-comment-input:focus{outline:none;border-color:#4fc3f799;background:#ffffff26}.feed-composer .add-comment-submit{padding:.625rem 1.25rem;background:#4fc3f7;color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.feed-composer .add-comment-submit:hover:not(:disabled){background:#0288d1;transform:translateY(-1px);box-shadow:0 2px 8px #4fc3f74d}.feed-composer .add-comment-submit:disabled{opacity:.5;cursor:not-allowed}.modal-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background:#14141efa;border:1px solid rgba(79,195,247,.3);border-radius:12px;padding:2rem;max-width:400px;width:90%;box-shadow:0 8px 32px #00000080}.modal-content h3{margin:0 0 1rem;color:#fffbf0;font-size:1.25rem;font-weight:600}.modal-content p{margin:0 0 1.5rem;color:#fffbf0cc;line-height:1.5}.modal-actions{display:flex;gap:.75rem;justify-content:flex-end}.modal-button{padding:.625rem 1.25rem;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.modal-button-cancel{background:#ffffff1a;color:#fffbf0e6}.modal-button-cancel:hover{background:#ffffff26}.modal-button-delete{background:#ff5252;color:#fff}.modal-button-delete:hover{background:#ff1744;transform:translateY(-1px);box-shadow:0 2px 8px #ff52524d}.reaction-comment-item:hover{background:#ffffff14;border-left-color:#4fc3f780}.reaction-comment-avatar{flex-shrink:0;width:32px;height:32px;border-radius:50%;background:#4fc3f7;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.85rem}.reaction-comment-content{flex:1;min-width:0}.reaction-comment-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.25rem;position:relative}.reaction-comment-delete-button{margin-left:auto;background:transparent;border:none;color:#fffbf099;font-size:1.5rem;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.reaction-comment-delete-button:hover{color:#ff5252;background:#ff52521a}.reaction-comment-author{font-weight:600;color:#fffbf0;font-size:.9rem}.reaction-comment-relative-time{font-size:.75rem;color:#fffbf080}.reaction-comment-text{color:#fffbf0e6;line-height:1.5;font-size:.9rem}.reaction-comment-timestamp{flex-shrink:0;color:#4fc3f7cc;font-size:.8rem;font-weight:500;align-self:flex-start;padding-top:.25rem}.add-comment-bar{width:100%;padding:1rem;background:#ffffff08;border-radius:8px;border:1px solid rgba(79,195,247,.2)}.add-comment-form{display:flex;gap:.75rem;align-items:center}.add-comment-input{flex:1;padding:.75rem 1rem;background:#ffffff1a;border:1px solid rgba(79,195,247,.3);border-radius:8px;color:#fffbf0;font-size:.9rem;transition:all .2s}.add-comment-input::placeholder{color:#fffbf066}.add-comment-input:focus{outline:none;border-color:#4fc3f7;background:#ffffff26;box-shadow:0 0 0 3px #4fc3f71a}.add-comment-submit{padding:.75rem 1.5rem;background:#4fc3f7;color:#fff;border:none;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.add-comment-submit:hover:not(:disabled){background:#0288d1;transform:translateY(-1px);box-shadow:0 2px 8px #4fc3f74d}.add-comment-submit:disabled{opacity:.5;cursor:not-allowed}.add-comment-bar .name-required-message{text-align:center;padding:1rem;background:#4fc3f71a;border-radius:8px;border:1px dashed rgba(79,195,247,.3)}.add-comment-bar .name-required-message p{margin:0 0 .75rem;color:#fffbf0b3;font-size:.9rem}.add-comment-bar .set-name-button{padding:.5rem 1.25rem;background:#4fc3f7;color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .2s}.add-comment-bar .set-name-button:hover{background:#0288d1}.watch-video-section .video-player-wrapper{width:100%}.watch-video-section .video-player-container{width:100%;background:#000;border-radius:12px;overflow:hidden;position:relative}.watch-video-section .video-player{width:100%;height:auto;display:block}