.clips-root{--bg-primary:var(--bg-primary,#0a0c14);--bg-secondary:var(--bg-secondary,#12141f);--bg-surface:var(--bg-surface,#161925);--border-subtle:var(--border-default,#232636);--text-primary:var(--text-primary,#f2f3f7);--text-secondary:var(--text-secondary,#8b8fa3);--text-faint:var(--text-muted,#5a5e70);--brand:var(--accent,#5b7cfa);--brand-subtle:var(--brand-subtle,#5b7cfa26);background:var(--bg-primary);color:var(--text-primary);height:calc(100vh - var(--header-height,56px));flex-direction:column;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;display:flex;position:relative;overflow:hidden}body.clips-page-body{height:100vh!important;overflow:hidden!important}body.clips-page-body .site-footer{display:none!important}.clips-body{flex:auto;grid-template-columns:1fr 400px;gap:0;min-height:0;display:grid;overflow:hidden}.clips-stage{background:var(--bg-primary);flex-direction:column;justify-content:center;align-items:center;gap:18px;min-height:0;padding:28px 24px;display:flex;position:relative}.clips-stage-row{flex:auto;justify-content:center;align-items:center;gap:28px;width:100%;min-height:0;display:flex}.side-preview{aspect-ratio:9/16;background:var(--bg-surface);border:1px solid var(--border-subtle);opacity:.45;filter:blur(.3px);cursor:pointer;border-radius:14px;outline:none;flex:none;width:150px;max-height:100%;padding:0;transition:opacity .2s,transform .2s;position:relative;overflow:hidden}.side-preview:hover{opacity:.7;transform:scale(1.02)}.peek-thumb-img{object-fit:cover;width:100%;height:100%;display:block}.side-preview .label{color:var(--text-primary);text-align:left;-webkit-line-clamp:2;background:linear-gradient(#0000,#000000d9);-webkit-box-orient:vertical;padding:10px 10px 12px;font-size:11px;font-weight:600;line-height:1.3;display:-webkit-box;position:absolute;bottom:0;left:0;right:0;overflow:hidden}.clips-display{aspect-ratio:9/16;cursor:pointer;background:#000;border:1px solid #ffffff1a;border-radius:22px;flex:none;width:400px;max-width:100%;max-height:100%;position:relative;overflow:hidden;box-shadow:0 20px 60px #0000008c,0 0 0 1px #5b7cfa14}.clips-display iframe{pointer-events:none;margin-top:-7%;width:100%!important;height:114%!important}.clip-progress{z-index:10;background:#ffffff40;border-radius:3px;height:3px;position:absolute;top:10px;left:10px;right:10px;overflow:hidden}.clip-progress-fill{background:#fff;border-radius:3px;height:100%;transition:width .1s linear}.clips-display .badge{letter-spacing:.04em;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;z-index:10;background:#0000008c;border-radius:6px;padding:4px 9px;font-size:10.5px;font-weight:700;position:absolute;top:22px;right:14px;text-transform:none!important;border:none!important}.clips-video-icon{z-index:8;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.clip-footer{z-index:10;text-align:left;background:linear-gradient(#0000 0%,#0000008c 45%,#000000eb 90%);flex-direction:column;gap:8px;padding:56px 16px 18px;display:flex;position:absolute;bottom:0;left:0;right:0}.channel-row{align-items:center;gap:9px;display:flex}.channel-avatar{background:linear-gradient(135deg,var(--brand),#8b5cf6);color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:28px;height:28px;font-size:10px;font-weight:800;display:flex}.channel-meta{flex-direction:column;gap:1px;display:flex}.channel-name{color:#fff;font-size:13px;font-weight:700;line-height:1.2}.channel-subs{color:#fff9;font-size:10.5px;font-weight:500;line-height:1.1}.clip-caption-bubble{color:#111;word-wrap:break-word;background:#fff;border-radius:20px;align-self:flex-start;max-width:85%;padding:8px 13px;font-size:13px;font-weight:600;box-shadow:0 4px 10px #00000040}.clip-title{color:#fff;margin-top:2px;font-size:14.5px;font-weight:700;line-height:1.35}.clips-stage-controls{flex:none;justify-content:center;align-items:center;gap:18px;display:flex}.clips-stage-controls .ctrl-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);width:42px;height:42px;color:var(--text-primary);cursor:pointer;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:0;font-size:20px;font-weight:500;transition:background-color .15s;display:flex}.clips-stage-controls .ctrl-btn:hover{background:var(--bg-secondary)}.clips-stage-controls .dots{align-items:center;gap:6px;display:flex}.clips-stage-controls .dots .dot{background:var(--text-faint);cursor:pointer;border:none;border-radius:50%;width:5px;height:5px;padding:0;transition:width .2s,background-color .2s}.clips-stage-controls .dots .dot.active{background:var(--brand);border-radius:3px;width:20px}.clips-stage-controls .mute-btn{background:var(--bg-surface);border:1px solid var(--border-subtle);width:42px;height:42px;color:var(--brand);cursor:pointer;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:0;font-size:16px;transition:background-color .15s;display:flex}.clips-stage-controls .mute-btn:hover{background:var(--bg-secondary)}.clips-explore{border-left:1px solid var(--border-subtle);background:var(--bg-secondary);flex-direction:column;min-height:0;display:flex}.clips-explore .drag-handle{display:none}.explore-header{border-bottom:1px solid var(--border-subtle);flex:none;justify-content:space-between;align-items:baseline;padding:22px 24px 14px;display:flex}.explore-header h2{color:var(--text-primary);font-size:17px;font-weight:700}.explore-header .refresh-link,.explore-header .item-count{color:var(--text-secondary);font-size:12px}.explore-header .refresh-link:hover{color:var(--brand);text-decoration:underline}.explore-list{flex-direction:column;flex:auto;gap:6px;min-height:0;padding:14px 16px 24px;display:flex;overflow-y:auto}.explore-list::-webkit-scrollbar{width:8px}.explore-list::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:8px}.explore-list::-webkit-scrollbar-track{background:0 0}.feed-item{cursor:pointer;text-align:left;background:0 0;border:1px solid #0000;border-radius:12px;gap:14px;width:100%;padding:10px;transition:background-color .15s;display:flex}.feed-item:hover{background:var(--bg-surface)}.feed-item.active{background:var(--brand-subtle);border-color:var(--brand)}.feed-thumb{object-fit:cover;background:var(--bg-surface);border-radius:9px;flex:none;width:72px;height:96px}.feed-info{flex-direction:column;justify-content:center;gap:6px;min-width:0;display:flex}.feed-title{color:var(--text-primary);-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:14px;font-weight:650;line-height:1.32;display:-webkit-box;overflow:hidden}.feed-meta{color:var(--text-secondary);font-size:12px}.clips-hint{font-family:var(--font-sans),sans-serif;color:var(--text-faint);background:var(--bg-surface);border:1px solid var(--border-subtle);z-index:20;border-radius:20px;align-items:center;gap:6px;width:fit-content;padding:7px 14px;font-size:11.5px;display:flex}.clips-hint b{color:var(--brand);font-weight:700}.clips-hint.desktop-only{white-space:nowrap;position:absolute;bottom:14px;left:50%;transform:translate(-50%)}.clips-hint.mobile-only{display:none}@media (min-width:768px) and (max-width:1024px){.clips-body{grid-template-columns:1fr 320px}.side-preview{display:none!important}.clips-display{width:350px}.clips-explore{border-left:1px solid var(--border-subtle)}}@media (max-width:767px){.clips-body{flex-direction:column;height:100%;min-height:0;display:flex;overflow:hidden}.clips-stage{flex-direction:column;flex:auto;justify-content:stretch;align-items:stretch;gap:10px;width:100%;min-height:0;padding:14px 14px 10px;display:flex}.clips-stage-row{flex:auto;justify-content:center;align-items:center;width:100%;min-height:0;display:flex}.side-preview{display:none!important}.clips-display{border-radius:20px;flex:auto;width:100%;max-width:290px;height:100%;min-height:0;margin:0 auto;box-shadow:0 14px 40px #00000080}.clips-display .badge{padding:4px 8px;font-size:10px;top:22px;right:12px}.clip-footer{gap:7px;padding:44px 14px 16px}.channel-avatar{width:24px;height:24px;font-size:10px}.channel-name{font-size:12.5px}.clip-caption-bubble{border-radius:16px;max-width:88%;padding:6px 11px;font-size:12px}.clip-title{font-size:13px}.clips-stage-controls{flex:none;gap:14px}.clips-stage-controls .ctrl-btn{width:36px;height:36px;font-size:15px}.clips-stage-controls .dots .dot{width:4px;height:4px}.clips-stage-controls .dots .dot.active{width:16px}.clips-stage-controls .mute-btn{width:36px;height:36px;font-size:14px}.clips-explore{background:var(--bg-secondary);border-top:1px solid var(--border-subtle);border-left:none;border-radius:18px 18px 0 0;flex-direction:column;flex:none;width:100%;height:225px;min-height:0;display:flex}.clips-explore .drag-handle{flex:none;justify-content:center;padding:8px 0 4px;display:flex!important}.clips-explore .drag-handle div{background:#2a2e3d;border-radius:3px;width:36px;height:4px}.explore-header{border-bottom:1px solid var(--border-subtle);padding:2px 16px 10px}.explore-header h2{font-size:14.5px}.explore-header .refresh-link{display:none!important}.explore-header .item-count{font-size:11px;display:inline!important}.explore-list{-webkit-overflow-scrolling:touch;gap:4px;padding:8px 12px 16px}.feed-item{border-radius:10px;gap:10px;padding:7px}.feed-thumb{border-radius:7px;width:44px;height:58px}.feed-title{font-size:12.5px}.feed-meta{font-size:10.5px}.clips-hint.desktop-only{display:none!important}.clips-hint.mobile-only{white-space:nowrap;border-radius:14px;padding:5px 10px;font-size:10px;position:absolute;top:60px;left:50%;transform:translate(-50%);display:flex!important}}.explore-actions{justify-content:center;gap:12px;width:100%;margin-top:14px;padding:10px 0;display:flex}.explore-action-btn{cursor:pointer;border:1px solid var(--border-subtle);border-radius:999px;outline:none;justify-content:center;align-items:center;padding:8px 16px;font-family:inherit;font-size:12.5px;font-weight:600;transition:all .2s;display:inline-flex}.explore-action-btn:disabled{opacity:.6;cursor:not-allowed}.load-more-btn{background-color:var(--brand);color:#fff;border-color:var(--brand)}.load-more-btn:not(:disabled):hover{background-color:#4a68db;border-color:#4a68db}.refresh-feed-btn{background-color:var(--bg-surface);color:var(--text-primary)}.refresh-feed-btn:not(:disabled):hover{background-color:var(--bg-secondary);border-color:var(--text-secondary)}@media (max-width:767px){.explore-actions{gap:8px;margin-top:10px;padding:6px 0}.explore-action-btn{padding:6px 12px;font-size:11px}}.clip-info-btn{color:#fff;cursor:pointer;background:#ffffff26;border:none;border-radius:50%;outline:none;flex-shrink:0;justify-content:center;align-items:center;width:30px;height:30px;padding:0;transition:background-color .2s,transform .2s;display:flex}.clip-info-btn:hover{background:#ffffff40;transform:scale(1.05)}.footer-bottom-row{justify-content:space-between;align-items:flex-end;gap:12px;width:100%;display:flex}.clip-info-overlay{-webkit-backdrop-filter:blur(12px);z-index:30;background:#000000b3;justify-content:center;align-items:flex-end;animation:.25s ease-out fadeIn;display:flex;position:absolute;inset:0}.clip-info-panel{background:var(--bg-surface,#161925);border-top:1px solid var(--border-subtle,#232636);border-radius:20px 20px 0 0;flex-direction:column;width:100%;max-height:70%;padding:20px;animation:.3s cubic-bezier(.2,.8,.2,1) slideUp;display:flex;position:relative}.clip-info-close{width:28px;height:28px;color:var(--text-primary);cursor:pointer;background:#ffffff14;border:none;border-radius:50%;outline:none;justify-content:center;align-items:center;padding:0;transition:background-color .2s;display:flex;position:absolute;top:14px;right:14px}.clip-info-close:hover{background:#ffffff29}.clip-info-header{border-bottom:1px solid var(--border-subtle);text-align:left;margin-bottom:14px;padding-bottom:10px}.clip-info-header h3{color:var(--text-primary);margin:0;font-size:15px;font-weight:700}.clip-info-body{text-align:left;flex-direction:column;flex:1;gap:12px;padding-right:4px;display:flex;overflow-y:auto}.clip-info-body::-webkit-scrollbar{width:5px}.clip-info-body::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:4px}.info-clip-title{color:var(--text-primary);margin:0;font-size:15px;font-weight:700;line-height:1.35}.info-channel-row{color:var(--text-secondary);gap:8px;font-size:12px;display:flex}.info-channel-name{color:var(--brand);font-weight:650}.info-description-box{color:var(--text-secondary);background:#ffffff05;border:1px solid #ffffff0a;border-radius:10px;padding:12px;font-size:12.5px;line-height:1.5}.info-description-box p{white-space:pre-wrap;word-wrap:break-word;margin:0}.info-tags-list{flex-wrap:wrap;gap:6px;display:flex}.info-tag-pill{background:var(--brand-subtle);color:var(--brand);border:1px solid #5b7cfa33;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}