/* 光影 add-on · yk-reels.css — styles for yk-reels.js. Every rule is scoped to .reels / .yk-*, so it cannot change the rest of the page. */
.reels,.yk-follow,.yk-toast{--rose:#eba3b6;--gold:#d8ae8f;--gold-soft:#f3dccf;--text:#f7f0ea;--muted:#a8959c;--surface:#1a0e13;--surface-2:#26131b;--line-soft:#ffffff14;--ease:cubic-bezier(.22,.61,.36,1);--serif:'Noto Serif SC','Songti SC',serif;--sans:'Noto Sans SC','PingFang SC',system-ui,sans-serif}
.reels{font-family:var(--sans);line-height:1.6}.reels *,.reels *::before,.reels *::after{box-sizing:border-box}.reels [hidden]{display:none!important}
.reels button{font-family:inherit}
.reels video,.reels img{max-width:none;max-height:none}.reels h2,.reels h3,.reels p{letter-spacing:normal}
/* Vertical swipe player (reels.js). Phones get the whole screen; wider screens get a 9:16 column over a blurred cover. */
html.reels-open,html.reels-open body{overflow:hidden}
.reels{position:fixed;inset:0;z-index:2147482000;background:#000;color:var(--text)}
.reels svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.reels-backdrop{position:absolute;inset:0;overflow:hidden}
.reels-backdrop img{width:100%;height:100%;object-fit:cover;filter:blur(40px) brightness(.35) saturate(1.2);transform:scale(1.2)}
.reels-stage{position:relative;height:100%;width:min(100vw,calc(100dvh*9/16));margin:0 auto;background:#000;overflow:hidden;box-shadow:0 0 120px #000c}
.reels-track{height:100%;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;scrollbar-width:none;outline:none}
.reels-track::-webkit-scrollbar{display:none}
.reel{position:relative;height:100%;scroll-snap-align:start;scroll-snap-stop:always;display:grid;place-items:center;overflow:hidden;background:#000;cursor:pointer}
.reel-poster{position:absolute;inset:0;background:center/cover no-repeat;opacity:.55}
.reel.locked .reel-poster{filter:blur(18px) brightness(.5);transform:scale(1.1);opacity:1}
.reels-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;z-index:1}
.reel-play{position:absolute;z-index:2;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#0006;backdrop-filter:blur(6px);opacity:0;transform:scale(.8);transition:.25s var(--ease);pointer-events:none}
.reel-play svg{width:34px;height:34px;fill:currentColor;stroke:none;margin-left:4px}
.reels.paused .reel:has(.reels-video) .reel-play{opacity:1;transform:none}
.reel-error{position:absolute;z-index:3;left:24px;right:24px;text-align:center;background:#000a;padding:14px;border-radius:12px;font-size:13px}
.reel-soon{position:relative;z-index:2;text-align:center;padding:0 32px}.reel-soon strong{font:600 26px/1.3 var(--serif)}.reel-soon p{color:var(--muted);font-size:14px}
.reel-lock{position:relative;z-index:2;width:min(calc(100% - 150px),320px);margin-top:-40px;text-align:center;display:grid;gap:10px;justify-items:center;cursor:default}
.reel-lock-icon{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--gold-soft),var(--gold));color:#2a1218}
.reel-lock small{letter-spacing:.2em;color:var(--gold);font-size:11px}
.reel-lock strong{font:600 20px/1.4 var(--serif);text-wrap:balance}.reel-lock p{margin:0 0 6px;color:#e8d8dc;font-size:13px}
.reel-unlock{width:100%;display:grid;gap:2px;padding:13px 16px;border-radius:14px;border:1px solid #ffffff2e;background:#ffffff12;color:var(--text);font:500 15px var(--sans);letter-spacing:.06em;cursor:pointer;backdrop-filter:blur(8px)}
.reel-unlock small{font-size:11px;color:var(--muted);letter-spacing:0}
.reel-unlock.featured{background:linear-gradient(135deg,var(--gold-soft),var(--gold));color:#2a1218;border:0;margin:0}.reel-unlock.featured small{color:#5a3a35}
.reels-top{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;align-items:center;gap:12px;padding:max(14px,env(safe-area-inset-top)) 14px 30px;background:linear-gradient(#000a,transparent);pointer-events:none}
.reels-top>*{pointer-events:auto}
.reels-icon{width:40px;height:40px;border-radius:50%;border:0;display:grid;place-items:center;background:#0000004d;color:var(--text);cursor:pointer}
.reels-ep{font-size:13px;letter-spacing:.08em;color:#f2e6e9;text-shadow:0 1px 6px #000}
.reels-side{position:absolute;z-index:5;right:10px;bottom:150px;display:grid;gap:18px}
.reels-act{display:grid;justify-items:center;gap:4px;background:none;border:0;color:var(--text);font:400 11px var(--sans);cursor:pointer;text-shadow:0 1px 6px #000}
.reels-act svg{width:30px;height:30px;padding:9px;box-sizing:content-box;border-radius:50%;background:#0000004d;backdrop-filter:blur(6px);filter:drop-shadow(0 1px 4px #0008)}
.reels-act.on svg{fill:var(--rose);stroke:var(--rose)}
.reels-info{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:60px 80px 0 16px;padding-bottom: max(46px,calc(env(safe-area-inset-bottom) + 40px));background:linear-gradient(transparent,#000c);pointer-events:none}
.reels-info small,.reels-sheet small{font-size:12px;color:var(--gold);letter-spacing:.08em}
.reels-title{margin:4px 0 6px;font:600 20px/1.35 var(--serif);text-wrap:balance}
.reels-desc{margin:0;font-size:13px;line-height:1.6;color:#e8dadf;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.reels-progress{position:absolute;z-index:6;left:16px;right:16px;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px}
.reels-progress input{flex:1;accent-color:var(--rose);height:3px;cursor:pointer}
.reels-time{font-size:11px;color:#d9c9ce;font-variant-numeric:tabular-nums;white-space:nowrap}
.reels-hint{position:absolute;z-index:7;left:50%;top:42%;transform:translate(-50%,-50%);background:#000b;padding:10px 18px;border-radius:999px;font-size:13px;white-space:nowrap;pointer-events:none;animation:reels-fade .3s var(--ease)}
.reels-sheet{position:absolute;z-index:8;inset:0;background:#0008;display:flex;align-items:flex-end}
.reels-sheet-card{width:100%;max-height:72%;overflow:auto;background:var(--surface);border-radius:20px 20px 0 0;padding:20px 18px max(24px,env(safe-area-inset-bottom));animation:reels-up .3s var(--ease)}
.reels-sheet-head{display:flex;justify-content:space-between;gap:12px;align-items:start}.reels-sheet-head h3{margin:4px 0 0;font:600 19px/1.35 var(--serif)}
.reels-sheet-desc{font-size:13px;color:#d9c9ce;line-height:1.7}
.reels-sheet-label{font-size:12px;color:var(--muted);margin:14px 0 10px}
.reels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.reels-grid button{position:relative;height:44px;border-radius:10px;border:1px solid var(--line-soft);background:var(--surface-2);color:var(--text);font:500 14px var(--sans);font-variant-numeric:lining-nums;cursor:pointer}
.reels-grid button.selected{background:var(--rose);color:#2a1218;border-color:transparent}
.reels-grid button.locked::after{content:'';position:absolute;top:4px;right:4px;width:10px;height:10px;background:var(--gold);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3h1v10H6V11z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 11V8a5 5 0 0 1 10 0v3h1v10H6V11z'/%3E%3C/svg%3E") center/contain no-repeat}
@keyframes reels-up{from{transform:translateY(40px);opacity:0}}
@keyframes reels-fade{from{opacity:0}}
@media (min-width:701px){.reels-stage{border-left:1px solid #ffffff12;border-right:1px solid #ffffff12}}
@media (prefers-reduced-motion:reduce){.reels-sheet-card,.reels-hint{animation:none}}
.yk-toast{position:fixed;z-index:2147483000;left:50%;top:calc(72px + env(safe-area-inset-top,0px));transform:translateX(-50%);padding:12px 22px;border-radius:999px;background:var(--text);color:#1c0c13;font:400 14px var(--sans);letter-spacing:.06em;box-shadow:0 20px 50px #0008;max-width:calc(100vw - 32px)}
.yk-toast[hidden]{display:none}
/* My List row */
.yk-follow{max-width:1560px;margin:0 auto;padding:28px clamp(20px,5vw,72px) 8px;color:var(--text);font-family:var(--sans)}
.yk-follow h3{margin:0 0 16px;font:600 22px/1.3 var(--serif);letter-spacing:.06em}
.yk-follow-track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(132px,15vw,190px);gap:16px;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.yk-follow-track::-webkit-scrollbar{display:none}
.yk-follow-card{display:grid;gap:6px;text-align:left;background:none;border:0;padding:0;color:inherit;cursor:pointer;font:inherit}
.yk-follow-art{position:relative;aspect-ratio:2/3;border-radius:12px;overflow:hidden;background:var(--surface-2)}
.yk-follow-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.yk-follow-card:hover img{transform:scale(1.05)}
.yk-follow-eps{position:absolute;right:8px;bottom:8px;font-size:11px;padding:2px 8px;border-radius:999px;background:#000a}
.yk-follow-card strong{font-weight:500;font-size:14px}.yk-follow-card small{color:var(--muted);font-size:12px}