:root {
  --qtube-bg: #0b0b0d;
  --qtube-surface: #141418;
  --qtube-surface-2: #1b1b21;
  --qtube-border: #2c2c34;
  --qtube-text: #f2ebe3;
  --qtube-muted: #9a948c;
  --qtube-red: #c1121f;
  --qtube-red-deep: #8a0d16;
  --qtube-success: #2f6b45;
  --qtube-danger: #8a0d16;
  --qtube-focus: #e8c7b0;
  --qtube-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --qtube-radius: 0.35rem;
  --qtube-radius-lg: 0.75rem;
  --qtube-space-1: 0.35rem;
  --qtube-space-2: 0.7rem;
  --qtube-space-3: 1rem;
  --qtube-space-4: 1.5rem;
  --qtube-space-5: 2.5rem;
  --qtube-max: 56rem;
  --qtube-catalogue-max: 72rem;
  --qtube-header-height: 4rem;
  --qtube-header-gap: 0.5rem;
  --qtube-font-display: "Arial Narrow", "Helvetica Neue Condensed", Impact, Haettenschweiler, sans-serif;
  --qtube-font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  color-scheme: dark;
}

[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Measured header height already includes safe-area padding on .site-header. */
  scroll-padding-top: calc(var(--qtube-header-height) + var(--qtube-header-gap));
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--qtube-font-body);
  line-height: 1.5;
  color: var(--qtube-text);
  background:
    linear-gradient(180deg, rgba(193, 18, 31, 0.08), transparent 18rem),
    var(--qtube-bg);
}

body.feed-body {
  background: var(--qtube-bg);
}

img,
svg,
video {
  max-width: 100%;
}

a {
  color: var(--qtube-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: #fff;
}

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  z-index: 1000;
  padding: 0.55rem 0.8rem;
  background: var(--qtube-red);
  color: #fff;
}

.skip-link:focus {
  top: 0.75rem;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: env(safe-area-inset-top, 0px);
  border-bottom: 1px solid var(--qtube-border);
  /* Exact ink so approved PNG baked backgrounds (#08090A) merge with no seam. */
  background: #08090a;
}

.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qtube-space-3);
  max-width: calc(var(--qtube-max) + 8rem);
  /* Do not bind min-height to --qtube-header-height: that variable is measured
     from this header and would create a ResizeObserver feedback loop. */
  min-height: 3.75rem;
  margin: 0 auto;
  padding: 0.65rem
    max(clamp(0.85rem, 2vw, 1.5rem), env(safe-area-inset-right, 0px))
    0.65rem
    max(clamp(0.85rem, 2vw, 1.5rem), env(safe-area-inset-left, 0px));
}

.brand {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  flex-shrink: 0;
  min-width: 7.5rem;
  color: var(--qtube-text);
  text-decoration: none;
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  flex-shrink: 0;
  width: auto;
  /* Explicit height avoids WebKit flex+img collapse when height:auto +
     aspect-ratio compute a zero used size on real mobile Safari. */
  max-width: none;
  object-fit: contain;
  object-position: left center;
  background: transparent;
}

.brand-logo--full {
  display: block;
  width: 150px;
  height: 60px;
  min-width: 150px;
  min-height: 60px;
  aspect-ratio: 1983 / 793;
}

.brand-ornament {
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  color: var(--qtube-red);
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  margin: 0;
  color: var(--qtube-text);
  background: transparent;
  border: 1px solid var(--qtube-border);
  border-radius: 0;
  cursor: pointer;
}

.nav-toggle__icon {
  display: grid;
  place-items: center;
  width: 1.35rem;
  height: 1.1rem;
}

.nav-toggle__icon--open {
  gap: 0.28rem;
}

.nav-toggle__icon--open span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--qtube-text);
}

.nav-toggle__icon--open span:nth-child(2) {
  background: var(--qtube-red);
}

.nav-toggle__icon--close {
  display: none;
  color: var(--qtube-text);
}

.site-header.is-nav-open .nav-toggle__icon--open {
  display: none;
}

.site-header.is-nav-open .nav-toggle__icon--close {
  display: grid;
}

.site-nav {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: 0.55rem 0.9rem;
}

.site-nav a,
.site-nav button {
  min-height: 2.5rem;
  padding: 0.4rem 0.55rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--qtube-muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  cursor: pointer;
}

.site-nav a[aria-current="page"],
.site-nav a:hover,
.site-nav button:hover {
  color: var(--qtube-text);
  border-bottom-color: var(--qtube-red);
}

.inline-form {
  display: inline;
  margin: 0;
}

body.nav-open {
  overflow: hidden;
}

main {
  max-width: var(--qtube-max);
  margin: 0 auto;
  padding: var(--qtube-space-4) clamp(0.85rem, 2vw, 1.5rem) var(--qtube-space-5);
}

.feed-body main {
  max-width: none;
  padding: 0;
}

h1,
h2,
h3 {
  font-family: var(--qtube-font-display);
  letter-spacing: 0.04em;
  line-height: 1.1;
}

h1 {
  margin: 0 0 var(--qtube-space-2);
  font-size: clamp(2rem, 5vw, 3.4rem);
  text-transform: uppercase;
}

.eyebrow,
.feed-kicker {
  margin: 0 0 var(--qtube-space-1);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--qtube-red);
}

.lede {
  max-width: 38rem;
  color: var(--qtube-muted);
}

.panel,
.flash,
.empty-state {
  padding: var(--qtube-space-3);
  background: var(--qtube-surface);
  border: 1px solid var(--qtube-border);
  border-radius: var(--qtube-radius-lg);
  box-shadow: var(--qtube-shadow);
}

.danger-panel {
  border-color: var(--qtube-red-deep);
}

.wallet-panel {
  margin: var(--qtube-space-3) 0;
  display: grid;
  gap: var(--qtube-space-2);
}

.wallet-lede {
  margin: 0;
}

.wallet-address {
  margin: 0;
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.wallet-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qtube-space-2);
}

.wallet-status {
  margin: 0;
  min-height: 1.25em;
  color: var(--qtube-muted);
  font-size: 0.92rem;
}

.wallet-status.is-error {
  color: #ffb4b4;
}

.wallet-status[hidden] {
  display: none;
}

.wallet-chooser {
  display: grid;
  gap: var(--qtube-space-2);
  padding: var(--qtube-space-2);
  background: var(--qtube-surface-2);
  border: 1px solid var(--qtube-border);
  border-radius: var(--qtube-radius);
}

.wallet-chooser[hidden] {
  display: none;
}

.wallet-chooser__label {
  margin: 0;
  color: var(--qtube-muted);
  font-size: 0.92rem;
}

.wallet-chooser__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.wallet-chooser__option {
  width: 100%;
  justify-content: flex-start;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  text-align: left;
  background: var(--qtube-surface);
}

.wallet-chooser__option:hover {
  border-color: var(--qtube-red);
}

.wallet-chooser__icon {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
  border-radius: 0.25rem;
  background: var(--qtube-surface-2);
}

.wallet-chooser__name {
  overflow-wrap: anywhere;
}

.wallet-chooser__hint {
  display: block;
  width: 100%;
  color: var(--qtube-muted);
  font-size: 0.8rem;
}

.flash-list {
  max-width: var(--qtube-max);
  margin: var(--qtube-space-3) auto 0;
  padding: 0 clamp(0.85rem, 2vw, 1.5rem);
  display: grid;
  gap: var(--qtube-space-2);
}

.flash-success {
  border-color: var(--qtube-success);
}

.flash-error,
.form-error,
.errorlist {
  color: #ffb4b4;
}

form {
  display: grid;
  gap: var(--qtube-space-2);
}

label {
  display: grid;
  gap: 0.35rem;
  font-size: 0.92rem;
}

input,
select,
textarea,
button,
.button,
.button-link,
.feed-control,
.category-chip {
  font: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]),
select,
textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.7rem 0.8rem;
  color: var(--qtube-text);
  background: var(--qtube-surface-2);
  border: 1px solid var(--qtube-border);
  border-radius: var(--qtube-radius);
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  width: 1.125rem;
  height: 1.125rem;
  min-width: 1.125rem;
  min-height: 1.125rem;
  margin: 0.15rem 0 0;
  padding: 0;
  flex: 0 0 auto;
  accent-color: var(--qtube-red);
  border-radius: 0.2rem;
  cursor: pointer;
}

.checkbox-field {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.55rem 0;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--qtube-text);
}

.checkbox-field input[type="checkbox"],
.checkbox-field input[type="radio"] {
  margin-top: 0.25rem;
}

.checkbox-field:focus-within {
  outline: 3px solid var(--qtube-focus);
  outline-offset: 2px;
  border-radius: var(--qtube-radius);
}

.checkbox-help {
  margin: 0 0 0 1.875rem;
  color: var(--qtube-muted);
  font-size: 0.88rem;
}

button,
.button,
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  color: var(--qtube-text);
  text-decoration: none;
  background: var(--qtube-surface-2);
  border: 1px solid var(--qtube-border);
  border-radius: var(--qtube-radius);
  cursor: pointer;
}

.button-primary,
.button-success {
  background: var(--qtube-red);
  border-color: var(--qtube-red);
  color: #fff;
}

.button-primary:hover,
.button-success:hover {
  background: var(--qtube-red-deep);
}

.button-danger,
.button-link.button-danger {
  background: var(--qtube-danger);
  border-color: #d06b6b;
  color: #fff;
}

.button.button-danger:hover,
.button-danger:hover,
.button-link.button-danger:hover {
  color: #fff;
  background: #6d0a12;
}

.confirm-cancel {
  margin-top: var(--qtube-space-3);
}

.button-secondary {
  background: transparent;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible,
.category-chip:focus-visible,
.feed-control:focus-visible,
.feed-sound:focus-visible {
  outline: 3px solid var(--qtube-focus);
  outline-offset: 2px;
}

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--qtube-surface-2);
  border: 1px solid var(--qtube-border);
  border-radius: 999px;
}

.status-badge--sensitive {
  color: #fff;
  background: var(--qtube-red-deep);
  border-color: var(--qtube-red);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--qtube-border);
}

.category-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: var(--qtube-space-3);
}

.category-chip {
  min-height: 2.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--qtube-muted);
  background: var(--qtube-surface);
  border: 1px solid var(--qtube-border);
}

.category-chip.is-active,
.category-chip[aria-current="page"] {
  color: #fff;
  background: var(--qtube-red);
  border-color: var(--qtube-red);
}

.feed-shell {
  display: grid;
  gap: var(--qtube-space-3);
}

.feed-intro {
  max-width: var(--qtube-max);
  margin: 0 auto;
  padding: var(--qtube-space-4) clamp(0.85rem, 2vw, 1.5rem) 0;
}

.feed-track {
  display: grid;
  gap: 0;
  max-height: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.feed-item {
  --feed-aspect-w: 16;
  --feed-aspect-h: 9;
  --feed-meta-reserve: 8.75rem;
  /* Available height is the dynamic viewport minus the measured sticky header.
     Safe-area top is already included in the measured header box. */
  --feed-item-height: calc(
    100vh - var(--qtube-header-height) - env(safe-area-inset-bottom, 0px)
  );
  --feed-item-height: calc(
    100dvh - var(--qtube-header-height) - env(safe-area-inset-bottom, 0px)
  );
  --feed-usable-media: calc(var(--feed-item-height) - var(--feed-meta-reserve));
  display: grid;
  min-height: var(--feed-item-height);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  /* Header offset comes only from html scroll-padding-top — do not also set
     scroll-margin-top here or navigation will double-subtract the header. */
  border-top: 1px solid var(--qtube-border);
}

.feed-card {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: var(--feed-item-height);
  gap: 0;
}

.feed-stage {
  position: relative;
  container-type: size;
  container-name: feed-stage;
  display: grid;
  align-items: center;
  justify-items: center;
  min-height: 0;
  padding: 0.55rem clamp(0.55rem, 2vw, 1rem);
  overflow: hidden;
  background: #050506;
}

.feed-cinematic-bg,
.feed-cinematic-shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.feed-cinematic-bg {
  z-index: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(28px) brightness(0.28) saturate(0.75);
  transform: scale(1.14);
}

.feed-cinematic-shade {
  z-index: 1;
  background: rgba(5, 5, 6, 0.42);
}

.feed-sharp-frame,
.feed-media-frame {
  --feed-frame-cap: 56rem;
  position: relative;
  z-index: 2;
  aspect-ratio: var(--feed-aspect-w) / var(--feed-aspect-h);
  width: min(
    100%,
    var(--feed-frame-cap),
    calc(var(--feed-usable-media) * var(--feed-aspect-w) / var(--feed-aspect-h))
  );
  max-width: 100%;
  max-height: min(100%, var(--feed-usable-media));
  height: auto;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--qtube-border);
}

@supports (width: 1cqw) {
  .feed-sharp-frame,
  .feed-media-frame {
    width: min(
      100cqw,
      var(--feed-frame-cap),
      calc(100cqh * var(--feed-aspect-w) / var(--feed-aspect-h))
    );
    max-height: 100cqh;
  }
}

.feed-item--portrait .feed-sharp-frame,
.feed-sharp-frame--portrait,
.feed-media-frame--portrait {
  --feed-frame-cap: 28rem;
}

.feed-item--square .feed-sharp-frame,
.feed-sharp-frame--square,
.feed-media-frame--square {
  --feed-frame-cap: 34rem;
}

.feed-item--landscape .feed-sharp-frame,
.feed-sharp-frame--landscape,
.feed-media-frame--landscape {
  --feed-frame-cap: 56rem;
}

.detail-media-frame {
  margin: var(--qtube-space-3) 0;
}

.feed-video,
.feed-media-frame > .video-player,
.feed-sharp-frame > .video-player {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  max-height: none;
  background: #000;
  object-fit: contain;
  border: 0;
}

.feed-volume {
  position: absolute;
  top: 0.875rem;
  right: 0.875rem;
  z-index: 4;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  max-width: calc(100% - 1.75rem);
  pointer-events: none;
}

.feed-sound,
.feed-volume__panel {
  pointer-events: auto;
}

.feed-sound {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  color: var(--qtube-text);
  background: rgba(11, 11, 13, 0.82);
  border: 1px solid var(--qtube-border);
  border-radius: 999px;
  cursor: pointer;
}

.feed-sound__icon {
  display: block;
}

.feed-sound__wave {
  display: none;
}

.feed-sound__slash {
  display: none;
}

.feed-sound[data-volume-level="muted"] .feed-sound__slash {
  display: block;
}

.feed-sound[data-volume-level="low"] .feed-sound__wave--low,
.feed-sound[data-volume-level="medium"] .feed-sound__wave--low,
.feed-sound[data-volume-level="medium"] .feed-sound__wave--mid,
.feed-sound[data-volume-level="high"] .feed-sound__wave--low,
.feed-sound[data-volume-level="high"] .feed-sound__wave--mid,
.feed-sound[data-volume-level="high"] .feed-sound__wave--high {
  display: block;
}

.feed-volume__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
  max-width: none;
  padding: 0.45rem 0.75rem;
  overflow: visible;
  background: rgba(11, 11, 13, 0.9);
  border: 1px solid var(--qtube-border);
  border-radius: 999px;
}

.feed-volume__panel[hidden] {
  display: none !important;
}

.feed-volume__label {
  display: flex;
  align-items: center;
  width: auto;
  margin: 0;
  gap: 0;
}

.feed-volume__slider {
  display: block;
  width: 8rem;
  max-width: 100%;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: var(--qtube-red);
  cursor: pointer;
  touch-action: none;
}

.feed-volume__slider:focus-visible {
  outline: 2px solid var(--qtube-focus);
  outline-offset: 2px;
}

@media (max-width: 24rem) {
  .feed-volume__slider {
    width: 6.25rem;
  }
}

.sensitive-warning {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: auto;
  background: #121218;
}

.sensitive-warning__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.85rem;
  width: min(100%, 22rem);
  padding: 1.25rem;
  margin: 1rem;
  color: var(--qtube-text);
  background: rgba(11, 11, 13, 0.92);
  border: 1px solid var(--qtube-border);
  border-radius: var(--qtube-radius-lg);
}

.sensitive-warning__panel h2 {
  margin: 0;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sensitive-warning__panel p {
  margin: 0;
  color: var(--qtube-muted);
}

.sensitive-ack-form {
  display: grid;
  gap: 0.55rem;
}

.feed-meta-panel {
  display: grid;
  gap: 0.4rem;
  padding: 0.75rem clamp(0.75rem, 2vw, 1.25rem) 0.9rem;
  background: var(--qtube-surface);
  border-top: 1px solid var(--qtube-border);
}

.feed-kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qtube-red);
}

.feed-title {
  margin: 0;
  font-size: clamp(1.15rem, 2.6vw, 1.75rem);
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

@media (max-height: 40rem) {
  .feed-item {
    --feed-meta-reserve: 7.25rem;
  }

  .feed-meta-panel {
    gap: 0.25rem;
    padding: 0.55rem 0.75rem 0.65rem;
  }

  .feed-title {
    font-size: 1.05rem;
  }

  .feed-control {
    min-height: 2.25rem;
    padding: 0.35rem 0.6rem;
  }
}

@media (min-width: 56rem) {
  .feed-stage--landscape.has-cinematic .feed-cinematic-bg {
    opacity: 0.85;
  }
}

.feed-meta,
.feed-status,
.feed-load-status {
  margin: 0;
  color: var(--qtube-muted);
}

.feed-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.feed-control {
  min-height: 2.5rem;
  padding: 0.45rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--qtube-text);
  background: rgba(25, 28, 32, 0.94);
  border: 1px solid var(--qtube-border);
  border-radius: var(--qtube-radius);
  cursor: pointer;
  text-decoration: none;
}

.feed-load-bar {
  display: none;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
  justify-content: center;
  padding: 0.85rem clamp(0.75rem, 2vw, 1.25rem);
}

.feed-load-bar:has([data-feed-load-more]:not([hidden])),
.feed-load-bar:has([data-feed-load-status]:not(:empty)) {
  display: flex;
}

.video-detail {
  width: 100%;
}

.video-player:not(.feed-video) {
  display: block;
  width: 100%;
  max-height: 75vh;
  margin: var(--qtube-space-3) 0;
  background: #000;
  object-fit: contain;
  border: 1px solid var(--qtube-border);
}

.moderation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.moderation-actions form {
  display: inline;
  margin: 0;
}

.review-list,
.video-grid {
  display: grid;
  gap: var(--qtube-space-3);
}

.review-item {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--qtube-space-3);
  padding: var(--qtube-space-3);
  background: var(--qtube-surface);
  border: 1px solid var(--qtube-border);
  border-radius: var(--qtube-radius-lg);
}

.review-thumbnail,
.profile-thumbnail {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: #000;
  border: 1px solid var(--qtube-border);
}

.video-grid {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--qtube-space-2);
  margin-top: var(--qtube-space-3);
}

progress {
  width: 100%;
  accent-color: var(--qtube-red);
}

@media (min-width: 56rem) {
  .feed-track {
    scroll-snap-type: y mandatory;
  }
}

/* Compact header + dropdown nav when desktop links no longer fit one row. */
@media (max-width: 53.75rem) {
  .site-header__inner {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 4rem;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
  }

  .brand-logo--full {
    width: 150px;
    height: 60px;
    min-width: 150px;
    min-height: 60px;
  }

  .nav-toggle {
    display: inline-flex;
    margin-left: auto;
    z-index: 2;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0.35rem 0;
    background: #08090a;
    border: 1px solid var(--qtube-border);
    border-top: 1px solid var(--qtube-red);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.55);
  }

  .site-header.is-nav-open .site-nav {
    display: flex;
  }

  .site-nav a,
  .site-nav button,
  .site-nav .inline-form {
    display: flex;
    width: 100%;
    margin: 0;
  }

  .site-nav a,
  .site-nav button {
    justify-content: flex-start;
    min-height: 2.75rem;
    padding: 0.85rem 1.15rem;
    border-bottom: 1px solid color-mix(in srgb, var(--qtube-border) 70%, transparent);
    border-left: 3px solid transparent;
  }

  .site-nav a[aria-current="page"],
  .site-nav a:hover,
  .site-nav button:hover {
    color: var(--qtube-text);
    background: var(--qtube-surface);
    border-bottom-color: color-mix(in srgb, var(--qtube-border) 70%, transparent);
    border-left-color: var(--qtube-red);
  }

  .review-item {
    grid-template-columns: 1fr;
  }

  table {
    display: block;
    overflow-x: auto;
  }
}

.catalogue-body main {
  max-width: var(--qtube-catalogue-max);
}

.catalogue-shell {
  display: grid;
  gap: var(--qtube-space-4);
}

.catalogue-intro {
  display: grid;
  gap: var(--qtube-space-2);
}

.catalogue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0;
}

.catalogue-sort {
  margin: 0;
  color: var(--qtube-muted);
  font-size: 0.92rem;
}

.catalogue-sort__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.catalogue-sort__link.is-active {
  color: var(--qtube-fg);
  font-weight: 700;
  text-decoration: none;
}

.feed-engagement,
.detail-counts {
  margin: 0.35rem 0 0;
  color: var(--qtube-muted);
  font-size: 0.92rem;
}

.feed-like-form {
  display: inline;
}

.feed-control.is-liked,
.button.is-liked {
  border-color: var(--qtube-red);
  color: var(--qtube-red);
}

.detail-engagement {
  margin-top: 0.85rem;
}

.catalogue-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.catalogue-card {
  display: grid;
  gap: 0.75rem;
  min-width: 0;
}

.catalogue-card__media {
  display: block;
  color: inherit;
  text-decoration: none;
}

.catalogue-card__stage {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #050506;
  border: 1px solid var(--qtube-border);
}

.catalogue-card__blur {
  position: absolute;
  inset: -8%;
  background-position: center;
  background-size: cover;
  filter: blur(22px) brightness(0.28) saturate(0.75);
  transform: scale(1.08);
  pointer-events: none;
}

.catalogue-card__thumb {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}

.catalogue-card__fallback,
.catalogue-card__sensitive {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.4rem;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  text-align: center;
  background: #121218;
  color: var(--qtube-text);
}

.catalogue-card__sensitive-label {
  font-family: var(--qtube-font-display);
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.catalogue-card__sensitive-copy {
  color: var(--qtube-muted);
  font-size: 0.9rem;
}

.catalogue-card__duration {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  z-index: 2;
  padding: 0.2rem 0.45rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  background: rgba(11, 11, 13, 0.82);
  border: 1px solid var(--qtube-border);
}

.catalogue-card__body {
  display: grid;
  gap: 0.35rem;
  min-width: 0;
}

.catalogue-card__kicker {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--qtube-red);
}

.catalogue-card__title {
  margin: 0;
  font-size: 1.2rem;
  text-transform: uppercase;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.catalogue-card__title a,
.catalogue-card__kicker a,
.catalogue-card__meta a,
.catalogue-card__feed-link {
  color: inherit;
  text-decoration: none;
}

.catalogue-card__title a:hover,
.catalogue-card__kicker a:hover,
.catalogue-card__meta a:hover,
.catalogue-card__feed-link:hover {
  color: #fff;
  text-decoration: underline;
}

.catalogue-card__meta,
.catalogue-card__links {
  margin: 0;
  color: var(--qtube-muted);
  font-size: 0.92rem;
}

.catalogue-card__feed-link {
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.catalogue-card__media:focus-visible,
.catalogue-card__title a:focus-visible,
.catalogue-card__feed-link:focus-visible {
  outline: 2px solid var(--qtube-focus);
  outline-offset: 3px;
}

.catalogue-pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0 1rem;
}

.catalogue-pagination__status {
  margin: 0;
  color: var(--qtube-muted);
}

@media (min-width: 36rem) {
  .catalogue-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 56rem) {
  .catalogue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 72rem) {
  .catalogue-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.site-footer {
  margin-top: var(--qtube-space-5);
  padding: var(--qtube-space-3) clamp(0.85rem, 2vw, 1.5rem)
    calc(var(--qtube-space-4) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--qtube-border);
  background: #08090a;
}

.site-footer__inner {
  display: block;
  max-width: calc(var(--qtube-max) + 8rem);
  margin: 0 auto;
  text-align: center;
}

.site-footer__credit {
  margin: 0;
  padding: 0.35rem 0;
  color: var(--qtube-muted);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

body.feed-body .site-footer {
  display: none;
}

.feed-utility-links {
  margin: var(--qtube-space-2) 0 0;
  font-size: 0.88rem;
  color: var(--qtube-muted);
}

.feed-utility-links a {
  color: var(--qtube-muted);
  text-decoration: none;
}

.feed-utility-links a:hover {
  color: var(--qtube-text);
}

.users-shell,
.saiko-shell {
  max-width: var(--qtube-max);
  margin: 0 auto;
  padding: var(--qtube-space-4) clamp(0.85rem, 2vw, 1.5rem) var(--qtube-space-5);
  display: grid;
  gap: var(--qtube-space-3);
}

.users-intro,
.saiko-intro {
  display: grid;
  gap: var(--qtube-space-2);
}

.users-table-wrap {
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.users-table th,
.users-table td {
  padding: 0.7rem 0.65rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--qtube-border);
}

.users-table th {
  color: var(--qtube-muted);
  font-weight: 600;
  white-space: nowrap;
}

.users-table__muted {
  color: var(--qtube-muted);
}

.users-table .inline-form {
  display: inline-flex;
  margin: 0;
}

.users-table .inline-form button {
  min-height: 2.25rem;
  padding: 0.4rem 0.75rem;
  font-size: 0.85rem;
}

.saiko-contract__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qtube-space-2);
  align-items: center;
}

.saiko-contract__address {
  display: block;
  flex: 1 1 16rem;
  padding: 0.75rem 0.85rem;
  overflow-wrap: anywhere;
  word-break: break-all;
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
  font-size: 0.88rem;
  background: var(--qtube-surface-2);
  border: 1px solid var(--qtube-border);
  border-radius: var(--qtube-radius);
}

.saiko-copy-status {
  min-height: 1.4em;
  margin: var(--qtube-space-2) 0 0;
  color: var(--qtube-success);
  font-size: 0.9rem;
}

.saiko-warning {
  margin: var(--qtube-space-3) 0 0;
  color: var(--qtube-muted);
}

.saiko-actions {
  display: grid;
  gap: var(--qtube-space-2);
}

.saiko-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.saiko-links a {
  color: var(--qtube-muted);
}

.saiko-links a:hover {
  color: var(--qtube-text);
}

.saiko-disclaimer {
  margin: 0;
  color: var(--qtube-muted);
  font-size: 0.88rem;
}

@media (max-width: 40rem) {
  .brand {
    min-width: 7rem;
  }

  .brand-logo--full {
    /* Keep an explicit non-auto box on narrow phones so WebKit cannot
       collapse the raster logo to 0×0 inside the sticky header flex row. */
    width: 112px;
    height: 45px;
    min-width: 112px;
    min-height: 45px;
  }
}

/* =========================================================================
   SAIKO tip controls + modal (feed / detail)
   ========================================================================= */

.tip-control,
[data-tip-open] {
  cursor: pointer;
}

.tip-total,
[data-tip-total] {
  color: var(--qtube-muted);
  font-size: 0.92rem;
}

.is-sensitive-blocked [data-tip-open],
.is-sensitive-blocked [data-tip-total],
.is-sensitive-blocked .tip-control {
  display: none !important;
}

body.tip-modal-open {
  overflow: hidden;
}

.tip-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: var(--qtube-space-3);
}

.tip-modal[hidden] {
  display: none !important;
}

.tip-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
}

.tip-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 26rem);
  display: grid;
  gap: var(--qtube-space-2);
  padding: var(--qtube-space-3);
  background: var(--qtube-surface);
  border: 1px solid var(--qtube-border);
  border-radius: var(--qtube-radius-lg);
  box-shadow: var(--qtube-shadow);
}

.tip-modal__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--qtube-space-2);
}

.tip-modal__title {
  margin: 0;
  font-family: var(--qtube-font-display);
  font-size: 1.45rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.tip-modal__close {
  flex: 0 0 auto;
  min-width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--qtube-muted);
  background: transparent;
  border: 1px solid transparent;
}

.tip-modal__close:hover {
  color: var(--qtube-text);
  border-color: var(--qtube-border);
}

.tip-modal__video {
  margin: 0;
  color: var(--qtube-text);
  font-size: 0.98rem;
}

.tip-modal__notice {
  margin: 0;
  color: var(--qtube-muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.tip-modal__amount-field {
  display: grid;
  gap: 0.35rem;
}

.tip-modal__amount-label {
  color: var(--qtube-muted);
  font-size: 0.92rem;
}

.tip-modal__amount-input {
  font-family: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, monospace;
  letter-spacing: 0.02em;
}

.tip-modal__chooser {
  margin-top: var(--qtube-space-1);
}

.tip-modal__chooser-cancel {
  justify-self: start;
}

.tip-modal__status {
  margin: 0;
  min-height: 1.25em;
  color: var(--qtube-muted);
  font-size: 0.92rem;
}

.tip-modal__status.is-error {
  color: #ffb4b4;
}

.tip-modal__status[hidden] {
  display: none;
}

.tip-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--qtube-space-2);
  justify-content: flex-end;
  margin-top: var(--qtube-space-1);
}

.tip-modal__wallet-option {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}