/* goonlab — dark lab theme. Single deliberate theme; no external assets. */

/* "after dark" palette: plum-black ground, hot magenta -> violet heat */
:root {
  --ground: #0f0a14;
  --panel: #171021;
  --panel-2: #1e152a;
  --line: #2d2139;
  --text: #f2edf6;
  --muted: #a394b3;
  --accent: #ff4d8d;
  --accent-dim: #7a2c50;
  --accent-ink: #2a0714;
  --grad: linear-gradient(135deg, #ff6aa5 0%, #a855f7 100%);
  --glow: rgba(255, 77, 141, 0.15);
  --glow-strong: rgba(255, 77, 141, 0.30);
  --tint: rgba(255, 77, 141, 0.10);
  --ok: #7ce3a8;
  --ok-dim: #2d5c42;
  --warn: #e8c468;
  --danger: #e37b7b;
  --mono: "Cascadia Code", Consolas, "JetBrains Mono", "SF Mono", monospace;
  --sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { color-scheme: dark; }

body {
  background: radial-gradient(90rem 40rem ellipse at 50% -10rem, #1c1226 0%, var(--ground) 55%) fixed var(--ground);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.shell { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }

main.shell { flex: 1; padding-block: 2rem 4rem; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }

button { font: inherit; cursor: pointer; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- header / nav ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--line);
  background: rgba(15, 10, 20, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; }

.wordmark, .footer-brand {
  font-family: var(--sans);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
/* BOXED WORDMARK — the original "goon[lab]" lockup, and the live one again
   since 2026-09-09. It sat out the payment-processor review (2026-08-27 to
   2026-09-09) behind GOONLAB_BOXED_LOGO; the favicon is this box. */
.wordmark-box {
  background: var(--grad);
  color: var(--accent-ink);
  border-radius: 8px;
  padding: 0.02em 0.32em 0.06em;
  margin-left: 0.12em;
  box-shadow: 0 2px 14px var(--glow-strong);
}

/* The plain mark (GOONLAB_BOXED_LOGO=0): one word, no box. "lab" is picked
   out in the accent colour and underlined with a thin gradient rule, so the
   brand still reads as two halves without borrowing anyone's lockup. */
.wordmark-soft {
  color: var(--accent);
  margin-left: 0.06em;
  padding-bottom: 0.06em;
  border-bottom: 2px solid transparent;
  border-image: var(--grad) 1;
}
.footer-brand .wordmark-soft { color: var(--muted); border-image: none; }
.footer-brand { font-size: 1.05rem; color: var(--muted); }
.footer-brand .wordmark-box { box-shadow: none; }

/* one row, always: the links never wrap under the search (the longer
   "Your Generations" label pushed "Log out" onto a second row, 2026-09-21);
   the search box is what gives way when the row is tight */
.nav-links { display: flex; align-items: center; gap: 1rem; flex-wrap: nowrap; flex: 0 0 auto; white-space: nowrap; }

/* Mobile-layer hooks. The phone/tablet sheet (css/mobile.css) is linked
   with media="(max-width: 899px)" and turns these on; on a desktop
   viewport they do not exist. */
.nav-tools, .menu-head, .menu-only, .nav-backdrop, .tabbar { display: none; }
.nav-balance:hover { text-decoration: none; }
.toolbar-search {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); padding: 0.35rem 0.7rem; font: inherit;
}
.mod-search { min-width: 24rem; }

.nav-search { flex: 1 1 160px; min-width: 120px; max-width: 420px; display: flex; }
.nav-search input {
  flex: 1;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-right: none;
  border-radius: 999px 0 0 999px;
  color: var(--text);
  padding: 0.5rem 1.1rem;
  font: inherit;
  min-width: 0;
  transition: border-color 0.12s ease;
}
.nav-search input:focus { border-color: var(--accent); outline: none; }
.nav-search button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 0 999px 999px 0;
  color: var(--muted);
  padding: 0 1rem;
  font-size: 1.1rem;
  transition: color 0.12s ease;
}
.nav-search button:hover { color: var(--accent); }
.nav-accent { color: var(--accent); }

.nav-link { color: var(--muted); font-size: 0.95rem; white-space: nowrap; }
.nav-link:hover { color: var(--text); text-decoration: none; }
.nav-dim { font-size: 0.85rem; }
/* the Discord icon at the end of the link row; in the phone menu it is a
   row of its own, with its "Discord" label beside the icon */
.nav-discord { display: inline-flex; align-items: center; }
.nav-discord svg { width: 20px; height: 20px; flex: none; fill: currentColor; }

.as-button { background: none; border: none; color: var(--muted); padding: 0; }
.as-button:hover { color: var(--text); }

.inline-form { display: inline; }

.chip {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
}
.chip:hover { text-decoration: none; border-color: var(--accent); }

/* ---- buttons ---- */

/* Buttons are deliberately NOT the brand-pink pill (anonymity: no visual
   kinship with other adult sites' rounded pink gradients) — solid deep
   violet, squared corners, flat shadow. */
.btn {
  display: inline-block;
  background: #5b21b6;
  color: #fff;
  border: 1px solid #6d28d9;
  border-radius: 6px;
  padding: 0.6rem 1.35rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.btn:hover { background: #6d28d9; border-color: #8b5cf6; text-decoration: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }

.btn-ghost { background: transparent; color: var(--text); border: 1px solid var(--line); box-shadow: none; font-weight: 600; }
.btn-ghost:hover { background: transparent; border-color: #8b5cf6; color: #a78bfa; }

.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.85rem; }
.btn-lg { padding: 0.75rem 1.6rem; font-size: 1.05rem; }
.btn-block { display: block; width: 100%; }

/* ---- creator pages + analytics ---- */
.creator-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 1rem; padding: 1.3rem 1.5rem; margin-bottom: 1.4rem;
}
.creator-id { display: flex; gap: 1rem; align-items: flex-start; }
.creator-avatar {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--line); flex: none;
}
.creator-avatar-fallback {
  display: flex; align-items: center; justify-content: center;
  background: var(--panel-2); color: var(--accent);
  font-size: 1.8rem; font-weight: 800;
}
.creator-name { margin: 0 0 0.2rem; font-size: 1.4rem; }
.creator-meta { color: var(--muted); font-size: 0.88rem; margin: 0 0 0.4rem; }
.creator-bio { font-size: 0.92rem; max-width: 42rem; margin: 0 0 0.5rem; }
.creator-actions { display: flex; gap: 0.5rem; flex: none; }
.chart-panel { padding: 1rem 1.3rem; margin-bottom: 1rem; }
.chart { width: 100%; height: 130px; display: block; }

/* ---- library folders ---- */
.folder-bar {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
  margin-bottom: 1rem;
}
.folder-chip {
  display: inline-block; padding: 0.35rem 0.85rem;
  border: 1px solid var(--line); border-radius: 8px;
  color: var(--text); font-size: 0.88rem; background: var(--panel-2);
}
.folder-chip:hover { border-color: #8b5cf6; text-decoration: none; }
.folder-chip.is-active { border-color: #8b5cf6; color: #c4b5fd; }
.folder-chip.drop-ready { border-color: var(--accent); background: var(--panel); }
.folder-new input[type="text"] {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); padding: 0.3rem 0.6rem;
  font-size: 0.85rem; width: 9rem;
}
.folder-manage { display: flex; gap: 0.6rem; margin-bottom: 1rem; }
.folder-manage input[type="text"] {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 8px; color: var(--text); padding: 0.3rem 0.6rem;
  font-size: 0.85rem;
}
/* chunked-upload progress badge on art thumbs */
.thumb-pct {
  position: absolute; left: 4px; bottom: 4px; z-index: 2;
  background: rgba(0, 0, 0, 0.7); color: var(--text);
  font-family: var(--mono); font-size: 0.66rem;
  padding: 0.02rem 0.3rem; border-radius: 4px;
  pointer-events: none;
}
.thumb-pct:empty { display: none; }
.thumb-pct.is-err { color: var(--danger); }
/* failed uploads: the tile itself is the retry button */
.thumb:has(.thumb-pct.is-err) { cursor: pointer; outline: 1px solid var(--danger); }
/* inline text-button actions in upload notes (ref retry/remove) */
.note-act { background: none; border: 0; padding: 0; font: inherit;
            color: var(--accent); text-decoration: underline;
            cursor: pointer; }

.video-manage select {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: 6px; color: var(--text); font-size: 0.78rem;
  padding: 0.15rem 0.3rem; max-width: 9rem; min-width: 0;
}

/* ---- modal (not-enough-tokens etc.) ---- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 4, 14, 0.72);
  display: flex; align-items: center; justify-content: center;
  /* a box taller than the screen (the four mode blocks on a phone) scrolls
     instead of losing its top and bottom: the backdrop is the scroller and
     "safe" keeps the panel's top reachable when it is centred */
  overflow-y: auto; align-items: safe center; padding: 1rem 0;
}
/* display:flex would otherwise BEAT the hidden attribute and pin the modal
   over the whole page (adversarial-review critical) */
.modal-backdrop[hidden] { display: none; }
/* the same trap generalized: no class may ever out-specify hidden */
[hidden] { display: none !important; }
.modal-panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem 1.6rem;
  max-width: 26rem; width: calc(100% - 2rem);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55);
  /* a panel taller than the viewport (the publishing agreement on a
     phone) scrolls inside itself instead of running off screen */
  max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  overflow-y: auto; overscroll-behavior: contain;
}
.publish-modal-panel { max-width: 34rem; }
.modal-panel h2 { margin: 0 0 0.6rem; font-size: 1.15rem; }
.modal-panel p { color: var(--muted); margin: 0 0 1rem; }

/* ---- messages / notices ---- */

.messages { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; }

.message, .notice {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  background: linear-gradient(90deg, var(--tint), transparent 40%), var(--panel);
  border-radius: var(--radius);
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}
.message-error, .notice-warn {
  border-left-color: var(--warn);
  background: linear-gradient(90deg, rgba(232, 196, 104, 0.10), transparent 40%), var(--panel);
}
.notice { margin-bottom: 1.5rem; }

/* ---- landing ---- */

.hero { padding-block: 4.5rem 3.5rem; text-align: center; }

.hero-title { font-size: clamp(2.1rem, 5.5vw, 3.4rem); line-height: 1.12; margin-bottom: 1.2rem; }

.hero-sub { color: var(--muted); max-width: 42rem; margin: 0 auto 2rem; font-size: 1.1rem; }

.hero-actions { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; }

.steps, .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; padding-block: 1.5rem; }

.step, .feature {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1.5rem;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.step:hover, .feature:hover { box-shadow: 0 8px 24px var(--glow); border-color: var(--accent-dim); }
.step h3, .feature h3 { font-size: 1.02rem; margin-bottom: 0.5rem; }
.step p, .feature p { color: var(--muted); font-size: 0.95rem; }

.step-n { font-family: var(--mono); color: var(--accent); font-size: 0.85rem; display: block; margin-bottom: 0.8rem; }

@media (max-width: 720px) { .steps, .features { grid-template-columns: 1fr; } }

/* ---- generic page bits ---- */

.page-head { margin-bottom: 1.8rem; }
.page-head h1 { font-size: 1.7rem; margin-bottom: 0.3rem; }
.page-sub { color: var(--muted); }

.section-title { font-size: 1.1rem; margin: 2.2rem 0 0.9rem; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.empty-note { color: var(--muted); padding: 1.5rem 0; }

.pill {
  font-family: var(--mono);
  font-size: 0.72rem;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}
.pill-ok { color: var(--ok); border-color: var(--ok-dim); }
.pill-warn { color: var(--warn); border-color: var(--warn); }
.pill-paid { color: var(--ok); border-color: var(--ok-dim); }
.pill-pending { color: var(--warn); border-color: var(--warn); }
.pill-failed, .pill-refunded { color: var(--danger); border-color: var(--danger); }
.pill-cancelled { color: var(--muted); }
.pill-bad { color: var(--danger); border-color: var(--danger); }

/* ---- reports (watch page) + moderation panel ---- */
.report-box { display: inline-block; }
.report-box > summary { list-style: none; cursor: pointer; display: inline-block; }
.report-box > summary::-webkit-details-marker { display: none; }
.report-form {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-top: 0.6rem; padding: 0.9rem 1rem; max-width: 26rem;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.btn-danger { color: var(--danger); border-color: var(--danger); }
.mod-table { width: 100%; border-collapse: collapse; margin: 0.6rem 0 1.2rem; font-size: 0.92rem; }
.mod-table th, .mod-table td {
  text-align: left; vertical-align: top; padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
}
.mod-table th { color: var(--muted); font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; }
.mod-table .inline-form { display: inline-flex; gap: 0.35rem; margin: 0 0.35rem 0.35rem 0; align-items: center; }
.mod-table input[type="text"] { max-width: 11rem; font-size: 0.85rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; }
.panel.narrow { max-width: 34rem; margin: 2rem auto; }

.mono { font-family: var(--mono); font-size: 0.85em; }

/* ---- forms ---- */

.stack-form { display: flex; flex-direction: column; gap: 1rem; }

.stack-form div { display: flex; flex-direction: column; gap: 0.35rem; }

.stack-form label { font-size: 0.9rem; color: var(--muted); }

.stack-form input, .stack-form textarea {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font: inherit;
}
.stack-form input:focus, .stack-form textarea:focus { border-color: var(--accent); outline: none; }

.stack-form .helptext { font-size: 0.8rem; color: var(--muted); }
.stack-form .errorlist { list-style: none; color: var(--danger); font-size: 0.85rem; }

.stack-form select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font: inherit;
}
.stack-form input[type="file"] { color: var(--muted); font-size: 0.9rem; }
.stack-form input[type="file"]::file-selector-button {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.4rem 0.9rem;
  margin-right: 0.7rem;
  font: inherit;
  cursor: pointer;
}

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

.ref-fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem 1.2rem; }
.ref-fieldset legend { font-size: 0.9rem; color: var(--text); padding: 0 0.4rem; }
.ref-fieldset .muted { color: var(--muted); }

/* upload fieldsets: art-mode radios, music order list, advanced options */
.radio-stack { margin-top: 0.7rem; }
.radio-stack ul, .radio-stack div > div { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; }
.radio-stack li label, .radio-stack label {
  display: flex; align-items: flex-start; gap: 0.55rem;
  font-size: 0.86rem; line-height: 1.35; cursor: pointer;
}
.radio-stack input[type="radio"], .radio-stack input[type="checkbox"] {
  margin-top: 0.2rem; accent-color: var(--accent); flex: none;
}
.music-order { list-style: none; margin: 0.7rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; counter-reset: track; }
.music-order li {
  display: flex; align-items: center; gap: 0.5rem;
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 0.4rem 0.6rem; font-size: 0.85rem;
}
.music-order li::before { counter-increment: track; content: counter(track) "."; color: var(--muted); flex: none; }
.music-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.music-move {
  background: transparent; border: 1px solid var(--line); border-radius: 4px;
  color: var(--text); cursor: pointer; padding: 0.05rem 0.4rem; font-size: 0.8rem;
}
.music-move:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.music-move:disabled { opacity: 0.3; cursor: default; }
.adv-options { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.8rem 1.2rem; }
.adv-options .ref-fieldset { margin-top: 0.9rem; }
.adv-options summary { cursor: pointer; font-size: 0.9rem; color: var(--muted); }
.adv-options summary:hover { color: var(--text); }
.adv-options[open] summary { margin-bottom: 0.9rem; color: var(--text); }

.custom-warning { margin-top: 0.6rem; font-size: 0.88rem; }
.roster-hint { color: var(--warn) !important; }
.confirm-row { margin-top: 0.5rem; border-color: var(--warn); }

/* roster multi-select: searchable chip picker (scales to thousands) */
.char-picker { display: flex; flex-direction: column; gap: 0.5rem; }

.char-selected { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.char-selected:empty { display: none; }
.char-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--tint);
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 0.25rem 0.5rem 0.25rem 0.85rem;
  font-size: 0.88rem;
}
.char-chip-x {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.25rem;
}
.char-chip-x:hover { color: var(--danger); }

.char-search-wrap { position: relative; }
#char-search {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text);
  padding: 0.55rem 1.1rem;
  font: inherit;
}
#char-search:focus { border-color: var(--accent); outline: none; }

.char-suggestions[hidden] { display: none; }
.char-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: min(420px, 100%);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
}
.char-suggestion {
  background: none;
  border: none;
  color: var(--text);
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  font: inherit;
  font-size: 0.92rem;
}
.char-suggestion:hover { background: var(--tint); color: var(--accent); }

.toggle-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start;
  gap: 0.7rem !important;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  cursor: pointer;
}
.toggle-row input[type="checkbox"] { margin-top: 0.25rem; accent-color: var(--accent); }
.toggle-row span { display: flex; flex-direction: column; gap: 0.15rem; }
.toggle-row strong { font-size: 0.92rem; font-weight: 600; }
.toggle-row small { color: var(--muted); font-size: 0.8rem; }

.estimate-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  border: 1px solid var(--accent-dim);
  border-radius: 12px;
  background: linear-gradient(90deg, var(--tint), transparent 55%), var(--panel-2);
  padding: 1rem 1.2rem;
}
.estimate-label { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.estimate-rows { display: flex; flex-direction: column; gap: 0.3rem; }
.estimate-row { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.92rem; color: var(--muted); }
.estimate-row .mono { color: var(--text); }
.estimate-total { border-top: 1px solid var(--line); padding-top: 0.45rem; margin-top: 0.2rem; color: var(--text); font-weight: 600; }
.estimate-value { font-family: var(--mono); font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.estimate-note { font-size: 0.78rem; color: var(--muted); }

.form-foot { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; }
.form-cost { font-family: var(--mono); color: var(--muted); font-size: 0.9rem; }

.auth-wrap {
  max-width: 440px;
  margin: 2.5rem auto 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.4rem;
  position: relative;
}
.auth-wrap::before {
  content: "";
  position: absolute;
  inset: -6rem -8rem auto;
  height: 22rem;
  background: radial-gradient(24rem 14rem ellipse at 50% 30%, var(--glow) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.auth-brand {
  align-self: center;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  display: inline-flex;
  align-items: center;
}
.auth-brand:hover { text-decoration: none; }
.auth-brand .wordmark-box {
  background: var(--grad);
  color: var(--accent-ink);
  border-radius: 10px;
  padding: 0.02em 0.32em 0.06em;
  margin-left: 0.12em;
  box-shadow: 0 4px 24px var(--glow-strong);
}

.auth-panel {
  max-width: 440px;
  margin: 0 auto 3rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid transparent;
  border-image: var(--grad) 1 0 0 0;
  border-radius: var(--radius);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}
.auth-wrap .auth-panel { margin: 0; }
.auth-panel h1 { font-size: 1.35rem; }
.auth-sub { color: var(--muted); font-size: 0.92rem; margin-top: -0.8rem; }
.auth-alt { color: var(--muted); font-size: 0.9rem; }
.auth-note {
  color: var(--muted);
  font-size: 0.78rem;
  text-align: center;
  opacity: 0.75;
}
.form-errors {
  background: rgba(227, 123, 123, 0.12);
  border: 1px solid rgba(227, 123, 123, 0.4);
  border-radius: var(--radius);
  color: var(--danger);
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
}
.form-errors p { margin: 0; }
.pw-wrap { position: relative; display: flex; }
.pw-wrap input { flex: 1; padding-right: 3.4rem; }
.pw-toggle {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.5rem;
}
.pw-toggle:hover { color: var(--accent); }
.profile-line { color: var(--muted); display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }

/* ---- pricing ---- */

.pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
@media (max-width: 720px) { .pack-grid { grid-template-columns: 1fr; } }

.pack {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.8rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.pack-featured {
  border-color: var(--accent);
  box-shadow: 0 8px 30px var(--glow);
}

.pack-flag {
  position: absolute;
  top: -0.7rem;
  left: 1.2rem;
  background: var(--ground);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 0.75rem;
  padding: 0 0.5rem;
}

.pack h3 { font-size: 1rem; color: var(--muted); }

.pack-tokens { font-family: var(--mono); font-size: 2rem; font-weight: 700; line-height: 1; }
.pack-tokens span { font-size: 0.9rem; font-weight: 400; color: var(--muted); }

.pack-price { color: var(--text); font-size: 1.1rem; }
.pack-hint { color: var(--muted); font-size: 0.82rem; margin-bottom: 0.5rem; }

/* ---- receipt / tables ---- */

.receipt { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.receipt-row { display: flex; justify-content: space-between; padding: 0.7rem 1rem; }
.receipt-row + .receipt-row { border-top: 1px solid var(--line); }
.receipt-row span { color: var(--muted); }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }

table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
th, td { text-align: left; padding: 0.6rem 0.9rem; white-space: nowrap; }
th { font-family: var(--mono); font-size: 0.78rem; color: var(--muted); font-weight: 500; border-bottom: 1px solid var(--line); }
tbody tr + tr td { border-top: 1px solid var(--line); }

.delta-pos { color: var(--ok); }
.delta-neg { color: var(--danger); }

/* ---- job queue ---- */

.job-list { display: flex; flex-direction: column; gap: 0.7rem; }

.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.9rem 1.2rem;
}

.job-prompt { font-size: 0.97rem; }
.job-meta { color: var(--muted); font-size: 0.83rem; font-family: var(--mono); display: flex; align-items: center; gap: 0.45rem; }
.job-error { color: var(--danger); font-size: 0.85rem; margin-top: 0.3rem; }

.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.is-running .status-dot { background: var(--warn); animation: pulse 1.4s ease-in-out infinite; }
.is-claimed .status-dot { background: var(--warn); }
.is-complete .status-dot { background: var(--ok); }
.is-failed .status-dot, .is-cancelled .status-dot { background: var(--danger); }

@keyframes pulse { 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .is-running .status-dot { animation: none; } }

/* ---- live progress bar (job card + detail) ---- */

.progress-wrap { display: flex; flex-direction: column; gap: 0.35rem; }
.progress-track {
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  min-width: 8px;
  transition: width 0.6s ease;
  position: relative;
}
.progress-fill.is-live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  animation: progress-sheen 1.8s linear infinite;
}
@keyframes progress-sheen {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) { .progress-fill.is-live::after { animation: none; } }
.progress-caption {
  color: var(--muted);
  font-size: 0.8rem;
  font-family: var(--mono);
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
}
.job-card .progress-track { height: 5px; margin-top: 0.45rem; }

/* ---- job detail ---- */

.job-detail { display: flex; flex-direction: column; gap: 1rem; }
.job-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.job-detail-title { min-width: 0; }
.job-detail .job-prompt { font-size: 1.02rem; margin-bottom: 0.4rem; }

.job-stats { display: flex; gap: 1rem; flex-wrap: wrap; }
.job-stat {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 8.5rem;
}
.job-stat-label { font-family: var(--mono); font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.job-stat-value { font-family: var(--mono); font-size: 1.15rem; font-weight: 700; color: var(--accent); }

.job-timeline {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.4rem 0;
  display: flex;
  flex-direction: column;
}
.timeline-row {
  display: grid;
  grid-template-columns: 5rem 12rem 1fr 3.5rem;
  gap: 0.8rem;
  align-items: baseline;
  padding: 0.45rem 1.2rem;
  font-size: 0.9rem;
}
.timeline-row + .timeline-row { border-top: 1px solid var(--line); }
.timeline-time { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
/* one line, always: an over-long stage name is clipped rather than allowed
   to wrap this narrow column into three rows */
.timeline-stage {
  color: var(--accent); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.timeline-detail { color: var(--muted); overflow-wrap: anywhere; }
.timeline-cost { text-align: right; color: var(--muted); font-size: 0.8rem; }
@media (max-width: 700px) {
  .timeline-row { grid-template-columns: 4rem 1fr; }
  .timeline-detail { grid-column: 1 / -1; }
  .timeline-cost { display: none; }
}

/* ---- video grids / watch ---- */

/* ---- homepage ---- */

.home-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  background:
    radial-gradient(45rem 16rem ellipse at 12% 0%, rgba(255, 106, 165, 0.11), transparent 60%),
    radial-gradient(40rem 16rem ellipse at 95% 100%, rgba(168, 85, 247, 0.10), transparent 60%),
    var(--panel);
  border: 1px solid var(--accent-dim);
  border-radius: 14px;
  padding: 1.8rem 2rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 8px 30px var(--glow);
}
.home-cta h1 { font-size: 1.6rem; margin-bottom: 0.3rem; }
.home-cta p { color: var(--muted); font-size: 0.98rem; }

.home-tags { margin-bottom: 1.6rem; }
/* the owner's welcome message between the studio banner and the tags */
.home-note p + p { margin-top: 0.7rem; }

.home-section { margin-bottom: 2.2rem; }
.home-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}
.home-section-head h2 { font-size: 1.1rem; }
.view-all { font-family: var(--mono); font-size: 0.83rem; color: var(--muted); white-space: nowrap; }
.view-all:hover { color: var(--accent); text-decoration: none; }

.video-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3rem) / 4);
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 0.6rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) var(--panel);
}
.video-strip::-webkit-scrollbar { height: 10px; }
.video-strip::-webkit-scrollbar-track { background: var(--panel); border-radius: 8px; }
.video-strip::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 8px; }
.video-strip::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.video-strip > .video-card { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; }
/* cards of different height (an "older version" pill, a two-line title)
   keep their buttons on one line across the strip */
.video-strip > .video-card .video-body { flex: 1; }
.video-strip > .video-card .video-foot { margin-top: auto; }
@media (max-width: 1000px) { .video-strip { grid-auto-columns: calc((100% - 2rem) / 3); } }
@media (max-width: 700px) { .video-strip { grid-auto-columns: calc((100% - 1rem) / 2); } }

/* ---- browse toolbar / tags / pagination ---- */

.browse-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.toolbar-form { display: flex; gap: 1rem; flex-wrap: wrap; }
.toolbar-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--muted); }
.toolbar-item select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.88rem;
}

.active-filters { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.chip-filter {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  padding: 0.15rem 0.7rem;
}
.chip-filter a { color: var(--muted); margin-left: 0.3rem; text-decoration: none; }
.chip-filter a:hover { color: var(--danger); }

.tag-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.2rem; }
.tag-chip {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--accent);
  background: var(--tint);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.25rem 0.85rem;
  transition: all 0.12s ease;
}
.tag-chip:hover { background: var(--accent); color: var(--accent-ink); text-decoration: none; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2rem; }
.page-status {
  font-family: var(--mono);
  font-size: 0.85rem;
  color: var(--accent-ink);
  background: var(--grad);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-weight: 700;
}
.result-count { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); margin-bottom: 0.8rem; }

.fav-btn {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.8rem;
  font-family: var(--mono);
  padding: 0.2rem 0.7rem;
  transition: all 0.12s ease;
}
.fav-btn:hover { color: var(--danger); border-color: var(--danger); transform: scale(1.06); }
.fav-btn.is-fav {
  color: var(--danger);
  border-color: var(--danger);
  background: rgba(227, 123, 123, 0.12);
}
.fav-btn:active { transform: scale(0.92); }
.fav-lg { font-size: 0.95rem; padding: 0.35rem 1rem; }
@media (prefers-reduced-motion: reduce) {
  .fav-btn, .fav-btn:hover, .fav-btn:active { transform: none; }
  .video-thumb img, .thumb-fallback, .video-card:hover .video-thumb img,
  .video-card:hover .thumb-fallback { transition: none; transform: none; }
}

.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }

.video-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.video-card:hover { box-shadow: 0 10px 28px var(--glow); border-color: var(--accent-dim); }

.video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--panel-2);
  overflow: hidden;
}
.video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.18s ease;
}
.video-card:hover .video-thumb img { transform: scale(1.045); }
.thumb-fallback {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--accent);
  font-size: 1.8rem;
  background:
    radial-gradient(60% 90% at 30% 20%, rgba(255, 106, 165, 0.16), transparent 65%),
    radial-gradient(70% 90% at 80% 85%, rgba(168, 85, 247, 0.15), transparent 65%),
    var(--panel-2);
  transition: transform 0.18s ease;
}
.video-card:hover .thumb-fallback { transform: scale(1.045); }
.video-duration {
  position: absolute; right: 0.5rem; bottom: 0.5rem;
  background: rgba(0, 0, 0, 0.75);
  font-family: var(--mono); font-size: 0.72rem;
  padding: 0.05rem 0.4rem; border-radius: 4px;
}

.video-body { padding: 0.8rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.video-title {
  color: var(--text);
  font-size: 0.95rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.video-meta { color: var(--muted); font-size: 0.8rem; }
.video-owner { color: var(--muted); }
/* wrap: the manage controls (pill/Publish/folder/✕) are wider than a grid
   card, and .video-card's overflow:hidden CLIPS whatever doesn't fit */
.video-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem 0.6rem; flex-wrap: wrap; }
.video-manage { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
/* the state pill ("Awaiting approval — usually live within 24 hours") is
   longer than a card: it wraps inside the card instead of running out of it */
.video-manage .pill { white-space: normal; max-width: 100%; line-height: 1.35; text-align: center; }

.watch { display: flex; flex-direction: column; gap: 1.2rem; }
.player {
  width: 100%;
  max-height: 70vh;
  background: #000;
  border-radius: 14px;
  box-shadow: 0 8px 34px var(--glow);
}
.watch-title { font-size: 1.3rem; margin-bottom: 0.5rem; }
.watch-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.watch-meta { color: var(--muted); font-size: 0.9rem; display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; }
.watch-actions { display: flex; align-items: center; gap: 0.7rem; }

/* ---- comments (watch page) ---- */
.comments { border-top: 1px solid var(--line); padding-top: 0.4rem; }
.comment-form { display: flex; flex-direction: column; align-items: flex-start;
                gap: 0.6rem; margin-bottom: 1.5rem; }
.comment-form textarea {
  width: 100%;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font: inherit;
  resize: vertical;
}
.comment-form textarea:focus { border-color: var(--accent); outline: none; }
/* Honeypot. Off-screen rather than display:none / visibility:hidden — a bot
   that reads styles skips the hidden ones, and this field only earns its
   keep if the script believes it is a normal input. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.comment-login { color: var(--muted); margin-bottom: 1.5rem; }
.comment-list { list-style: none; display: flex; flex-direction: column; gap: 0.8rem; }
.comment {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
}
.comment-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.25rem; }
.comment-author { font-weight: 700; font-size: 0.9rem; }
.comment-time { font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.comment-del-form { margin-left: auto; }
.comment-del { background: none; border: 0; color: var(--muted); font-size: 0.85rem; padding: 0 0.2rem; }
.comment-del:hover { color: var(--danger); }
.comment-report-form { margin-left: auto; }
.comment-report { background: none; border: 0; color: var(--muted); font-size: 0.75rem; padding: 0 0.2rem; cursor: pointer; }
.comment-report:hover { color: var(--danger); text-decoration: underline; }
/* anywhere: a 900-character unbroken spam URL must wrap, not stretch the page */
.comment-body { overflow-wrap: anywhere; }
.comment-more, .comment-empty { color: var(--muted); font-size: 0.9rem; margin-top: 1rem; }

/* ---- prose (legal) ---- */

.prose { max-width: 46rem; padding-block: 1rem; }
.prose h1 { font-size: 1.7rem; margin-bottom: 0.4rem; }
.prose h2 { font-size: 1.05rem; margin: 1.8rem 0 0.5rem; }
.prose p { color: var(--muted); margin-bottom: 0.8rem; }
.prose-meta { font-family: var(--mono); font-size: 0.85rem; }
.contact-email { font-family: var(--mono); font-size: 1.2rem; color: var(--accent); }

/* ---- footer ---- */

.site-footer { border-top: 1px solid var(--line); padding-block: 1.5rem; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.footer-brand { font-size: 1rem; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.footer-links a { color: var(--muted); font-size: 0.88rem; }
.footer-links a:hover { color: var(--text); }
/* the fiction statement sits on its own row under the brand and the links */
.footer-note { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 0.78rem; opacity: 0.8; }
/* the Terms and Refund Policy line under the token packs */
.legal-agree { margin-top: 1rem; text-align: center; }
/* the card currency line and the Terms line read as one short block */
.card-currency + .legal-agree { margin-top: 0.2rem; }
.legal-agree a, .auth-note a, .refund-hint a { color: inherit; text-decoration: underline; }
/* how to ask for a refund, under the purchases on the billing page */
.refund-hint { margin-top: 0.6rem; }
/* the location data's credit: owed by its licence, kept small */
.footer-links .footer-credit { font-size: 0.75rem; opacity: 0.8; }

/* --- upload panels (art + music), week-review UX rebuild 2026-08-27 --- */
.upload-actions { display: flex; align-items: center; gap: 8px;
                  flex-wrap: wrap; margin-bottom: 6px; }
.upload-summary { color: var(--muted, #9aa); font-size: 0.85rem; }
.thumb-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
               max-height: 168px; overflow-y: auto; padding: 4px;
               border: 1px solid var(--line, #2a2a33); border-radius: 8px; }
.thumb { position: relative; width: 48px; height: 48px; border-radius: 6px;
         overflow: hidden; background: var(--panel-2, #1c1c24);
         flex: 0 0 auto; }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-clip, .thumb-more { display: flex; align-items: center;
         justify-content: center; font-size: 0.7rem; font-weight: 700;
         color: var(--muted, #9aa); }
.thumb-x { position: absolute; top: 0; right: 0; width: 18px; height: 18px;
           line-height: 16px; padding: 0; border: 0; border-radius: 0 0 0 6px;
           background: rgba(0,0,0,.65); color: #fff; cursor: pointer;
           font-size: 13px; }
.thumb-x:hover { background: rgba(200,30,30,.9); }
.music-remove { margin-left: 6px; }
.music-remove:hover { color: #e33; }

/* --- job detail: "your order" panel --- */
.order-panel { margin-top: 1rem; }
.order-prompt summary { cursor: pointer; color: var(--muted, #9aa);
                        font-size: 0.85rem; }
.order-prompt-full { margin: 0.5rem 0 0; white-space: pre-wrap;
                     font-size: 0.92rem; }
.order-grid { display: grid; gap: 0.35rem 1.4rem; margin-top: 0.8rem;
              grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
              font-size: 0.9rem; }
.order-grid .job-stat-label { margin-right: 0.4rem; }
.order-music { margin: 0.6rem 0 0 1.2rem; font-size: 0.85rem;
               color: var(--muted, #9aa); }

/* --- economics panel (superuser) --- */
.table-wrap { overflow-x: auto; }
.eco-table { width: 100%; border-collapse: collapse; font-size: 0.85rem;
             font-variant-numeric: tabular-nums; }
.eco-table th, .eco-table td { padding: 5px 9px; text-align: left;
             border-bottom: 1px solid var(--line, #2a2a33); }
.eco-table tfoot th { border-top: 2px solid var(--line, #2a2a33); }
.eco-models { color: var(--muted, #9aa); font-size: 0.78rem; }
.eco-pod td { color: var(--muted, #9aa); }
.eco-neg { color: #e33; font-weight: 700; }

/* --- "Your Generations": the customer's videos and their generations
       together on one 1080p screen (user order 2026-09-20, item 8).
       Six video cards in a row, the generations list under it, and no
       section so tall that the second one falls below the fold. --- */
.page-generations .page-head { margin-bottom: 1rem; }
.page-generations .home-section { margin-bottom: 1.3rem; }
.page-generations .home-section-head { margin-bottom: 0.6rem; }
.page-generations .video-strip { grid-auto-columns: calc((100% - 5rem) / 6); }
.page-generations .video-card .video-title { font-size: 0.92rem; }
.page-generations .job-card { padding: 0.6rem 1rem; }
@media (max-width: 1400px) {
  .page-generations .video-strip { grid-auto-columns: calc((100% - 3rem) / 4); }
}
@media (max-width: 1000px) {
  .page-generations .video-strip { grid-auto-columns: calc((100% - 2rem) / 3); }
}
@media (max-width: 700px) {
  .page-generations .video-strip { grid-auto-columns: calc((100% - 1rem) / 2); }
}

/* --- the mode picker: four ways to run a video, asked once per visit --- */
.mode-picker-panel { max-width: 58rem; }
.mode-grid {
  display: grid; gap: 0.8rem; margin-bottom: 1rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 860px) { .mode-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-block {
  display: flex; flex-direction: column; gap: 0.45rem; text-align: left;
  background: var(--panel-2, var(--panel)); color: inherit; font: inherit;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 0.9rem 1rem; cursor: pointer; min-height: 11rem;
}
.mode-block:hover { border-color: var(--accent); }
.mode-block.is-chosen { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.mode-block h3 { margin: 0; font-size: 1.05rem; }
.mode-block p { margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.35; }
.mode-block .mode-est {
  margin-top: auto; font-family: var(--mono); font-size: 0.85rem; color: var(--accent);
}
.mode-block .mode-last { font-size: 0.75rem; color: var(--muted); font-family: var(--mono); }
.mode-keep { display: block; text-align: center; font-size: 0.88rem; color: var(--muted); }

/* the job's timeline shows its latest rows; the rest unfold on request
   (the 150-minute Riamu job carried sixty rows — a scroll marathon on a
   phone, 2026-09-21 UX audit) */
.timeline-row.is-folded { display: none; }
.timeline-more { display: block; width: 100%; margin-top: 0.6rem; background: none; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); padding: 0.55rem; font: inherit; font-size: 0.85rem; cursor: pointer; }
.timeline-more:hover { color: var(--text); border-color: var(--accent); }

/* the thumbnail picker on a video's edit form (owner order 2026-09-21) */
.thumb-picker { border: 1px solid var(--line); border-radius: 10px; padding: 0.7rem 0.9rem 0.9rem; display: grid; gap: 0.6rem; }
.thumb-picker legend { padding: 0 0.3rem; color: var(--muted); font-size: 0.9rem; }
.thumb-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.thumb-option { position: relative; display: block; cursor: pointer; border-radius: 8px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--panel-2); outline: 2px solid transparent; outline-offset: 2px; }
.thumb-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.thumb-option img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-option:has(input:checked) { outline-color: var(--accent); }
.thumb-option:has(input:focus-visible) { outline-color: var(--text); }
@media (max-width: 600px) { .thumb-options { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* the awaiting-approval rows must fit the panel: the request wraps in its
   own column, the buttons stack, nothing runs off the right edge */
.mod-table-approval { table-layout: fixed; }
.mod-table-approval td { vertical-align: top; overflow-wrap: anywhere; white-space: normal; }
.mod-table-approval th:nth-child(1), .mod-table-approval td:nth-child(1) { width: 8.5rem; }
.mod-table-approval th:nth-child(3), .mod-table-approval td:nth-child(3) { width: 11rem; }
.mod-table-approval th:nth-child(6), .mod-table-approval td:nth-child(6) { width: 13rem; }
.mod-table-approval .inline-form { display: flex; flex-wrap: wrap; }
.mod-table-approval input[type="text"] { max-width: 100%; width: 100%; }

/* ---- the funscript on a video's page (owner order 2026-09-22) ---------- */
.funscript { margin-top: 1rem; padding: .9rem 1rem; border: 1px solid var(--line, #2a2a33); border-radius: 10px;
  --fs-ink: currentColor; --fs-muted: rgba(255,255,255,.55); --fs-grid: rgba(255,255,255,.14); --fs-head: #f2b950; --fs-surface: rgba(0,0,0,.18); }
.funscript .section-title { margin: 0 0 .3rem; }
.funscript-lead { margin: 0 0 .7rem; opacity: .85; max-width: 70ch; }
.funscript-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .7rem; }
.funscript-status { font-size: .9rem; opacity: .8; }
.funscript-status.is-ok { color: #7fd48a; opacity: 1; }
.funscript-status.is-bad { color: #ff8a80; opacity: 1; }
.funscript-view { display: grid; grid-template-columns: 22px 1fr; gap: .7rem; align-items: stretch; }
.funscript-gauge { position: relative; height: 72px; border-radius: 11px; background: rgba(255,255,255,.08); overflow: hidden; }
.funscript-puck { position: absolute; left: 2px; right: 2px; height: 22px; bottom: 0; border-radius: 9px; background: #f2b950; }
.funscript-strip { width: 100%; height: 72px; display: block; border-radius: 6px; }
.funscript-help { margin-top: .6rem; font-size: .9rem; opacity: .85; }
.funscript-help summary { cursor: pointer; }
.funscript-help p { margin: .4rem 0 0; max-width: 70ch; }

/* ---- a visitor the age rules hold back (2026-10-02) ---------------------
   the watch page shows the blurred poster and the way in instead of the
   player; the picture is blurred on the server, never by the browser */
.player.age-lock {
  position: relative; overflow: hidden;
  display: grid; place-items: center;
  aspect-ratio: 16 / 9; min-height: 18rem; max-height: none;
  background: #0d0d12;
}
.age-lock-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.age-lock-box {
  position: relative; max-width: 34rem; margin: 1rem; padding: 1.2rem 1.4rem;
  text-align: center; border-radius: var(--radius);
  background: rgba(13, 13, 18, .82); border: 1px solid var(--line);
}
.age-lock-box h2 { font-size: 1.2rem; margin-bottom: .5rem; }
.age-lock-box p { color: var(--muted); margin-bottom: .9rem; }
.age-lock-box .age-lock-alt { margin: .8rem 0 0; font-size: .9rem; }

/* the analytics consent bar: one line at the foot of the page, EU, EEA, UK
   and Switzerland only, gone after one press */
.consent-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center;
  justify-content: center; padding: 0.7rem 1rem;
  padding-bottom: calc(0.7rem + env(safe-area-inset-bottom, 0px));
  background: var(--panel-2); border-top: 1px solid var(--line);
  color: var(--text); font-size: 0.9rem; }
/* the display rule above would win over the browser's own hidden rule, and
   the bar would stay after OK was pressed */
.consent-bar[hidden] { display: none; }
.consent-bar p { margin: 0; }
.consent-bar a { color: inherit; text-decoration: underline; }
.consent-actions { display: flex; gap: 0.5rem; }