.video-container{border-radius:var(--radius-xl);aspect-ratio:16/9;width:100%;box-shadow:var(--shadow-xl);background:#000;position:relative;overflow:hidden}.video-container.fullscreen{z-index:var(--z-modal);aspect-ratio:auto;border-radius:0;position:fixed;inset:0}.video-element{object-fit:contain;background:#000;width:100%;height:100%;position:absolute;inset:0}.video-loading{z-index:15;background:#000000b3;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-spinner{border:3px solid #ffffff1a;border-top-color:var(--primary);border-radius:var(--radius-full);width:48px;height:48px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.video-error{justify-content:center;align-items:center;gap:var(--space-4);color:var(--text-muted);z-index:15;background:#000000e6;flex-direction:column;display:flex;position:absolute;inset:0}.video-error-icon{width:64px;height:64px;color:var(--error)}.video-error-message{font-size:var(--text-sm);text-align:center;max-width:300px}.video-play-overlay{cursor:pointer;opacity:1;transition:opacity var(--duration-200)var(--ease-default);z-index:5;background:0 0;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-container.paused .video-play-overlay{opacity:1}.video-container:not(.paused) .video-play-overlay{opacity:0;pointer-events:none}.video-play-btn{background:var(--primary);border-radius:var(--radius-full);color:#fff;cursor:pointer;width:72px;height:72px;transition:all var(--duration-200)var(--ease-spring);border:none;justify-content:center;align-items:center;display:flex;box-shadow:0 8px 32px #1fb7ff66}.video-play-btn:hover{transform:scale(1.1);box-shadow:0 12px 40px #1fb7ff80}.video-play-btn svg{width:28px;height:28px;margin-left:3px}.video-controls-top{padding:var(--space-4);opacity:0;transition:opacity var(--duration-200)var(--ease-default);z-index:10;background:linear-gradient(#000000b3,#0000);justify-content:space-between;align-items:center;display:flex;position:absolute;top:0;left:0;right:0}.video-container:hover .video-controls-top,.video-container.paused .video-controls-top,.video-container.controls-visible .video-controls-top{opacity:1}.video-info{align-items:center;gap:var(--space-3);display:flex}.video-info-title{font-size:var(--text-sm);font-weight:var(--font-medium);color:#fff;text-shadow:0 1px 2px #00000080}.video-controls{padding:var(--space-6)var(--space-4)var(--space-3);opacity:0;transition:all var(--duration-200)var(--ease-default);z-index:10;background:linear-gradient(#0000,#000000d9);flex-direction:column;display:flex;position:absolute;bottom:0;left:0;right:0;transform:translateY(4px)}.video-container:hover .video-controls,.video-container.paused .video-controls,.video-container.controls-visible .video-controls{opacity:1;transform:translateY(0)}.video-progress-wrapper{width:100%;margin-bottom:var(--space-2)}.video-progress{border-radius:var(--radius-full);cursor:pointer;width:100%;height:4px;transition:height var(--duration-100)var(--ease-default);background:#fff3;position:relative}.video-progress:hover{height:6px}.video-progress-buffered{border-radius:var(--radius-full);pointer-events:none;background:#ffffff4d;height:100%;position:absolute;top:0;left:0}.video-progress-played{background:var(--primary);border-radius:var(--radius-full);pointer-events:none;height:100%;position:absolute;top:0;left:0}.video-progress-handle{background:var(--primary);border-radius:var(--radius-full);width:12px;height:12px;transition:transform var(--duration-100)var(--ease-default);pointer-events:none;border:2px solid #fff;position:absolute;top:50%;transform:translate(-50%,-50%)scale(0);box-shadow:0 2px 8px #0000004d}.video-progress:hover .video-progress-handle{transform:translate(-50%,-50%)scale(1)}.video-marker{background:var(--warning);border-radius:var(--radius-full);cursor:pointer;z-index:5;width:10px;height:10px;transition:all var(--duration-100)var(--ease-default);position:absolute;top:50%;transform:translate(-50%,-50%)}.video-marker:hover{transform:translate(-50%,-50%)scale(1.3)}.video-marker-tooltip{padding:var(--space-1)var(--space-2);margin-bottom:var(--space-2);font-size:var(--text-xs);font-weight:var(--font-medium);color:#fff;background:var(--surface-4);border-radius:var(--radius-sm);white-space:nowrap;opacity:0;visibility:hidden;transition:all var(--duration-100)var(--ease-default);position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.video-marker:hover .video-marker-tooltip{opacity:1;visibility:visible}.video-controls-row{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.video-controls-left,.video-controls-right{align-items:center;gap:var(--space-1);display:flex}.video-btn{color:#fff;border-radius:var(--radius-md);cursor:pointer;width:36px;height:36px;transition:all var(--duration-100)var(--ease-default);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.video-btn:hover{background:#ffffff26}.video-btn:active{transform:scale(.95)}.video-btn svg{width:20px;height:20px}.video-time{align-items:center;gap:var(--space-1);padding:0 var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-medium);color:#ffffffe6;display:flex}.video-time-separator{color:#ffffff80}.video-volume-wrapper{align-items:center;gap:var(--space-1);display:flex}.video-volume-slider{border-radius:var(--radius-full);cursor:pointer;opacity:0;width:0;height:4px;transition:all var(--duration-200)var(--ease-default);background:#fff3;overflow:hidden}.video-volume-wrapper:hover .video-volume-slider{opacity:1;width:80px}.video-volume-slider-inner{border-radius:var(--radius-full);background:#fff;height:100%}.video-quality{position:relative}.video-quality-menu{min-width:100px;padding:var(--space-2);margin-bottom:var(--space-2);background:var(--surface-3);border:1px solid var(--border-muted);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transition:all var(--duration-200)var(--ease-default);z-index:20;position:absolute;bottom:100%;right:0;transform:translateY(8px)}.video-quality-menu.open{opacity:1;visibility:visible;transform:translateY(0)}.video-quality-option{justify-content:space-between;align-items:center;gap:var(--space-2);width:100%;padding:var(--space-2)var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-100)var(--ease-default);white-space:nowrap;background:0 0;border:none;display:flex}.video-quality-option:hover{background:var(--surface-4);color:var(--text-primary)}.video-quality-option.active{color:var(--primary);background:var(--primary-subtle)}.video-volume{align-items:center;gap:var(--space-1);display:flex}.video-volume-slider{opacity:0;width:0;transition:all var(--duration-200)var(--ease-default);overflow:hidden}.video-volume:hover .video-volume-slider{opacity:1;width:80px}.video-volume-slider input[type=range]{border-radius:var(--radius-full);appearance:none;cursor:pointer;background:#fff3;width:100%;height:4px}.video-volume-slider input[type=range]::-webkit-slider-thumb{appearance:none;border-radius:var(--radius-full);cursor:pointer;background:#fff;width:12px;height:12px}.video-volume-slider input[type=range]::-moz-range-thumb{border-radius:var(--radius-full);cursor:pointer;background:#fff;border:none;width:12px;height:12px}.video-keyboard-hint{padding:var(--space-3)var(--space-4);font-size:var(--text-lg);font-weight:var(--font-semibold);color:#fff;border-radius:var(--radius-lg);opacity:0;visibility:hidden;transition:all var(--duration-200)var(--ease-default);z-index:20;pointer-events:none;background:#000000b3;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.video-keyboard-hint.visible{opacity:1;visibility:visible}@media (max-width:640px){.video-container{border-radius:var(--radius-lg)}.video-play-btn{width:56px;height:56px}.video-play-btn svg{width:24px;height:24px}.video-controls{padding:var(--space-4)var(--space-3)var(--space-2)}.video-btn{width:32px;height:32px}.video-btn svg{width:18px;height:18px}.video-volume-wrapper:hover .video-volume-slider{width:60px}.video-controls-top{padding:var(--space-3)}.video-settings-menu{right:-8px}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}
.comments-panel{background:var(--surface-1);border-left:1px solid var(--border-subtle);flex-direction:column;height:100%;display:flex}.comments-header{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4)var(--space-5);border-bottom:1px solid var(--border-subtle);flex-shrink:0;display:flex}.comments-title{align-items:center;gap:var(--space-2);font-size:var(--text-base);font-weight:var(--font-semibold);display:flex}.comments-count{min-width:22px;height:22px;padding:0 var(--space-2);font-size:var(--text-xs);font-weight:var(--font-bold);color:#fff;background:var(--primary);border-radius:var(--radius-full);justify-content:center;align-items:center;display:flex}.comments-filters{align-items:center;gap:var(--space-1);padding:var(--space-1);background:var(--surface-2);border-radius:var(--radius-md);display:flex}.comments-filter-btn{padding:var(--space-1-5)var(--space-3);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-muted);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-100)var(--ease-default);background:0 0;border:none}.comments-filter-btn:hover{color:var(--text-secondary)}.comments-filter-btn.active{color:var(--text-primary);background:var(--surface-1);box-shadow:var(--shadow-xs)}.comments-list{padding:var(--space-4);flex:1;overflow-y:auto}.comments-empty{text-align:center;height:100%;padding:var(--space-8);flex-direction:column;justify-content:center;align-items:center;display:flex}.comments-empty-icon{background:var(--surface-2);border-radius:var(--radius-xl);width:56px;height:56px;color:var(--text-muted);margin-bottom:var(--space-4);justify-content:center;align-items:center;display:flex}.comments-empty-icon svg{width:28px;height:28px}.comments-empty-title{font-size:var(--text-base);font-weight:var(--font-medium);color:var(--text-primary);margin-bottom:var(--space-2)}.comments-empty-description{font-size:var(--text-sm);color:var(--text-muted)}.comment-item{padding:var(--space-4);background:var(--surface-2);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);margin-bottom:var(--space-3);animation:fadeInUp var(--duration-200)var(--ease-out);position:relative}.comment-item:last-child{margin-bottom:0}.comment-item.resolved{opacity:.6}.comment-item:hover{border-color:var(--border-muted)}.comment-header{justify-content:space-between;align-items:flex-start;gap:var(--space-3);margin-bottom:var(--space-3);display:flex}.comment-author{align-items:center;gap:var(--space-2);display:flex}.comment-author-avatar{width:32px;height:32px;font-size:var(--text-xs);font-weight:var(--font-semibold);color:#fff;background:var(--gradient-primary);border-radius:var(--radius-md);flex-shrink:0;justify-content:center;align-items:center;display:flex}.comment-author-avatar img{object-fit:cover;border-radius:inherit;width:100%;height:100%}.comment-author-info{flex-direction:column;display:flex}.comment-author-name{font-size:var(--text-sm);font-weight:var(--font-medium);color:var(--text-primary);line-height:var(--leading-tight)}.comment-author-time{font-size:var(--text-xs);color:var(--text-muted)}.comment-actions{align-items:center;gap:var(--space-1);opacity:0;transition:opacity var(--duration-100)var(--ease-default);display:flex}.comment-item:hover .comment-actions{opacity:1}.comment-action-btn{width:28px;height:28px;color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-100)var(--ease-default);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.comment-action-btn:hover{background:var(--surface-3);color:var(--text-primary)}.comment-action-btn.resolve:hover{color:var(--success)}.comment-action-btn.delete:hover{color:var(--error)}.comment-timestamp{align-items:center;gap:var(--space-1);padding:var(--space-1)var(--space-2);margin-bottom:var(--space-2);font-family:var(--font-mono);font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--primary);background:var(--primary-subtle);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-100)var(--ease-default);border:none;display:inline-flex}.comment-timestamp:hover{background:var(--primary-muted)}.comment-timestamp svg{width:12px;height:12px}.comment-content{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-relaxed);white-space:pre-wrap;word-break:break-word}.comment-status{align-items:center;gap:var(--space-1);margin-top:var(--space-2);padding:var(--space-0-5)var(--space-2);font-size:var(--text-2xs);font-weight:var(--font-medium);border-radius:var(--radius-sm);display:inline-flex}.comment-status.resolved{color:var(--success);background:var(--success-subtle)}.comment-replies{margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border-subtle)}.comment-reply{padding:var(--space-3);padding-left:var(--space-4);margin-bottom:var(--space-2);background:var(--surface-1);border-radius:var(--radius-md);position:relative}.comment-reply:before{content:"";left:var(--space-2);top:var(--space-3);bottom:var(--space-3);background:var(--border-muted);border-radius:var(--radius-full);width:2px;position:absolute}.comment-reply:last-child{margin-bottom:0}.comment-reply-header{align-items:center;gap:var(--space-2);margin-bottom:var(--space-2);display:flex}.comment-reply-author{font-size:var(--text-xs);font-weight:var(--font-medium);color:var(--text-primary)}.comment-reply-time{font-size:var(--text-2xs);color:var(--text-muted)}.comment-reply-content{font-size:var(--text-sm);color:var(--text-secondary);line-height:var(--leading-normal)}.comment-reply-btn{align-items:center;gap:var(--space-1);margin-top:var(--space-2);font-size:var(--text-xs);color:var(--text-muted);cursor:pointer;transition:color var(--duration-100)var(--ease-default);background:0 0;border:none;padding:0;display:flex}.comment-reply-btn:hover{color:var(--primary)}.comment-form{padding:var(--space-4);border-top:1px solid var(--border-subtle);flex-shrink:0}.comment-form-wrapper{gap:var(--space-3);flex-direction:column;display:flex}.comment-form-timestamp{align-items:center;gap:var(--space-2);padding:var(--space-2)var(--space-3);font-size:var(--text-sm);color:var(--text-secondary);background:var(--surface-2);border-radius:var(--radius-md);display:flex}.comment-form-timestamp-value{font-family:var(--font-mono);font-weight:var(--font-medium);color:var(--primary)}.comment-form-timestamp-btn{padding:var(--space-1)var(--space-2);font-size:var(--text-xs);color:var(--text-muted);border:1px solid var(--border-muted);border-radius:var(--radius-sm);cursor:pointer;transition:all var(--duration-100)var(--ease-default);background:0 0;margin-left:auto}.comment-form-timestamp-btn:hover{border-color:var(--border-default);color:var(--text-secondary)}.comment-form-input{width:100%;min-height:80px;padding:var(--space-3);font-family:var(--font-sans);font-size:var(--text-sm);color:var(--text-primary);background:var(--input-bg);border:1px solid var(--input-border);border-radius:var(--radius-lg);resize:vertical;transition:all var(--duration-150)var(--ease-default)}.comment-form-input::placeholder{color:var(--text-muted)}.comment-form-input:hover{border-color:var(--input-border-hover)}.comment-form-input:focus{border-color:var(--input-border-focus);box-shadow:0 0 0 3px var(--primary-subtle);outline:none}.comment-form-actions{justify-content:space-between;align-items:center;gap:var(--space-3);display:flex}.comment-form-options{align-items:center;gap:var(--space-2);display:flex}.comment-form-option{width:32px;height:32px;color:var(--text-muted);border-radius:var(--radius-md);cursor:pointer;transition:all var(--duration-100)var(--ease-default);background:0 0;border:none;justify-content:center;align-items:center;display:flex}.comment-form-option:hover{background:var(--surface-2);color:var(--text-primary)}.comment-form-option.active{color:var(--primary);background:var(--primary-subtle)}.comment-form-submit{align-items:center;gap:var(--space-2);display:flex}@media (max-width:768px){.comments-panel{border-left:none;border-top:1px solid var(--border-subtle)}.comments-header{padding:var(--space-3)var(--space-4);flex-wrap:wrap}.comments-filters{justify-content:space-around;width:100%}.comments-list,.comment-item,.comment-form{padding:var(--space-3)}.comment-actions{opacity:1}}