:root{--ztube-bg:#09090d;--ztube-surface:#12121a;--ztube-surface-hover:#1a1a26;--ztube-surface-active:#223;--ztube-border:#ffffff14;--ztube-border-bright:#a855f74d;--ztube-violet:#a855f7;--ztube-violet-hover:#9333ea;--ztube-indigo:#6366f1;--ztube-pink:#ec4899;--ztube-text-primary:#f8fafc;--ztube-text-secondary:#94a3b8;--ztube-text-muted:#64748b;--ztube-radius-sm:8px;--ztube-radius-md:12px;--ztube-radius-lg:16px;--ztube-radius-full:9999px;--ztube-font-sans:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif}.watch-sidebar.collapsed{width:72px;overflow:hidden}.watch-sidebar.collapsed .sidebar-label{display:none}.watch-sidebar.collapsed .sidebar-item{flex-direction:column;justify-content:center;align-items:center;gap:4px;padding:12px 0;display:flex}.watch-sidebar.collapsed .sidebar-icon{margin:0}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--ztube-bg);color:var(--ztube-text-primary);font-family:var(--ztube-font-sans);overflow-x:hidden}.ztube-watch-app{background-color:var(--ztube-bg);flex-direction:column;min-height:100vh;display:flex}.svg-icon,.btn-action-icon,.btn-svg-icon,.delete-svg-icon,.react-like-icon{fill:currentColor;flex-shrink:0;width:20px;height:20px}.watch-header{background-color:var(--ztube-surface);border-bottom:1px solid var(--ztube-border);z-index:50;justify-content:space-between;align-items:center;height:64px;padding:0 16px;display:flex;position:sticky;top:0}.header-left{align-items:center;gap:16px;display:flex}.icon-btn{color:var(--ztube-text-primary);border-radius:var(--ztube-radius-full);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;width:40px;height:40px;transition:background-color .2s;display:flex}.icon-btn:hover{background-color:var(--ztube-surface-hover)}.ztube-logo{align-items:center;gap:8px;text-decoration:none;display:flex}.logo-icon-wrapper{width:32px;height:32px}.logo-svg{width:100%;height:100%}.logo-text{letter-spacing:-.02em;color:var(--ztube-text-primary);font-size:1.25rem;font-weight:800}.logo-highlight{color:var(--ztube-violet)}.header-center{flex:1;max-width:600px;margin:0 16px}.search-container{background-color:var(--ztube-bg);border:1px solid var(--ztube-border);border-radius:var(--ztube-radius-full);align-items:center;padding:4px 6px 4px 16px;transition:border-color .2s;display:flex}.search-container:focus-within{border-color:var(--ztube-violet)}.search-input{color:var(--ztube-text-primary);background:0 0;border:none;outline:none;flex:1;font-size:.9rem}.search-clear-btn{color:var(--ztube-text-muted);cursor:pointer;background:0 0;border:none;padding:0 8px}.search-btn{background:var(--ztube-surface);color:var(--ztube-text-primary);border-radius:var(--ztube-radius-full);cursor:pointer;border:none;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.search-btn:hover{background:var(--ztube-surface-hover)}.header-right{align-items:center;gap:12px;display:flex}.btn-create{background-color:var(--ztube-surface-hover);border:1px solid var(--ztube-border);color:var(--ztube-text-primary);border-radius:var(--ztube-radius-full);cursor:pointer;align-items:center;gap:6px;padding:8px 14px;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.btn-create:hover{background-color:var(--ztube-surface-active);border-color:var(--ztube-border-bright)}.notification-btn{position:relative}.notification-badge{background-color:var(--ztube-pink);color:#fff;border-radius:var(--ztube-radius-full);padding:1px 5px;font-size:.7rem;font-weight:700;position:absolute;top:4px;right:4px}.user-avatar{border-radius:var(--ztube-radius-full);object-fit:cover;border:2px solid var(--ztube-violet);width:36px;height:36px}.watch-main-layout{flex:1;display:flex}.watch-sidebar{background-color:var(--ztube-surface);border-right:1px solid var(--ztube-border);flex-direction:column;width:72px;transition:width .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden}.watch-sidebar.expanded{width:240px}.sidebar-scroll{padding:12px 8px}.sidebar-item{color:var(--ztube-text-secondary);border-radius:var(--ztube-radius-md);align-items:center;gap:16px;padding:12px 16px;text-decoration:none;transition:all .2s;display:flex}.sidebar-item:hover{background-color:var(--ztube-surface-hover);color:var(--ztube-text-primary)}.sidebar-icon{fill:currentColor;flex-shrink:0;width:22px;height:22px}.sidebar-label{white-space:nowrap;font-size:.9rem;font-weight:500}.watch-content{flex:1;width:100%;max-width:1750px;margin:0 auto;padding:24px}.watch-grid{grid-template-columns:1fr 380px;gap:24px;display:grid}.primary-watch-column{flex-direction:column;gap:16px;min-width:0;display:flex}.video-player-container{aspect-ratio:16/9;border-radius:var(--ztube-radius-lg);border:1px solid var(--ztube-border);background-color:#000;width:100%;overflow:hidden;box-shadow:0 12px 32px #00000080}.video-player-element{object-fit:cover;width:100%;height:100%}.video-title{color:var(--ztube-text-primary);margin-bottom:12px;font-size:1.35rem;font-weight:700;line-height:1.4}.video-primary-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;display:flex}.channel-info-block{align-items:center;gap:12px;display:flex}.channel-avatar{border-radius:var(--ztube-radius-full);object-fit:cover;width:44px;height:44px}.channel-meta-text{flex-direction:column;display:flex}.channel-name{color:var(--ztube-text-primary);font-size:.95rem;font-weight:700}.channel-subscribers{color:var(--ztube-text-secondary);font-size:.8rem}.btn-subscribe{background:linear-gradient(135deg, var(--ztube-violet) 0%, var(--ztube-indigo) 100%);color:#fff;border-radius:var(--ztube-radius-full);cursor:pointer;border:none;margin-left:8px;padding:8px 18px;font-size:.85rem;font-weight:600;transition:opacity .2s}.btn-subscribe:hover{opacity:.9}.btn-subscribe.subscribed{background:var(--ztube-surface-hover);color:var(--ztube-text-secondary);border:1px solid var(--ztube-border)}.video-action-buttons{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.btn-action{background-color:var(--ztube-surface);border:1px solid var(--ztube-border);color:var(--ztube-text-primary);border-radius:var(--ztube-radius-full);cursor:pointer;align-items:center;gap:8px;padding:8px 16px;font-size:.85rem;font-weight:600;transition:all .2s;display:flex}.btn-action:hover{background-color:var(--ztube-surface-hover);border-color:var(--ztube-border-bright)}.btn-action.active{border-color:var(--ztube-violet);color:var(--ztube-violet);background-color:#a855f726}.action-count{color:var(--ztube-text-secondary);font-size:.8rem}.btn-action.active .action-count{color:var(--ztube-violet)}.video-description-box{background-color:var(--ztube-surface);border:1px solid var(--ztube-border);border-radius:var(--ztube-radius-md);cursor:pointer;margin-top:16px;padding:16px;transition:background-color .2s}.video-description-box:hover{background-color:var(--ztube-surface-hover)}.description-meta-row{color:var(--ztube-text-primary);align-items:center;gap:8px;margin-bottom:8px;font-size:.85rem;font-weight:600;display:flex}.dot-divider{color:var(--ztube-text-muted)}.tag-pill{color:var(--ztube-violet);border-radius:var(--ztube-radius-sm);background-color:#a855f71a;padding:2px 8px;font-size:.75rem}.description-text{color:var(--ztube-text-secondary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.875rem;line-height:1.5;display:-webkit-box;overflow:hidden}.video-description-box.expanded .description-text{-webkit-line-clamp:unset;display:block}.btn-desc-toggle{color:var(--ztube-text-primary);cursor:pointer;background:0 0;border:none;margin-top:8px;font-size:.8rem;font-weight:600}.react-section{background-color:var(--ztube-surface);border:1px solid var(--ztube-border);border-radius:var(--ztube-radius-lg);margin-top:24px;padding:24px}.react-section-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.react-title-group{align-items:center;gap:12px;display:flex}.react-heading{color:var(--ztube-text-primary);letter-spacing:-.01em;font-size:1.2rem;font-weight:700}.react-count-badge{color:var(--ztube-violet);border-radius:var(--ztube-radius-full);background-color:#a855f726;border:1px solid #a855f74d;padding:2px 10px;font-size:.85rem;font-weight:700}.react-input-container{gap:16px;margin-bottom:28px;display:flex}.react-input-avatar{border-radius:var(--ztube-radius-full);object-fit:cover;border:1px solid var(--ztube-border);flex-shrink:0;width:40px;height:40px}.react-input-wrapper{flex-direction:column;flex:1;gap:10px;display:flex}.react-textarea{background-color:var(--ztube-bg);border:1px solid var(--ztube-border);border-radius:var(--ztube-radius-md);width:100%;color:var(--ztube-text-primary);resize:vertical;outline:none;padding:12px 16px;font-family:inherit;font-size:.9rem;line-height:1.5;transition:all .2s}.react-textarea:focus{border-color:var(--ztube-violet);box-shadow:0 0 0 3px #a855f726}.react-input-actions{justify-content:flex-end;display:flex}.btn-post-react{background:linear-gradient(135deg, var(--ztube-violet) 0%, var(--ztube-indigo) 100%);color:#fff;border-radius:var(--ztube-radius-full);cursor:pointer;border:none;padding:8px 20px;font-size:.875rem;font-weight:600;transition:opacity .2s,transform .1s}.btn-post-react:hover:not(:disabled){opacity:.95;transform:translateY(-1px)}.btn-post-react:disabled{opacity:.4;cursor:not-allowed;transform:none}.react-list{flex-direction:column;gap:20px;display:flex}.react-item{border-bottom:1px solid var(--ztube-border);gap:14px;padding-bottom:18px;display:flex}.react-item:last-child{border-bottom:none;padding-bottom:0}.react-item-avatar{border-radius:var(--ztube-radius-full);object-fit:cover;flex-shrink:0;width:38px;height:38px}.react-item-body{flex-direction:column;flex:1;gap:6px;display:flex}.react-item-header{align-items:center;gap:10px;display:flex}.react-item-user{color:var(--ztube-text-primary);font-size:.875rem;font-weight:600}.react-item-time{color:var(--ztube-text-muted);font-size:.75rem}.btn-delete-react{color:var(--ztube-text-muted);cursor:pointer;border-radius:var(--ztube-radius-sm);background:0 0;border:none;align-items:center;gap:4px;margin-left:auto;padding:4px 8px;font-size:.75rem;transition:all .2s;display:flex}.btn-delete-react:hover{color:#ef4444;background-color:#ef44441a}.delete-svg-icon{width:14px;height:14px}.react-item-text{color:#e2e8f0;white-space:pre-wrap;word-break:break-word;font-size:.9rem;line-height:1.5}.react-item-actions{align-items:center;gap:12px;margin-top:4px;display:flex}.btn-react-like{color:var(--ztube-text-secondary);cursor:pointer;border-radius:var(--ztube-radius-full);background:0 0;border:none;align-items:center;gap:6px;padding:4px 10px;font-size:.8rem;font-weight:600;transition:all .2s;display:flex}.btn-react-like:hover{background-color:var(--ztube-surface-hover);color:var(--ztube-text-primary)}.btn-react-like.liked{color:var(--ztube-violet);background-color:#a855f71f}.react-like-icon{width:14px;height:14px}.react-like-count{font-size:.75rem;font-weight:700}.react-empty-state{text-align:center;color:var(--ztube-text-muted);background-color:var(--ztube-bg);border-radius:var(--ztube-radius-md);border:1px dashed var(--ztube-border);padding:32px 16px;font-size:.9rem}.secondary-watch-column{flex-direction:column;gap:16px;display:flex}.recommended-sidebar-title{color:var(--ztube-text-primary);font-size:1rem;font-weight:700}.recommended-list{flex-direction:column;gap:12px;display:flex}.recommended-item-card{gap:12px;text-decoration:none;display:flex}.recommended-thumb-box{aspect-ratio:16/9;border-radius:var(--ztube-radius-md);background-color:#000;flex-shrink:0;width:140px;position:relative;overflow:hidden}.recommended-thumb{object-fit:cover;width:100%;height:100%;transition:transform .2s}.recommended-item-card:hover .recommended-thumb{transform:scale(1.04)}.thumb-duration{color:#fff;border-radius:var(--ztube-radius-sm);background-color:#000c;padding:1px 4px;font-size:.7rem;font-weight:600;position:absolute;bottom:4px;right:4px}.thumb-duration.live{background-color:#ef4444}.recommended-item-info{flex-direction:column;gap:4px;min-width:0;display:flex}.recommended-item-title{color:var(--ztube-text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.85rem;font-weight:600;line-height:1.3;display:-webkit-box;overflow:hidden}.recommended-item-channel{color:var(--ztube-text-secondary);font-size:.75rem}.recommended-item-meta{color:var(--ztube-text-muted);align-items:center;gap:4px;font-size:.7rem;display:flex}@media (max-width:1200px){.watch-grid{grid-template-columns:1fr}}@media (max-width:768px){.watch-content{padding:12px}.video-title{font-size:1.1rem}.video-primary-bar{flex-direction:column;align-items:flex-start}.video-action-buttons{justify-content:space-between;width:100%;padding-bottom:4px;overflow-x:auto}.btn-action{padding:6px 12px;font-size:.8rem}.react-section{padding:16px}.react-input-container{gap:10px}.react-input-avatar{width:32px;height:32px}.recommended-thumb-box{width:120px}}@media (max-width:1023px){.watch-sidebar{z-index:100;transition:left .3s;position:fixed;top:64px;bottom:0;left:-260px;width:240px!important}.watch-sidebar.mobile-open{left:0}.sidebar-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:90;background-color:#0009;position:fixed;inset:0}}