/* IMUTV watch page (imu-watch plugin). Player controls first, page layout after. */

/* ===== IMUTV player controls (preview of the watch-page player) ===== */
.imup { --gold: #f5c542; position: absolute; inset: 0; background: #000; color: #fff; overflow: hidden; outline: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; font: 500 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.imup [hidden] { display: none !important; }
.imup video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.imup:fullscreen { width: 100vw; height: 100vh; }
.imup:-webkit-full-screen { width: 100vw; height: 100vh; }
.imup button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; place-items: center; color: #fff; border-radius: 50%; }
.imup button:focus-visible, .imup-seek:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.imup svg { width: 26px; height: 26px; fill: currentColor; display: block; }

/* bottom bar */
.imup-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 18px 10px; background: linear-gradient(to top, rgba(0,0,0,.82), rgba(0,0,0,.45) 55%, transparent); transition: opacity .22s ease, transform .22s ease; }
.imup.is-idle .imup-bar { opacity: 0; transform: translateY(8px); }
.imup.is-idle { cursor: none; }
.imup.has-end .imup-bar { opacity: 0; }
/* the bar's tall gradient must not swallow taps meant for the picture or the centre button */
.imup-bar { pointer-events: none; }
.imup-row1, .imup-row2 { pointer-events: auto; }
.imup.is-idle .imup-row1, .imup.is-idle .imup-row2, .imup.has-end .imup-row1, .imup.has-end .imup-row2 { pointer-events: none; }
.imup-row1 { display: flex; align-items: center; gap: 14px; }
.imup-cur, .imup-dur { font-size: 15px; font-variant-numeric: tabular-nums; min-width: 42px; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.imup-dur { text-align: right; }
.imup-seek { position: relative; flex: 1; height: 22px; cursor: pointer; touch-action: none; }
.imup-seek::before, .imup-buf, .imup-fill { content: ""; position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; transition: height .12s ease, margin-top .12s ease; }
.imup-seek::before { right: 0; background: rgba(255,255,255,.28); }
.imup-buf { background: rgba(255,255,255,.45); width: 0; }
.imup-fill { background: var(--gold); width: 0; }
.imup-seek:hover::before, .imup-seek:hover .imup-buf, .imup-seek:hover .imup-fill,
.imup.is-seeking .imup-seek::before, .imup.is-seeking .imup-buf, .imup.is-seeking .imup-fill { height: 6px; margin-top: -3px; }
.imup-thumb { position: absolute; top: 50%; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(245,197,66,.25); transition: transform .12s ease; }
.imup-seek:hover .imup-thumb, .imup.is-seeking .imup-thumb { transform: scale(1.25); }
.imup-tip { position: absolute; bottom: 24px; left: 0; transform: translateX(-50%); background: rgba(15,15,19,.95); border: 1px solid rgba(255,255,255,.14); padding: 5px 7px; border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0; pointer-events: none; transition: opacity .12s ease; white-space: nowrap; }
.imup-seek:hover .imup-tip, .imup.is-seeking .imup-tip { opacity: 1; }
.imup-row2 { display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.imup-row2 button { width: 42px; height: 42px; transition: background .15s ease, transform .1s ease; }
.imup-row2 button:hover { background: rgba(255,255,255,.14); }
.imup-row2 button:active { transform: scale(.92); }
.imup-sp { flex: 1; }
.imup-vol { -webkit-appearance: none; appearance: none; width: 78px; height: 22px; background: transparent; margin: 0 6px 0 0; cursor: pointer; }
.imup-vol::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(to right, var(--gold) var(--v, 100%), rgba(255,255,255,.28) var(--v, 100%)); }
.imup-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border-radius: 50%; background: var(--gold); }
.imup-vol::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.28); }
.imup-vol::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold); }
.imup-vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--gold); }
.imup .i-pause, .imup .i-muted, .imup .i-fsx, .imup .i-replay { display: none; }
.imup.is-playing .i-play { display: none; } .imup.is-playing .i-pause { display: block; }
.imup.is-ended .i-play, .imup.is-ended .i-pause { display: none; } .imup.is-ended .i-replay { display: block; }
.imup.is-muted .i-vol { display: none; } .imup.is-muted .i-muted { display: block; }
.imup.is-fs .i-fs { display: none; } .imup.is-fs .i-fsx { display: block; }

/* centre button, spinner, chip */
.imup .imup-big { position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; background: rgba(10,10,12,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.18); transition: opacity .2s ease, transform .2s ease, background .15s ease; }
.imup .imup-big svg { width: 44px; height: 44px; }
.imup .imup-big:hover { background: rgba(245,197,66,.92); color: #111; }
.imup.is-playing:not(.is-touch) .imup-big, .imup.is-playing.is-idle .imup-big, .imup.is-buffering .imup-big, .imup.has-end .imup-big { opacity: 0; transform: scale(.85); pointer-events: none; }
.imup-spin { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 4px solid rgba(255,255,255,.2); border-top-color: var(--gold); opacity: 0; pointer-events: none; }
.imup.is-buffering .imup-spin { opacity: 1; animation: imup-spin .8s linear infinite; }
@keyframes imup-spin { to { transform: rotate(360deg); } }
.imup-tags { position: absolute; right: 14px; top: 14px; max-width: 72%; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; pointer-events: none; transition: opacity .3s ease; }
.imup-tags[hidden], .imup-tags:not(.is-on) { display: none; }
.imup.is-idle .imup-tags:not(.is-intro) { opacity: 0; }
.imup-tag { padding: 3px 9px; border-radius: 6px; font-size: 12px; line-height: 1.35; font-weight: 700; letter-spacing: .02em; white-space: nowrap; color: #fff; background: rgba(0,0,0,.62); border: 1px solid rgba(255,255,255,.28); }
.imup-tag.is-age { background: rgba(170,30,30,.9); border-color: transparent; }
.imup-tag.is-ai { background: rgba(108,92,231,.92); border-color: transparent; }
.imup-tag.is-ad { background: #e0a019; border-color: transparent; color: #111; }
.imup-chip { position: absolute; left: 16px; top: 16px; padding: 10px 14px; border-radius: 999px; background: var(--gold); color: #111; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.4); }
.imup .imup-chip svg { width: 18px; height: 18px; }
.imup-flash { position: absolute; top: 50%; width: 76px; height: 76px; margin-top: -38px; border-radius: 50%; background: rgba(10,10,12,.6); display: grid; place-items: center; font-size: 13px; font-weight: 700; opacity: 0; pointer-events: none; }
.imup-flash.l { left: 14%; } .imup-flash.r { right: 14%; }
.imup-flash.on { animation: imup-flash .5s ease; }
@keyframes imup-flash { 0% { opacity: 0; transform: scale(.8); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }

/* settings menu */
.imup-menu { position: absolute; right: 14px; bottom: 74px; min-width: 190px; max-height: calc(100% - 96px); overflow: auto; background: rgba(15,15,19,.96); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 6px; box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.imup-menu-h { padding: 9px 10px 5px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #a5a5ae; }
.imup-menu button { display: flex; width: 100%; justify-content: space-between; align-items: center; border-radius: 8px; padding: 9px 10px; font-size: 14px; }
.imup-menu button:hover { background: rgba(255,255,255,.1); }
.imup-menu button[aria-checked=true] { color: var(--gold); font-weight: 700; }
.imup-menu button[aria-checked=true]::after { content: "✓"; }

/* up-next end card */
.imup-end { position: absolute; inset: 0; background: rgba(5,5,7,.86); display: grid; place-items: center; padding: 16px; animation: imup-fade .25s ease; }
@keyframes imup-fade { from { opacity: 0; } }
.imup-end-in { display: flex; gap: 18px; align-items: center; max-width: 560px; width: 100%; }
.imup-end-th { position: relative; width: 46%; aspect-ratio: 16 / 9; border-radius: 10px; background: #1c1c22 center / cover no-repeat; flex: none; overflow: hidden; }
.imup-ring { position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; }
.imup .imup-ring svg { width: 64px; height: 64px; transform: rotate(-90deg); fill: none; }
.imup-ring circle { stroke-width: 4; }
.imup-ring .bg { stroke: rgba(0,0,0,.55); fill: rgba(0,0,0,.55); }
.imup-ring .fg { stroke: var(--gold); stroke-linecap: round; }
.imup-end-n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.imup-end-k { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); font-weight: 700; }
.imup-end-t { font-size: 18px; line-height: 1.25; font-weight: 700; margin: 8px 0 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.imup-end-b { display: flex; gap: 8px; flex-wrap: wrap; }
.imup .imup-end-b button { border-radius: 999px; padding: 11px 18px; font-size: 14px; font-weight: 700; background: rgba(255,255,255,.14); }
.imup .imup-end-b button.pri { background: var(--gold); color: #111; }
.imup .imup-end-b button:hover { filter: brightness(1.12); }

/* phones and touch */
.imup.is-touch .imup-vol { display: none; }
.imup.is-touch .imup-row2 button { width: 46px; height: 46px; }
@media (max-width: 560px) {
  /* small players: the centre button plays and pauses, a double-tap on either side skips 10 s,
     so the bar keeps only sound, settings and fullscreen */
  .imup-bar { padding: 30px 10px 2px; }
  .imup-row1 { gap: 9px; } .imup-cur, .imup-dur { font-size: 13px; min-width: 36px; }
  .imup-row2 { margin-top: -2px; }
  .imup-row2 button, .imup.is-touch .imup-row2 button { width: 40px; height: 38px; } .imup svg { width: 23px; height: 23px; }
  .imup-row2 [data-c=back], .imup-row2 [data-c=fwd], .imup-row2 [data-c=play], .imup-row2 [data-c=pip] { display: none; }
  .imup .imup-big { width: 60px; height: 60px; margin: -30px 0 0 -30px; top: 42%; } .imup .imup-big svg { width: 32px; height: 32px; }
  .imup-end-in { gap: 12px; } .imup-end-t { font-size: 15px; margin: 6px 0 10px; }
  .imup .imup-end-b button { padding: 9px 14px; font-size: 13px; }
  .imup-menu { bottom: 62px; right: 8px; }
}
@media (prefers-reduced-motion: reduce) { .imup *, .imup { transition: none !important; animation-duration: .01s !important; } }

/* ===== page layout ===== */
/* No background of its own: the page sits on the site's graphite gradient. */
.imuw-wrap { position: relative; z-index: 1; width: 100%; background: transparent; color: #f2f2f2; }
.imuw { --gold: #f5c542; box-sizing: border-box; width: 100%; max-width: 1760px; margin: 0 auto; padding: 22px 24px 64px; display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 26px; align-items: start; font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
.imuw *, .imuw *::before, .imuw *::after { box-sizing: border-box; }
/* Desktop: the theme's container caps pages at about 1300px; like the live page, the watch page
   uses the full width up to 1760px. The player takes as much of it as still fits the screen's
   height (so its controls and the title stay in view); the side list takes the rest. */
@media (min-width: 1101px) {
  body.imu-watch-page .site-content > .ast-container, body.imu-watch-page #content > .ast-container { max-width: none !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
  .imuw { grid-template-columns: minmax(0, max(640px, calc((100vh - 240px) * 1.7778))) minmax(400px, 1fr); }
  .imuw-rail { max-width: 560px; }
  /* Like the chat on the live page: the side column is as tall as the player and its details, and
     the comments scroll inside their panel, so the row at the foot stays close to the player. */
  .imuw-rail { align-self: stretch; display: flex; flex-direction: column; min-height: 0; }
  .imuw-rail > .imuw-cm { flex: 1 1 0px; min-height: 340px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; }
  .imuw-rail > .imuw-cm > * { flex: none; }
  .imuw-rail > .imuw-cm > .imuw-cm-sc { flex: 1 1 0px; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin-right: -10px; padding-right: 10px; scrollbar-width: thin; scrollbar-color: #3a3a45 transparent; }
}
.imuw [hidden] { display: none !important; }
.imuw-stage { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
/* The player frame and its picture must never be hidden by another stylesheet on the site. */
.imuw-stage { isolation: isolate; } /* its own layer stack: nothing inside can slip behind its black backdrop */
.imuw-stage > .imup { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 0 !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.imuw-stage.is-alt > .imup { z-index: 2 !important; }
.imuw-stage:not(.is-alt) > .imup > video { display: block !important; visibility: visible !important; opacity: 1 !important; z-index: 0 !important; }
.imuw-alt { position: absolute; inset: 0; background: #000; z-index: 1; }
.imuw-alt > div, .imuw-alt iframe { width: 100% !important; height: 100% !important; }
.imuw-stage.is-alt .imup { background: transparent; pointer-events: none; }
.imuw-stage.is-alt .imup video, .imuw-stage.is-alt .imup-bar, .imuw-stage.is-alt .imup-big, .imuw-stage.is-alt .imup-spin, .imuw-stage.is-alt .imup-chip, .imuw-stage.is-alt .imup-tags { display: none; }
.imuw-stage.is-alt .imup-end { pointer-events: auto; }
.imuw-stage.is-gated .imup-bar, .imuw-stage.is-gated .imup-big, .imuw-stage.is-gated .imup-spin { display: none; }
.imuw-gate { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; padding: 18px; text-align: center; background: linear-gradient(rgba(5,5,7,.8), rgba(5,5,7,.93)); overflow: auto; }
.imuw-gate-in { max-width: 520px; }
.imuw-gate-i { width: 46px; height: 46px; fill: var(--gold); display: block; margin: 0 auto 10px; }
.imuw-gate-w { width: 34px; height: 34px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--gold); animation: imuw-wait .9s linear infinite; }
@keyframes imuw-wait { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .imuw-gate-w { animation-duration: 3s; } }
.imuw-gate-k { font-size: 22px; line-height: 1.25; font-weight: 700; color: var(--gold); }
.imuw-gate.is-age .imuw-gate-k { color: #f0564a; }
.imuw-gate-t { font-size: 16px; line-height: 1.55; margin: 10px 0 0; color: #fff; white-space: pre-line; }
.imuw-gate-t b { color: var(--gold); }
.imuw-gate.is-age .imuw-gate-t b { color: #f0564a; }
.imuw-gate-s { font-size: 13.5px; line-height: 1.5; color: #b9b9c0; margin: 10px 0 0; }
.imuw-gate-a { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.imuw .imuw-btn { display: inline-block; border-radius: 12px; padding: 12px 22px; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid rgba(255,255,255,.28); background: transparent; color: #fff; cursor: pointer; }
.imuw .imuw-btn.pri { border-color: var(--gold); color: var(--gold); }
.imuw .imuw-btn:hover { background: var(--gold); border-color: var(--gold); color: #111; }
.imuw-tags { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -4px 0 14px; }
.imuw-tags[hidden] { display: none; }
.imuw-tags > .imuw-tag, .imuw-tags > .imuw-age { margin-left: 0; }
/* A label's explanation: a small card under it, shown when pointed at, focused or tapped. */
.imuw-tags [data-tip] { position: relative; cursor: help; -webkit-tap-highlight-color: transparent; }
.imuw-tags [data-tip]:focus { outline: none; }
.imuw-tags [data-tip]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.imuw-tags [data-tip]::after { content: attr(data-tip); position: absolute; left: 0; top: calc(100% + 8px); z-index: 25; box-sizing: border-box; width: max-content; max-width: 300px; padding: 9px 12px; border-radius: 10px; background: #1d1d24; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 10px 28px rgba(0,0,0,.55); color: #ececf1; font-size: 13px; line-height: 1.45; font-weight: 500; letter-spacing: 0; text-align: left; white-space: normal; pointer-events: none; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .14s ease, transform .14s ease, visibility 0s linear .14s; }
.imuw-tags [data-tip]:hover::after, .imuw-tags [data-tip]:focus-visible::after, .imuw-tags [data-tip].is-open::after { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: none) { .imuw-tags [data-tip]:hover:not(.is-open)::after { opacity: 0; visibility: hidden; } }
@media (max-width: 640px) { .imuw-tags [data-tip] { position: static; } .imuw-tags [data-tip]::after { right: 0; width: auto; max-width: none; } }
@media (prefers-reduced-motion: reduce) { .imuw-tags [data-tip]::after { transition: none; transform: none; } }
.imuw-tag { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 6px; border: 1px solid rgba(255,255,255,.45); color: #f2f2f2; font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.imuw-tag.is-ai { background: rgba(108,92,231,.92); border-color: transparent; color: #fff; }
.imuw-tag.is-ad { background: #e0a019; border-color: transparent; color: #111; }
.imuw-age { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 6px; border: 1px solid #f0564a; color: #f0564a; font-size: 13px; font-weight: 700; letter-spacing: .02em; }
@media (max-width: 560px) {
  .imuw-gate-i { width: 30px; height: 30px; margin-bottom: 4px; }
  .imuw-gate-k { font-size: 16px; } .imuw-gate-t { font-size: 13px; margin-top: 4px; } .imuw-gate-s { font-size: 12px; margin-top: 4px; }
  .imuw-gate-a { margin-top: 8px; } .imuw .imuw-btn { padding: 8px 14px; font-size: 13px; }
}

/* diagnostics panel: only with ?imuwdebug=1 */
.imuw-dbg { position: fixed; left: 8px; bottom: 8px; z-index: 99999; width: min(560px, calc(100vw - 16px)); max-height: 46vh; display: flex; flex-direction: column; background: rgba(8,8,10,.96); border: 1px solid #f5c542; border-radius: 10px; color: #e8e8ee; font: 11.5px/1.45 ui-monospace, Menlo, Consolas, monospace; }
.imuw-dbg pre { margin: 0; padding: 8px 10px; overflow: auto; white-space: pre-wrap; word-break: break-word; flex: 1; background: transparent; color: inherit; border: 0; }
.imuw-dbg div { display: flex; gap: 8px; padding: 6px 8px; border-bottom: 1px solid #333; align-items: center; }
.imuw-dbg button { all: unset; cursor: pointer; background: #f5c542; color: #111; font-weight: 700; padding: 4px 10px; border-radius: 6px; }

.imuw-info { padding-top: 16px; }
.imuw .imuw-title { font-size: 24px; line-height: 1.25; font-weight: 700; margin: 0 0 12px; color: #fff; }
/* creator on the left, actions on the right of the same row; below 640px the actions drop to their own row */
.imuw-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px 16px; }
.imuw-by-a { display: inline-flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: #fff; font-weight: 600; }
.imuw-by-n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imuw-by-a:hover .imuw-by-n { color: var(--gold); }
.imuw-av { width: 40px; height: 40px; border-radius: 50%; background: #26262e center / cover no-repeat; flex: none; }
.imuw-by { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 0 1 auto; }
.imuw .imuw-follow { all: unset; box-sizing: border-box; cursor: pointer; flex: none; white-space: nowrap; border-radius: 999px; padding: 8px 18px; font-size: 14px; font-weight: 700; background: #fff; color: #111; }
.imuw .imuw-follow:hover { background: var(--gold); }
.imuw .imuw-follow[aria-pressed=true] { background: rgba(255,255,255,.12); color: #fff; }
.imuw .imuw-follow:focus-visible, .imuw .imuw-act:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.imuw-acts { display: flex; gap: 8px; flex: none; margin-left: auto; }
.imuw .imuw-act { all: unset; box-sizing: border-box; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 14px; font-weight: 600; transition: background .12s ease; }
.imuw .imuw-act:hover { background: rgba(255,255,255,.18); }
.imuw .imuw-act svg { width: 20px; height: 20px; fill: currentColor; }
.imuw .imuw-act[aria-pressed=true] { background: var(--gold); color: #111; }
.imuw-plus { position: relative; }
.imuw-menu { position: absolute; right: 0; top: 46px; z-index: 40; min-width: 230px; padding: 6px; border-radius: 12px; background: #17171c; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 40px rgba(0,0,0,.55); }
.imuw .imuw-menu button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 12px; border-radius: 8px; font-size: 14px; color: #fff; }
.imuw .imuw-menu button:hover { background: rgba(255,255,255,.1); }
.imuw .imuw-menu button[aria-checked=true] { color: var(--gold); font-weight: 700; }
.imuw .imuw-menu button[aria-checked=true]::after { content: "\2713"; }
.imuw-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 99998; background: #f2f2f2; color: #111; font: 600 14px/1.3 system-ui, sans-serif; padding: 11px 18px; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,.5); animation: imup-fade .2s ease; }

.imuw-cm { margin-top: 20px; background: rgba(21,21,26,.62); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px 18px 18px; }
.imuw-cm-h { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.imuw .imuw-cm-h h2 { font-size: 18px; font-weight: 700; margin: 0 auto 0 0; color: #fff; }
.imuw-cm-h h2 span { color: #b9b9c0; font-weight: 600; }
.imuw .imuw-cm-h select { width: auto; height: auto; padding: 6px 8px; border-radius: 8px; border: 1px solid #3a3a45; background: #15151a; color: #fff; font: inherit; font-size: 13px; }
.imuw .imuw-cm-form textarea, .imuw .imuw-cm-rform textarea { display: block; width: 100%; min-height: 0; resize: vertical; padding: 10px 12px; border-radius: 10px; border: 1px solid #3a3a45; background: rgba(0,0,0,.32); color: #fff; font: inherit; }
.imuw .imuw-cm-form textarea:focus, .imuw .imuw-cm-rform textarea:focus { outline: none; border-color: var(--gold); }
.imuw-cm-form-a { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }
.imuw .imuw-cm .imuw-btn { padding: 8px 16px; font-size: 14px; }
.imuw-cm-guest { margin: 0 0 12px; color: #b9b9c0; }
.imuw-cm-guest a { color: var(--gold); font-weight: 700; }
.imuw-cm-list { display: grid; gap: 16px; margin-top: 4px; }
.imuw-cm-sc { margin-top: 12px; }
.imuw-c { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.imuw-c.is-reply { margin-left: 48px; }
.imuw-c-av { width: 36px; height: 36px; border-radius: 50%; background: #26262e center / cover no-repeat; }
.imuw-c-n { font-size: 13px; font-weight: 700; color: #fff; }
.imuw-c-n time { font-weight: 500; color: #8f8f99; margin-left: 6px; }
.imuw-c-t { margin: 3px 0 4px; white-space: pre-line; overflow-wrap: anywhere; color: #e6e6ea; }
.imuw-c.is-gone .imuw-c-t { color: #8f8f99; font-style: italic; }
.imuw-c-a { display: flex; gap: 14px; }
.imuw .imuw-c-a button { all: unset; cursor: pointer; font-size: 12.5px; font-weight: 700; color: #b9b9c0; }
.imuw .imuw-c-a button:hover { color: var(--gold); }
.imuw-cm-rform { margin-top: 8px; }
.imuw-cm-empty { color: #8f8f99; }
.imuw .imuw-cm-more, #imuw-cm-more { margin-top: 16px; }
@media (max-width: 640px) {
  .imuw-bar { flex-wrap: wrap; }
  .imuw-acts { flex: 1 1 100%; margin-left: 0; }
  .imuw-acts { position: relative; }
  .imuw-plus { position: static; }
  .imuw-menu { right: auto; left: 0; max-width: 100%; } /* opens from the left edge of the row so it always fits */
}
@media (max-width: 560px) { .imuw .imuw-act { padding: 0 13px; height: 38px; } .imuw-c.is-reply { margin-left: 24px; } .imuw-cm { padding: 14px 14px 16px; border-radius: 12px; } }

.imuw-desc { margin-top: 16px; background: rgba(21,21,26,.78); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; padding: 14px 16px; color: #d6d6dc; }
.imuw-desc-t { white-space: pre-line; overflow-wrap: anywhere; }
.imuw-desc.is-clamped .imuw-desc-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.imuw .imuw-more { all: unset; cursor: pointer; margin-top: 8px; color: #fff; font-weight: 700; font-size: 14px; }
.imuw .imuw-more:hover { color: var(--gold); }

.imuw-pl-k { font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.imuw-pl-pos { font-size: 13px; line-height: 1.3; color: #b9b9c0; font-variant-numeric: tabular-nums; }
.imuw-auto { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #b9b9c0; cursor: pointer; margin: 0; }
.imuw-auto input { position: absolute; opacity: 0; width: 0; height: 0; }
.imuw-auto i { width: 38px; height: 22px; border-radius: 999px; background: #3a3a45; position: relative; transition: background .15s ease; }
.imuw-auto i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.imuw-auto input:checked + i { background: var(--gold); }
.imuw-auto input:checked + i::after { transform: translateX(16px); }
.imuw-auto input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }
.imuw-autoctl { flex: none; display: inline-flex; align-items: center; gap: 12px; }
.imuw .imuw-autoctl select { width: auto; height: auto; padding: 6px 8px; border-radius: 8px; border: 1px solid #3a3a45; background: #15151a; color: #fff; font: inherit; font-size: 13px; }
.imuw-up-th { position: relative; aspect-ratio: 16 / 9; border-radius: 8px; background: #1c1c22 center / cover no-repeat; overflow: hidden; }
.imuw-up-th b { position: absolute; right: 6px; bottom: 6px; background: rgba(0,0,0,.82); color: #fff; font-size: 12px; font-weight: 600; padding: 2px 5px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.imuw-up-th em { position: absolute; left: 6px; top: 6px; background: var(--gold); color: #111; font-size: 11px; font-weight: 700; font-style: normal; padding: 2px 6px; border-radius: 4px; }

/* A playlist playing (/watch/{slug}/?list=): its head and list join into one panel at the top of
   the side column, above the comments; the usual suggestions are the More videos row at the foot. */
/* The row across the foot of the page: Up next, or More videos while a playlist plays. */
.imuw-foot { grid-column: 1 / -1; min-width: 0; margin-top: 8px; }
.imuw-foot-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
/* Side column: the comments sit beside the player, under the playlist when one is playing. */
.imuw-rail .imuw-cm { margin-top: 0; }
/* The video that plays next is marked in the Up next row. */
.imuw-mc.is-next .imuw-up-th { outline: 2px solid rgba(245,197,66,.8); outline-offset: -2px; }
/* The playlist row: the playlist's videos in order, the playing one marked. */
.imuw-pl-hd { margin-right: auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.imuw .imuw-pl-hd h2 { margin: 0; }
.imuw-pi-n { position: absolute; left: 6px; bottom: 6px; min-width: 22px; box-sizing: border-box; text-align: center; background: rgba(0,0,0,.82); color: #fff; font-size: 12px; font-weight: 700; font-style: normal; padding: 2px 5px; border-radius: 4px; font-variant-numeric: tabular-nums; }
.imuw-pi.is-now .imuw-up-th { outline: 2px solid var(--gold); outline-offset: -2px; }
.imuw-pi.is-now .imuw-pi-n { background: var(--gold); color: #111; }
.imuw-pi.is-now .imuw-mc-t::before { content: "Now playing"; display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 3px; }
.imuw-pi.is-next .imuw-up-th { outline: 0; }
.imuw-mc.is-next .imuw-mc-t::before { content: "Next"; display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 3px; }
.imuw .imuw-foot-h h2 { font-size: 20px; line-height: 1.25; font-weight: 700; margin: 0 auto 0 0; padding: 0; color: #fff; }
.imuw .imuw-foot-b { all: unset; box-sizing: border-box; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.1); color: #fff; transition: background .12s ease; }
.imuw .imuw-foot-b:hover { background: rgba(255,255,255,.18); }
.imuw .imuw-foot-b:disabled { opacity: .35; cursor: default; background: rgba(255,255,255,.1); }
.imuw .imuw-foot-b:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.imuw-foot-b svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.imuw-foot-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding: 0 0 8px; scrollbar-width: thin; scrollbar-color: #3a3a45 transparent; }
.imuw .imuw-mc { flex: 0 0 calc((100% - 64px) / 5); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: #f2f2f2; border-radius: 12px; }
.imuw .imuw-mc:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.imuw-mc .imuw-up-th { width: 100%; border-radius: 12px; transition: transform .14s ease; }
.imuw-mc:hover .imuw-up-th { transform: translateY(-2px); }
.imuw-mc-t { font-size: 14px; line-height: 1.35; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.imuw-mc:hover .imuw-mc-t { color: var(--gold); }
@media (max-width: 1500px) { .imuw .imuw-mc { flex-basis: calc((100% - 48px) / 4); } }
@media (max-width: 900px) { .imuw .imuw-mc { flex-basis: calc((100% - 32px) / 3); } }
@media (max-width: 640px) { .imuw .imuw-mc { flex-basis: 46%; } .imuw-foot-row { gap: 12px; } .imuw .imuw-foot-b { display: none; } }
/* Phones: the playlist's name gets the full first line of the panel head, the autoplay controls the second. */
@media (prefers-reduced-motion: reduce) { .imuw-mc .imuw-up-th { transition: none; } }

@media (max-width: 1100px) {
  .imuw { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 8px 0 48px; } /* thin gap under the site header */
  .imuw-stage { border-radius: 0; position: sticky; top: 0; z-index: 30; box-shadow: none; }
  .imuw-info, .imuw-rail, .imuw-foot { padding-left: 14px; padding-right: 14px; }
  .imuw .imuw-title { font-size: 19px; }
  /* One column: the comments keep to a panel that scrolls inside, so the row at the foot is never far away. */
  .imuw-cm-sc { max-height: min(70vh, 560px); overflow-y: auto; margin-right: -8px; padding-right: 8px; scrollbar-width: thin; scrollbar-color: #3a3a45 transparent; }
}