/* CheekyReels V10 — both display modes on one playback queue */
:root{--cr-dark:#161515;--cr-accent:#e8376c}
.cr-display-switch{position:absolute;z-index:36;bottom:29px;left:50%;transform:translateX(-50%);display:flex;justify-content:center;pointer-events:auto}
.cr-display-switch button{white-space:nowrap;display:flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid #dad4cd;background:#fffaf5e8;backdrop-filter:blur(12px);box-shadow:0 6px 23px #30252514;border-radius:100px;color:#282426;font-size:12px;font-weight:730;cursor:pointer}
.cr-display-switch svg{height:16px;width:16px}
.cr-display-switch button:hover{border-color:#b9aeb1;background:#fff}
.cr-display-switch button:focus-visible{outline:3px solid #e8376c;outline-offset:3px}
.cr-deck-count{bottom:5px!important;font-size:10px!important;z-index:34!important}
/* Auto stays in the upper navigation; Undo is a compact, low-key bottom action */
#toolbar{position:absolute;left:auto;right:16px;bottom:30px;transform:none;z-index:37;margin:0;padding:0;background:none;border:0;box-shadow:none}
#undo{display:flex;align-items:center;gap:4px;padding:7px 10px;background:#fffdf8aa;border:1px solid #ded8d0;border-radius:28px;font-size:11px;color:#504c48;cursor:pointer}
#undo[hidden]{display:none!important}#undo svg{width:15px;height:15px}
/* In card display only the active card has a clock and working seek bar. */
.video-card:not(.is-front) .clip-progress,.video-card:not(.is-front) .cr-clip-time{display:none!important}
.video-card.is-front .clip-progress{pointer-events:auto;cursor:ew-resize;touch-action:none;z-index:15;min-height:7px}
.video-card .cr-clip-time{position:absolute;right:11px;bottom:13px;color:#fff;z-index:14;font-size:11px;font-variant-numeric:tabular-nums;text-shadow:0 1px 5px #000;pointer-events:none}
.video-card.is-front .clip-progress:focus-visible{outline:2px solid white;outline-offset:3px}
/* Regular Reels: single portrait player, one video request, no fanned cards */
.cr-normal-view{position:absolute;inset:0;z-index:19;display:grid;place-items:center;pointer-events:none;background:radial-gradient(ellipse,#eeeae5,#f6f3ef)}
.cr-normal-view[hidden]{display:none}
.cr-normal-screen{position:relative;height:min(94%,800px);aspect-ratio:9/16;width:auto;max-width:96%;background:#101011;border-radius:19px;overflow:hidden;box-shadow:0 15px 45px #17131330;pointer-events:auto;touch-action:pan-y}
.cr-normal-screen video{position:absolute;inset:0;height:100%;width:100%;object-fit:contain;background:black;cursor:pointer}
.cr-normal-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,transparent 65%,#0009)}
.cr-normal-actions{position:absolute;right:10px;bottom:100px;display:flex;flex-direction:column;gap:12px;color:white;align-items:center}
.cr-normal-info{position:absolute;left:12px;bottom:63px;right:74px;color:white;text-shadow:0 1px 8px black}
.cr-normal-info .caption{font-size:12px}.cr-normal-info button{color:inherit}
.cr-normal-play{position:absolute;top:45%;left:50%;transform:translate(-50%,-50%);color:#fff;pointer-events:none;opacity:0;transition:opacity .2s}
.cr-normal-play.visible{opacity:.9}.cr-normal-play svg{width:60px;height:60px;filter:drop-shadow(0 2px 4px #0007)}
.cr-normal-controls{position:absolute;bottom:16px;left:12px;right:12px;display:flex;align-items:center;gap:12px;color:white;z-index:5;font:11px/1.2 system-ui}
.cr-normal-controls input{width:100%;min-width:0;flex:1;accent-color:#e93266;height:18px;cursor:pointer}
.cr-normal-controls span{white-space:nowrap;font-variant-numeric:tabular-nums}
.app.cr-normal-mode .viewport{display:none!important}.app.cr-normal-mode .ambient{display:none}
.app.cr-normal-mode .cr-deck-count{display:none!important}
.app.cr-normal-mode .cr-display-switch{bottom:9px;z-index:48}.app.cr-normal-mode{background:#f5f3f0}
.app.cr-normal-mode .cr-normal-view{bottom:48px}
/* Creator profiles: always in document flow, never inside the overlaid player. */
.cr-creator-header{max-width:1140px;width:100%;margin:0 auto;padding:24px 32px 12px;position:relative;z-index:2}
.cr-creator-back{font-size:14px!important;margin-bottom:18px!important;font-weight:730;text-decoration:none}
.cr-creator-core{display:grid;grid-template-columns:94px minmax(0,1fr) auto;gap:22px;align-items:center}
.cr-creator-avatar{width:90px!important;height:90px!important;font-size:35px!important}
.cr-creator-summary h1{font-size:clamp(26px,3vw,36px)!important;font-weight:790}
.cr-creator-summary>p{font-size:14px!important;color:#77716c;margin:5px 0 8px!important}
.cr-creator-bio{font-size:14px;line-height:1.5;color:#454343;max-width:780px;margin:0 0 12px}
.cr-creator-stats{display:flex!important;gap:32px!important;flex-wrap:wrap}
.cr-creator-stats>div{display:flex!important;flex-direction:column;gap:2px!important;align-items:flex-start}
.cr-creator-stats strong{font-size:clamp(19px,2vw,27px);font-variant-numeric:tabular-nums;color:#252326}
.cr-creator-stats span{font-size:12px;color:#79716e;font-weight:650}
.cr-creator-follow{font-size:15px!important;padding:12px 26px!important;min-width:115px;min-height:45px}
.cr-creator-tabs{display:flex;gap:7px;margin:21px 0 0;border-bottom:1px solid #e3ded8;padding-bottom:0}
.cr-creator-tabs button{padding:12px 23px;cursor:pointer;border:0;border-bottom:3px solid transparent;background:transparent;color:#6c6664;font-size:14px;font-weight:750}
.cr-creator-tabs button.active{border-bottom-color:#e93266;color:#222}
.cr-creator-header + .app{height:min(850px,max(660px,calc(100dvh - 335px)))!important;min-height:660px!important}
.cr-creator-header + .app.cr-profile-images,.cr-creator-header + .app.cr-profile-about{height:auto!important;min-height:270px!important;display:grid;place-items:center}
.cr-creator-header + .app.cr-profile-images>*:not(.cr-profile-empty),.cr-creator-header + .app.cr-profile-about>*:not(.cr-profile-empty){display:none!important}
.cr-profile-empty{display:none;text-align:center;color:#77716d;padding:55px 20px;font-size:14px;line-height:1.7}
.cr-profile-images .cr-profile-empty,.cr-profile-about .cr-profile-empty{display:block}
.cr-creator-header + .app .cr-deck-count{bottom:6px!important}
/* Protect mode and badge from the bottom content; make the page itself scroll. */
@media(max-width:760px){
 body:not(.admin-page) .app{min-height:635px!important;height:max(635px,calc(100dvh - 180px))!important}
 .cr-display-switch{bottom:32px}
 .cr-creator-header{padding:15px 14px 10px}
 .cr-creator-back{margin-bottom:12px!important}
 .cr-creator-core{grid-template-columns:64px minmax(0,1fr);gap:11px}
 .cr-creator-avatar{width:61px!important;height:61px!important;font-size:25px!important;align-self:start}
 .cr-creator-summary h1{font-size:23px!important}
 .cr-creator-summary>p{font-size:12px!important}
 .cr-creator-bio{font-size:12px;margin:5px 0 9px}
 .cr-creator-stats{gap:15px!important}
 .cr-creator-stats strong{font-size:19px}
 .cr-creator-stats span{font-size:10px}
 .cr-creator-follow{grid-column:2;justify-self:start;min-width:115px;font-size:13px!important;padding:9px 18px!important;min-height:40px}
 .cr-creator-tabs{margin-top:13px}
 .cr-creator-tabs button{font-size:13px;padding:12px 18px}
 .cr-creator-header + .app{height:max(680px,calc(100dvh - 160px))!important;min-height:680px!important}
 .cr-creator-header + .app.cr-profile-images,.cr-creator-header + .app.cr-profile-about{height:280px!important;min-height:280px!important}
 .cr-normal-screen{height:min(94%,calc(100dvh - 215px));border-radius:11px;max-width:100%}
 .cr-normal-view{padding:4px 2px 0}
 .cr-display-switch button{font-size:11px;padding:9px 12px}
 .cr-creator-header + .app .cr-deck-count{bottom:9px!important}
 .cr-footer{margin:0!important}
}
@media(prefers-reduced-motion:reduce){.cr-normal-play{transition:none}}

@media(max-width:760px){.cr-normal-screen{touch-action:none}.cr-normal-controls input{touch-action:pan-x}}