/* ShortsHub Vertical Feed | immersive scroll snapping, accessible icons and native responsive video */
.shorts-page{position:relative;isolation:isolate;min-height:calc(100vh - 122px);background:#050711;color:#fff;overflow:hidden}
.shorts-page:before{content:"";position:absolute;z-index:1;pointer-events:none;inset:0;background:radial-gradient(ellipse at 50% 0,rgba(113,78,255,.15),transparent 42%),radial-gradient(ellipse at 85% 60%,rgba(52,215,238,.06),transparent 34%)}
.shorts-topline{position:absolute;z-index:20;top:17px;left:50%;transform:translateX(-50%);width:min(calc(100% - 34px),560px);display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.feed-label{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:1000;letter-spacing:2px;text-transform:uppercase;text-shadow:0 3px 12px #000}.feed-label:before{content:"";width:10px;height:10px;border-radius:50%;background:#ff477d;box-shadow:0 0 0 5px rgba(255,71,125,.16),0 0 17px #ff477d;animation:feedPulse 2s ease-in-out infinite}
.feed-pill{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:950;letter-spacing:.5px;padding:10px 14px;background:rgba(16,18,29,.76);border:1px solid rgba(255,255,255,.2);border-radius:999px;backdrop-filter:blur(16px);box-shadow:0 7px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.12)}
.shorts-feed{height:calc(100vh - 122px);min-height:540px;overflow-y:auto;scroll-snap-type:y mandatory;scroll-behavior:smooth;overscroll-behavior-y:contain;background:#050711;scrollbar-width:none}.shorts-feed::-webkit-scrollbar{display:none}
.short-card,.gate-card{height:calc(100vh - 122px);min-height:540px;scroll-snap-align:start;scroll-snap-stop:always;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 50%,#151528 0%,#07080d 68%);overflow:hidden}
.short-card:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(105deg,rgba(0,0,0,.35),transparent 18%,transparent 82%,rgba(0,0,0,.3))}
.video-shell{position:relative;width:min(100%,520px);height:100%;background:#000;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 0 65px rgba(0,0,0,.52),0 0 90px rgba(112,78,255,.05);transform:translateZ(0)}
.video-shell:after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid rgba(255,255,255,.055);box-shadow:inset 0 0 50px rgba(0,0,0,.12)}.short-iframe{position:absolute;width:100%;height:100%;inset:0;border:0;background:#000;z-index:0}
.video-gradient{position:absolute;inset:30% 0 0;z-index:3;pointer-events:none;background:linear-gradient(transparent 0%,rgba(0,0,0,.1) 24%,rgba(0,0,0,.84) 100%)}
.short-info{position:absolute;z-index:4;left:23px;right:92px;bottom:32px;pointer-events:none;text-shadow:0 2px 12px rgba(0,0,0,.9)}
.short-title{font-size:clamp(21px,2.5vw,28px);font-weight:1000;line-height:1.24;letter-spacing:-.55px;margin-bottom:9px;max-width:100%;overflow-wrap:anywhere}.short-description{font-size:16px;line-height:1.55;color:#f1f3ff;max-width:410px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-shadow:0 1px 8px #000}
.short-actions{position:absolute;right:16px;bottom:36px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:15px}.short-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0;border:0;background:transparent;color:#fff;cursor:pointer;min-width:54px;font:inherit;text-shadow:0 2px 7px #000}.action-bubble{width:50px;height:50px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(145deg,rgba(45,47,63,.88),rgba(15,16,25,.84));border:1px solid rgba(255,255,255,.25);backdrop-filter:blur(14px);box-shadow:0 5px 0 rgba(0,0,0,.45),0 11px 25px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.2);transition:transform .22s ease,background .22s ease,box-shadow .22s ease,border-color .22s ease}.action-bubble .ui-icon{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.action-caption{font-size:11px;color:#fff;font-weight:1000;letter-spacing:.7px;line-height:1.2}.short-action:hover .action-bubble,.short-action:focus-visible .action-bubble{transform:translateY(-4px) rotate(-3deg) scale(1.05);background:linear-gradient(145deg,rgba(130,92,255,.9),rgba(31,24,56,.92));border-color:rgba(213,198,255,.6);box-shadow:0 8px 0 rgba(0,0,0,.42),0 17px 29px rgba(80,49,174,.35),inset 0 1px 0 rgba(255,255,255,.23)}.short-action:active .action-bubble{transform:translateY(2px) scale(.97);box-shadow:0 2px 0 rgba(0,0,0,.5)}.short-action.is-liked .action-bubble{color:#ff85b8;background:linear-gradient(145deg,rgba(250,79,154,.42),rgba(39,19,50,.92));border-color:rgba(255,120,180,.6);box-shadow:0 5px 0 rgba(0,0,0,.42),0 0 25px rgba(250,79,154,.26)}
.scroll-hint{position:absolute;z-index:5;right:8px;top:48%;transform:translateY(-50%);display:flex;align-items:center;gap:7px;writing-mode:vertical-rl;color:rgba(255,255,255,.72);font-size:11px;font-weight:900;letter-spacing:1.7px;text-shadow:0 2px 8px #000;animation:hintDrift 2.4s ease-in-out infinite}
.gate-card{padding:24px;background:radial-gradient(ellipse at 50% 45%,rgba(133,82,255,.28),transparent 58%),radial-gradient(ellipse at 10% 90%,rgba(255,49,112,.15),transparent 45%),#090a10}
.gate-panel{position:relative;isolation:isolate;width:100%;max-width:510px;text-align:center;padding:clamp(30px,4vw,48px);border-radius:30px;background:linear-gradient(145deg,rgba(25,28,45,.98),rgba(13,15,25,.99));border:1px solid rgba(255,255,255,.16);box-shadow:0 7px 0 #07080e,0 28px 75px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.1);overflow:hidden}.gate-panel:before{content:"";position:absolute;z-index:-1;left:12%;right:12%;top:0;height:3px;background:linear-gradient(90deg,transparent,#ff4d87,#8b5cff,#34d7ee,transparent)}
.gate-icon{width:72px;height:72px;border-radius:24px;margin:0 auto 22px;display:grid;place-items:center;background:linear-gradient(145deg,#ff386b,#e73db6 55%,#825bff);box-shadow:0 7px 0 #72256b,0 18px 32px rgba(255,49,91,.3),inset 0 1px 0 rgba(255,255,255,.38);animation:gateFloat 4s ease-in-out infinite}.gate-icon .ui-icon{width:31px;height:31px;stroke-width:2.3}.gate-panel h2{margin:0 0 14px;font-size:clamp(28px,4vw,37px);font-weight:1000;line-height:1.15;letter-spacing:-.9px}.gate-panel p{margin:0 0 24px;color:#c0c6d8;font-size:16px;line-height:1.75}.gate-buttons{display:flex;flex-direction:column;gap:13px}.gate-btn{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;padding:16px 19px;border-radius:15px;background:linear-gradient(135deg,#ff315b,#f13ea7 57%,#885bff);font-size:16px;font-weight:1000;box-shadow:0 6px 0 #8d255e,0 13px 25px rgba(255,49,91,.23),inset 0 1px 0 rgba(255,255,255,.32);transition:transform .2s ease,box-shadow .2s ease}.gate-btn:hover{transform:translateY(-3px);box-shadow:0 9px 0 #8d255e,0 20px 34px rgba(255,49,91,.32),inset 0 1px 0 rgba(255,255,255,.32)}.gate-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #8d255e}.gate-login{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.035);font-size:15px;font-weight:850;color:#e1e4ec;transition:background .2s ease,border-color .2s ease,transform .2s ease}.gate-login:hover{background:rgba(138,92,255,.13);border-color:rgba(167,139,250,.5);transform:translateY(-2px)}.gate-panel .feed-note{margin:18px auto 0;font-size:13px;color:#8992ac}
.empty-feed{height:calc(100vh - 122px);display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;color:#b8bfd2;background:radial-gradient(ellipse at center,rgba(138,92,255,.13),transparent 58%),#07080d}.empty-feed h2{color:#fff;font-size:clamp(28px,4vw,38px);letter-spacing:-.7px}.empty-feed p{font-size:17px;line-height:1.7}.feed-note{font-size:13px;color:#929bb1;max-width:370px;margin:15px auto 0;line-height:1.65}
.skip-link{position:fixed;z-index:1000;left:14px;top:10px;transform:translateY(-160%);padding:12px 16px;background:#fff;color:#111;border-radius:10px;font-weight:900}.skip-link:focus{transform:translateY(0)}
@keyframes feedPulse{0%,100%{box-shadow:0 0 0 4px rgba(255,71,125,.16),0 0 15px #ff477d}50%{box-shadow:0 0 0 7px rgba(255,71,125,.06),0 0 22px #ff477d}}@keyframes hintDrift{0%,100%{margin-top:0;opacity:.55}50%{margin-top:7px;opacity:1}}@keyframes gateFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-5px) rotate(2deg)}}
@media(max-width:760px){.shorts-page{min-height:calc(100vh - 110px)}.shorts-feed,.short-card,.gate-card{height:calc(100vh - 110px);min-height:500px}.empty-feed{height:calc(100vh - 110px)}.shorts-topline{top:13px;width:calc(100% - 24px)}.video-shell{width:min(100%,520px)}.short-info{left:17px;bottom:26px;right:80px}.short-title{font-size:clamp(20px,4vw,25px)}.short-description{font-size:15px}.short-actions{right:12px;bottom:28px;gap:15px}.action-bubble{width:47px;height:47px;border-radius:16px}.action-caption{font-size:10px}}
@media(max-width:540px){.site-footer{display:none}.site-main{min-height:calc(100dvh - 60px)}.shorts-page{min-height:calc(100dvh - 60px)}.shorts-feed,.short-card,.gate-card{height:calc(100dvh - 60px);min-height:470px}.empty-feed{height:calc(100dvh - 60px)}.shorts-topline{top:10px;width:calc(100% - 20px)}.feed-label{font-size:11px;letter-spacing:1.35px}.feed-pill{font-size:10px;padding:7px 10px}.video-shell{width:100%;max-width:none}.short-info{left:14px;bottom:22px;right:68px}.short-title{font-size:19px;line-height:1.3;margin-bottom:7px}.short-description{font-size:13px;line-height:1.55;-webkit-line-clamp:4}.short-actions{right:9px;bottom:24px;gap:13px}.short-action{min-width:44px;gap:5px}.action-bubble{width:41px;height:41px;border-radius:14px}.action-bubble .ui-icon{width:19px;height:19px}.action-caption{font-size:9px}.scroll-hint{right:4px;font-size:9px}.gate-panel{padding:30px 21px;border-radius:23px}.gate-icon{width:60px;height:60px;border-radius:19px}.gate-icon .ui-icon{width:27px;height:27px}.gate-panel h2{font-size:28px}.gate-panel p{font-size:14px}.gate-btn{font-size:15px}.gate-login{font-size:14px}.empty-feed p{font-size:15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}