/* Zhuijuba unified recommendation component v1 */
.zj-rec{--rec-bg:var(--c-bg,#0d0f14);--rec-card:var(--c-bg-card,#171c26);--rec-text:var(--c-text,#fff);--rec-muted:var(--c-text-2,#a6adba);--rec-border:var(--c-border,rgba(255,255,255,.08));--rec-primary:var(--c-primary,#4d8cff);position:relative;min-width:0}
html[data-theme="light"] .zj-rec{--rec-bg:#f5f7fa;--rec-card:#fff;--rec-text:#17202d;--rec-muted:#687386;--rec-border:#dce3ec}
.zj-rec__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px}.zj-rec__title{margin:0;font-size:20px;line-height:1.2;font-weight:700;color:var(--rec-text)}
.zj-rec__refresh{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 12px;border:1px solid var(--rec-border);border-radius:10px;color:var(--rec-text);background:transparent;font-weight:600}.zj-rec__refresh:hover{border-color:var(--rec-primary);color:var(--rec-primary)}.zj-rec__refresh[disabled]{opacity:.5;cursor:default}
.zj-rec__track{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 14px;min-width:0}.zj-rec__card{position:relative;min-width:0}.zj-rec__poster{position:relative;display:block;aspect-ratio:2/3;overflow:hidden;border:1px solid var(--rec-border);border-radius:12px;background:var(--rec-card)}.zj-rec__poster img{width:100%;height:100%;display:block;object-fit:cover}.zj-rec__badge{position:absolute;top:8px;left:8px;z-index:2;padding:3px 7px;border-radius:7px;color:#fff;background:rgba(10,14,22,.72);font-size:11px;border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px)}
.zj-rec__body{padding:8px 2px 0}.zj-rec__topline{display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:start;gap:4px}.zj-rec__name{min-width:0;margin:0;font-size:14px;line-height:1.35;font-weight:650;color:var(--rec-text);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.zj-rec__meta{margin-top:5px;color:var(--rec-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.zj-rec__reason{margin-top:5px;color:var(--rec-muted);font-size:12px}
.zj-rec__more,.zj-rec__like{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;color:var(--rec-muted);border:0;background:transparent}.zj-rec__more:hover,.zj-rec__like:hover{background:rgba(127,145,170,.10);color:var(--rec-text)}.zj-rec__like{position:absolute;right:5px;bottom:5px;z-index:3;background:rgba(8,12,18,.64);color:#fff;backdrop-filter:blur(8px)}.zj-rec__like.is-active{color:#fff;background:var(--rec-primary)}
.zj-rec-menu{position:fixed;z-index:10050;min-width:172px;padding:6px;border:1px solid var(--rec-border,#dce3ec);border-radius:12px;background:var(--rec-card,#fff);box-shadow:0 18px 45px rgba(0,0,0,.28)}.zj-rec-menu[hidden]{display:none!important}.zj-rec-menu button{display:flex;width:100%;min-height:44px;align-items:center;gap:9px;padding:0 11px;border-radius:8px;color:var(--rec-text,#17202d);font-weight:550;text-align:left}.zj-rec-menu button:hover,.zj-rec-menu button:focus-visible{background:rgba(77,140,255,.11);outline:0}
.zj-rec-toast{position:fixed;z-index:10060;left:50%;bottom:max(24px,calc(env(safe-area-inset-bottom) + 18px));display:flex;align-items:center;gap:14px;max-width:min(92vw,520px);padding:12px 14px;border:1px solid var(--rec-border,#334052);border-radius:12px;color:var(--rec-text,#fff);background:var(--rec-card,#111c2a);box-shadow:0 18px 45px rgba(0,0,0,.28);transform:translateX(-50%)}.zj-rec-toast button{color:var(--rec-primary,#4d8cff);font-weight:700}.zj-rec-toast[hidden]{display:none!important}
.zj-rec__state{min-height:180px;display:grid;place-items:center;color:var(--rec-muted);border:1px dashed var(--rec-border);border-radius:14px}.zj-rec__loading-card{height:300px;border-radius:12px;background:linear-gradient(90deg,rgba(127,145,170,.08),rgba(127,145,170,.18),rgba(127,145,170,.08));background-size:220% 100%;animation:zjRecShimmer 1.25s linear infinite}@keyframes zjRecShimmer{to{background-position:-220% 0}}
.zj-rec-pref{margin-top:20px}.zj-rec-pref__actions{display:flex;flex-wrap:wrap;gap:10px}.zj-rec-pref button{min-height:44px;padding:0 14px;border:1px solid var(--rec-border);border-radius:10px;color:var(--rec-text);background:var(--rec-card)}.zj-rec-pref__list{display:grid;gap:8px;margin-top:12px}.zj-rec-pref__item{display:flex;align-items:center;gap:10px;padding:8px;border:1px solid var(--rec-border);border-radius:10px}.zj-rec-pref__item img{width:44px;height:60px;object-fit:cover;border-radius:7px}.zj-rec-pref__item span{min-width:0;flex:1}.zj-rec-pref__item button{margin-left:auto}
@media(max-width:1100px){.zj-rec__track{display:flex;overflow-x:auto;overflow-y:hidden;gap:12px;scroll-snap-type:x proximity;padding-bottom:8px;overscroll-behavior-x:contain}.zj-rec__card{flex:0 0 clamp(150px,30vw,210px);scroll-snap-align:start}.zj-rec__title{font-size:18px}}
@media(max-width:680px){.zj-rec__card{flex-basis:calc((100vw - 56px)/2.18)}.zj-rec__track{margin-right:-16px;padding-right:16px}.zj-rec__more,.zj-rec__like{width:44px;height:44px}.zj-rec__name{font-size:13px}.zj-rec-toast{bottom:calc(78px + env(safe-area-inset-bottom));width:calc(100vw - 28px);justify-content:space-between}.zj-rec-menu{min-width:186px}.zj-rec__loading-card{height:250px}}
@media(prefers-reduced-motion:reduce){.zj-rec *{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.zj-rec [hidden],.zj-rec__state[hidden],.zj-rec-toast[hidden],.zj-rec-menu[hidden]{display:none!important}


/* =========================================================
   Recommendation V1.1 fixes — 2026-09-25
   1) fallback host for detail/play templates without an existing section
   2) light/dark menu + toast use explicit theme colors because they live on <body>
   3) recommendation heart is LIKE (赞过的), not Favorite
   ========================================================= */
.zj-rec-auto-host{
  margin-top:32px;
  margin-bottom:36px;
}
html[data-theme="dark"] .zj-rec-menu,
html[data-theme="dark"] .zj-rec-toast{
  color:#f7f9fc;
  background:#111c2a;
  border-color:rgba(255,255,255,.12);
  box-shadow:0 18px 45px rgba(0,0,0,.36);
}
html[data-theme="light"] .zj-rec-menu,
html[data-theme="light"] .zj-rec-toast{
  color:#17202d;
  background:#ffffff;
  border-color:#d7e0ea;
  box-shadow:0 16px 36px rgba(37,52,75,.16);
}
html[data-theme="light"] .zj-rec-menu button{
  color:#17202d;
}
html[data-theme="light"] .zj-rec-menu button:hover,
html[data-theme="light"] .zj-rec-menu button:focus-visible{
  background:#eef5ff;
}
html[data-theme="light"] .zj-rec-toast button{
  color:#256fe8;
}
html[data-theme="dark"] .zj-rec-toast button{
  color:#79aaff;
}
@media(max-width:680px){
  .zj-rec-auto-host{
    margin-top:24px;
    margin-bottom:28px;
  }
}


/* =========================================================
   Recommendation V1.2 interaction + desktop undo stability
   2026-09-25
   ========================================================= */

/* Clear tactile feedback on every device, including touch screens. */
.zj-rec__refresh,
.zj-rec__more,
.zj-rec__like,
.zj-rec-menu button,
.zj-rec-toast button,
.zj-rec-pref button {
  transition:
    transform .12s ease,
    opacity .12s ease,
    background-color .16s ease,
    color .16s ease,
    border-color .16s ease;
  transform-origin:center;
  -webkit-tap-highlight-color:transparent;
}

.zj-rec__refresh:active,
.zj-rec__more:active,
.zj-rec__like:active,
.zj-rec-menu button:active,
.zj-rec-toast button:active,
.zj-rec-pref button:active,
.zj-rec__refresh.is-pressed,
.zj-rec__more.is-pressed,
.zj-rec__like.is-pressed,
.zj-rec-menu button.is-pressed,
.zj-rec-pref button.is-pressed {
  transform:scale(.94);
}

.zj-rec__card.is-removing {
  opacity:.46;
  transform:scale(.985);
  transition:opacity .16s ease,transform .16s ease;
}

/* Toast itself enters visibly so the action never feels ignored. */
.zj-rec-toast.is-pop {
  animation:zjRecToastPop .22s cubic-bezier(.2,.8,.2,1);
}
.zj-rec-toast button.is-working {
  opacity:.72;
  cursor:wait;
  animation:zjRecUndoPulse .5s ease-in-out infinite alternate;
}
.zj-rec-toast button:disabled {
  pointer-events:none;
}

@keyframes zjRecToastPop {
  0% { opacity:0; transform:translate(-50%,10px) scale(.98); }
  100% { opacity:1; transform:translate(-50%,0) scale(1); }
}
@keyframes zjRecUndoPulse {
  from { transform:scale(.96); }
  to { transform:scale(1.02); }
}

/* Desktop should remain one recommendation row for the six-item batch.
   JS V1.2 also guarantees Undo replaces the temporary fill card instead of
   turning the batch into seven cards. */
@media (min-width:1101px) {
  .zj-rec__track {
    align-items:start;
  }
}

/* Respect reduced-motion while keeping the textual "撤销中…" feedback. */
@media (prefers-reduced-motion:reduce) {
  .zj-rec-toast.is-pop,
  .zj-rec-toast button.is-working {
    animation:none!important;
  }
  .zj-rec__refresh:active,
  .zj-rec__more:active,
  .zj-rec__like:active,
  .zj-rec-menu button:active,
  .zj-rec-toast button:active,
  .zj-rec-pref button:active,
  .is-pressed {
    transform:none!important;
  }
}


/* V1.3: prevent empty desktop cast heading flash. */
@supports selector(:has(*)) {
  #detailCastSection:not(:has(.detail-cast-person)) { display:none !important; }
}
#detailRecommendSection.zj-rec,
#detailRecommendSection[data-rec-mounted="1"] { display:block !important; }


/* Body-mounted menus own their colors; do not rely on .zj-rec inheritance. */
.zj-rec-menu{--rec-text:#f7f9fc;--rec-card:#111c2a;--rec-border:#334052;color:var(--rec-text)}
html[data-theme="light"] .zj-rec-menu{--rec-text:#17202d;--rec-card:#fff;--rec-border:#dce3ec}
html[data-theme="dark"] .zj-rec-menu button{color:#f7f9fc}
html[data-theme="dark"] .zj-rec-menu button:hover,html[data-theme="dark"] .zj-rec-menu button:focus-visible{color:#fff;background:#25364c}
.zj-rec-menu button{white-space:normal;text-align:left}
.zj-rec-menu button:focus-visible{outline:2px solid #4d8cff;outline-offset:-2px}
.zj-rec .zj-rec__topline{grid-template-columns:minmax(0,1fr)}
.zj-rec__actions{display:flex;justify-content:flex-end;gap:4px;margin-top:6px;min-height:44px}
.zj-rec .zj-rec__actions>.zj-rec__like,.zj-rec .zj-rec__actions>.zj-rec__more{position:static;flex:0 0 44px;width:44px;height:44px;z-index:auto}

/* Detail recommendations: poster-first layout, existing site glass. */
:is(#detailRecommendSection,.play-recommendations) .zj-rec__name{min-height:2.7em}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__reason--generic{display:none}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__body{position:relative}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__actions{position:absolute;top:-8px;right:8px;transform:translateY(-100%);z-index:3;margin:0;padding:0;min-height:44px;gap:0}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__actions>.zj-rec__like{display:none}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__actions>.zj-rec__more{box-sizing:border-box;width:44px;height:44px;flex:0 0 44px;border-radius:50%;font-size:16px;color:#fff;background:rgba(10,14,22,.3);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__actions>.zj-rec__more:hover{background:rgba(10,14,22,.6)}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__badge{max-width:calc(100% - 16px);box-sizing:border-box;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(10,14,22,.6)}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__refresh{width:44px;height:44px;min-height:44px;flex:0 0 44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--rec-text);gap:0}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__prev{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;width:44px;height:44px;flex:0 0 44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--rec-text)}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__prev svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__prev:disabled{opacity:.28;cursor:default}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__prev:not(:disabled):hover{background:rgba(127,145,170,.14)}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__head{gap:4px}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__title{margin-right:auto}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__refresh:hover{background:rgba(127,145,170,.14);color:var(--rec-text)}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__refresh-symbol{display:none}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__refresh-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__refresh::before{content:"";width:10px;height:10px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);margin-right:5px}
:is(#detailRecommendSection,.play-recommendations) button:focus-visible{outline:2px solid var(--rec-text);outline-offset:3px}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__more:focus-visible{outline-color:#fff;outline-offset:-4px}
@media(min-width:1101px) and (hover:hover){:is(#detailRecommendSection,.play-recommendations) .zj-rec__actions{opacity:0;transition:opacity .15s}:is(#detailRecommendSection,.play-recommendations) .zj-rec__card:hover .zj-rec__actions,:is(#detailRecommendSection,.play-recommendations) .zj-rec__card:focus-within .zj-rec__actions{opacity:1}}
:is(#detailRecommendSection,.play-recommendations) .zj-rec__card:has([aria-expanded="true"]) .zj-rec__actions{opacity:1}
@media(max-width:1100px){:is(#detailRecommendSection,.play-recommendations) .zj-rec__track{scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgba(104,115,134,.35) transparent}:is(#detailRecommendSection,.play-recommendations) .zj-rec__track::-webkit-scrollbar{height:4px}:is(#detailRecommendSection,.play-recommendations) .zj-rec__track::-webkit-scrollbar-thumb{background:rgba(104,115,134,.35);border-radius:999px}}
/* The shared menu is mounted on body; scope its appearance to detail pages. */
html:has(:is(#detailRecommendSection,.play-recommendations)) .zj-rec-menu{box-sizing:border-box;width:min(218px,calc(100vw - 24px));min-width:0;max-height:calc(100dvh - 24px);overflow-y:auto;padding:6px;border-radius:20px;-webkit-backdrop-filter:blur(32px) saturate(140%);backdrop-filter:blur(32px) saturate(140%)}
html[data-theme="light"]:has(:is(#detailRecommendSection,.play-recommendations)) .zj-rec-menu{background:rgba(244,247,250,.52);border-color:rgba(255,255,255,.62);box-shadow:0 8px 24px rgba(25,35,48,.12),inset 0 1px rgba(255,255,255,.32)}
html[data-theme="dark"]:has(:is(#detailRecommendSection,.play-recommendations)) .zj-rec-menu{background:rgba(25,33,44,.56);border-color:rgba(255,255,255,.2);box-shadow:0 8px 24px rgba(0,0,0,.2),inset 0 1px rgba(255,255,255,.08)}
html:has(:is(#detailRecommendSection,.play-recommendations)) .zj-rec-menu button{min-height:46px;gap:12px;padding:0 12px;border:0;border-radius:14px;background:transparent;font-size:14px;font-weight:500;line-height:1.4}
.zj-rec-menu svg{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html[data-theme="light"]:has(:is(#detailRecommendSection,.play-recommendations)) .zj-rec-menu button:hover,html[data-theme="light"]:has(:is(#detailRecommendSection,.play-recommendations)) .zj-rec-menu button:focus-visible{background:rgba(255,255,255,.32)}
html[data-theme="dark"]:has(:is(#detailRecommendSection,.play-recommendations)) .zj-rec-menu button:hover,html[data-theme="dark"]:has(:is(#detailRecommendSection,.play-recommendations)) .zj-rec-menu button:focus-visible{background:rgba(255,255,255,.1)}
html:has(:is(#detailRecommendSection,.play-recommendations)) .zj-rec-menu button:focus-visible{outline:2px solid currentColor;outline-offset:-3px}

:is(#detailRecommendSection,.play-recommendations)[data-rec-swipe="true"] .zj-rec__prev,:is(#detailRecommendSection,.play-recommendations)[data-rec-swipe="true"] .zj-rec__refresh{display:none}