/* 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}