/* Phase 0 extracted the :root site-gutter tokens and the .site-shell* rules
   into shared/deep-page-shell.css, but detail.css carried that block TWICE --
   the extraction removed the first copy and left the second one in place. The
   43 lines that used to sit here were byte-identical to deep-page-shell.css
   lines 1-43, which is linked ahead of this file, so every declaration in them
   resolved to the value the shared sheet had already set. Removing them changes
   no computed value. */
  /* The base palette (surfaces, text, lines, accent, status colors) lives in
     shared/ui-tokens.css; only detail-only roles are defined here. */
  :root {
    --bg-pill: rgba(10,10,12,0.62);
    --success: #7fbf83;
    --detail-info-column: 72ch;
    --radius-xs: var(--radius-ui-xs);
    --radius-sm: var(--radius-ui-sm);
    --radius-md: var(--radius-ui-md);
    --radius-lg: var(--radius-ui-lg);
  }
  html { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top, 0); background: var(--bg-body); background-image: var(--site-bg-texture); }
  body { background: var(--bg-body); background-image: var(--site-bg-texture); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: var(--text-primary); -webkit-text-size-adjust:100%; text-size-adjust:100%; }
  button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .poster-shadow { box-shadow: var(--shadow-page-art); }
  .backdrop { position: absolute; top: 0; left: 0; right: 0; height: var(--size-scale-px-320); z-index: var(--layer-base);
    background-size: cover; background-position: center 18%; opacity:var(--opacity-backdrop-art); pointer-events:none;
  }
  .backdrop::after { content: ''; position: absolute; inset: 0;
    background: var(--visual-page-backdrop);
  }
	  .content { position: relative; z-index: var(--layer-content); }
	  .detail-shell { padding-top:var(--space-scale-px-16); padding-bottom:0; }
  .ui-primary { color:var(--text-primary); }
  .ui-secondary { color:var(--text-secondary); }
  .ui-muted { color:var(--text-muted); }
  .ui-accent { color:var(--accent); }
  .ui-success { color:var(--success); }
  .surface-card { background:var(--bg-surface); border:1px solid var(--border); box-shadow:var(--shadow-card-hairline); transition:border-color 0.18s ease, background-color 0.18s ease; }
  .status-panel { background:var(--bg-surface); border-color:var(--border); color:var(--text-secondary); }
  .back-link { color:var(--text-primary); font-size:var(--type-control); font-weight:600; background:var(--bg-pill); border:1px solid var(--border); padding:0 var(--space-scale-px-14); border-radius:var(--radius-md); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .icon-btn { cursor: pointer; user-select: none; }
  .magnet-link { color: inherit; text-decoration: none; }
  .poster-fallback { background:var(--bg-surface); color:var(--text-muted); border:1px solid var(--border); box-shadow: var(--shadow-card-hairline-strong); }
  .poster-mark { color:var(--accent); font-weight:800; letter-spacing:0; font-size:var(--type-content-title); line-height:1; margin-bottom:var(--space-scale-px-8); }
  .detail-measure { max-width: 58ch; }
  .detail-section-title { margin:0; color:var(--text-primary); font-size:var(--type-section); line-height:var(--leading-detail-heading); font-weight:var(--weight-section); letter-spacing:0; }
  .detail-section-copy { color:var(--text-muted); font-size:var(--type-card-copy); line-height:var(--leading-detail-value); }
  /* Synopsis and the credit rows are one divided list, not a loose paragraph
     sitting above a list. The synopsis used to hang between an 18px gap above
     and a 12px pad below with a rule only under it, which read as dead space
     rather than as a boundary. It now opens the list: same rule above, same row
     padding as the credit rows below it. */
  /* One label column for the whole block. Each row used to be its own grid, so
     `max-content` was measured per row and every label length started its values
     at a different x -- measured at 780px: 简介 136, 主演 134, 制片人 143. The rows
     are subgrids of this one now, so one column width serves all of them and the
     values line up. Browsers without subgrid keep the per-row fallback that is
     declared before it. */
  .detail-story { width:100%; max-width:none; justify-self:stretch; display:grid; grid-template-columns:max-content minmax(0,1fr); column-gap:var(--space-detail-group); row-gap:0; align-content:start; }
  .detail-story > *,
  .detail-enrichment-list > * { grid-column:1 / -1; }
  .detail-story-row { display:grid; grid-template-columns:max-content minmax(0,1fr); grid-template-columns:subgrid; column-gap:var(--space-detail-group); color:var(--text-secondary); font-size:var(--type-card-copy); line-height:var(--leading-detail-prose); font-weight:400; padding:var(--space-detail-row-block) 0; border-top:1px solid var(--visual-detail-divider); }
  .detail-enrichment-list { display:grid; grid-template-columns:max-content minmax(0,1fr); grid-template-columns:subgrid; row-gap:0; border-top:1px solid var(--visual-detail-divider); }
  .detail-enrichment { display:grid; grid-template-columns:max-content minmax(0,1fr); grid-template-columns:subgrid; column-gap:var(--space-detail-group); color:var(--text-secondary); font-size:var(--type-field-value); line-height:var(--leading-detail-value); font-weight:400; padding:var(--space-detail-row-block) 0; border-bottom:1px solid var(--visual-detail-divider); }
  .detail-enrichment:last-child { border-bottom:0; }
  .detail-enrichment-label { color:var(--text-muted); font-size:var(--type-field-label); line-height:var(--leading-field-label); font-weight:var(--weight-field-label); white-space:nowrap; }
  /* The synopsis row's label, rule, row padding, copy role and expand control
     are shared with the show hero and live in shared/page-hero.css. Only the
     column definition stays here, because the detail hero's synopsis is the
     first row of a list the show hero does not have. */
  /* Two lines is the credit row's budget, measured rather than clamped, for the
     same reason as the synopsis: a CSS clamp cuts the expand control away with
     the text it belongs to. detail.js hands this cell a value that already
     leaves room for the control on the second line. */
  .detail-enrichment-text { width:100%; min-width:0; color:var(--text-secondary); font-size:var(--type-field-value); line-height:var(--leading-field-value); font-weight:var(--weight-field-value); text-align:left; overflow-wrap:break-word; }
  .detail-crew-name { margin-top:var(--space-person-name-gap); color:var(--text-secondary); font-size:var(--type-person-name); line-height:var(--leading-person-name); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .detail-crew-role { color:var(--accent); font-size:var(--type-person-role); line-height:var(--leading-person-role); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .detail-overview, .detail-enrichment, .detail-section-copy, .detail-version-title, .detail-similar-link, .detail-similar-title {
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
	  /* One area map for every viewport -- poster column on the left, all the
	     text (title, meta, chips, synopsis, cast/crew rows) in the column
	     beside it. The stacked "poster title" / "copy copy" map that used to
	     apply below 760px pushed the synopsis and the cast rows under the
	     poster and left the poster's right side empty on phones; the show page
	     never did that (its copy is grid-column:2 at every width), so this is
	     also what makes the two heroes structurally identical. */
	  .detail-hero { --detail-poster-col:var(--hero-poster-width); display:grid; grid-template-areas:"media info" "resource resource"; align-items:start; margin-bottom:var(--space-gap-cards); }
	  /* Poster->button gap stays on the hero's tight internal rhythm at every width
	     so it reads clearly smaller than the gap between the cards below
	     (--space-gap-cards). See WORKLOG 2026-09-28 / 2026-09-29. */
	  .detail-media-stack { grid-area:media; display:grid; gap:var(--space-detail-item); align-content:start; min-width:0; }
	  .detail-info-stack { grid-area:info; display:grid; gap:var(--space-detail-item); align-content:start; justify-self:stretch; width:100%; min-width:0; }
	  .detail-poster-cell { align-self:start; }
	  .detail-title-cell { align-self:start; padding-top:0!important; display:grid; align-content:start; gap:var(--space-detail-item); }
  .detail-title-cell h1 { margin:0 0 var(--space-detail-intra); }
  /* Original title and tagline on one line. Each keeps its own text role; the
     separator only renders when both sides are present. */
  .detail-title-sub { display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--space-detail-intra); }
  .detail-title-cell p,
  .detail-hero-copy p { margin-top:0; }
  .detail-title-main { min-width:0; display:grid; align-content:start; }
	  .detail-hero-copy { justify-self:stretch; display:grid; gap:var(--space-detail-item); }
	  .detail-season-entry { margin:0; min-width:0; width:100%; justify-self:start; align-self:start; }
	  .detail-season-entry .detail-pill { width:100%; justify-content:center; }
	  .detail-resource-card { grid-area:resource; margin:0; padding:var(--space-detail-card-inset); border-radius:var(--resource-card-radius); }
  .detail-resource-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,max-content); align-items:start; gap:var(--space-detail-group); margin-bottom:var(--space-detail-item); padding-bottom:var(--space-detail-item); border-bottom:1px solid var(--border-row); }
  .detail-resource-head .detail-section-title { line-height:var(--leading-detail-heading); }
  .resource-access-summary { justify-self:end; max-width:min(100%, 54ch); margin:0; color:var(--text-muted); font-size:var(--type-meta); line-height:var(--leading-detail-meta); font-weight:500; overflow-wrap:anywhere; text-align:right; }
  .detail-resource-body { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"info actions" "notes actions"; column-gap:var(--space-detail-section); row-gap:0; align-items:center; }
  .detail-resource-stack { min-width:0; display:grid; gap:var(--space-detail-intra); font-size:var(--type-card-copy); line-height:var(--leading-detail-value); }
  .detail-resource-stack > * { margin:0; }
  .detail-file-text { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--space-detail-intra); align-items:baseline; }
  .detail-resource-label { color:var(--text-muted); font-size:var(--type-field-label); font-weight:var(--weight-field-label); line-height:var(--leading-field-label); }
  .detail-resource-badges { margin-top:var(--space-detail-intra); }
  .detail-swarm-line { margin:0; display:flex; flex-wrap:wrap; gap:var(--space-gap-tight); color:var(--text-secondary); font-size:var(--type-resource-meta); line-height:var(--leading-meta); }
  .detail-swarm-line.is-low { color:var(--swarm-low-text); }
  .detail-swarm-line.is-none { color:var(--swarm-none-text); }
  .detail-swarm-line a { color:var(--accent); }
  /* Report entry at the right of the card title: a low-use control, so it stays lighter than the title and the resource text. */
  .detail-report-entry { justify-self:end; align-self:center; border:0; background:transparent; color:var(--text-muted); padding:var(--space-scale-px-2) 0; font-size:var(--type-resource-meta); line-height:var(--leading-meta); text-decoration:underline; text-underline-offset:var(--space-scale-px-3); cursor:pointer; }
  .detail-report-entry:hover { color:var(--text-primary); }
  /* Report dialog (reuses the shared unlock dialog shell): reason list and the optional details box. */
  .resource-report-reasons { display:grid; gap:var(--space-gap-tight); }
  .resource-report-option { display:flex; align-items:center; gap:var(--space-gap-tight); color:var(--text-secondary); font-size:var(--type-dialog-copy); line-height:var(--leading-copy); cursor:pointer; }
  /* color-scheme: the page sets none, so unchecked native radios would render white on the dark dialog. */
  .resource-report-option input { flex:none; margin:0; accent-color:var(--accent); color-scheme:dark; }
  .resource-report-option:has(input:checked) { color:var(--text-primary); }
  .auth-dialog-input.resource-report-details { min-height:calc(var(--size-dialog-control) * 2); resize:vertical; padding:var(--space-dialog-pad); line-height:var(--leading-copy); font-family:inherit; }
  @media (max-width: 767px) {
    /* Two-row version of the shared input's iOS focus-zoom fix (auth-dialog.css), same as home's .support-textarea. */
    .auth-dialog-input.resource-report-details {
      min-height: calc(var(--size-dialog-control) * 2 * var(--zoom-k-dialog-copy));
      padding: calc(var(--space-dialog-pad) * var(--zoom-k-dialog-copy));
      margin-bottom: calc(var(--size-dialog-control) * 2 * (1 - var(--zoom-k-dialog-copy)));
    }
  }
  /* No 44px box (2026-10-04): on one line it left a visible gap above and below the file name; phones already had none. */
  .magnet-title-link { display:block; }
  .detail-pill { min-height: var(--size-scale-px-44); display:inline-flex; align-items:center; border-radius:var(--radius-sm); }
  .lang-toggle { min-width:var(--size-scale-px-44); height:var(--size-scale-px-44); min-height:var(--size-scale-px-44); padding:0 var(--space-scale-px-10); display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-md); background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); font-size:var(--type-meta); line-height:1; font-weight:700; letter-spacing:0; transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .deep-page-header-actions { display:flex; align-items:center; gap:var(--space-scale-px-8); }
  .deep-nav-actions { display:flex; align-items:center; gap:var(--space-scale-px-8); }
  .deep-nav-icon { width:var(--size-scale-px-44); min-width:var(--size-scale-px-44); height:var(--size-scale-px-44); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--bg-surface); color:var(--text-secondary); transition:background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
  .deep-nav-icon:hover { background:var(--bg-surface-hover); border-color:var(--visual-border-medium); color:var(--text-primary); }
  .deep-nav-icon:active { transform:translateY(1px); }
  .deep-nav-icon svg { width:var(--size-scale-px-19); height:var(--size-scale-px-19); }
  .deep-nav-vip { color:var(--accent); }
  .magnet-action { min-height:var(--size-scale-px-44); display:inline-flex; align-items:center; justify-content:center; border:1px solid transparent; background:var(--accent); color:var(--text-on-accent); text-decoration:none; transition:background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; }
  .magnet-action:active { transform: translateY(1px); }
  .copy-btn { min-width:var(--size-scale-px-44); min-height:var(--size-scale-px-44); display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); border:0; background:transparent; transition:background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease; }
  .copy-btn:active { transform: translateY(1px); }
  .locked-resource-panel { width:100%; min-width:var(--size-scale-px-260); display:flex; align-items:center; justify-content:flex-end; }
  .resource-action-buttons { min-width:0; width:auto; display:grid; grid-template-columns:repeat(2,118px); align-items:stretch; justify-content:end; gap:var(--space-scale-px-8); justify-self:end; }
  .resource-action-buttons .magnet-action,
  .resource-action-buttons .copy-btn { width:100%; min-width:0; padding:0 var(--space-scale-px-12); border-radius:var(--resource-action-radius); font-size:var(--type-control); font-weight:780; white-space:nowrap; gap:var(--space-scale-px-6); text-decoration:none; }
  .resource-action-label { display:block; min-width:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .resource-action-buttons .magnet-action { border:1px solid transparent; background:var(--accent); color:var(--text-on-accent); }
  .resource-action-buttons .copy-btn { border:1px solid var(--border); background:var(--bg-surface); color:var(--text-primary); }
  /* Detail card (2026-10-04): copy is the primary (gold) action and open the secondary one. The "copied" check takes
     the on-accent colour, not success green. */
  .resource-action-buttons .copy-btn--primary { border-color:transparent; background:var(--accent); color:var(--text-on-accent); }
  .resource-action-buttons .copy-btn--primary .check-icon { color:var(--text-on-accent); }
  .resource-action-buttons .magnet-action--secondary { border-color:var(--border); background:var(--bg-surface); color:var(--text-primary); }
  /* Unlock dialog hierarchy lives in shared/resource-unlock-dialog.css.
     These rules cover the detail page's own locked-resource row only. */
  .locked-resource-actions .magnet-action { border-color:transparent !important; background:var(--accent) !important; color:var(--text-on-accent) !important; font-weight:900; box-shadow:var(--shadow-accent-control); }
  .locked-resource-actions .copy-btn { border-color:var(--border) !important; background:var(--bg-surface) !important; color:var(--text-secondary) !important; font-weight:800; }
  .locked-resource-actions .magnet-action:hover:not(:disabled) { background:var(--visual-accent-bright) !important; }
  .locked-resource-actions .copy-btn:hover:not(:disabled) { border-color:var(--accent-dim) !important; color:var(--text-primary) !important; }
  .vip-unlock-link { text-decoration:none; }
  .locked-resource-actions .magnet-action,
  .locked-resource-actions .copy-btn { flex-direction:column; gap:0; }
  .resource-action-hint { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--type-compact-meta); font-weight:var(--weight-field-label); line-height:var(--leading-compact); opacity:var(--opacity-emphasis); }
  .resource-action-hint:empty { display:none; }
  /* Seeder line + download hint (2026-10-04): one group. Desktop puts it under the tags, so every line of text shares
     one left edge and the text column sets the card height, with the buttons (or the locked panel) centred beside it;
     phones put it under the buttons (grid areas in the max-width:640px block). */
  .detail-resource-stack { grid-area:info; }
  #resource-actions, .locked-resource-panel { grid-area:actions; }
  .detail-download-notes { grid-area:notes; min-width:0; display:grid; gap:var(--space-scale-px-2); justify-items:start; margin-top:var(--space-gap-tight); }
  .resource-action-note { margin:0; color:var(--text-muted); font-size:var(--type-resource-meta); line-height:var(--leading-meta); }
  .detail-auth-overlay,
  .detail-confirm-overlay,
  .detail-membership-overlay { position:fixed; inset:0; z-index:var(--layer-dialog); display:flex; align-items:center; justify-content:center; padding:var(--space-scale-px-18); background:var(--visual-overlay-page); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .detail-auth-overlay,
  .detail-confirm-overlay,
  .detail-membership-overlay { padding:var(--space-dialog-pad); background:var(--visual-overlay-modal); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
  .detail-auth-panel,
  .detail-confirm-panel { width:min(var(--size-scale-px-432), calc(100vw - var(--space-dialog-pad) - var(--space-dialog-pad))); max-height:min(var(--size-scale-px-620), calc(100vh - var(--space-dialog-pad) - var(--space-dialog-pad))); overflow:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--visual-dialog-surface-soft); box-shadow:var(--shadow-dialog); }
  .detail-auth-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-dialog-gap); padding:var(--space-dialog-pad); }
  .detail-auth-heading { min-width:0; display:flex; align-items:center; gap:var(--space-dialog-gap); }
  .detail-auth-logo { width:var(--size-dialog-logo); height:var(--size-dialog-logo); border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; background:var(--bg-surface); border:1px solid var(--visual-dialog-brand-border); color:var(--accent); font-size:var(--type-section); font-weight:900; letter-spacing:0; flex-shrink:0; }
  .detail-auth-title { color:var(--text-primary); font-size:var(--type-dialog-title); font-weight:850; line-height:var(--leading-title); }
  .detail-auth-sub { margin-top:var(--space-dialog-gap); color:var(--text-muted); font-size:var(--type-dialog-copy); line-height:var(--leading-copy); }
  .detail-auth-close { width:var(--size-dialog-control); height:var(--size-dialog-control); border-radius:var(--radius-sm); color:var(--text-muted); background:var(--bg-surface); border:1px solid var(--border); font-size:var(--type-dialog-title); line-height:1; }
  .detail-auth-body,
  .detail-confirm-body { padding:0 var(--space-dialog-pad) var(--space-dialog-pad); display:grid; gap:var(--space-dialog-gap); }
  .detail-auth-provider-list { display:grid; grid-template-columns:1fr; gap:var(--space-scale-px-8); }
  .detail-auth-provider { min-height:var(--size-dialog-control); width:100%; border-radius:var(--radius-md); border:1px solid var(--border); background:var(--bg-surface); color:var(--text-primary); font-size:var(--type-dialog-copy); font-weight:800; display:flex; align-items:center; justify-content:center; gap:var(--space-dialog-gap); }
  .detail-auth-provider:disabled,
  .detail-auth-primary:disabled { opacity:var(--opacity-disabled); cursor:not-allowed; }
  .detail-auth-provider-mark { width:var(--size-scale-px-20); height:var(--size-scale-px-20); border-radius:var(--radius-xs); display:flex; align-items:center; justify-content:center; color:var(--accent); background:var(--visual-control-wash); font-size:var(--type-section); font-weight:850; flex-shrink:0; }
  .detail-auth-provider-apple .detail-auth-provider-mark { color:var(--text-primary); font-size:var(--type-value); }
  .detail-auth-divider { display:flex; align-items:center; gap:var(--space-scale-px-10); color:var(--text-muted); font-size:var(--type-kicker); line-height:1; margin:var(--space-scale-px-2) 0 0; }
  .detail-auth-divider::before,
  .detail-auth-divider::after { content:""; flex:1; height:var(--size-scale-px-1); background:var(--border); }
  .detail-auth-form,
  .detail-auth-field-stack { display:grid; gap:var(--space-scale-px-8); }
  .detail-auth-mode-switch { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--space-scale-px-3); padding:var(--space-scale-px-3); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-surface); }
  .detail-auth-mode-option { min-height:var(--size-dialog-control); border-radius:var(--radius-xs); border:0; background:transparent; color:var(--text-muted); font-size:var(--type-control); font-weight:800; }
  .detail-auth-mode-option.is-active { background:var(--bg-header); color:var(--text-primary); box-shadow:var(--shadow-border-ring); }
  .detail-auth-input { min-height:var(--size-dialog-control); min-width:0; border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--bg-surface); color:var(--text-primary); padding:0 var(--space-dialog-pad); outline:none; font-size:var(--type-dialog-copy); }
  .detail-auth-input:focus { border-color:var(--visual-input-focus-border); box-shadow:var(--shadow-input-focus); }
  @media (max-width:767px) {
    /* iOS focus-zoom fix: box enlarged by --zoom-k-dialog-copy then scaled
       back down -- see the shared explainer in assets-src/shared/ui-tokens.css. */
    .detail-auth-input {
      min-height: calc(var(--size-dialog-control) * var(--zoom-k-dialog-copy));
      width: calc(100% * var(--zoom-k-dialog-copy));
      border-width: calc(var(--size-scale-px-1) * var(--zoom-k-dialog-copy));
      border-radius: calc(var(--radius-sm) * var(--zoom-k-dialog-copy));
      padding: 0 calc(var(--space-dialog-pad) * var(--zoom-k-dialog-copy));
      font-size: var(--zoom-safe-font);
      transform: scale(var(--zoom-inv-dialog-copy));
      transform-origin: top left;
      margin-bottom: calc(var(--size-dialog-control) * (1 - var(--zoom-k-dialog-copy)));
    }
  }
  .detail-auth-reset-context { display:grid; gap:var(--space-scale-px-3); padding:var(--space-scale-px-10) var(--space-scale-px-12); border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-surface); }
  .detail-auth-reset-kicker { color:var(--text-muted); font-size:var(--type-kicker); font-weight:750; letter-spacing:0.08em; text-transform:uppercase; }
  .detail-auth-reset-email { color:var(--text-primary); font-size:var(--type-dialog-copy); line-height:var(--leading-meta); overflow-wrap:anywhere; }
  .detail-auth-primary,
  .detail-auth-secondary { min-height:var(--size-dialog-control); border-radius:var(--radius-sm); padding:0 var(--space-dialog-pad); font-size:var(--type-control); font-weight:800; }
  .detail-auth-primary { border:1px solid var(--accent); background:var(--accent); color:var(--text-on-accent); }
  .detail-auth-secondary { border:1px solid var(--border); background:var(--bg-surface); color:var(--text-primary); }
  .detail-auth-note,
  .detail-confirm-copy { margin:0; color:var(--text-muted); font-size:var(--type-dialog-copy); line-height:var(--leading-copy); }
  .detail-confirm-panel { width:min(var(--size-scale-px-432), calc(100vw - var(--size-scale-px-32))); max-height:min(var(--size-scale-px-620), calc(100vh - var(--size-scale-px-48))); }
  .detail-confirm-title { margin:0; color:var(--text-primary); font-size:var(--type-dialog-title); line-height:var(--leading-title); font-weight:850; }
  .detail-confirm-meta { margin:0; color:var(--text-secondary); font-size:var(--type-dialog-meta); line-height:var(--leading-meta); }
  .detail-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-dialog-gap); }
  .detail-membership-panel { width:min(var(--size-scale-px-432), calc(100vw - var(--size-scale-px-32))); max-height:min(var(--size-scale-px-620), calc(100vh - var(--size-scale-px-48))); overflow:auto; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--visual-dialog-surface); box-shadow:var(--shadow-dialog); }
  .detail-membership-body { padding:0 var(--space-scale-px-16) var(--space-scale-px-16); display:grid; gap:var(--space-scale-px-10); }
  .detail-membership-list { display:grid; gap:var(--space-scale-px-8); }
  .detail-membership-card { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--space-scale-px-10); align-items:center; border:1px solid var(--border); border-radius:var(--radius-md); padding:var(--space-scale-px-11); background:var(--bg-surface); }
  .detail-membership-card.is-selected { border-color:var(--accent); background:var(--visual-selected-surface); }
  .detail-membership-name { color:var(--text-primary); font-size:var(--type-section); line-height:1.25; font-weight:850; overflow-wrap:anywhere; }
  .detail-membership-meta { margin-top:var(--space-scale-px-3); color:var(--text-muted); font-size:var(--type-meta); line-height:1.4; }
  .detail-membership-benefits { margin:var(--space-scale-px-6) 0 0; padding:0; list-style:none; display:grid; gap:var(--space-scale-px-3); color:var(--text-muted); font-size:var(--type-meta); line-height:1.35; }
  .detail-membership-benefits li:before { content:"•"; color:var(--accent); margin-right:var(--space-scale-px-5); }
  .detail-membership-price { color:var(--accent); font-size:var(--type-control); line-height:1.3; font-weight:850; white-space:nowrap; }
  .detail-membership-card .detail-auth-primary { min-width:var(--size-scale-px-88); }
  .detail-membership-alt-payment { justify-self:end; border:0; background:transparent; color:var(--text-muted); padding:var(--space-scale-px-2) 0; font-size:var(--type-meta); text-decoration:underline; text-underline-offset:3px; }
  .detail-membership-alt-payment:hover { color:var(--text-primary); }
  .detail-membership-status { margin:0; color:var(--accent); font-size:var(--type-card-copy); line-height:1.5; }
  .copy-btn-content { display:inline-flex; align-items:center; justify-content:center; gap:var(--space-scale-px-6); min-width:0; }
  .series-chip,
  .genre-chip { display:inline-flex; align-items:center; min-height:var(--resource-badge-height); padding:var(--resource-spec-padding-block) var(--resource-spec-padding-inline); border-radius:var(--resource-spec-radius); font-size:var(--type-resource-badge); line-height:var(--resource-spec-line-height); white-space:nowrap; }
  .series-chip { background:var(--visual-series-chip-bg); color:var(--visual-series-chip-text); border:1px solid var(--visual-dialog-brand-border); font-weight:var(--resource-spec-weight); }
  .genre-chip { background:var(--bg-surface); color:var(--text-secondary); border:1px solid var(--border); }
  .detail-row { border-color:var(--border); }
  .detail-label { color:var(--text-muted); font-size:var(--type-field-label); font-weight:var(--weight-field-label); }
  .detail-value { color:var(--text-secondary); font-size:var(--type-field-value); font-weight:var(--weight-field-value); }
  .media-surface { background:var(--bg-surface); }




  .detail-version-head { display:grid; gap:var(--space-detail-intra); margin-bottom:var(--space-detail-item); }
  /* Version sort: a low-use control. The trigger keeps the pager's text-only look (no fill,
     no border) so it stays lighter than the cards; the menu it opens is the shared home sort
     menu (shared/sort-menu.css). It sits at the end of the heading row. */
  .detail-version-head__row { display:flex; align-items:center; justify-content:space-between; gap:var(--space-gap-controls); min-width:0; }
  .detail-version-sort { flex:none; margin-inline-end:calc(-1 * var(--space-ui-2)); font-family:var(--font-family-ui); -webkit-font-smoothing:var(--font-smoothing-ui); }
  .detail-version-sort summary { position:relative; list-style:none; box-sizing:border-box; height:var(--size-header-control); display:inline-flex; align-items:center; gap:var(--space-ui-0-5); padding:0 var(--space-ui-2); border-radius:var(--radius-header-control); color:var(--text-muted); font-size:var(--type-control); line-height:var(--leading-compact); font-weight:var(--weight-footer-link); white-space:nowrap; cursor:pointer; transition:color var(--motion-duration-base) var(--motion-ease-out), background-color var(--motion-duration-base) var(--motion-ease-out); }
  .detail-version-sort summary::after { content:""; position:absolute; inset:min(calc(-1 * var(--size-scale-px-2)), calc((var(--size-header-control) - var(--size-tap-target-min)) / 2)) 0; }
  .detail-version-sort[open] summary { color:var(--text-primary); }
  /* The shared menu is sized for the home toolbar (44px rows). Next to this text trigger it
     takes the pager jump popover's tier instead: card radius outside, rows the trigger's
     height (capped at the compact control size on desktop) and radius inside. Stacked full-width rows keep their hit areas contiguous. */
  .detail-version-sort .sort-menu-list { top:calc(100% + var(--space-gap-controls)); min-width:0; padding:var(--space-gap-controls); border-color:var(--visual-border-medium); border-radius:var(--radius-ui-md); }
  .detail-version-sort .sort-menu-item { box-sizing:border-box; min-height:0; height:min(var(--size-header-control), var(--size-control-compact)); margin:0; padding:0 var(--space-ui-2); border:0; border-radius:var(--radius-header-control); font-family:inherit; font-size:var(--type-control); font-weight:var(--weight-footer-link); cursor:pointer; }
  @media (hover: hover) and (pointer: fine) {
    .detail-version-sort summary:hover { background:var(--bg-surface-hover); color:var(--text-primary); }
  }
  .ssr-detail-versions ul { list-style:none; margin:0; padding:0; display:grid; gap:var(--space-gap-tight); }
  .detail-version-item { min-width:0; }
  .ssr-detail-versions .resource-card--detail-version { grid-template-columns:minmax(0,1fr) var(--resource-icon-action-rail); align-items:center; padding-block:var(--space-ui-1-5); }
  .ssr-detail-versions .resource-card--detail-version .resource-card__main { grid-template-columns:minmax(0,1fr); gap:var(--space-ui-0-5); }
  .ssr-detail-versions .resource-card--detail-version .resource-card__facts { grid-column:1; justify-content:flex-start; }
  .ssr-detail-versions .resource-card--detail-version .resource-card__actions { justify-self:end; align-self:center; }
  .ssr-detail-versions .resource-card--detail-version .resource-icon-action-track { transform:translateX(calc((var(--resource-icon-action-rail) - var(--resource-icon-action-lock-control)) / 2)); }
  @media (min-width:768px) {
    .ssr-detail-versions .resource-card--detail-version .resource-icon-action-track { transform:translateX(calc((var(--resource-icon-action-rail) - var(--resource-icon-action-lock-control)) / 2 + var(--space-ui-1))); }
  }
  @media (max-width:767px) {
    /* On phones the shifted track puts its right button's invisible 44px tap
       target (.resource-icon-action-control::after) past the screen edge
       (measured 322.73px at 320px), which let the page scroll sideways. The
       list bleeds into the page gutter -- the shell's side margin is exactly
       --site-gutter -- and clips horizontally there, so the clip edge is the
       screen edge: only the off-screen part of the tap target is cut, and the
       list's content box, and everything in it, stays where it was. */
    .detail-shell > .ssr-detail-versions { overflow-x:clip; margin-inline:calc(-1 * var(--site-gutter)); padding-inline:var(--site-gutter); }
  }
  .detail-version-body { min-width:0; display:grid; gap:var(--space-detail-intra); }
  .detail-version-title { display:block; min-width:0; color:var(--text-primary); font-size:var(--resource-title-compact-size); line-height:var(--leading-detail-value); font-weight:var(--resource-title-weight); overflow-wrap:anywhere; }
  .detail-version-tags, .detail-version-metrics { display:flex; flex-wrap:wrap; gap:var(--space-detail-intra); min-width:0; }
  .detail-version-tags span, .detail-version-metrics span { display:inline-flex; align-items:center; min-height:var(--size-scale-px-18); color:var(--text-muted); background:var(--bg-header); border:1px solid var(--border); border-radius:var(--radius-xs); padding:var(--space-scale-px-1) var(--space-scale-px-5); font-size:var(--type-kicker); line-height:var(--leading-detail-control); font-weight:620; white-space:nowrap; }
  .detail-version-metrics { justify-content:flex-end; align-self:start; }
  .detail-version-seeders { color:var(--success)!important; border-color:var(--visual-success-border)!important; background:var(--visual-success-surface)!important; }
  .detail-similar-card { display:grid; gap:var(--space-detail-item); padding:var(--space-detail-card-inset); padding-bottom:calc(var(--space-detail-card-inset) - var(--space-detail-item)); margin-bottom:var(--space-gap-cards); }
  .detail-similar-head { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-detail-item); min-width:0; }
  .detail-similar-context { flex:0 0 auto; color:var(--text-muted); font-size:var(--type-meta); line-height:var(--leading-detail-meta); font-weight:500; }
  .detail-similar-list { list-style:none; margin:0; padding:0; display:grid; gap:0; }
  .detail-similar-item { min-width:0; }
  .detail-similar-item + .detail-similar-item { border-top:1px solid var(--border-row); }
  .detail-similar-link { min-height:var(--size-scale-px-74); display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:var(--space-detail-item); padding:var(--space-detail-item) 0; border:0; border-radius:0; background:transparent; color:inherit; text-decoration:none; }
  .detail-similar-poster { width:var(--size-scale-px-48); aspect-ratio:2/3; display:block; object-fit:cover; border-radius:var(--radius-sm); background:var(--bg-surface); border:1px solid var(--border); }
  .detail-similar-poster-fallback { display:inline-flex; align-items:center; justify-content:center; color:var(--text-muted); font-size:var(--type-meta); line-height:1; font-weight:800; }
  .detail-similar-body { min-width:0; display:grid; gap:var(--space-detail-intra); }
  .detail-similar-title { color:var(--text-primary); font-size:var(--type-card-title); line-height:var(--leading-detail-value); font-weight:650; overflow-wrap:anywhere; }
  .detail-similar-original { color:var(--text-muted); font-size:var(--type-meta); line-height:var(--leading-detail-meta); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .detail-similar-meta { color:var(--text-muted); font-size:var(--type-meta); line-height:var(--leading-detail-meta); font-weight:400; }
  .detail-similar-tags { display:flex; flex-wrap:wrap; gap:var(--space-detail-intra); min-width:0; }
  .detail-similar-tags span { display:inline-flex; align-items:center; min-height:var(--size-scale-px-17); color:var(--text-secondary); background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--radius-xs); padding:var(--space-scale-px-1) var(--space-scale-px-5); font-size:var(--type-label); line-height:var(--leading-detail-control); font-weight:620; white-space:nowrap; }
  .detail-similar-arrow { width:var(--size-scale-px-28); height:var(--size-scale-px-28); display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text-muted); background:var(--bg-header); transition:background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .detail-similar-arrow svg { width:var(--size-scale-px-15); height:var(--size-scale-px-15); display:block; }
  .media-info-panel { overflow:hidden; margin-bottom:var(--space-gap-cards)!important; }
  .media-info-toggle { list-style:none; min-height:var(--size-scale-px-50); display:flex; align-items:center; justify-content:space-between; gap:var(--space-detail-group); padding:var(--space-detail-group) var(--space-detail-card-inset); cursor:pointer; }
  .media-info-toggle::-webkit-details-marker { display:none; }
  .media-info-toggle-copy { min-width:0; display:grid; gap:var(--space-detail-intra); }
  .media-info-title { color:var(--text-secondary); font-size:var(--type-section); line-height:var(--leading-detail-heading); font-weight:500; letter-spacing:0; }
  .media-info-compact { min-width:0; color:var(--text-muted); font-size:var(--type-card-copy); line-height:var(--leading-detail-meta); font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .media-info-affordance { flex:0 0 auto; min-width:var(--size-scale-px-32); min-height:var(--size-scale-px-32); display:inline-flex; align-items:center; justify-content:center; gap:var(--space-scale-px-7); color:var(--text-muted); font-size:var(--type-meta); line-height:1; font-weight:500; align-self:center; }
  .media-info-expand-icon { width:var(--size-scale-px-20); height:var(--size-scale-px-20); display:block; color:var(--text-muted); transform-origin:center; transform-box:fill-box; transition:transform 0.18s ease, color 0.18s ease; }
  .media-info-panel[open] .media-info-toggle { border-bottom:1px solid var(--border); }
  .media-info-panel[open] .media-info-expand-icon { transform:rotate(180deg); }
  .media-info-body { display:grid; gap:var(--space-detail-group); padding:0 var(--space-detail-card-inset) var(--space-detail-card-inset); }
  .media-info-overview { margin:0; padding-top:var(--space-detail-item); display:grid; }
  .media-info-group { display:grid; gap:var(--space-detail-intra); }
  .media-info-group h3 { margin:0; color:var(--text-muted); font-size:var(--type-card-copy); line-height:var(--leading-detail-meta); font-weight:500; letter-spacing:0; }
  .media-info-track { display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--space-detail-group); padding:var(--space-detail-item) 0; border-top:1px solid var(--border-row); }
  .media-info-track-label { color:var(--text-secondary); font-size:var(--type-control); line-height:var(--leading-detail-value); font-weight:500; overflow-wrap:anywhere; }
  .media-info-track-body { min-width:0; margin:0; display:grid; }
  .media-info-row { min-width:0; display:grid; grid-template-columns:max-content minmax(0,1fr); gap:var(--space-detail-item); padding:var(--space-detail-row-block) 0; border-top:1px solid var(--border-row); }
  .media-info-row:first-child { border-top:0; }
  .media-info-row dt { margin:0; color:var(--text-muted); font-size:var(--type-card-copy); line-height:var(--leading-detail-value); font-weight:400; letter-spacing:0; }
  .media-info-row dd { margin:0; color:var(--text-secondary); font-size:var(--type-control); line-height:var(--leading-detail-value); font-weight:500; text-align:right; overflow-wrap:anywhere; }
  .detail-facts-card { padding:var(--space-detail-card-inset); margin-bottom:var(--space-gap-cards); }
  .detail-facts-card .detail-section-title { margin-bottom:var(--space-detail-item); }
  .detail-facts-table { width:100%; border-collapse:collapse; font-size:var(--type-card-copy); }
  .detail-facts-table .detail-row { border-bottom:1px solid var(--border-row); }
  .detail-facts-table .detail-row:last-child { border-bottom:0; }
  .detail-facts-table .detail-row:last-child .detail-label,
  .detail-facts-table .detail-row:last-child .detail-value { padding-bottom:0; }
  .detail-facts-table .detail-label { line-height:var(--leading-field-label); }
  .detail-facts-table .detail-value { line-height:var(--leading-field-value); }
  .detail-facts-table .detail-label,
  .detail-facts-table .detail-value { padding-block:var(--space-detail-row-block); vertical-align:top; }
  .detail-facts-table .detail-label { padding-inline-end:var(--space-detail-group); white-space:nowrap; }
  .detail-facts-table .detail-value { overflow-wrap:anywhere; }
  .detail-crew-section,
  .detail-stills-section { display:grid; gap:var(--space-detail-item); margin-bottom:var(--space-gap-cards); }
  /* These blocks carry .mb-4/.mb-5 utility margins in the markup; the child
     selector outranks them so every top-level block sits one card gap apart. */
  .detail-shell > .status-panel,
  .detail-shell > .ssr-detail-versions { margin-bottom:var(--space-gap-cards); }
  .detail-crew-rail { display:flex; gap:var(--space-detail-item); overflow-x:auto; padding-bottom:var(--space-detail-intra); }
  .detail-crew-person { flex:0 0 auto; width:var(--size-scale-px-64); text-align:center; }
  .detail-crew-avatar { display:block; width:var(--size-scale-px-56); height:var(--size-scale-px-56); margin-inline:auto; border-radius:var(--radius-pill); object-fit:cover; }
  .detail-crew-name { margin-top:var(--space-detail-intra); }
  .detail-crew-role { margin-top:var(--space-detail-intra); }
  .detail-stills-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-gap-tight); }
  .detail-still { display:block; width:100%; aspect-ratio:16/9; border-radius:var(--radius-md); object-fit:cover; }
  @media (min-width:640px) {
    .detail-stills-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (hover: hover) and (pointer: fine) {
	    .surface-card:hover { border-color:var(--visual-border-soft-medium); }
	    .back-link:hover, .lang-toggle:hover { background:var(--bg-surface-hover); color:var(--text-primary); border-color:var(--visual-border-medium); }
	    .copy-btn:hover { background:var(--bg-surface-hover); color:var(--text-primary); }
    .magnet-action:hover { background:var(--accent-hover); }
    .unlock-btn:hover { border-color:var(--accent-hover); background:var(--accent-hover); color:var(--text-on-accent); }
    .resource-action-buttons .copy-btn:hover { border-color:var(--border); background:var(--bg-surface-hover); color:var(--text-primary); }
    .resource-action-buttons .copy-btn--primary:hover { border-color:transparent; background:var(--accent-hover); color:var(--text-on-accent); }
    .resource-action-buttons .magnet-action--secondary:hover { background:var(--bg-surface-hover); color:var(--text-primary); }
    .detail-similar-link:hover { background:var(--bg-surface-hover); }
    .detail-similar-link:hover .detail-similar-title { color:var(--accent); }
    .detail-similar-link:hover .detail-similar-arrow { color:var(--text-primary); border-color:var(--border); background:var(--bg-surface); }
    .media-info-toggle:hover { background:var(--bg-surface-hover); }
	  }
	  /* The @media (min-width: 640px) block that used to sit here held only a
	     flat 11rem poster column, a restatement of the base area map and a wider
	     hero gap. All three are single continuous clamps in
	     shared/page-hero.css now, which is what removes the 86px -> 176px step
	     at 641px and the 176px -> 168px shrink at 760px. */
	  @media (max-width: 759px) {
	    .detail-season-entry .detail-pill { gap:var(--space-scale-px-6); padding-left:var(--space-scale-px-8); padding-right:var(--space-scale-px-8); font-size:var(--type-control); white-space:nowrap; }
	    .detail-season-entry .detail-pill svg { width:var(--size-scale-px-14); height:var(--size-scale-px-14); flex:0 0 auto; }
	    /* .detail-title-cell used to be align-self:stretch with
	       .detail-title-main at height:100% so the title cell's own copy of the
	       synopsis could fill it. That copy is gone (one renderer now), and the
	       pair never filled anything anyway: .detail-title-cell is a grid with
	       align-content:start, so height:100% resolved against a content-sized
	       row and left 86-103px of measured dead space under the title at
	       641-759px instead. */
  }
	  @media (min-width: 760px) {
	    .detail-shell { padding-top:var(--space-scale-px-22); }
    /* No structural change here any more: the "media info" map is the base
       map at every width. */
    .detail-hero h1 { margin-bottom:var(--space-scale-px-8); }
	    .detail-enrichment { color:var(--text-secondary); }
	    .detail-season-entry { align-self:start; justify-self:start; width:100%; }
	    .detail-season-entry .detail-pill { width:100%; justify-content:center; }
	    .detail-resource-card { margin-top:var(--space-scale-px-4); }
  }
	  @media (min-width: 1180px) {
	    .detail-shell { padding-top:var(--space-scale-px-22); }
	  }
  @media (max-width: 640px) {
    .detail-resource-body { grid-template-columns:1fr; }
    .detail-measure, .detail-file-text, .detail-story, .detail-enrichment { max-width:none; }
    .detail-section-title { font-size:var(--type-section); line-height:var(--leading-detail-heading); }
    .detail-section-copy { font-size:var(--type-card-copy); line-height:var(--leading-copy); }
    .detail-story-row { font-size:var(--type-card-copy)!important; line-height:var(--leading-detail-prose); }
    .detail-enrichment { font-size:var(--type-card-copy)!important; line-height:var(--leading-detail-value); padding:var(--space-detail-row-block) 0; }
    .detail-resource-head { grid-template-columns:minmax(0,1fr) minmax(0,max-content); gap:var(--space-detail-item); }
    .resource-access-summary { max-width:none; font-size:var(--type-meta); overflow-wrap:normal; }
    .detail-version-head { margin-bottom:var(--space-scale-px-8); }
    .detail-version-title { font-size:var(--resource-title-compact-size); line-height:1.38; }
    .detail-version-tags span, .detail-version-metrics span { min-height:var(--size-scale-px-17); font-size:var(--type-label); padding:var(--space-scale-px-1) var(--space-scale-px-5); }
    .detail-version-metrics { grid-column:2; justify-content:flex-start; }
    .detail-similar-card { gap:var(--space-detail-item); }
    .detail-similar-context { font-size:var(--type-compact-meta); }
    .detail-similar-list { gap:0; }
    .detail-similar-link { min-height:var(--size-scale-px-70); grid-template-columns:44px minmax(0,1fr) auto; gap:var(--space-detail-item); padding:var(--space-detail-item) 0; }
    .detail-similar-poster { width:var(--size-scale-px-44); border-radius:var(--radius-sm); }
    .detail-similar-title { font-size:var(--type-compact-title); line-height:var(--leading-detail-value); }
    .detail-similar-original { font-size:var(--type-compact-meta); line-height:var(--leading-detail-meta); }
    .detail-similar-meta { font-size:var(--type-compact-meta); line-height:var(--leading-detail-meta); }
    .detail-similar-tags span { min-height:var(--size-scale-px-16); font-size:var(--type-label); padding:var(--space-scale-px-1) var(--space-scale-px-4); }
    .detail-similar-arrow { width:var(--size-scale-px-26); height:var(--size-scale-px-26); }
    .media-info-toggle { min-height:var(--size-scale-px-48); align-items:center; padding:var(--space-detail-group) var(--space-detail-card-inset); gap:var(--space-detail-item); }
    .media-info-affordance span:first-child { display:none; }
    .media-info-affordance { min-width:var(--size-scale-px-28); min-height:var(--size-scale-px-28); }
    .media-info-body { gap:var(--space-detail-group); padding:0 var(--space-detail-card-inset) var(--space-detail-card-inset); }
    .media-info-track { grid-template-columns:1fr; gap:var(--space-detail-intra); padding:var(--space-detail-item) 0; }
    .media-info-row { grid-template-columns:max-content minmax(0,1fr); gap:var(--space-detail-item); padding:var(--space-detail-row-block) 0; }
    .locked-resource-panel { min-width:0; justify-content:flex-start; padding-top:var(--space-detail-item); margin-top:var(--space-detail-intra); border-top:1px solid var(--border-row); }
    .resource-action-buttons { width:auto; justify-self:start; }
    .resource-action-buttons .magnet-action,
    .resource-action-buttons .copy-btn { font-size:var(--type-section); }
    /* Phones: buttons first, then the seeder line and hint (the body's row gap separates them). */
    .detail-resource-body { grid-template-areas:"info" "actions" "notes"; }
    .detail-download-notes { margin-top:0; }
  }
  @media (max-width: 640px) {
    .resource-card--nested { gap:var(--space-mobile-gap); padding:var(--space-mobile-card-pad); }
    .resource-card--nested .resource-card__main { gap:var(--space-scale-px-2); }
    .resource-card--nested .resource-card__title { position:relative; display:block; font-size:var(--resource-title-compact-size); line-height:var(--resource-title-mobile-line-height); white-space:normal; overflow:visible; }
    /* UI-011: modest invisible vertical hit-area growth, capped small so
       stacked resource-card rows never overlap each other's tap target. */
    .resource-card--nested .resource-card__title::after { content:""; position:absolute; top:-3px; bottom:-3px; left:0; right:0; }
    .resource-card--nested .resource-card__release { font-size:var(--type-compact-meta); line-height:1.2; }
    .resource-card--nested .resource-badge-row { min-height:var(--size-scale-px-13); max-height:var(--size-scale-px-13); flex-wrap:nowrap; gap:var(--space-scale-px-2); overflow-x:auto; overflow-y:hidden; scrollbar-width:none; }
    .resource-card--nested .resource-badge-row::-webkit-scrollbar { display:none; }
    .resource-card--nested .resource-badge { min-height:var(--size-scale-px-13); padding:0 var(--space-scale-px-3); font-size:var(--type-compact-label); line-height:1.15; }
    .resource-card--nested .resource-card__facts { flex-wrap:nowrap; gap:var(--space-scale-px-3); overflow-x:auto; scrollbar-width:none; }
    .resource-card--nested .resource-card__facts::-webkit-scrollbar { display:none; }
    :root {
      --mobile-density-control:var(--size-mobile-control);
      --mobile-density-section:var(--type-section);
      --mobile-density-body:var(--type-card-copy);
      --mobile-density-meta:var(--type-meta);
      --mobile-density-label:var(--type-label);
      --mobile-density-gap:var(--space-mobile-gap);
      --mobile-density-card-pad:var(--space-mobile-card-pad);
    }
    body { font-size:var(--mobile-density-body); }
    .detail-shell { padding-top:var(--space-scale-px-7); }
    .deep-page-header { margin-bottom:var(--space-scale-px-8)!important; padding-block:var(--space-scale-px-5)!important; }
    .detail-title-cell { gap:var(--mobile-density-gap); }
    .detail-title-cell h1 { margin-bottom:var(--space-scale-px-2); }
    .detail-title-main > p { margin-bottom:var(--space-detail-intra)!important; font-size:var(--type-card-copy)!important; line-height:var(--leading-detail-meta)!important; }
    .detail-title-main > .flex { gap:var(--space-detail-intra)!important; margin-bottom:var(--space-detail-intra)!important; font-size:var(--type-meta)!important; line-height:var(--leading-detail-meta); }
    .detail-title-main .genre-chip,
    .detail-title-main .series-chip { padding:var(--space-scale-px-1) var(--space-scale-px-4)!important; font-size:var(--type-label)!important; line-height:var(--leading-detail-control); }
    .detail-hero-copy { gap:var(--space-detail-item); }
    .detail-section-title { font-size:var(--mobile-density-section); }
    .detail-section-copy { font-size:var(--mobile-density-body); line-height:var(--leading-detail-value); }
    .detail-story-row { padding:var(--space-detail-row-block) 0; font-size:var(--mobile-density-body)!important; line-height:var(--leading-detail-prose); }
    .detail-enrichment { padding:var(--space-detail-row-block) 0; font-size:var(--mobile-density-body)!important; line-height:var(--leading-detail-value); }
    .detail-enrichment-text { white-space:normal; overflow:visible; }
    .detail-resource-head { gap:var(--space-detail-item); margin-bottom:var(--space-detail-item); }
    .detail-resource-card { padding:var(--space-detail-card-inset); border-radius:var(--radius-md); }
    .resource-access-summary { font-size:var(--type-compact-meta); }
    .detail-resource-body { gap:var(--space-detail-group); }
    .detail-resource-stack { gap:var(--space-detail-intra); }
    .detail-file-text { grid-template-columns:max-content minmax(0,1fr); gap:var(--space-detail-intra); }
    .detail-file-text { font-size:var(--mobile-density-body); line-height:var(--leading-detail-value); }
    .magnet-title-link { min-height:0; display:block; white-space:normal; overflow:visible; overflow-wrap:anywhere; word-break:break-word; }
    .resource-action-buttons { grid-template-columns:repeat(2,minmax(0,88px)); gap:var(--space-detail-intra); }
    .locked-resource-panel { padding-top:var(--space-detail-item); margin-top:var(--space-detail-intra); }
    .detail-version-body { gap:var(--space-detail-intra); }
    .detail-version-title { font-size:var(--resource-title-compact-size); line-height:var(--leading-detail-value); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .detail-version-tags,
    .detail-version-metrics { gap:var(--space-detail-intra); }
    .detail-version-tags span,
    .detail-version-metrics span { min-height:var(--size-scale-px-13); padding:0 var(--space-scale-px-3); font-size:var(--type-compact-label); }
    .detail-similar-card { gap:var(--space-detail-item); padding:var(--space-detail-card-inset); padding-bottom:calc(var(--space-detail-card-inset) - var(--space-detail-item)); margin-bottom:var(--space-gap-cards); }
    .detail-similar-list { gap:0; }
    .detail-similar-link { min-height:var(--size-scale-px-47); grid-template-columns:var(--size-mobile-thumbnail) minmax(0,1fr) auto; gap:var(--space-detail-item); padding:var(--space-detail-item) 0; }
    .detail-similar-poster { width:var(--size-mobile-thumbnail); }
    .detail-similar-body { gap:var(--space-detail-intra); }
    .detail-similar-title { font-size:var(--type-compact-title); line-height:var(--leading-detail-value); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .detail-similar-context,
    .detail-similar-original,
    .detail-similar-meta { font-size:var(--type-compact-meta); line-height:var(--leading-detail-meta); }
    .detail-similar-tags { flex-wrap:wrap; gap:var(--space-scale-px-2); overflow:visible; }
    .detail-similar-tags span { min-height:var(--size-scale-px-11); padding:0 var(--space-scale-px-3); font-size:var(--type-compact-label); }
    .detail-similar-arrow { width:var(--size-scale-px-18); height:var(--size-scale-px-18); }
    .detail-similar-arrow svg { width:var(--size-scale-px-10); height:var(--size-scale-px-10); }
    .media-info-toggle { min-height:var(--size-scale-px-32); padding:var(--space-detail-item) var(--space-detail-card-inset); gap:var(--space-detail-item); }
    .media-info-title { font-size:var(--type-card-copy); }
    .media-info-compact { font-size:var(--mobile-density-meta); }
    .media-info-affordance { min-width:var(--size-scale-px-21); min-height:var(--size-scale-px-21); font-size:var(--mobile-density-meta); }
    .media-info-expand-icon { width:var(--size-scale-px-14); height:var(--size-scale-px-14); }
    .media-info-body { gap:var(--space-detail-group); padding:0 var(--space-detail-card-inset) var(--space-detail-card-inset); }
    .media-info-group { gap:var(--space-detail-intra); }
    .media-info-group h3 { font-size:var(--mobile-density-meta); }
    .media-info-track { gap:var(--space-detail-intra); padding:var(--space-detail-item) 0; }
    .media-info-track-label { font-size:var(--type-compact-meta); }
    .media-info-row { grid-template-columns:minmax(max-content,0.34fr) minmax(0,1fr); gap:var(--space-detail-item); padding:var(--space-detail-row-block) 0; }
    .media-info-row dt { font-size:var(--mobile-density-meta); }
    .media-info-row dd { font-size:var(--type-compact-meta); }
    .ssr-detail-versions .resource-card--compact { grid-template-columns:minmax(0,1fr) var(--resource-icon-action-rail); gap:var(--space-scale-px-3) var(--space-scale-px-6); padding:var(--space-scale-px-5) var(--space-scale-px-6); }
    .ssr-detail-versions .resource-card--compact .resource-card__main { gap:var(--space-scale-px-2); }
    .ssr-detail-versions .resource-card--compact .resource-badge-row { gap:var(--space-scale-px-2); }
    .ssr-detail-versions .resource-card--compact .resource-badge { height:var(--resource-badge-height); min-height:var(--resource-badge-height); padding-inline:var(--space-scale-px-3); font-size:var(--type-compact-label); }
    .ssr-detail-versions .resource-card--compact .resource-card__facts { justify-content:flex-start; flex-wrap:wrap; gap:var(--space-scale-px-3); }
    .detail-version-head { margin-bottom:var(--space-scale-px-5); }
    .detail-facts-card { padding:var(--space-detail-card-inset); margin-bottom:var(--space-gap-cards); }
    .detail-facts-card .detail-section-title { margin-bottom:var(--space-detail-item); }
    .detail-facts-card td { padding-block:var(--space-detail-row-block); }
    .detail-crew-section,
    .detail-stills-section { gap:var(--space-detail-item); margin-bottom:var(--space-gap-cards); }
    .detail-crew-rail { gap:var(--space-detail-item); padding-bottom:var(--space-detail-intra); }
    .detail-crew-person { width:var(--size-scale-px-46); }
    .detail-crew-avatar { width:var(--size-mobile-avatar); height:var(--size-mobile-avatar); }
    .detail-stills-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-gap-tight); }
    .back-link,
    .detail-pill,
    .lang-toggle,
    .deep-nav-icon,
    .magnet-action,
    .copy-btn { min-height:var(--mobile-density-control); }
    .lang-toggle,
    .deep-nav-icon,
    .copy-btn { min-width:var(--mobile-density-control); width:var(--mobile-density-control); height:var(--mobile-density-control); }
    .back-link { padding-inline:var(--space-scale-px-8); font-size:var(--type-control); }
    .back-link svg { width:var(--size-mobile-icon); height:var(--size-mobile-icon); }
    .lang-toggle,
    .deep-nav-icon { font-size:var(--type-control); }
    .deep-page-header-actions,
    .deep-nav-actions { gap:var(--space-scale-px-4); }
    .deep-nav-icon svg { width:var(--size-mobile-icon); height:var(--size-mobile-icon); }
    .back-link,
    .detail-pill,
    .lang-toggle,
    .deep-nav-icon,
    .magnet-action,
    .copy-btn,
    .media-info-toggle { border-radius:var(--radius-sm); }
    .detail-similar-link,
    .detail-resource-card { border-radius:var(--radius-md); }
    .detail-season-entry .detail-pill { min-height:var(--mobile-density-control); font-size:var(--mobile-density-body); }
    .resource-action-buttons .magnet-action,
    .resource-action-buttons .copy-btn { min-height:var(--mobile-density-control); padding-inline:var(--space-scale-px-6); font-size:var(--type-compact-meta); }
    .detail-auth-head { padding:var(--space-scale-px-11) var(--space-scale-px-11) var(--space-scale-px-8); }
    .detail-auth-title { font-size:var(--type-content-title); }
    .detail-auth-sub { font-size:var(--mobile-density-body); }
    .detail-auth-close { width:var(--mobile-density-control); height:var(--mobile-density-control); font-size:var(--type-dialog-title); }
    .detail-auth-body,
    .detail-confirm-body { padding:0 var(--space-scale-px-11) var(--space-scale-px-11); gap:var(--space-scale-px-8); }
    .detail-auth-provider { min-height:var(--mobile-density-control); font-size:var(--mobile-density-body); }
  }
  .icon-btn svg { transition: opacity 0.15s; }
  .icon-btn .check-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: var(--opacity-hidden); pointer-events: none; transition: opacity 0.15s; }
  .icon-btn.copied .original-icon { opacity: var(--opacity-hidden); }
  .icon-btn.copied .check-icon { opacity: var(--opacity-visible); }
  .rec-card::-webkit-scrollbar { display: none; }
  .info-label { color: var(--text-muted); }
  .info-val { color: var(--text-primary); }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  }

/* "新版本" at the start of a version's tag row on the movie page (assets-src/pages/detail.js): a better
   version that arrived since this reader followed or last opened the movie. Same size as the tags beside
   it; the site's "新" badge colours (translucent gold fill, gold text). */
.resource-tag.follow-new-tag { background: var(--follow-badge-fill); color: var(--accent); border-color: transparent; box-shadow: none; }