/* Wave-6 layouts (2026-10-29): promo ≈ GagaOOLala · vertical ≈ 抖音网页版 / FlexTV · reviews ≈ 豆瓣. Enqueued only on those three
   (reviews also loads layout-wave4.css for the body.xh-light surface). */

/* ======================================================================
   promo — GagaOOLala: solid accent nav, pipe-separated genre bar, carousel, one activity card, 免费 rail
   ====================================================================== */
body.layout-promo .xh-nav { background: var(--xh-amber); box-shadow: 0 0 0 100vmax var(--xh-amber); clip-path: inset(0 -100vmax); padding: 12px 0; } /* full-bleed without leaving .xh-wrap */
body.layout-promo .xh-nav .xh-brand, body.layout-promo .xh-nav-links a, body.layout-promo .xh-nav .xh-acts-login { color: var(--xh-on-accent, #fff); }
body.layout-promo .xh-nav-links a:hover, body.layout-promo .xh-nav-links a[aria-current="page"] { color: var(--xh-on-accent, #fff); text-decoration: underline; text-underline-offset: 5px; }
body.layout-promo .xh-search { background: rgba(255,255,255,.2); border-radius: 999px; }
body.layout-promo .xh-search input { color: var(--xh-on-accent, #fff); }
body.layout-promo .xh-search input::placeholder { color: rgba(255,255,255,.7); }
body.layout-promo .xh-cats { margin: 0 0 20px; gap: 0; border-bottom: 1px solid var(--xh-line); }
body.layout-promo .xh-cats a { padding: 13px 18px; margin: 0; border-bottom: 0; font-size: 13px; line-height: 1; color: var(--xh-text); }
body.layout-promo .xh-cats a + a { border-left: 1px solid var(--xh-line); } /* the vertical rules */
body.layout-promo .xh-cats a:hover { color: var(--xh-amber); }
body.layout-promo .xh-hero { margin-bottom: 28px; }
.xh-promo {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin: 0 0 36px; border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, var(--xh-elev), color-mix(in srgb, var(--xh-amber) 24%, var(--xh-elev))); border: 1px solid var(--xh-line);
}
.xh-promo-copy { display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 32px 36px; min-width: 0; }
.xh-promo-copy .xh-kicker { display: inline-block; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--xh-amber); color: var(--xh-on-accent, #fff); font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.xh-promo-copy h2 { margin: 0; font-size: clamp(22px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; }
.xh-promo-copy p { margin: 0; color: var(--xh-muted); font-size: 14px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.xh-promo-copy .xh-chips { margin: 0; }
.xh-promo-copy .xh-hero-actions { margin-top: 4px; }
.xh-promo-meta { font-size: 12px; color: var(--xh-muted); }
.xh-promo-pic { position: relative; display: block; aspect-ratio: 16/9; background: #111; }
.xh-promo-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.xh-promo-pic .xh-fit-fg { object-fit: contain; }
.xh-promo-pic .xh-tag--free { top: 14px; left: 14px; font-size: 13px; padding: 6px 10px; }
.xh-tag--free { background: #16a34a; color: #fff; }
@media (max-width: 900px) {
  body.layout-promo .xh-cats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.layout-promo .xh-cats a { white-space: nowrap; padding: 11px 14px; }
  .xh-promo { grid-template-columns: 1fr; }
  .xh-promo-pic { order: -1; }
  .xh-promo-copy { padding: 20px 18px 24px; }
}

/* ======================================================================
   vertical — 抖音网页版 / FlexTV: 9:16 app cards in horizontal rows, black surface
   ====================================================================== */
body.layout-vertical { --xh-bg: #000; --xh-elev: #141414; --xh-line: #262626; background: var(--xh-bg); }
body.layout-vertical .xh-nav { padding: 14px 0; }
.xh-vt { margin-bottom: 36px; }
.xh-vt-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 5 * 12px) / 6); gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.xh-vt-row::-webkit-scrollbar { display: none; }
.xh-vt--lead .xh-vt-row { grid-auto-columns: calc((100% - 4 * 14px) / 5); gap: 14px; }
.xh-vt-card { position: relative; display: block; aspect-ratio: 9/16; border-radius: 14px; overflow: hidden; background: var(--xh-elev); scroll-snap-align: start; color: #fff; }
.xh-vt-card img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .3s ease; }
.xh-vt-card:hover img { transform: scale(1.04); }
.xh-vt-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 30%, transparent 55%); pointer-events: none; }
.xh-vt-card .xh-tag--new { top: 10px; left: 10px; z-index: 2; }
.xh-vt-cap { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 1; display: flex; flex-direction: column; gap: 3px; }
.xh-vt-cap strong { font-size: 16px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.xh-vt-cap small { font-size: 12px; color: rgba(255,255,255,.75); }
.xh-vt-cap em { font-style: normal; font-size: 12px; color: rgba(255,255,255,.9); font-variant-numeric: tabular-nums; }
.xh-vt--lead .xh-vt-cap strong { font-size: 20px; }
.xh-vt-resume:not(:has(.xh-vt-card)) { display: none; } /* no history in this browser (or no JS): no empty row */
body.layout-vertical .xh-cats { border-bottom: 0; gap: 8px; margin-bottom: 28px; }
body.layout-vertical .xh-cats a { padding: 8px 14px; margin: 0; border-radius: 999px; background: var(--xh-elev); border: 1px solid var(--xh-line); color: var(--xh-text); }
body.layout-vertical .xh-cats a:hover { border-color: var(--xh-amber); color: var(--xh-amber); }
@media (max-width: 900px) {
  .xh-vt-row { grid-auto-columns: 46%; gap: 10px; }
  .xh-vt--lead .xh-vt-row { grid-auto-columns: 68%; }
  .xh-vt--lead .xh-vt-cap strong { font-size: 18px; }
}

/* ======================================================================
   reviews — 豆瓣: white surface, one score card per drama, 热评 + 题材 column on the right
   ====================================================================== */
body.layout-reviews { --xh-bg: #fff; --xh-elev: #f6f6f4; --xh-line: #e8e8e4; background: var(--xh-bg); }
.xh-rv { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; margin: 8px 0 40px; }
.xh-rv-list { list-style: none; margin: 0; padding: 0; }
.xh-rv-item { display: grid; grid-template-columns: 100px minmax(0, 1fr) auto; gap: 18px; align-items: start; padding: 20px 0; border-bottom: 1px solid var(--xh-line); }
.xh-rv-pic { position: relative; display: block; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; background: var(--xh-elev); }
.xh-rv-pic img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.xh-rv-pic .n { position: absolute; top: 0; left: 0; z-index: 1; min-width: 26px; padding: 4px 7px; border-radius: 6px 0 6px 0; background: var(--xh-amber); color: var(--xh-on-accent, #fff); font-size: 12px; font-weight: 800; text-align: center; line-height: 1; }
.xh-rv-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.xh-rv-body h3 { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.3; }
.xh-rv-body h3 a { color: #1a5c9c; }
.xh-rv-body h3 a:hover { color: var(--xh-amber); }
.xh-rv-meta { font-size: 13px; color: var(--xh-muted); }
.xh-rv-stats { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--xh-text); font-variant-numeric: tabular-nums; }
.xh-rv-stats b { color: var(--xh-amber); font-weight: 700; }
.xh-rv-quote { margin: 4px 0 0; padding: 10px 14px; border-left: 3px solid var(--xh-amber); background: var(--xh-elev); border-radius: 0 6px 6px 0; font-size: 14px; line-height: 1.6; color: var(--xh-text); }
.xh-rv-quote footer { margin-top: 4px; font-size: 12px; color: var(--xh-muted); }
.xh-rv-syn { margin: 2px 0 0; font-size: 13px; line-height: 1.65; color: var(--xh-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xh-rv-go { align-self: center; white-space: nowrap; }
.xh-rv-main .xh-all { margin-top: 20px; }
.xh-rv-side { display: flex; flex-direction: column; gap: 28px; }
.xh-rv-side .xh-section-title { font-size: 16px; margin-bottom: 10px; }
.xh-rv-hotitem { padding: 12px 0; border-top: 1px solid var(--xh-line); }
.xh-rv-hotitem blockquote { margin: 0; font-size: 14px; line-height: 1.6; }
.xh-rv-hotitem footer { margin-top: 6px; font-size: 12px; color: var(--xh-muted); }
.xh-rv-hotitem footer a { color: #1a5c9c; }
.xh-rv-genres .xh-chips { margin: 0; gap: 8px; }
.xh-rv-genres .xh-chip small { color: var(--xh-muted); margin-left: 2px; }
@media (max-width: 900px) {
  .xh-rv { grid-template-columns: 1fr; gap: 28px; }
  .xh-rv-item { grid-template-columns: 80px minmax(0, 1fr); gap: 12px; }
  .xh-rv-go { grid-column: 2; justify-self: start; }
  .xh-rv-body h3 { font-size: 16px; }
}