/* ==========================================================================
   FilmWIP – Stages 1–2 global styles
   Cinematic dark theme · mobile-first with desktop polish
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  --bg-deep: #0a0a0c;
  --bg-base: #111114;
  --bg-elevated: #1a1a1f;
  --bg-card: #16161b;
  --bg-card-hover: #1e1e25;
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.12);
  --text-primary: #f0efe9;
  --text-secondary: #a8a6a0;
  --text-muted: #6b6964;
  --accent: #c9a84c;
  --accent-soft: rgba(201, 168, 76, 0.15);
  --accent-hover: #d4b85e;
  --focus-ring: rgba(201, 168, 76, 0.45);

  --font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;

  --header-height: 4rem;
  /* Default content shell; stepped up on large desktops (mobile still uses full viewport width) */
  --max-width: 72rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  --shadow-card: 0 8px 32px rgba(0, 0, 0, 0.45);
  --transition-fast: 150ms ease;
  --transition-base: 220ms ease;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-deep);
  background-image:
    radial-gradient(ellipse 120% 80% at 50% -20%, rgba(201, 168, 76, 0.06), transparent 55%),
    radial-gradient(ellipse 80% 50% at 100% 100%, rgba(40, 40, 60, 0.25), transparent 50%);
  background-attachment: fixed;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--accent-hover);
}

a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Layout shell
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--header-height);
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(10, 10, 12, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.site-header__inner {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.35rem 0.85rem;
}

/*
 * Mobile: fixed 4rem header was clipping wrapped nav links (Gallery, Build updates,
 * Feedback, Portal, …). Grow the bar and stack brand + nav — desktop layout unchanged.
 */
@media (max-width: 820px) {
  .site-header {
    height: auto;
    min-height: var(--header-height);
    align-items: stretch;
  }

  .site-header__inner {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.45rem;
    padding: 0.55rem 1rem 0.7rem;
  }

  .site-nav {
    justify-content: flex-start;
    row-gap: 0.45rem;
    column-gap: 0.7rem;
    padding-bottom: 0.15rem; /* room for current-page underline */
  }

  .site-nav__link,
  button.site-nav__link--btn {
    font-size: 0.84rem;
  }

  .site-nav__link.is-current::after,
  .site-nav__link[aria-current="page"]::after {
    bottom: -0.25rem;
  }

  .brand__credit {
    display: none; /* more room on narrow phones; already hidden ≤720px elsewhere */
  }
}

.site-nav__link {
  position: relative;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--accent);
}

.site-nav__link--admin {
  color: var(--accent);
}

/* Current page in site header — gold label + underline hairline */
.site-nav__link.is-current,
.site-nav__link[aria-current="page"] {
  color: var(--accent);
  font-weight: 650;
}

.site-nav__link.is-current::after,
.site-nav__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.4rem;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0.9;
}

.site-nav__link--admin.is-current,
.site-nav__link--admin[aria-current="page"] {
  color: var(--accent-hover);
}

/* Nav control that opens the feedback modal / build updates window */
button.site-nav__link--btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
}

button.site-nav__link--btn:hover {
  color: var(--accent);
}

button.site-nav__link--btn.is-current,
button.site-nav__link--btn[aria-current="page"] {
  color: var(--accent);
  font-weight: 650;
}

.btn.is-current-btn {
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.45);
}

/* Send Feedback modal */
.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

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

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

.feedback-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(28rem, 100%);
  max-height: min(90vh, 40rem);
  overflow: auto;
  padding: 1.25rem 1.35rem 1.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.feedback-modal__close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.feedback-modal__close:hover {
  color: var(--text-primary);
}

.feedback-modal__title {
  margin: 0 1.5rem 0.75rem 0;
  font-size: 1.2rem;
  font-weight: 600;
}

.feedback-modal__notice {
  margin: 0 0 1rem;
  padding: 0.75rem 0.85rem;
  background: rgba(201, 168, 76, 0.08);
  border: 1px solid rgba(201, 168, 76, 0.28);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
}

.feedback-modal__notice p {
  margin: 0 0 0.45rem;
}

.feedback-modal__notice p:last-child {
  margin-bottom: 0;
}

.feedback-modal__form .form-field {
  margin-bottom: 0.75rem;
}

.feedback-modal__dialog--sm {
  width: min(22rem, 100%);
}

.feedback-modal__need-login {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.prebeta-modal {
  position: fixed;
  inset: 0;
  z-index: 11900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

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

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

.prebeta-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(24rem, 100%);
  padding: 1.15rem 1.25rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.prebeta-modal__close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.prebeta-modal__close:hover {
  color: var(--text-primary);
}

.prebeta-modal__title {
  margin: 0 1.5rem 0.35rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.prebeta-modal__stamp {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}

.prebeta-modal__dialog p {
  margin: 0 0 0.55rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.prebeta-modal__dialog p:last-of-type {
  margin-bottom: 0.85rem;
}

.prebeta-modal__actions {
  display: flex;
  justify-content: flex-end;
}

.register-tos {
  margin-bottom: 0;
}

.register-tos__link {
  display: inline-block;
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.register-tos__link:hover {
  color: var(--accent-hover);
}

.register-tos-modal {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

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

.register-tos-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.register-tos-modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: min(42rem, 100%);
  max-height: min(88vh, 46rem);
  padding: 1.15rem 1.25rem 1.1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
}

.register-tos-modal__close {
  position: absolute;
  top: 0.45rem;
  right: 0.55rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.45rem;
  line-height: 1;
  cursor: pointer;
}

.register-tos-modal__close:hover {
  color: var(--text-primary);
}

.register-tos-modal__title {
  margin: 0 1.5rem 0.65rem 0;
  font-size: 1.1rem;
  font-weight: 600;
}

.register-tos-modal__body {
  overflow: auto;
  max-width: none;
  padding-right: 0.25rem;
  margin-bottom: 0.85rem;
}

.register-tos-modal__body h2 {
  margin-top: 1.15rem;
  font-size: 1rem;
}

.register-tos-modal__body p,
.register-tos-modal__body li {
  font-size: 0.9rem;
}

.register-tos-modal__body .note-box {
  margin-bottom: 0.25rem;
}

.register-tos-modal__actions {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Admin messages: Site feedback thread */
.msg-thread-list__feedback {
  font-weight: 600;
}

.msg-feedback-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.35rem;
}

.msg-bubble--feedback {
  border-left: 3px solid rgba(201, 168, 76, 0.55);
}

.msg-bubble--notice {
  border-color: rgba(201, 168, 76, 0.35);
  background: rgba(201, 168, 76, 0.07);
}

.msg-bubble--unread {
  background: rgba(201, 168, 76, 0.07);
}

.msg-feedback-actions {
  margin-top: 0.45rem;
}

.site-nav__handle {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 8rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 520px) {
  .site-nav__handle {
    display: none;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.brand__home {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: inherit;
  text-decoration: none;
}

.brand__home:hover {
  color: var(--text-primary);
}

.brand__home:hover .brand__name {
  color: var(--accent);
}

.brand__logo {
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}

.brand__name {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: none;
  transition: color var(--transition-fast);
}

.brand__credit {
  margin-left: 0.85rem;
  padding-left: 0.15rem;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  white-space: nowrap;
}

.brand__credit-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.brand__credit-link:hover {
  color: var(--accent);
}

@media (max-width: 720px) {
  .brand__credit {
    display: none;
  }
}

.site-main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
}

/* Use more horizontal space on desktop/laptop; tablet/phone keep fluid 100% width */
@media (min-width: 1100px) {
  :root {
    --max-width: 90rem; /* ~1440px content shell */
  }

  .site-main {
    padding-left: 1.75rem;
    padding-right: 1.75rem;
  }
}

@media (min-width: 1500px) {
  :root {
    --max-width: 100rem; /* ~1600px on large monitors */
  }
}

/* --------------------------------------------------------------------------
   Home / splash
   -------------------------------------------------------------------------- */
.hero {
  text-align: center;
  margin-bottom: 1.5rem;
}

.hero__eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero__title {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--text-primary);
}

.hero__subtitle {
  margin: 0 auto;
  max-width: 36rem;
  font-size: 1.05rem;
  color: var(--text-secondary);
}

.hero .workflow-arc--hero {
  margin: 1.15rem auto 0;
  max-width: min(100%, 58rem);
  text-align: left;
}

.hero .workflow-arc--hero .workflow-arc__flow {
  justify-content: center;
}

.hero .workflow-arc--hero .workflow-arc__note {
  text-align: center;
}

/* Keep the full path on one line on desktop; allow wrap only on narrower viewports */
@media (min-width: 1100px) {
  .hero .workflow-arc--hero {
    max-width: min(100%, 68rem);
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .hero .workflow-arc--hero .workflow-arc__flow {
    flex-wrap: nowrap;
    gap: 0.2rem 0.3rem;
    font-size: 0.64rem;
    letter-spacing: 0.03em;
  }

  .hero .workflow-arc--hero .workflow-arc__step--offsite {
    padding: 0.1rem 0.35rem;
    white-space: nowrap;
  }
}

@media (min-width: 1400px) {
  .hero .workflow-arc--hero {
    max-width: min(100%, 74rem);
  }

  .hero .workflow-arc--hero .workflow-arc__flow {
    font-size: 0.68rem;
    gap: 0.25rem 0.35rem;
  }
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* --------------------------------------------------------------------------
   Home features overview (public)
   -------------------------------------------------------------------------- */
.home-features {
  margin: 0 auto 2.75rem;
  max-width: none; /* fill site-main width on desktop */
  width: 100%;
  padding: 1.5rem 0 0.25rem;
  border-top: 1px solid var(--border-subtle);
}

.home-features__header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.home-features__title {
  margin: 0 0 0.55rem;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.5vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.home-features__lead {
  margin: 0 auto;
  max-width: 38rem;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.home-features__block {
  margin-bottom: 1.75rem;
}

.home-features__block-title {
  margin: 0 0 0.65rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
}

.home-features__tag {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--text-muted);
}

.home-features__block-lead {
  margin: 0 0 0.9rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.home-features__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: 0.75rem;
}

@media (min-width: 1100px) {
  .home-features__grid {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 0.9rem;
  }

  .home-features__grid--public {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .home-features__lead {
    max-width: 48rem;
  }
}

@media (max-width: 1099px) and (min-width: 700px) {
  .home-features__grid--public {
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  }
}

.home-feature {
  margin: 0;
  padding: 0.9rem 1rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-height: 100%;
}

.home-feature__title {
  margin: 0 0 0.4rem;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
}

.home-feature__text {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.home-features__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.65rem;
  margin: 0.25rem 0 0.5rem;
}

.home-shots {
  margin: 0 0 2.75rem;
}

.home-shots .home-section-head {
  margin-bottom: 1.15rem;
}

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

@media (min-width: 700px) {
  .home-shots__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.home-shots__item {
  margin: 0;
  min-width: 0;
}

.home-shots__figure {
  margin: 0;
}

.home-shots__sizer {
  aspect-ratio: 1708 / 980;
}

.home-shots__frame {
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-deep);
  box-shadow: var(--shadow-card);
  outline: 2px solid transparent;
  outline-offset: 3px;
}

.home-shots__frame img {
  display: block;
  width: 100%;
  height: auto;
}

.home-shots__caption {
  margin: 0.5rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  text-align: center;
  color: var(--accent);
}

@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .home-shots {
    overflow: visible;
  }

  .home-shots__grid {
    overflow: visible;
  }

  .home-shots::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.58);
    opacity: 0;
    pointer-events: none;
    z-index: 85;
    transition: opacity 1s ease;
  }

  .home-shots:has(.home-shots__item:hover)::after {
    opacity: 1;
  }

  .home-shots__item {
    position: relative;
    z-index: 1;
  }

  .home-shots__sizer {
    overflow: visible;
  }

  .home-shots__frame {
    cursor: zoom-in;
    transform: scale(1);
    transform-origin: center center;
    transition:
      transform 1s ease,
      outline-color 1s ease,
      box-shadow 1s ease;
  }

  .home-shots__item:nth-child(odd) .home-shots__frame {
    transform-origin: left center;
  }

  .home-shots__item:nth-child(even) .home-shots__frame {
    transform-origin: right center;
  }

  .home-shots__item:hover {
    z-index: 92;
  }

  .home-shots__item:hover .home-shots__frame {
    transform: scale(1.45);
    outline-color: var(--accent);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-shots::after,
  .home-shots__frame {
    transition: none;
  }
}

.home-section-head {
  margin: 0 0 1rem;
  text-align: center;
}

.home-section-head__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
}

.home-section-head__lead {
  margin: 0 auto;
  max-width: 32rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.gal-showcase {
  margin: 0 0 1.35rem;
}

.gal-main .gal-showcase {
  margin-top: 0;
}

.gal-showcase .home-section-head {
  text-align: left;
  margin-bottom: 0.85rem;
}

.gal-showcase .home-section-head__lead {
  margin-left: 0;
}

/* --------------------------------------------------------------------------
   Showcase film cards
   -------------------------------------------------------------------------- */
.showcase {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 640px) {
  .showcase {
    grid-template-columns: repeat(2, 1fr);
  }

  .showcase__item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    max-width: 50%;
    justify-self: center;
    width: 100%;
  }
}

@media (min-width: 960px) {
  .showcase {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
  }

  .showcase__item:last-child:nth-child(odd) {
    grid-column: auto;
    max-width: none;
    justify-self: stretch;
  }
}

@media (min-width: 1400px) {
  .showcase {
    gap: 2rem;
  }
}

.showcase-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition:
    border-color var(--transition-base),
    transform var(--transition-base),
    background-color var(--transition-base);
}

.showcase-card:hover,
.showcase-card:focus-within {
  border-color: rgba(201, 168, 76, 0.35);
  background: var(--bg-card-hover);
  transform: translateY(-3px);
}

.showcase-card__poster {
  position: relative;
  aspect-ratio: 16 / 10;
  background:
    linear-gradient(160deg, #1c1c22 0%, #0e0e12 55%, #151518 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Subtle film-grain / vignette feel without images */
.showcase-card__poster::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 0, 0.55) 100%),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.015) 2px,
      rgba(255, 255, 255, 0.015) 3px
    );
  pointer-events: none;
}

.showcase-card__poster::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(201, 168, 76, 0.06) 0%,
    transparent 45%,
    rgba(80, 90, 140, 0.08) 100%
  );
  pointer-events: none;
}

.showcase-card__play {
  position: relative;
  z-index: 1;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 1.5px solid rgba(201, 168, 76, 0.55);
  background: rgba(10, 10, 12, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    transform var(--transition-base);
}

.showcase-card:hover .showcase-card__play,
.showcase-card:focus-within .showcase-card__play {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(1.06);
}

.showcase-card__play svg {
  width: 1.15rem;
  height: 1.15rem;
  margin-left: 0.15rem; /* optical center for triangle */
}

.showcase-card__body {
  padding: 1.1rem 1.25rem 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

.showcase-card__label {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.showcase-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.showcase-card__hint {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.showcase-card__handle {
  color: var(--accent, #c9a84c);
  text-decoration: none;
  font-weight: 600;
}

.showcase-card__handle:hover,
.showcase-card__handle:focus-visible {
  text-decoration: underline;
  color: var(--accent, #c9a84c);
}

/* Gallery submit two-column fields */
.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
}

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

.gal-detail__facts {
  margin: 0.75rem 0 0;
  padding: 0.75rem 1rem;
  list-style: none;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.gal-detail__facts li + li {
  margin-top: 0.35rem;
}

.gal-detail__back {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
}

.gal-detail__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
}

.gal-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  background: rgba(201, 168, 76, 0.16);
  color: var(--accent);
  border: 1px solid rgba(201, 168, 76, 0.35);
}

.gal-pill--muted {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
  border-color: var(--border-subtle);
  font-weight: 600;
}

.gal-pill--claps {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  border-color: var(--border-subtle);
}

.gal-detail__filmmaker {
  font-weight: 600;
}

.gal-detail__realname {
  color: var(--text-muted);
}

.gal-detail__meta a {
  color: var(--accent, #c9a84c);
  text-decoration: none;
  font-weight: 600;
}

.gal-detail__meta a:hover {
  text-decoration: underline;
}

.gal-results-count {
  margin: 0 0 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.gal-card__topline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
  margin: 0 0 0.35rem;
}

.gal-card__worktype {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
}

.gal-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.85rem;
  margin-top: 0.55rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.8rem;
}

.gal-card__footer a {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
}

.gal-card__footer a:hover {
  color: var(--accent);
}

.gal-share-x {
  font-weight: 600;
}

.gal-share-x--btn {
  align-self: center;
}

.gal-card__handle {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.gal-card__handle:hover {
  text-decoration: underline;
}

.gal-card__realname,
.gal-card__runtime {
  color: var(--text-muted);
}

.gal-card__realname::before,
.gal-card__runtime::before {
  content: "·";
  margin: 0 0.35rem 0 0.15rem;
  color: var(--text-muted);
}

.gal-filters__search {
  flex: 1 1 12rem;
  min-width: 10rem;
}

.gal-card--profile {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* Public profile page */
.profile-page__header--hero {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.profile-page__hero-film {
  display: none;
}

@media (min-width: 900px) {
  .profile-page__header--hero:has(.profile-page__hero-film) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(22rem, 32rem);
    grid-template-rows: auto auto auto;
    column-gap: 1.5rem;
    align-items: start;
  }

  .profile-page__header--hero .profile-page__identity {
    grid-column: 1;
    grid-row: 1;
  }

  .profile-page__header--hero .profile-page__stats {
    grid-column: 1;
    grid-row: 2;
  }

  .profile-page__header--hero .profile-page__owner-bar,
  .profile-page__header--hero .profile-page__visitor-actions {
    grid-column: 1;
    grid-row: 3;
  }

  .profile-page__hero-film {
    display: block;
    grid-column: 2;
    grid-row: 1 / span 3;
    justify-self: end;
    width: min(32rem, 100%);
    min-width: 22rem;
  }

  .profile-page__hero-film-media {
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background: #0a0a0c;
    aspect-ratio: 16 / 9;
  }

  .profile-page__hero-film-media .yt-facade,
  .profile-page__hero-film-media .yt-player {
    width: 100%;
    height: 100%;
  }

  .profile-page__hero-film-media .yt-facade__button,
  .profile-page__hero-film-media .yt-facade__media,
  .profile-page__hero-film-media .yt-facade__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .profile-page__hero-film-media--link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 10rem;
  }

  .profile-page__hero-film-title {
    margin: 0.45rem 0 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-secondary);
  }
}

.profile-page__identity {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.profile-page__avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--bg-deep, #0c0c10);
  background: linear-gradient(145deg, #e0c36a, #c9a84c);
  flex-shrink: 0;
}

.profile-page__eyebrow {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #c9a84c);
}

.profile-page__name {
  margin: 0.25rem 0 0;
  color: var(--text-secondary);
  font-size: 1.1rem;
}

.profile-page__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.profile-page__stat {
  min-width: 4.5rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card, #14141a);
  text-align: center;
}

.profile-page__stat-num {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent, #c9a84c);
}

.profile-page__stat-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

.profile-page__owner-bar,
.profile-page__visitor-actions {
  margin: 0.85rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.profile-fan-form {
  display: inline-flex;
  margin: 0;
}

.profile-fan-list {
  margin-top: 1.15rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border-subtle);
}

.profile-fan-list__items {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.profile-fan-list__items a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.profile-fan-list__items a:hover {
  text-decoration: underline;
}

.profile-fan-list__name {
  margin-left: 0.35rem;
  color: var(--text-muted);
  font-size: 0.88em;
}

.profile-page__gallery-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.empty-state--compact {
  padding: 1rem 1.1rem;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  text-align: left;
}

.rc-bin-list .empty-state--compact {
  padding: 0.55rem 0.65rem;
}

.empty-state--compact .empty-state__actions {
  justify-content: flex-start;
}

/* Public gallery: narrow left tools column + video grid */
.gal-layout {
  display: grid;
  grid-template-columns: minmax(10.5rem, 12.5rem) minmax(0, 1fr);
  gap: 0.85rem 1.1rem;
  align-items: start;
}

@media (min-width: 1400px) {
  .gal-layout {
    grid-template-columns: minmax(12rem, 14.5rem) minmax(0, 1fr);
    gap: 1rem 1.35rem;
  }
}

.gal-sidebar {
  position: sticky;
  top: calc(var(--header-height) + 0.55rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.65rem 0.7rem 0.75rem;
  background: var(--bg-base);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-width: 0;
  max-height: calc(100vh - var(--header-height) - 1.1rem);
  overflow-x: hidden;
  overflow-y: auto;
}

.gal-sidebar__title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gal-sidebar__lead {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted);
}

.gal-filters--sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.gal-filters--sidebar .gal-filters__q,
.gal-filters--sidebar .gal-filters__select {
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  padding: 0.32rem 0.45rem;
  font-size: 0.78rem;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-deep, #0a0a0e);
  color: var(--text-primary);
  height: 2rem;
}

.gal-filters--sidebar .gal-filters__select {
  color: var(--text-secondary);
}

.gal-filters--sidebar .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  padding: 0.28rem 0.5rem;
  font-size: 0.75rem;
}

.gal-sidebar__actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.15rem;
}

.gal-sidebar__actions .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
}

.gal-main {
  min-width: 0;
}

.gal-main .gal-results-count {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.gal-page-header {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
}

.gal-page-header--detail {
  margin-bottom: 0.75rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--border-subtle);
}

.gal-page-header__title {
  margin: 0;
  font-size: 1.2rem;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}

body.page-gallery .site-main {
  max-width: none;
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 2.5rem;
}

body.page-gallery .site-header__inner,
body.page-gallery .site-footer__inner {
  max-width: none;
}

@media (max-width: 820px) {
  .gal-layout {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .gal-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .gal-sidebar__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .gal-sidebar__actions .btn {
    width: auto;
    flex: 1 1 auto;
  }
}

.profile-page__section-head {
  margin-bottom: 0.75rem;
}

.profile-page__section-lead {
  margin: 0.3rem 0 0;
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.profile-page__subhead {
  margin: 1rem 0 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.profile-page__wip-box {
  margin: 0.85rem 0 0;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 168, 76, 0.25);
  background: rgba(201, 168, 76, 0.06);
}

.profile-page__wip-label {
  margin: 0 0 0.2rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.profile-page__wip {
  margin: 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.profile-page__gallery {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-subtle);
}

.profile-video-card {
  list-style: none;
  margin: 0;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.profile-video-card__media {
  aspect-ratio: 16 / 9;
  background: #101014;
}

.profile-video-card__media--link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.profile-video-card__body {
  padding: 0.65rem 0.75rem 0.8rem;
}

.profile-video-card__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.profile-video-card__meta {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.profile-video-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.85rem;
}

.media-ai-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid rgba(126, 184, 232, 0.35);
  background: rgba(126, 184, 232, 0.08);
  font-size: 0.86rem;
}

.media-ai-strip[hidden] {
  display: none !important;
}

.media-ai-strip__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.media-card__prompt-snip {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* My Films (private finished library) */
.films-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1000px) {
  .films-layout {
    grid-template-columns: minmax(16rem, 22rem) 1fr;
  }
}

.films-form--editing {
  outline: 1px solid rgba(139, 156, 255, 0.35);
  box-shadow: 0 0 0 3px rgba(139, 156, 255, 0.08);
}

.films-form--editing .portal-card__title {
  color: var(--accent, #8b9cff);
}

.films-form {
  padding: 1.1rem 1.15rem 1.25rem;
}

.films-source {
  border: 0;
  margin: 0 0 0.85rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
}

.films-source__legend {
  width: 100%;
  padding: 0;
  margin: 0 0 0.35rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.films-source__option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  cursor: pointer;
}

.films-local-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.films-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.film-card {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.film-card__media {
  background: #0a0a0e;
  min-height: 10rem;
}

.film-card__media .yt-facade {
  width: 100%;
  border-radius: 0;
}

.film-card__local {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-start;
}

.film-card__local-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.film-card__body {
  padding: 0.85rem 1rem 1rem;
}

.film-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.film-card__meta {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.film-card__notes {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.film-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.film-card__future {
  margin: 0.65rem 0 0;
  font-size: 0.75rem;
}

.film-card__public {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--border-subtle);
}

.film-card__public-title {
  margin: 0 0 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.film-card__status-line {
  margin: 0 0 0.45rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.film-status {
  font-weight: 600;
  text-transform: capitalize;
}

.film-status--none { color: var(--text-muted); }
.film-status--pending { color: #d4a017; }
.film-status--approved { color: #5cb85c; }
.film-status--rejected { color: #e07070; }

.film-card__place-link {
  margin-left: 0.35rem;
  font-size: 0.82rem;
}

.film-request-form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
}

.film-request-form__btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.gal-grid--playable {
  align-items: stretch;
}

.gal-card-wrap {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-card, #14141a);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gal-card-wrap:hover {
  border-color: rgba(201, 168, 76, 0.35);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.gal-card__player {
  position: relative;
  display: block;
  background: #0a0a0e;
  width: 100%;
  /* Explicit min height so the slot never collapses if aspect-ratio is ignored */
  min-height: 10.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  flex: 0 0 auto;
}

/* Let the facade fill the player slot (do not collapse to 0 height) */
.gal-card__player .yt-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 11.5rem;
  aspect-ratio: auto;
  border-radius: 0;
  background: #0a0a0e;
}

.gal-card__player .yt-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}

.gal-card__player .yt-player__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.gal-card__player .yt-facade__button {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 11.5rem;
}

.gal-card__player .yt-facade__media,
.gal-card__player .yt-facade__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}

.gal-card__player-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #1a1a22 0%, #0a0a0e 100%);
  color: var(--accent, #c9a84c);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
}

.gal-card__player-fallback:hover {
  color: #e0c36a;
  background: linear-gradient(160deg, #22222c 0%, #101014 100%);
}

.gal-card--meta {
  border: 0;
  box-shadow: none;
  border-radius: 0;
  background: transparent;
  display: block;
  padding: 0.5rem 0.7rem 0.65rem;
  text-decoration: none;
  color: inherit;
  flex: 1 1 auto;
}

.page-gallery .gal-card--meta .gal-card__title {
  font-size: 0.95rem;
  margin: 0 0 0.2rem;
  line-height: 1.25;
}

.page-gallery .gal-card--meta .gal-card__by {
  font-size: 0.78rem;
  margin: 0;
}

.page-gallery .gal-card__footer {
  margin-top: 0.4rem;
  padding-top: 0.35rem;
  font-size: 0.75rem;
  gap: 0.4rem 0.65rem;
}

.page-gallery .gal-card__topline {
  margin: 0 0 0.2rem;
  gap: 0.3rem 0.5rem;
}

.page-gallery .gal-card__worktype,
.page-gallery .gal-card__genre {
  font-size: 0.62rem;
}

.gal-card--meta .gal-card__title a {
  color: inherit;
  text-decoration: none;
}

.gal-card--meta .gal-card__title a:hover {
  color: var(--accent, #c9a84c);
}

.gal-card__profile-link {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
}

.gal-card__profile-link a {
  color: var(--accent, #c9a84c);
}

/* Admin finished-film approvals — keep players inside cards */
.admin-films-page {
  max-width: 52rem;
  position: relative;
  z-index: 1;
}

.admin-films-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.admin-films-stat {
  min-width: 8rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-card, #14141a);
}

.admin-films-stat strong {
  display: block;
  font-size: 1.35rem;
  color: var(--accent, #c9a84c);
}

.admin-films-stat span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.admin-films-section {
  margin-bottom: 2rem;
}

.admin-films-queue {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-film-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  padding: 1rem 1.15rem 1.15rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-card, #14141a);
  overflow: hidden;
  position: relative;
  isolation: isolate;
  max-width: 100%;
}

.admin-film-card__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  align-items: flex-start;
}

.admin-film-card__title {
  margin: 0;
  font-size: 1.1rem;
}

.admin-film-card__meta {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.admin-film-card__notes {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.admin-film-card__preview {
  position: relative;
  width: 100%;
  max-width: 36rem;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-sm, 6px);
  overflow: hidden;
  /* Keep facade/player paint inside this box (not over other admin cards) */
  contain: layout paint;
  z-index: 0;
}

.admin-film-card__preview .yt-facade,
.admin-film-card__preview .yt-facade--admin,
.admin-film-card__preview .yt-facade--card {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  border-radius: 0;
  margin: 0;
}

.admin-film-card__preview .yt-facade__button,
.admin-film-card__preview .yt-facade__media {
  width: 100%;
  height: 100%;
}

.admin-film-card__preview .yt-facade__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.admin-film-card__form {
  margin-top: 0.25rem;
  position: relative;
  z-index: 1;
}

/* Enlarged player stays above page chrome, not trapped under cards */
.yt-player.is-enlarged {
  z-index: 10050;
}

.profile-page {
  width: 100%;
}

.profile-page__grid {
  display: grid;
  grid-template-columns: minmax(14rem, 20rem) 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 1100px) {
  .profile-page__grid {
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: 1.75rem 2rem;
  }

  .profile-video-grid {
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
  }

  .profile-page__gal-grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  }
}

@media (max-width: 800px) {
  .profile-page__grid {
    grid-template-columns: 1fr;
  }
}

.profile-page__bio {
  margin: 0 0 1rem;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
}

.profile-page__wip {
  margin: 0 0 1rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.profile-page__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.profile-video-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 1rem;
}

.profile-video-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.profile-video-card__media {
  position: relative;
  background: #000;
  width: 100%;
  min-height: 11.5rem;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.profile-video-card__media .yt-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 11.5rem;
  aspect-ratio: auto;
  border-radius: 0;
}

.profile-video-card__media .yt-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.profile-video-card__media .yt-facade__button,
.profile-video-card__media .yt-facade__media,
.profile-video-card__media .yt-facade__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-video-card__media .yt-player__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
}

.profile-video-card__title {
  margin: 0;
  padding: 0.75rem 0.9rem;
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Content pages (About, Terms, Privacy)
   -------------------------------------------------------------------------- */
.page-header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-subtle);
}

.page-header__title {
  margin: 0 0 0.5rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.page-header__lead {
  margin: 0;
  max-width: 40rem;
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.content {
  max-width: 42rem;
  width: 100%;
}

/* Wider About / FAQ (and other .content pages) on desktop — mobile unchanged */
@media (min-width: 900px) {
  .content {
    max-width: 56rem;
  }

  .page-header__lead {
    max-width: 48rem;
  }
}

@media (min-width: 1100px) {
  .content {
    max-width: 64rem;
  }

  /* FAQ: two columns to use the wider shell */
  .content.faq {
    max-width: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.25rem;
    row-gap: 0;
    align-items: start;
  }

  .content.faq .faq-item {
    break-inside: avoid;
  }
}

@media (min-width: 1400px) {
  .content:not(.faq) {
    max-width: 72rem;
  }
}

.content h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-primary);
}

.content h2:first-child {
  margin-top: 0;
}

.content p,
.content li {
  color: var(--text-secondary);
}

.content p {
  margin: 0 0 1rem;
}

.content ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}

.content li {
  margin-bottom: 0.4rem;
}

.content strong {
  color: var(--text-primary);
  font-weight: 600;
}

.register-tos-modal__body.content {
  max-width: none;
}

.note-box {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.95rem;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--border-subtle);
  background: rgba(8, 8, 10, 0.9);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 1.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

@media (min-width: 640px) {
  .site-footer__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.25rem;
}

.site-footer__nav a {
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.site-footer__nav a:hover {
  color: var(--accent);
}

.site-footer__nav a[aria-current="page"] {
  color: var(--accent);
}

.site-footer__copy {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.site-footer__stamp {
  font-size: 0.78rem;
}

.site-footer__stamp a {
  color: var(--text-secondary);
  text-decoration: none;
}

.site-footer__stamp a:hover {
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   Utilities
   -------------------------------------------------------------------------- */
.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;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 200;
  padding: 0.5rem 1rem;
  background: var(--accent);
  color: var(--bg-deep);
  font-weight: 600;
  border-radius: var(--radius-sm);
}

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

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.6rem 1.15rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--accent);
  color: #14120a;
  border-color: var(--accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
  color: #14120a;
  border-color: var(--accent-hover);
}

.btn--ghost {
  background: transparent;
  color: var(--text-primary);
  border-color: var(--border-medium);
}

.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn--small {
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
}

.btn--block {
  width: 100%;
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Flash messages
   -------------------------------------------------------------------------- */
.flash-stack {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75rem 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.flash {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  border: 1px solid var(--border-subtle);
}

.flash--success {
  background: rgba(60, 140, 90, 0.15);
  border-color: rgba(80, 180, 120, 0.35);
  color: #b8e6c8;
}

.flash--error {
  background: rgba(160, 50, 50, 0.18);
  border-color: rgba(220, 90, 90, 0.35);
  color: #f0c0c0;
}

.flash--warning {
  background: rgba(180, 130, 40, 0.18);
  border-color: rgba(201, 168, 76, 0.4);
  color: #f0e0a8;
}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.auth-layout {
  display: flex;
  justify-content: center;
}

.auth-layout--wide {
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.form-card {
  width: 100%;
  max-width: 26rem;
  padding: 1.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.form-card--wide {
  max-width: 36rem;
}

.account-danger {
  width: 100%;
  max-width: 26rem;
  padding: 1.15rem 1.25rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid rgba(200, 80, 80, 0.35);
  border-radius: var(--radius-lg);
}

.account-danger--inline {
  max-width: 36rem;
  margin-top: 1.75rem;
}

.account-danger__title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #e8a0a0;
}

.account-danger > p {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.account-danger > p:last-of-type {
  margin-bottom: 1rem;
}

.form-field {
  margin-bottom: 1.15rem;
}

.form-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-field .req {
  color: var(--accent);
}

.form-field .optional {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.85rem;
}

.form-field input[type="text"],
.form-field input[type="password"],
.form-field input[type="url"],
.form-field input[type="email"],
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font: inherit;
  font-size: 1rem;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast);
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.form-field input:disabled,
.form-field input[readonly]:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  color: var(--text-secondary);
}

.form-field textarea {
  resize: vertical;
  min-height: 6rem;
}

.form-hint {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.form-field--checkbox {
  margin-bottom: 1.25rem;
}

.checkbox-label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400 !important;
  color: var(--text-secondary) !important;
  cursor: pointer;
}

.checkbox-label input {
  margin-top: 0.25rem;
  accent-color: var(--accent);
}

.form-fieldset {
  margin: 0 0 1.15rem;
  padding: 1rem 1rem 0.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.form-fieldset legend {
  padding: 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.form-field--paired {
  margin-bottom: 0.5rem;
}

.form-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 1rem;
}

@media (min-width: 560px) {
  .form-pair {
    grid-template-columns: 1fr 1.2fr;
  }
}

.form-pair .form-field {
  margin-bottom: 0.75rem;
}

.form-errors {
  margin-bottom: 1.15rem;
  padding: 0.75rem 1rem;
  background: rgba(160, 50, 50, 0.15);
  border: 1px solid rgba(220, 90, 90, 0.35);
  border-radius: var(--radius-sm);
  color: #f0c0c0;
  font-size: 0.9rem;
}

.form-errors ul {
  margin: 0;
  padding-left: 1.1rem;
}

.form-actions {
  margin-top: 1.5rem;
}

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

.form-footer-note {
  margin: 1.25rem 0 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

/* --------------------------------------------------------------------------
   Portal / admin cards
   -------------------------------------------------------------------------- */
.portal-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .portal-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.portal-card {
  padding: 1.5rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.portal-card--muted {
  background: var(--bg-elevated);
}

.portal-card__title {
  margin: 0 0 1rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.portal-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.portal-card__note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.meta-list {
  margin: 0;
}

.meta-list > div {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.5rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.95rem;
}

.meta-list > div:last-child {
  border-bottom: none;
}

.meta-list dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 500;
}

.meta-list dd {
  margin: 0;
  color: var(--text-primary);
}

.placeholder-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-secondary);
}

.placeholder-list li {
  margin-bottom: 0.4rem;
}

.badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
}

.badge--admin {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid rgba(201, 168, 76, 0.35);
}

.note-box--warning {
  border-left-color: var(--accent);
  background: rgba(201, 168, 76, 0.08);
}

/* --------------------------------------------------------------------------
   Portal workspace (Stage 3)
   -------------------------------------------------------------------------- */
/* Lock the document scroller — only .workspace__content / side panels scroll.
   Prevents hash targets (e.g. #simple-path) from offsetting the window and
   freezing the portal viewport. */
html:has(body.page-portal) {
  height: 100%;
  overflow: hidden;
  scroll-behavior: auto;
}

body.page-portal {
  overflow: hidden;
  height: 100vh;
  height: 100dvh;
  overscroll-behavior: none;
}

/* Hash targets inside the portal content panel */
.workspace__content [id] {
  scroll-margin-top: 0.75rem;
}

body.page-portal .flash-stack {
  flex-shrink: 0;
}

body.page-portal .site-main--portal {
  max-width: none;
  margin: 0;
  padding: 0;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.is-resizing {
  cursor: col-resize;
  user-select: none;
}

body.is-resizing iframe {
  pointer-events: none;
}

.workspace {
  display: flex;
  flex: 1;
  min-height: 0;
  width: 100%;
  background: var(--bg-base);
  border-top: 1px solid var(--border-subtle);
}

.workspace__nav {
  flex: 0 0 220px;
  width: 220px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: #0d0d10;
  border-right: 1px solid var(--border-subtle);
  overflow: auto;
}

/* Desktop: full nav always visible. Toggle is mobile-only. */
.workspace-nav-toggle {
  display: none;
}

.workspace-nav-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.workspace__nav-head {
  padding: 1.15rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.workspace__eyebrow {
  margin: 0 0 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.workspace__user {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.workspace-nav {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0.5rem;
  gap: 0.15rem;
  flex: 1;
}

.workspace-nav__link {
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.workspace-nav__link:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

/* Phase A: clearer “you are here” — bar + weight + soft gold fill */
.workspace-nav__link.is-active {
  color: var(--accent);
  background: var(--accent-soft);
  font-weight: 650;
  border-left-color: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.12);
}

.workspace-nav__link--muted {
  color: var(--text-muted);
  font-size: 0.85rem;
  border-left-color: transparent;
}

.workspace__nav-foot {
  padding: 0.5rem;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.splitter {
  flex: 0 0 6px;
  position: relative;
  background: transparent;
  z-index: 2;
}

.splitter--v {
  cursor: col-resize;
  touch-action: none;
}

.splitter--v::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 2px;
  width: 2px;
  background: var(--border-subtle);
  transition: background var(--transition-fast);
}

.splitter:hover::after,
.splitter.is-active::after,
.splitter:focus-visible::after {
  background: var(--accent);
}

.splitter:focus-visible {
  outline: none;
}

.workspace__main-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.workspace__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(12, 12, 14, 0.95);
  flex-shrink: 0;
}

.workspace__toolbar-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  min-width: 0;
}

.workspace__toolbar-right {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-shrink: 0;
}

.workspace__imagine-guide {
  position: relative;
  top: 0.28em;
  max-width: 7.6rem;
  font-size: 0.68rem;
  line-height: 1.15;
  color: var(--text-muted);
  text-align: right;
}

.workspace__imagine-guide:hover,
.workspace__imagine-guide:focus-visible {
  color: var(--accent);
}

.workspace__rc-note {
  margin: 0;
  flex: 1 1 16rem;
  min-width: 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-muted);
}

.workspace__rc-note a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

.workspace__rc-note a:hover {
  color: var(--accent, #c9a84c);
}

.workspace__title-block {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  min-width: 0;
}

.workspace__title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
}

/* Group label under the page title (page name lives in the H1 only) */
.workspace__crumb {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.3;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}

.workspace__crumb-group {
  color: var(--group-accent, var(--accent));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
}

.workspace__project-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 100%;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: var(--text-primary);
  font-size: 0.85rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace__project-pill--empty {
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

.workspace__project-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.workspace__panels {
  display: flex;
  flex: 1;
  min-height: 0;
}

.workspace__content {
  flex: 1 1 auto;
  min-width: 0;
  overflow: auto;
  padding: 1.25rem 1.35rem 2rem;
}

.workspace__side {
  flex: 0 0 280px;
  width: 280px;
  min-width: 0;
  overflow: auto;
  padding: 1.15rem 1rem 1.5rem;
  background: #0e0e12;
  border-left: 1px solid var(--border-subtle);
}

.workspace__side-title {
  margin: 0 0 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.panel-heading {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 600;
}

.context-block {
  margin-bottom: 1.25rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.context-block--muted {
  background: transparent;
}

.context-block__title {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.context-block__name {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-primary);
}

.context-block__text {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.context-block__meta {
  margin: 0 0 0.75rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.context-block__form {
  margin-top: 0.5rem;
}

/* Projects section */
.proj-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 960px) {
  .proj-layout {
    grid-template-columns: minmax(220px, 300px) 1fr;
    gap: 1.75rem;
  }
}

.proj-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.proj-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.proj-create {
  padding: 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.proj-create__form .form-field:last-of-type {
  margin-bottom: 1rem;
}

.proj-list-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin-bottom: 0.75rem;
}

.proj-sort {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.proj-sort__select {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.3rem 0.45rem;
  color: var(--text-primary);
  background: var(--bg-deep, #0c0c10);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  max-width: 11rem;
}

.proj-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.proj-list--compact {
  gap: 0.45rem;
}

.proj-card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  transition:
    border-color var(--transition-fast),
    padding 0.15s ease,
    gap 0.15s ease;
}

.proj-card--compact {
  padding: 0.55rem 0.7rem;
  gap: 0.45rem 0.65rem;
  align-items: center;
}

.proj-card--compact .proj-card__name {
  font-size: 0.9rem;
}

.proj-card--compact .proj-card__meta {
  margin-top: 0.15rem;
  font-size: 0.72rem;
}

.proj-card--compact .proj-card__actions {
  gap: 0.3rem;
}

.proj-card.is-active {
  border-color: rgba(201, 168, 76, 0.45);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.12);
}

.proj-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.proj-card__name {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.proj-card__desc {
  margin: 0.35rem 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.proj-card__meta {
  margin: 0.4rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.proj-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem;
}

.proj-card__more summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0.35rem 0.5rem;
  list-style: none;
}

.proj-card__more summary::-webkit-details-marker {
  display: none;
}

.proj-card__more-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--bg-deep);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  min-width: 12rem;
}

/* Open project hero + hub (uses the large middle area) */
.proj-open {
  padding: 1.15rem 1.25rem 1.25rem;
  border-color: rgba(201, 168, 76, 0.4);
  background: linear-gradient(
    160deg,
    rgba(201, 168, 76, 0.1) 0%,
    var(--bg-card, #14141a) 45%
  );
}

.proj-open__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
}

.proj-open__kicker {
  margin: 0 0 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent, #c9a84c);
}

.proj-open__title {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.25;
}

.proj-open__desc {
  margin: 0.5rem 0 0;
  max-width: 40rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.45;
}

.proj-open__meta {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.proj-open__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: flex-start;
}

.proj-hub {
  padding: 1.15rem 1.2rem 1.35rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.proj-hub__header {
  margin-bottom: 0.65rem;
}

.proj-hub__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  font-weight: 600;
}

.proj-hub__lead {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 42rem;
}

.proj-inspiration__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.proj-insp-fields {
  margin-top: 0.85rem;
}

/* Shared workflow diagram (Project hub + Getting started) */
.onboarding__workflow {
  margin: 1rem 0;
}

.onboarding__workflow-title {
  margin: 0 0 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
}

.onboarding__workflow .workflow-arc {
  margin: 0;
}

.workflow-arc {
  margin: 0 0 1rem;
  padding: 0.65rem 0.75rem 0.7rem;
  border-radius: var(--radius-sm);
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.22);
}

.workflow-arc__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.35rem;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.45;
}

.workflow-arc__step {
  color: var(--text-secondary);
}

.workflow-arc__step--offsite {
  color: var(--accent);
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.1);
}

.workflow-arc__sep {
  color: var(--accent);
  opacity: 0.75;
  font-weight: 400;
}

.workflow-arc__note {
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: var(--text-muted);
}

.proj-hub__continue {
  margin: 0 0 1.1rem;
  padding: 0.9rem 1rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(201, 168, 76, 0.4);
  background: linear-gradient(
    145deg,
    rgba(201, 168, 76, 0.12) 0%,
    rgba(20, 20, 26, 0.6) 70%
  );
}

.proj-hub__continue-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.proj-hub__continue-title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.proj-hub__continue-text {
  margin: 0 0 0.75rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 40rem;
}

.proj-hub__stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr));
  gap: 0.55rem;
  margin: 0 0 1.1rem;
}

.proj-hub__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.6rem 0.35rem;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--border-subtle);
  background: var(--bg-deep, #0c0c10);
  text-align: center;
}

.proj-hub__num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent, #c9a84c);
  line-height: 1.1;
}

.proj-hub__label {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.proj-hub__tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.75rem;
}

.proj-hub-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 0.95rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-deep, #0c0c10);
  min-height: 100%;
}

.proj-hub-card__title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
}

.proj-hub-card__text {
  margin: 0;
  flex: 1;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.proj-hub-card__meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

.proj-hub-card .btn {
  align-self: flex-start;
  margin-top: 0.25rem;
}

.proj-hub__foot {
  margin: 1.1rem 0 0;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.proj-hub__foot a {
  color: var(--accent);
}

.proj-list-lead {
  margin: 0.35rem 0 0;
  max-width: 36rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.proj-hub__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.proj-others {
  padding: 0.85rem 0.9rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.proj-rename {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.proj-rename input {
  flex: 1;
  min-width: 8rem;
  padding: 0.4rem 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
}

.btn--danger {
  color: #e8a0a0 !important;
  border-color: rgba(200, 80, 80, 0.35) !important;
}

.btn--danger:hover {
  border-color: rgba(220, 100, 100, 0.55) !important;
  color: #ffc0c0 !important;
}

/* Empty states */
.empty-state {
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--bg-card);
  border: 1px dashed var(--border-medium);
  border-radius: var(--radius-lg);
}

.empty-state--tool {
  max-width: 32rem;
  margin: 1rem auto;
}

.empty-state__kicker {
  margin: 0 0 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.empty-state__title {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.empty-state__text {
  margin: 0 auto 0.85rem;
  max-width: 28rem;
  color: var(--text-secondary);
}

.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.35rem;
}

.empty-state__hint {
  margin: 0.65rem auto 0;
  max-width: 28rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.rc-open-project {
  position: relative;
}

.rc-open-project > summary {
  list-style: none;
}

.rc-open-project > summary::-webkit-details-marker {
  display: none;
}

.rc-open-project__list {
  position: absolute;
  left: 50%;
  top: calc(100% + 0.4rem);
  transform: translateX(-50%);
  z-index: 5;
  width: min(22rem, 88vw);
  max-height: 16rem;
  overflow: auto;
  padding: 0.4rem;
  text-align: left;
  background: var(--bg-elevated, var(--bg-card));
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.rc-open-project__item {
  display: block;
  width: 100%;
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.rc-open-project__item:hover,
.rc-open-project__item:focus-visible {
  background: rgba(201, 168, 76, 0.14);
}

/* After Imagine handoff strip (Prompt Board — in the right rail) */
.prompt-handoff {
  margin: 0;
  max-width: none;
}

.prompt-handoff__list {
  margin: 0.45rem 0 0.5rem;
  padding-left: 1.2rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.prompt-handoff__list li {
  margin-bottom: 0.25rem;
}

.prompt-handoff__note {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* Onboarding — use portal middle width on desktop */
.onboarding {
  max-width: 42rem;
  width: 100%;
}

.onboarding__title {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.onboarding__lead {
  margin: 0 0 1rem;
  color: var(--text-secondary);
}

@media (min-width: 900px) {
  .onboarding {
    max-width: none;
  }

  .onboarding__lead {
    max-width: 48rem;
  }

  .onboarding__steps {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1.15rem;
  }

  .onboarding__step {
    height: 100%;
    margin: 0;
  }
}

@media (min-width: 1200px) {
  .onboarding__steps {
    gap: 1rem 1.5rem;
  }

  .onboarding__title {
    font-size: 1.65rem;
  }
}

.onboarding__sample {
  margin-bottom: 1.25rem;
}

.onboarding__sample p {
  margin: 0.4rem 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.onboarding__sample p:last-child {
  margin-bottom: 0;
}

.onboarding__steps {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.onboarding__step {
  padding: 1.15rem 1.25rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.onboarding__step h3 {
  margin: 0 0 0.5rem;
  font-size: 1.05rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.onboarding__step p {
  margin: 0 0 0.65rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.onboarding__step p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Media library (Stage 4)
   -------------------------------------------------------------------------- */
.media-app {
  max-width: none;
  width: 100%;
  /* Layout tracks the middle portal pane width, not the full viewport */
  container-type: inline-size;
  container-name: media-app;
}

/*
 * Library (main) left, folder/setup chrome (side) right.
 * Stack only when this pane itself is narrow — the portal middle column is often
 * well under a full-viewport 960px breakpoint, which used to force a one-column stack.
 */
.media-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 17.25rem;
  gap: 1.15rem 1.25rem;
  align-items: start;
  width: 100%;
}

.media-layout__main {
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

.media-layout__side {
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
  position: sticky;
  top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding-bottom: 0.5rem;
  align-self: start;
}

.media-layout__side .media-intro {
  margin: 0;
  font-size: 0.88rem;
}

.media-layout__side .media-connect {
  margin: 0;
}

.media-layout__side .media-banner {
  margin: 0;
  font-size: 0.85rem;
}

/* Stack only inside a truly narrow media pane (phones / tiny portal) */
@container media-app (max-width: 560px) {
  .media-layout {
    grid-template-columns: 1fr !important;
  }

  .media-layout__main {
    grid-column: 1;
    grid-row: 1;
  }

  .media-layout__side {
    grid-column: 1;
    grid-row: 2;
    position: static;
    max-height: none;
  }
}

/* Fallback if container queries unsupported: still prefer side-by-side */
@supports not (container-type: inline-size) {
  @media (max-width: 520px) {
    .media-layout {
      grid-template-columns: 1fr !important;
    }

    .media-layout__side {
      grid-column: auto;
      grid-row: auto;
      position: static;
      max-height: none;
    }
  }
}

.media-intro {
  margin: 0 0 1.25rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
}

.media-intro p {
  margin: 0 0 0.55rem;
}

.media-intro p:last-child {
  margin-bottom: 0;
}

.media-intro__faq {
  margin-top: 0.65rem !important;
  font-size: 0.9rem;
}

.media-toolbar__filters--roles {
  margin-top: 0.15rem;
}

.media-collection-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 0.65rem;
}

.media-collection-chips[hidden] {
  display: none !important;
}

.media-filter-summary {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.media-filter-summary[hidden] {
  display: none !important;
}

.media-card__collection {
  margin: 0.25rem 0 0;
  display: inline-block;
  max-width: 100%;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-role-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.media-role-pick {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  font-size: 0.82rem;
  cursor: pointer;
  background: var(--bg-deep);
  color: var(--text-secondary);
}

.media-role-pick:has(input:checked) {
  border-color: rgba(201, 168, 76, 0.55);
  color: var(--text-primary);
  background: rgba(201, 168, 76, 0.12);
}

.media-role-pick input {
  margin: 0;
}

/* Full role name under title (not overlaid on the thumb — no clipping) */
.media-card__role-label {
  margin: 0.3rem 0 0;
  display: inline-block;
  max-width: 100%;
  padding: 0.18rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  line-height: 1.2;
  white-space: nowrap;
  color: #f4f4f7;
  background: rgba(90, 140, 220, 0.95);
}

.media-card__role-label--character {
  background: rgba(90, 140, 220, 0.95);
}

.media-card__role-label--location {
  background: rgba(70, 160, 110, 0.95);
}

.media-card__role-label--prop {
  background: rgba(180, 120, 70, 0.95);
}

/* Colored left edge on thumb as a secondary cue */
.media-card__thumb--role-character {
  box-shadow: inset 3px 0 0 0 rgba(90, 140, 220, 0.95);
}

.media-card__thumb--role-location {
  box-shadow: inset 3px 0 0 0 rgba(70, 160, 110, 0.95);
}

.media-card__thumb--role-prop {
  box-shadow: inset 3px 0 0 0 rgba(180, 120, 70, 0.95);
}

/* --------------------------------------------------------------------------
   Reference library & scripts (Stage 5)
   -------------------------------------------------------------------------- */
.ref-intro,
.scripts-toolbar__project {
  color: var(--text-secondary);
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

.scripts-toolbar__other {
  color: var(--text-muted);
  font-weight: 400;
}

.ref-intro code {
  font-size: 0.85em;
  color: var(--accent);
}

/* Sticky filter/search bar — stays visible while scrolling the long library
   (scrollport is .workspace__content in the portal, not the window).
   Pull fully into content top padding so cards never show through a gap above the bar. */
.ref-toolbar {
  --ref-toolbar-pad-x: 1.35rem;
  /* Pull into .workspace__content top padding so cards don’t peek above the bar */
  --ref-toolbar-pull-top: 1.25rem;
  /* Visual air above chips — smaller than pull so filters sit higher in the panel */
  --ref-toolbar-inner-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  z-index: 30;
  margin: calc(-1 * var(--ref-toolbar-pull-top)) calc(-1 * var(--ref-toolbar-pad-x)) 0.7rem;
  padding: var(--ref-toolbar-inner-top) var(--ref-toolbar-pad-x) 0.65rem;
  /* Solid fill — no translucent “peek” of scrolling cards */
  background: var(--bg-base, #111114);
  border-bottom: 1px solid var(--border-subtle);
  /* Solid band above sticky edge (not clipped like a negative ::before with overflow-y) */
  box-shadow:
    0 -24px 0 0 var(--bg-base, #111114),
    0 12px 24px rgba(0, 0, 0, 0.42);
  /* Many category chips: keep bar usable on short screens */
  max-height: min(40vh, 13.5rem);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.ref-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ref-toolbar__filters a.chip {
  text-decoration: none;
}

.ref-toolbar__search {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.ref-toolbar__search input[type="search"] {
  flex: 1;
  min-width: 12rem;
  max-width: 24rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
}

.ref-count {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

/* Hash jumps to a card should land below the sticky filter bar */
.workspace--section-reference .workspace__content .ref-card[id],
.workspace--section-reference .workspace__content [id^="ref-"] {
  scroll-margin-top: 9.5rem;
}

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

.ref-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.ref-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #101014;
  overflow: hidden;
}

.ref-card__media img,
.ref-card__media video,
.ref-card__still,
.ref-card__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ref-card__media img[hidden],
.ref-card__media video[hidden],
.ref-card__still[hidden],
.ref-card__video[hidden],
.ref-card__placeholder[hidden] {
  display: none !important;
}

.ref-card__placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(145deg, #1a1a22 0%, #0c0c10 100%);
  color: var(--accent);
  font-size: 1.75rem;
  font-weight: 700;
  opacity: 0.7;
}

/* Film-icon still ↔ video toggle (dual-media cards) */
.ref-card__media-toggle {
  position: absolute;
  top: 0.45rem;
  right: 0.45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(12, 12, 16, 0.72);
  color: #f2f2f5;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}

.ref-card__media-toggle:hover,
.ref-card__media-toggle:focus-visible {
  background: rgba(201, 168, 76, 0.92);
  color: #121218;
  border-color: rgba(201, 168, 76, 0.95);
  outline: none;
}

.ref-card__media-toggle.is-video,
.ref-card__media-toggle[aria-pressed="true"] {
  background: rgba(201, 168, 76, 0.95);
  color: #121218;
  border-color: transparent;
}

.ref-card__media-toggle-icon {
  display: block;
  pointer-events: none;
}

/* Video-only cards (camera movements): subtle cue that hover/tap plays the loop */
.ref-card--video-only .ref-card__media {
  cursor: pointer;
}

.ref-card--video-only .ref-card__media::after {
  content: "";
  position: absolute;
  left: 0.45rem;
  bottom: 0.45rem;
  width: 1.55rem;
  height: 1.55rem;
  border-radius: 999px;
  background: rgba(12, 12, 16, 0.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2f2f5'%3E%3Cpath d='M8 5v14l11-7L8 5z'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
  opacity: 0.85;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

.ref-card--video-only:hover .ref-card__media::after,
.ref-card--video-only:focus-within .ref-card__media::after {
  opacity: 0;
}

/* YouTube autoplay+loop demos — full frame; chrome covered by still (preferred) or title card */
.ref-card__yt {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none; /* never navigate away to YouTube */
  background: #0a0a0c;
  opacity: 0;
  transition: opacity 0.34s ease;
}

.ref-card__yt.is-playing,
.ref-card__yt.is-ready.is-playing {
  opacity: 1;
}

.ref-card--yt .ref-card__yt.is-ready.is-playing {
  opacity: 1;
}

/* Hide the iframe while still/title covers YouTube start/seek/end chrome */
.ref-card__yt.is-playing.is-chrome-cover,
.ref-card__yt.is-ready.is-playing.is-chrome-cover,
.ref-card--yt .ref-card__yt.is-ready.is-playing.is-chrome-cover {
  opacity: 0 !important;
}

/* Still frame as chrome cover (first ~3–4s and last ~2s of the loop) */
.ref-card__still--yt-cover {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.34s ease;
}

.ref-card__still--yt-cover.is-yt-cover,
.ref-card.is-yt-covering .ref-card__still--yt-cover {
  z-index: 4;
  opacity: 1 !important;
  display: block !important;
}

/* When covering with still, keep still visible even if [hidden] was set for video mode */
.ref-card__still--yt-cover.is-yt-cover[hidden],
.ref-card.is-yt-covering .ref-card__still--yt-cover[hidden] {
  display: block !important;
  visibility: visible;
}

.ref-card__yt-mount,
.ref-card__yt > iframe,
.ref-card__yt-mount iframe {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  max-width: none !important;
  pointer-events: none !important;
  /* Full frame — no scale crop; logo chrome is covered by the title card window */
  transform: none !important;
}

/*
 * Black technique title card: YouTube chrome-cover window, or static stand-in
 * when a host MP4 is not served (remake pending / bandwidth).
 */
.ref-card__yt-titlecard {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  padding: 1rem 1.15rem;
  box-sizing: border-box;
  background: #0a0a0c;
  opacity: 0;
  transition: opacity 0.34s ease;
  pointer-events: none;
  text-align: center;
}

.ref-card__yt-titlecard.is-visible,
.ref-card__yt-titlecard--static {
  opacity: 1;
}

.ref-card__yt-titlecard-text {
  margin: 0;
  max-width: 100%;
  font-family: inherit;
  font-size: clamp(0.95rem, 2.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  color: #e8e6e3;
  text-wrap: balance;
}

.ref-card__yt-titlecard-note {
  margin: 0;
  max-width: 16rem;
  font-family: inherit;
  font-size: clamp(0.68rem, 1.8vw, 0.78rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.4;
  color: rgba(232, 230, 227, 0.62);
  text-wrap: balance;
}

/* Local remake placeholder: no play-icon overlay (nothing to play yet) */
.ref-card--remake.ref-card--video-only .ref-card__media::after {
  display: none;
}

.ref-card__yt-poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ref-card__body {
  padding: 0.9rem 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.ref-card__cat {
  margin: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.ref-card__title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
}

.ref-card__desc {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-secondary);
  flex: 1 1 auto;
  min-height: 0;
  /* Cap long copy (e.g. Fortiche / hybrid styles) so cards stay closer in height;
     short descriptions never need to scroll. */
  max-height: 6.75rem; /* ~4–5 lines at 0.9rem / 1.45 */
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.15rem;
  scrollbar-width: thin;
}

.ref-card__desc::-webkit-scrollbar {
  width: 6px;
}

.ref-card__desc::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
}

.ref-card__desc::-webkit-scrollbar-track {
  background: transparent;
}

.ref-card__tags {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ref-card__example {
  margin-top: 0.5rem;
  padding: 0.65rem 0.7rem;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: var(--radius-sm);
}

.ref-card__example-label {
  margin: 0 0 0.25rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.ref-card__example-title {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}

.ref-card__example-dl {
  margin: 0;
}

.ref-card__example-dl > div {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.35rem;
  font-size: 0.78rem;
  line-height: 1.4;
}

.ref-card__example-dl dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
}

.ref-card__example-dl dd {
  margin: 0;
  color: var(--text-secondary);
}

.ref-card__example-link {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(201, 168, 76, 0.45);
  text-underline-offset: 0.15em;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.ref-card__example-link:hover,
.ref-card__example-link:focus-visible {
  color: var(--text-primary);
  text-decoration-color: var(--accent);
}

.ref-card__related {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
}

.ref-card__related-label {
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--text-muted);
}

.ref-card__example--package {
  background: rgba(201, 168, 76, 0.09);
  border-color: rgba(201, 168, 76, 0.32);
}

.ref-card__example-note {
  margin: 0.45rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.ref-card__prompt-wrap {
  margin-top: 0.5rem;
}

.ref-card__prompt-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}

.ref-card__prompt {
  width: 100%;
  margin-bottom: 0.45rem;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.ref-card__prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.ref-add-board__icon {
  display: inline-block;
  font-weight: 700;
  margin-right: 0.15rem;
}

.ref-add-board.is-just-added {
  opacity: 0.85;
}

.ref-card__facs-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.65rem;
  margin: 0.35rem 0 0.15rem;
  font-size: 0.8rem;
}

.ref-card__muscle {
  color: var(--text-muted);
  font-style: italic;
}

/* Full-page Prompt Board */
.prompts-page .prompt-board--full {
  padding: 1.15rem 1.25rem 1.35rem;
  max-width: none;
  width: 100%;
}

.prompt-board-work {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(22rem, 1fr);
  gap: 1rem 1.15rem;
  align-items: start;
  margin-bottom: 1rem;
}

.prompt-board-work__side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.prompt-board-work__main {
  min-width: 0;
}

.prompt-ai-refs {
  min-width: 0;
  padding: 0.85rem 0.9rem 1rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.prompt-ai-refs__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
  flex-wrap: wrap;
}

.prompt-ai-refs__tools {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.prompt-ai-refs__scope-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.prompt-ai-refs__tools .prompt-slot-filter {
  max-width: 9.5rem;
  margin: 0;
}

.prompt-ai-refs__title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.prompt-ai-refs__hint {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.prompt-ai-refs__status {
  margin: 0 0 0.5rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  min-height: 1.1em;
}

.prompt-ai-refs__list {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  max-height: 14rem;
  overflow: auto;
}

.prompt-ai-refs__foot {
  margin: 0.75rem 0 0;
  font-size: 0.8rem;
}

.prompt-ai-ref-card {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0.5rem;
  padding: 0.4rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
}

.prompt-ai-ref-card__thumb {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #101014;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prompt-ai-ref-card__thumb img,
.prompt-ai-ref-card__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prompt-ai-ref-card__icon {
  color: var(--accent);
  font-size: 1.1rem;
  opacity: 0.85;
}

.prompt-ai-ref-card__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.prompt-ai-ref-card__name {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prompt-ai-ref-card__meta {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.prompt-ai-ref-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.2rem;
}

.prompt-ai-ref-card__actions .btn {
  font-size: 0.72rem;
  padding: 0.2rem 0.45rem;
}

@media (max-width: 900px) {
  .prompt-board-work {
    grid-template-columns: 1fr;
  }

  .prompt-board-work__side {
    position: static;
    max-height: none;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .prompt-board-organize .prompt-recent-slots__list {
    grid-template-columns: 1fr;
  }
}

.prompt-board__text--full {
  min-height: 16rem;
  font-size: 0.92rem;
  line-height: 1.5;
}

.prompt-board__actions--full {
  margin-bottom: 0.35rem;
}

.prompt-board__slots--full {
  max-height: none;
  gap: 0.75rem;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  overflow: visible;
}

.prompt-board__slots--full .prompt-slot {
  width: 2.35rem;
  height: 2.35rem;
}

/* Prompt slot groups */
.prompt-board-organize {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.prompt-board-status {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}

.prompt-board-status__item {
  min-width: 0;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-deep);
}

.prompt-board-status__label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.prompt-board-status__value {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.prompt-board-status__value:hover:not(:disabled) {
  color: var(--accent);
}

.prompt-board-status__value:disabled,
.prompt-board-status__value--static {
  cursor: default;
  color: var(--text-primary);
}

.prompt-group-create,
.prompt-templates {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem 0.75rem;
  margin: 0;
}

.prompt-board-organize .prompt-group-create,
.prompt-board-organize .prompt-templates {
  margin: 0;
}

.prompt-board-organize .prompt-recent-slots {
  margin: 0;
}

.prompt-board-organize .prompt-recent-slots__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.4rem;
}

.prompt-board-organize .prompt-recent-slots__empty {
  grid-column: 1 / -1;
}

.prompt-templates {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  background: rgba(0, 0, 0, 0.18);
}

.prompt-group-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.75rem;
}

.prompt-group-filter[hidden] {
  display: none !important;
}

.prompt-group-filter__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

.prompt-group-filter .chip {
  font-size: 0.78rem;
  padding: 0.28rem 0.55rem;
}

.prompt-group {
  border: 1.5px solid rgba(201, 168, 76, 0.45);
  border-radius: var(--radius-md, 8px);
  background: rgba(201, 168, 76, 0.05);
  padding: 0.55rem 0.65rem 0.65rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.prompt-group.is-drop-target {
  border-color: var(--accent, #c9a84c);
  border-style: solid;
  background: rgba(201, 168, 76, 0.12);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.18);
}

.prompt-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin-bottom: 0.45rem;
}

.prompt-group__name {
  flex: 1 1 10rem;
  min-width: 8rem;
  max-width: 22rem;
  box-sizing: border-box;
  padding: 0.3rem 0.5rem;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent, #c9a84c);
  background: var(--bg-deep, #0c0c10);
  border: 1px solid rgba(201, 168, 76, 0.35);
  border-radius: var(--radius-sm, 6px);
}

.prompt-group__name:focus {
  outline: none;
  border-color: var(--accent, #c9a84c);
}

.prompt-group__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.prompt-group__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: auto;
  align-items: center;
}

.prompt-group__delete {
  margin-left: 0;
}

/* First-run tips */
.prompt-tips {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: var(--radius-md, 8px);
  background: rgba(201, 168, 76, 0.08);
}

.prompt-tips[hidden] {
  display: none !important;
}

.prompt-tips__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}

.prompt-tips__title {
  font-size: 0.95rem;
  color: var(--accent, #c9a84c);
}

.prompt-tips__dismiss {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.25rem;
}

.prompt-tips__list {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.prompt-tips__list li {
  margin-bottom: 0.35rem;
}

.prompt-tips__foot {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.prompt-tips-again-wrap {
  margin: 0 0 0.75rem;
}

.script-seed__status {
  min-height: 1.15em;
  margin: 0.35rem 0 0.5rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.script-seed__status.is-error {
  color: #e07070;
}

.prompt-group__body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2.75rem;
  padding: 0.35rem;
  border-radius: var(--radius-sm, 6px);
  border: 1px dashed transparent;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.prompt-group__body.is-drop-target {
  border-color: rgba(201, 168, 76, 0.55);
  background: rgba(201, 168, 76, 0.08);
}

.prompt-group__hint {
  margin: 0;
  padding: 0.35rem 0.25rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  width: 100%;
}

.prompt-slots-ungrouped {
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  padding: 0.55rem 0.65rem 0.65rem;
  background: rgba(0, 0, 0, 0.15);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.prompt-slots-ungrouped.is-drop-target {
  border-color: rgba(201, 168, 76, 0.55);
  border-style: solid;
  background: rgba(201, 168, 76, 0.06);
}

.prompt-slots-ungrouped__label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.prompt-slots-ungrouped__body {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 2.5rem;
}

.prompt-slot.is-dragging {
  opacity: 0.45;
}

.prompt-slot.is-drop-target {
  border-color: var(--accent, #c9a84c) !important;
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.35);
  transform: scale(1.06);
}

.prompt-slot.has-history .prompt-slot__hist {
  position: absolute;
  bottom: 0.18rem;
  left: 0.18rem;
  width: 0.28rem;
  height: 0.28rem;
  border-radius: 50%;
  background: #7eb8e8;
}

.prompt-group__project {
  max-width: 11rem;
  box-sizing: border-box;
  padding: 0.28rem 0.4rem;
  font: inherit;
  font-size: 0.78rem;
  color: var(--text-secondary);
  background: var(--bg-deep, #0c0c10);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 6px);
}

.prompt-slot-history {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-deep, #0c0c10);
}

.prompt-slot-history__label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.prompt-slot-history__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.prompt-slot-history__item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.4rem 0.65rem;
  padding: 0.4rem 0;
  border-top: 1px solid var(--border-subtle);
}

.prompt-slot-history__item:first-child {
  border-top: 0;
  padding-top: 0;
}

.prompt-slot-history__meta {
  width: 100%;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.prompt-slot-history__preview {
  flex: 1 1 12rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.35;
}

/* Prompt board — mobile / narrow screens */
@media (max-width: 767px) {
  .prompts-page .prompt-board--full {
    max-width: none;
    padding: 0.85rem 0.75rem 1rem;
  }

  .prompt-board__text--full {
    min-height: 10rem;
    font-size: 1rem;
  }

  .prompt-board__actions--full {
    gap: 0.4rem;
  }

  .prompt-board__actions--full .btn {
    flex: 1 1 auto;
    min-height: 2.5rem;
  }

  .prompt-group-create {
    flex-direction: column;
    align-items: stretch;
  }

  .prompt-group__head {
    flex-direction: column;
    align-items: stretch;
  }

  .prompt-group__name,
  .prompt-group__project {
    max-width: none;
    width: 100%;
  }

  .prompt-group__delete {
    margin-left: 0;
  }

  .prompt-board__slots--full .prompt-slot,
  .prompts-page .prompt-slot {
    width: 2.75rem;
    height: 2.75rem;
  }

  .prompt-slot-menu--full {
    position: relative;
  }

  .prompt-slot-menu__actions .btn {
    min-height: 2.4rem;
  }

  /* Compact side prompt board: slightly taller slots for touch */
  .portal-aside .prompt-slot {
    width: 2.1rem;
    height: 2.1rem;
  }
}

@media (max-width: 480px) {
  .page-header__lead {
    font-size: 0.88rem !important;
  }
}

.prompt-slot-menu--full {
  margin-top: 1rem;
}

.prompt-slot-menu__preview--full {
  min-height: 8rem;
  font-size: 0.88rem;
}

/* —— Portal Prompt board (side panel) —— */
.prompt-board {
  border-color: rgba(201, 168, 76, 0.28);
}

.prompt-board__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.prompt-board__head .context-block__title {
  margin: 0;
}

.prompt-board__count {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.prompt-board__hint {
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.prompt-board__hint a {
  color: var(--accent, #c9a84c);
}

.prompt-board__text {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.5rem;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-deep, #0c0c10);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  resize: vertical;
  min-height: 6.5rem;
}

.prompt-board__text.is-flash {
  border-color: rgba(201, 168, 76, 0.65);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.25);
}

.prompt-board__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.prompt-board__slots-label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.prompt-board__slots {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.45rem;
  max-height: 11rem;
  overflow-y: auto;
  padding: 0.15rem 0.1rem 0.25rem;
}

.prompt-slot {
  position: relative;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 0.5rem;
  border: 1px solid var(--border-subtle);
  background: var(--bg-deep, #0c0c10);
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    color 0.15s ease;
}

.prompt-slot:hover,
.prompt-slot:focus-visible {
  border-color: rgba(201, 168, 76, 0.55);
  color: var(--accent, #c9a84c);
  outline: none;
}

.prompt-slot.is-filled {
  border-color: rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.1);
  color: var(--accent, #c9a84c);
}

.prompt-slot__num {
  font-size: 0.72rem;
  font-weight: 700;
}

.prompt-slot__label {
  font-size: 0.58rem;
  font-weight: 700;
  line-height: 1.1;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 0.1rem;
}

.prompt-slot.has-label .prompt-slot__label {
  font-size: 0.55rem;
  letter-spacing: -0.01em;
}

.prompt-slot__dot {
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 50%;
  background: var(--accent, #c9a84c);
}

.prompt-slot-filter-wrap {
  margin: 0 0 0.45rem;
}

.prompt-slot-filter {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text-primary);
  background: var(--bg-deep, #0c0c10);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.prompt-slot-filter-empty {
  margin: 0.25rem 0 0;
  width: 100%;
}

.prompt-board__status {
  min-height: 1.1em;
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.prompt-board__status.is-error {
  color: #e07070;
}

.prompt-slot-menu {
  margin-top: 0.65rem;
  padding: 0.65rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-base, #121218);
}

.prompt-slot-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  font-size: 0.9rem;
}

.prompt-slot-menu__close {
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
}

.prompt-slot-menu__preview {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.55rem;
  font: inherit;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
  background: var(--bg-deep, #0c0c10);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  resize: vertical;
}

.prompt-slot-menu__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Media AI reference badge */
.media-card__ref {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 2;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 0.12rem 0.35rem;
  border-radius: 0.25rem;
  background: rgba(201, 168, 76, 0.9);
  color: #121218;
}

.media-card--reference {
  border-color: rgba(201, 168, 76, 0.35);
}

.media-card__has-prompt {
  margin: 0.25rem 0 0;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent, #c9a84c);
}

.media-meta-prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.45rem;
}

#media-meta-prompt {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.45;
  resize: vertical;
  min-height: 5rem;
}

/* Scripts */
.scripts-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

.scripts-toolbar__exports {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.rc-export {
  position: relative;
  display: inline-block;
}

.rc-export__menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 20;
  min-width: 13.5rem;
  padding: 0.3rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.rc-export__item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.4rem 0.55rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.rc-export__item:hover,
.rc-export__item:focus {
  background: rgba(201, 168, 76, 0.14);
  color: var(--text-primary);
}

.scripts-export-label {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-left: 0.35rem;
}

.scripts-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1100px) {
  .scripts-layout {
    grid-template-columns: minmax(0, 1.4fr) minmax(16rem, 0.9fr);
    align-items: start;
  }
}

.scripts-main {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

.scripts-panel {
  padding: 1rem 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.scripts-create__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.scripts-create__row input {
  flex: 1;
  min-width: 12rem;
}

.scripts-list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.scripts-list > li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
}

.scripts-list__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 12rem;
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-medium);
  color: var(--text-secondary);
  font-size: 0.9rem;
  text-decoration: none;
  gap: 0.15rem;
}

.scripts-list__title {
  font-weight: 600;
  color: var(--text-primary);
}

.scripts-list__meta {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.scripts-list__exports {
  display: flex;
  gap: 0.45rem;
  font-size: 0.78rem;
}

.scripts-list__exports a {
  color: var(--accent, #c9a84c);
  text-decoration: none;
}

.scripts-list__exports a:hover {
  text-decoration: underline;
}

.scripts-list__link:hover,
.scripts-list__link.is-active {
  border-color: rgba(201, 168, 76, 0.45);
  color: var(--accent);
  background: var(--accent-soft);
}

/* Storyboard import: mode + drag-drop zone */
.sb-import-mode {
  border: 0;
  margin: 0 0 0.75rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  align-items: center;
}

.sb-import-mode__legend {
  width: 100%;
  padding: 0;
  margin: 0 0 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sb-import-mode__option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  font-size: 0.9rem;
}

.sb-import-mode__option.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.sb-import-new-fields,
.sb-import-append-fields {
  margin-bottom: 0.75rem;
}

.sb-import-drop {
  position: relative;
  margin: 0 0 0.85rem;
  min-height: 7.5rem;
  border: 1.5px dashed rgba(201, 168, 76, 0.35);
  border-radius: var(--radius-md, 8px);
  background: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}

.sb-import-drop:hover,
.sb-import-drop:focus-visible {
  border-color: rgba(201, 168, 76, 0.7);
  background: rgba(201, 168, 76, 0.06);
}

.sb-import-drop.is-dragover {
  border-color: var(--accent, #c9a84c);
  border-style: solid;
  background: rgba(201, 168, 76, 0.12);
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.15);
}

.sb-import-drop.has-files {
  border-style: solid;
  border-color: rgba(201, 168, 76, 0.5);
}

.sb-import-drop__input {
  /* Visually hidden; zone click / keyboard opens the picker */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.sb-import-drop__ui {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  min-height: 7.5rem;
  padding: 1rem 1.25rem;
  text-align: center;
}

.sb-import-drop__title {
  margin: 0;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text, #eee);
}

.sb-import-drop__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sb-import-drop__list {
  margin: 0.5rem 0 0;
  max-width: 36rem;
  font-size: 0.78rem;
  color: var(--accent, #c9a84c);
  word-break: break-word;
}

.sb-stack-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.sb-stack-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-deep, #0c0c10);
}

.sb-stack-list__item.is-active {
  border-color: rgba(201, 168, 76, 0.45);
}

.sb-stack-list__item > a {
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.sb-stack-list__item > a span {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.sb-stack-list__exports {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.78rem;
}

.sb-stack-list__exports a {
  color: var(--accent, #c9a84c);
  text-decoration: none;
}

.sb-stack-list__exports a:hover {
  text-decoration: underline;
}

.script-editor {
  font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, monospace;
  font-size: 0.9rem;
  line-height: 1.55;
  min-height: 22rem;
}

.script-format-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.5rem;
  padding: 0.45rem 0.5rem;
  background: var(--bg-deep, #0c0c10);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.script-format-bar__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 0.25rem;
}

.script-format-bar__help {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--accent, #c9a84c);
  text-decoration: none;
}

.script-format-bar__help:hover {
  text-decoration: underline;
}

.script-seed {
  margin: 0.85rem 0 1rem;
  padding: 0.85rem 1rem 1rem;
}

.script-seed__prompt {
  width: 100%;
  box-sizing: border-box;
  margin: 0.35rem 0 0.65rem;
  padding: 0.55rem 0.65rem;
  font: inherit;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text-secondary);
  background: var(--bg-deep, #0c0c10);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  resize: vertical;
  min-height: 5rem;
}

.scripts-shots {
  padding: 1rem 1.1rem 1.25rem;
  background: #0e0e12;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  position: sticky;
  top: 0.5rem;
}

.shot-form {
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border-subtle);
}

.shot-form__mode {
  margin: 0 0 0.75rem;
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
}

.shot-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.shot-list__item {
  padding: 0.75rem 0.85rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.shot-list__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.shot-list__actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-size: 0.8rem;
}

.shot-list__actions a {
  color: var(--text-secondary);
}

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

button.linkish {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: #e8a0a0;
  cursor: pointer;
  text-decoration: underline;
}

.shot-list__line {
  margin: 0.2rem 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.shot-list__line span {
  display: inline-block;
  min-width: 3.5rem;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.shot-list__excerpt {
  margin: 0.4rem 0 0;
  padding: 0.4rem 0.5rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--bg-deep);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  white-space: pre-wrap;
}

.shot-list__ref {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.shot-video-bar {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.7rem;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.2);
  border-radius: var(--radius-sm);
}

.shot-video-bar__progress {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.shot-video-bar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.shot-video-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.shot-list__title-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  min-width: 0;
}

.shot-list__pick {
  display: inline-flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
}

.shot-list__check {
  margin: 0;
  width: 0.95rem;
  height: 0.95rem;
  accent-color: var(--accent);
}

button.linkish-primary {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}

.shot-list__video-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.4rem;
  border-radius: 999px;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
}

.shot-list__video-badge.is-done {
  color: #1a1a1a;
  background: var(--accent);
  border-color: transparent;
}

.shot-list__video-badge.is-reshoot {
  color: #1a1a1a;
  background: #c98450;
  border-color: transparent;
}

.shot-list__item.is-video-done {
  border-color: rgba(201, 168, 76, 0.35);
}

.shot-list__item.is-video-reshoot {
  border-color: rgba(201, 132, 80, 0.45);
}

.shot-list__video {
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-subtle);
}

.shot-list__video-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.shot-list__video-file {
  margin: 0.4rem 0 0;
  font-size: 0.75rem;
  color: var(--text-muted);
  word-break: break-all;
}

.shot-list__video-preview {
  margin-top: 0.45rem;
}

.shot-list__video-el {
  display: block;
  width: 100%;
  max-height: 12rem;
  border-radius: var(--radius-sm);
  background: #000;
}

.text-muted {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Stage 6 — Storyboard & rough-cut
   -------------------------------------------------------------------------- */
.tool-mobile-block .empty-state {
  margin: 1rem auto;
}

.sb-toolbar,
.rc-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border-subtle);
}

/* Soft-launch path under rough-cut toolbar (collapsible help-panel) */
.rc-recommend {
  margin: 0 0 1rem;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid rgba(201, 168, 76, 0.28);
  background: rgba(201, 168, 76, 0.07);
}

details.rc-recommend > .help-panel__summary {
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

details.rc-recommend > .help-panel__body {
  border-top-color: rgba(201, 168, 76, 0.2);
}

.rc-recommend__label {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.rc-recommend__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.rc-recommend__list li {
  margin: 0;
}

.rc-recommend__link {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.rc-recommend__link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.rc-recommend__desc {
  color: var(--text-muted);
}

.rc-recommend__path {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.rc-recommend__path a {
  color: var(--accent);
  font-weight: 600;
}

/* Collapsible help panels (Sequence Board, Getting started, etc.) */
.help-panel {
  margin: 0 0 0.75rem;
  padding: 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: rgba(255, 255, 255, 0.03);
  overflow: hidden;
}

.help-panel__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
  user-select: none;
}

.help-panel__summary::-webkit-details-marker {
  display: none;
}

.help-panel__summary:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.help-panel__summary-label {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.help-panel__chevron {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
  transition: transform 0.15s ease;
  margin-top: -0.15rem;
}

.help-panel[open] > .help-panel__summary .help-panel__chevron {
  transform: rotate(225deg);
  margin-top: 0.15rem;
}

.help-panel__body {
  padding: 0 0.85rem 0.75rem;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.help-panel__body > :first-child {
  margin-top: 0.55rem;
}

.help-panel__body > :last-child {
  margin-bottom: 0;
}

.help-panel--compact {
  margin-bottom: 0.55rem;
}

.help-panel .seq-hint {
  margin: 0;
}

/* Shared Resolve handoff strip (Sequence Board + Rough cut) */
.resolve-handoff {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid rgba(201, 168, 76, 0.35);
  background: linear-gradient(135deg, rgba(201, 168, 76, 0.1), rgba(201, 168, 76, 0.04));
}

/* Resolve strip as collapsible help-panel */
details.resolve-handoff {
  padding: 0;
}

details.resolve-handoff > .help-panel__summary {
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 700;
}

details.resolve-handoff > .help-panel__body {
  border-top-color: rgba(201, 168, 76, 0.2);
}

.resolve-handoff__label {
  margin: 0 0 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.resolve-handoff__steps {
  margin: 0 0 0.5rem;
  padding-left: 1.2rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.resolve-handoff__steps li + li {
  margin-top: 0.3rem;
}

.resolve-handoff__steps code {
  font-size: 0.78em;
  padding: 0.05rem 0.25rem;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
}

.resolve-handoff__links {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.resolve-handoff__links a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
}

.resolve-handoff__links a:hover {
  text-decoration: underline;
}

.onboarding__checklist-lead {
  margin: 0.35rem 0 0.5rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.onboarding__checklist {
  margin: 0.35rem 0 0.75rem;
  padding-left: 1.25rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.onboarding__checklist li + li {
  margin-top: 0.35rem;
}

.onboarding__checklist-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.sb-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 1000px) {
  .sb-layout {
    grid-template-columns: minmax(16rem, 22rem) 1fr;
    align-items: start;
  }
}

.sb-form-panel,
.sb-board-panel {
  padding: 1rem 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.sb-image-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.sb-image-actions input[type="file"] {
  max-width: 100%;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.sb-image-preview img,
.sb-current-img img {
  max-width: 100%;
  max-height: 10rem;
  border-radius: var(--radius-sm);
  margin-top: 0.5rem;
}

/* Storyboard draw modal — full drawing board + stamp library */
.sb-draw-modal {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
}

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

.sb-draw-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
}

.sb-draw-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(72rem, 100%);
  max-height: min(96vh, 58rem);
  overflow: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 1rem 1.15rem 1.15rem;
}

.sb-draw-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.sb-draw-modal__head-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.sb-draw-modal.is-enlarged {
  padding: 0.35rem;
}

.sb-draw-modal.is-enlarged .sb-draw-modal__dialog {
  width: 100%;
  height: 100%;
  max-height: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sb-draw-modal.is-enlarged .sb-draw-workspace {
  flex: 1 1 0;
  min-height: 0;
  height: auto;
}

.sb-draw-modal.is-enlarged .sb-draw-stamps {
  max-height: none;
}

.sb-draw-modal.is-enlarged .sb-draw-modal__head,
.sb-draw-modal.is-enlarged .sb-draw-toolbar,
.sb-draw-modal.is-enlarged .sb-draw-actions {
  flex-shrink: 0;
}

.sb-draw-modal.is-enlarged .sb-draw-canvas-wrap {
  max-height: none;
  height: 100%;
  min-height: 0;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sb-draw-modal.is-enlarged #sb-draw-canvas {
  max-width: none;
  max-height: none;
}

.sb-draw-modal__title {
  margin: 0;
  font-size: 1.15rem;
}

.sb-draw-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.55rem 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.55rem 0.7rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.sb-draw-toolgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.sb-draw-toolbtn {
  appearance: none;
  border: 1px solid var(--border-medium);
  background: var(--bg-card);
  color: var(--text-primary, var(--text));
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1.2;
}

.sb-draw-toolbtn:hover {
  border-color: var(--accent, #8b9cff);
}

.sb-draw-toolbtn.is-active {
  background: rgba(139, 156, 255, 0.16);
  border-color: var(--accent, #8b9cff);
  color: var(--text-primary, #f2f2f5);
}

.sb-draw-tool {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
}

.sb-draw-tool input[type="color"],
.sb-draw-tool input[type="range"] {
  font: inherit;
  font-weight: 400;
}

.sb-draw-tool input[type="color"] {
  width: 2.5rem;
  height: 2rem;
  padding: 0;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
}

.sb-draw-tool input[type="range"] {
  width: 7rem;
}

.sb-draw-workspace {
  display: grid;
  grid-template-columns: minmax(11rem, 14rem) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  min-height: 0;
}

.sb-draw-modal.is-enlarged .sb-draw-workspace {
  grid-template-rows: minmax(0, 1fr);
}

.sb-draw-modal.is-enlarged .sb-draw-workspace > * {
  min-height: 0;
}

@media (max-width: 820px) {
  .sb-draw-workspace {
    grid-template-columns: 1fr;
  }
}

.sb-draw-stamps {
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.7rem;
  max-height: min(58vh, 34rem);
  overflow: auto;
}

.sb-draw-stamps__title {
  margin: 0 0 0.25rem;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sb-draw-stamps__hint {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--text-muted);
  opacity: 0.9;
}

.sb-draw-stamps__group {
  margin-bottom: 0.55rem;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 0.45rem;
}

.sb-draw-stamps__group:last-child {
  margin-bottom: 0;
  border-bottom: 0;
  padding-bottom: 0;
}

.sb-draw-stamps__group-title {
  margin: 0 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent, #8b9cff);
  letter-spacing: 0.03em;
  cursor: pointer;
  list-style: none;
}

.sb-draw-stamps__group-title::-webkit-details-marker {
  display: none;
}

.sb-draw-stamps__group-title::before {
  content: "▸ ";
  opacity: 0.7;
}

.sb-draw-stamps__group[open] .sb-draw-stamps__group-title::before {
  content: "▾ ";
}

.sb-draw-stamps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

.sb-draw-stamp {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.3rem 0.25rem 0.35rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #101016;
  color: var(--text-muted);
  cursor: grab;
  font: inherit;
}

.sb-draw-stamp:hover {
  border-color: var(--border-medium);
  color: var(--text-primary, #f2f2f5);
}

.sb-draw-stamp.is-active {
  border-color: var(--accent, #8b9cff);
  box-shadow: 0 0 0 1px rgba(139, 156, 255, 0.35);
}

.sb-draw-stamp__thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  pointer-events: none;
}

.sb-draw-stamp__label {
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.sb-draw-canvas-wrap {
  background: #0a0a0c;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: auto;
  max-height: min(58vh, 34rem);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 12rem;
  min-width: 0;
}

.sb-draw-canvas-stack {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.sb-draw-canvas-stack canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

#sb-draw-canvas {
  cursor: crosshair;
  touch-action: none;
  background: #1a1a1f;
}

#sb-draw-ghost {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background: transparent;
}

.sb-draw-hint,
.sb-draw-actions {
  margin-top: 0.75rem;
}

.sb-board {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.sb-card {
  display: grid;
  grid-template-columns: 2rem minmax(5rem, 8rem) 1fr auto;
  gap: 0.75rem;
  align-items: start;
  padding: 0.75rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: grab;
}

.sb-card.is-dragging {
  opacity: 0.6;
  border-color: var(--accent);
}

.sb-card__num {
  font-weight: 700;
  color: var(--accent);
  font-size: 0.9rem;
}

.sb-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #0a0a0c;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.sb-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sb-card__placeholder {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.sb-card__add-still {
  position: absolute;
  inset: 0;
  cursor: pointer;
  margin: 0;
}

.sb-card__add-still input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.sb-card__thumb:hover .sb-card__placeholder {
  color: var(--accent);
}

.sb-image-actions #sb_image {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
}

.sb-card__title {
  margin: 0 0 0.25rem;
  font-size: 0.95rem;
}

.sb-card__notes {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.sb-card__shot {
  margin: 0.35rem 0 0;
  font-size: 0.75rem;
  color: var(--accent);
}

.sb-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: flex-end;
}

@media (max-width: 700px) {
  .sb-card {
    grid-template-columns: 1.5rem 1fr;
  }
  .sb-card__thumb {
    grid-column: 1 / -1;
  }
  .sb-card__actions {
    grid-column: 1 / -1;
  }
}

/* Rough cut */
.rc-help-panel {
  margin: 0 0 1rem;
}

.rc-help-panel[hidden] {
  display: none !important;
}

.rc-help-panel__title {
  margin: 0 0 0.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rc-help-panel__subtitle {
  margin: 1.15rem 0 0.5rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}

.rc-help-panel__para {
  margin: 0 0 0.75rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.rc-help-panel__list {
  margin: 0 0 0.75rem;
  padding-left: 1.2rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.rc-help-panel__list li {
  margin-bottom: 0.5rem;
}

.rc-help-panel__list strong {
  color: var(--text-primary);
}

.rc-help-panel__note {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.rc-app {
  position: relative;
}

.rc-hotkeys {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 1.25rem 1rem;
  background: rgba(0, 0, 0, 0.42);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.rc-hotkeys.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.rc-hotkeys__panel {
  width: min(28rem, 100%);
  max-height: min(70vh, 32rem);
  overflow: auto;
  padding: 0.85rem 1rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.rc-hotkeys__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.65rem;
}

.rc-hotkeys__title {
  margin: 0;
  font-size: 1.05rem;
}

.rc-hotkeys__list {
  margin: 0;
  display: grid;
  gap: 0.35rem 0.75rem;
}

.rc-hotkeys__list > div {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.4rem 0.75rem;
  align-items: baseline;
}

.rc-hotkeys__list dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

.rc-hotkeys__list dd {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.rc-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.45rem;
}

.rc-title-row label {
  font-weight: 600;
  font-size: 0.9rem;
}

.rc-title-row input {
  flex: 1;
  min-width: 12rem;
  max-width: 24rem;
  padding: 0.45rem 0.65rem;
  font: inherit;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
}

.rc-status {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.rc-layout {
  display: block;
}

/* Monitor row: portal nav stays left of the workspace. Inside Rough cut:
   bin | program (fills down to the timeline) | transport/stitch/inspector. */
.rc-monitor-row {
  display: grid;
  grid-template-columns: minmax(12rem, 14.5rem) minmax(0, 1fr) minmax(15rem, 18rem);
  gap: 0.5rem 0.65rem;
  align-items: stretch;
  margin: 0 0 0.4rem;
}

.rc-monitor-row > .rc-bin-col,
.rc-monitor-row > .rc-program,
.rc-monitor-row > .rc-program-side {
  min-height: 0;
}

/* Side rail sets the row height. Left column + viewer stretch to match and must not grow it. */
.rc-monitor-row > .rc-bin-col,
.rc-monitor-row > .rc-program {
  height: 0;
  min-height: 100%;
  overflow: hidden;
}

.rc-bin-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rc-bin-col > .rc-bin {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

.rc-bin-col > .rc-duration {
  flex: 0 0 auto;
  margin: 0.3rem 0.1rem 0;
  padding: 0;
  font-size: 0.75rem;
  line-height: 1.3;
  white-space: normal;
}

@media (max-width: 1080px) {
  .rc-monitor-row {
    grid-template-columns: minmax(11rem, 13.5rem) minmax(0, 1fr);
  }

  .rc-program-side {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(12rem, 18rem) minmax(0, 1fr);
    max-height: none;
  }
}

.rc-source {
  flex: 0 0 auto;
  margin: 0 0 0.45rem;
  padding: 0.35rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-deep, #0c0c10);
}

.rc-source__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #08080a;
  border-radius: 3px;
  overflow: hidden;
}

.rc-source__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.rc-source__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.4rem;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted);
}

.rc-source__empty[hidden] {
  display: none;
}

.rc-source__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-top: 0.3rem;
}

.rc-source__bar .btn {
  padding: 0.15rem 0.4rem;
  font-size: 0.72rem;
}

.rc-source__io {
  margin: 0.2rem 0 0;
  font-size: 0.7rem;
  color: var(--text-secondary);
}

.rc-bin-item.is-source {
  outline: 1px solid rgba(201, 168, 76, 0.7);
  background: rgba(201, 168, 76, 0.1);
}

.rc-insp-vol input[type="range"] {
  width: 100%;
}

.rc-row__vol {
  display: inline-flex;
  align-items: center;
  margin-left: 0.15rem;
}

.rc-row__vol input[type="range"] {
  width: 3.4rem;
  height: 1.1rem;
}

body.is-rc-slipping,
body.is-rc-slipping .rc-clip {
  cursor: ew-resize;
}

.onboarding__tour-panel {
  margin: 0.85rem 0 0;
  padding: 0.85rem 1rem 1rem;
  border: 1px solid var(--border-medium, var(--border-subtle));
  border-radius: var(--radius-sm);
  background: var(--bg-elevated, rgba(255, 255, 255, 0.03));
}

.onboarding__tour-panel-title {
  margin: 0 0 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #c9a84c);
}

.onboarding__tour-launch {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.5rem;
  margin: 0;
  padding-top: 2.15rem;
}

.onboarding__tour-imagine {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.onboarding__tour-imagine-hint {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1.05rem);
  transform: translateX(-50%);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  color: var(--text-secondary, #c4c2bb);
}

.onboarding__tour-imagine-arrow {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  color: var(--accent, #c9a84c);
  font-size: 1.05rem;
  line-height: 1;
}

.onboarding__tour-imagine .btn {
  white-space: nowrap;
}

.tour-root {
  position: fixed;
  inset: 0;
  z-index: 480;
  pointer-events: none;
}

.tour-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.19);
  pointer-events: none;
}

.tour-spot {
  position: absolute;
  border: 2px solid var(--accent, #c9a84c);
  border-radius: 6px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.26);
  pointer-events: none;
}

.tour-card {
  position: absolute;
  width: min(22rem, calc(100vw - 1.5rem));
  pointer-events: auto;
  background: var(--bg-elevated, #16161b);
  color: var(--text-primary, #f0efe9);
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  padding: 0.85rem 0.95rem 0.9rem;
}

.grab-sb-offer {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 360;
  width: min(22rem, calc(100vw - 1.5rem));
  padding: 0.85rem 0.95rem 0.9rem;
  background: var(--bg-elevated, #16161b);
  color: var(--text-primary, #f0efe9);
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.grab-sb-offer__kicker {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #c9a84c);
}

.grab-sb-offer__title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.grab-sb-offer__hint {
  margin: 0 0 0.65rem;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-secondary, #c4c2bb);
}

.grab-sb-offer__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.grab-sb-offer__select {
  max-width: 11rem;
  font: inherit;
  font-size: 0.82rem;
  padding: 0.28rem 0.4rem;
  background: var(--bg-deep, #0a0a0e);
  color: var(--text-primary, #f0efe9);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.grab-sb-offer__status {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted, #8a8882);
}

.grab-sb-offer__status.is-error {
  color: #e07a7a;
}

.tour-card__kicker {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #c9a84c);
}

.tour-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.tour-card__body {
  margin: 0 0 0.7rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-secondary, #c4c2bb);
}

.tour-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.tour-card__hint {
  font-size: 0.78rem;
  color: var(--text-muted, #8a8882);
}

.tour-more {
  position: absolute;
  width: min(28.5rem, calc(100vw - 1.5rem));
  max-height: min(28rem, calc(100vh - 1.5rem));
  overflow: auto;
  pointer-events: auto;
  background: var(--bg-elevated, #16161b);
  color: var(--text-primary, #f0efe9);
  border: 1px solid var(--border-medium, rgba(255, 255, 255, 0.12));
  border-radius: 10px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5);
  padding: 0.95rem 1.05rem 1rem;
}

.tour-more__kicker {
  margin: 0 0 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent, #c9a84c);
}

.tour-more__title {
  margin: 0 0 0.55rem;
  font-size: 1.12rem;
}

.tour-more__h {
  margin: 0.7rem 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #8a8882);
}

.tour-more__h:first-child {
  margin-top: 0;
}

.tour-more__p {
  margin: 0 0 0.45rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-secondary, #c4c2bb);
}

.tour-more__p:last-child {
  margin-bottom: 0;
}

.tour-more__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.75rem;
}

.onboarding__tour-mobile-note {
  display: none;
  margin: 0.85rem 0 0;
}

@media (max-width: 860px) {
  .onboarding__tour-panel {
    display: none;
  }

  .onboarding__tour-mobile-note {
    display: block;
  }
}

.rc-bin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: 0.45rem;
}

.rc-bin-search {
  width: 100%;
  margin-bottom: 0.45rem;
  padding: 0.4rem 0.55rem;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.rc-bin-project-only {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.rc-bin-filter-label select {
  font: inherit;
  font-size: 0.8rem;
  padding: 0.25rem 0.4rem;
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.rc-bin-coll {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.7rem;
  color: var(--text-muted);
}

.rc-duration {
  margin: 0.25rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.rc-clip__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rc-clip__dur {
  display: block;
  font-size: 0.68rem;
  opacity: 0.85;
  margin-top: 0.1rem;
}

.rc-bin {
  padding: 0.7rem 0.75rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.rc-bin .panel-heading {
  margin: 0 0 0.25rem;
}

.rc-bin > .form-hint {
  margin: 0 0 0.4rem;
}

.rc-bin-list {
  margin-top: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 0;
  min-height: 7.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.rc-bin-item {
  padding: 0.5rem 0.6rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.rc-bin-type {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-right: 0.35rem;
}

.rc-bin-name {
  color: var(--text-primary);
  word-break: break-all;
}

.rc-bin-actions {
  margin-top: 0.4rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.rc-timeline-wrap {
  padding: 0.65rem 0.75rem 0.85rem;
  background: #0e0e12;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  min-width: 0;
}

.rc-timeline-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.35rem 0.5rem;
  margin-bottom: 0.4rem;
  min-width: 0;
  overflow-x: auto;
}

.rc-timeline-head .rc-trans-bar__actions {
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 0.3rem 0.4rem;
}

.rc-timeline-head .panel-heading {
  margin: 0;
}

.rc-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
  align-items: center;
}

.rc-options__item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: 600;
}

.rc-zoom input[type="range"] {
  width: 6.75rem;
  height: 0.9rem;
  margin: 0;
  padding: 0;
  accent-color: var(--accent);
  cursor: pointer;
}

.rc-options__item select {
  font: inherit;
  font-weight: 400;
  font-size: 0.85rem;
  padding: 0.3rem 0.45rem;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
}

.rc-timeline-hint {
  margin: 0 0 0.75rem;
}

.rc-insp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.5rem 0.75rem;
}

/* Program monitor (composed top-layer playback) */
.rc-program {
  position: relative;
  margin: 0;
  padding: 0.4rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.rc-program__stage {
  position: relative;
  width: 100%;
  flex: 1 1 0;
  min-height: 0;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.rc-program__stage.is-matte-red {
  background: #d32f2f;
}

.rc-program__stage.is-matte-red .rc-program__black {
  background: #d32f2f;
}

.rc-guides {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.28rem 0.5rem;
  flex: 0 0 auto;
  margin: 0 0 0.35rem;
  padding: 0 0.05rem;
  font-size: 0.72rem;
  color: var(--text-secondary);
}

.rc-guides__label {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  font-size: 0.66rem;
}

.rc-guides__field,
.rc-guides__check {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  margin: 0;
  white-space: nowrap;
}

.rc-guides__field select,
.rc-guides__field--zoom input[type="range"] {
  max-width: 7.5rem;
  height: 1.55rem;
  padding: 0 0.3rem;
  font-size: 0.72rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-deep, #0a0a0e);
  color: var(--text-primary);
}

.rc-guides__field--zoom input[type="range"] {
  width: 5.5rem;
  max-width: 5.5rem;
  padding: 0;
  height: auto;
}

.rc-guides__check input {
  margin: 0;
}

.rc-program__guides-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  pointer-events: none;
}

.rc-program__stage.is-framing .rc-program__guides-canvas {
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
}

.rc-program__stage.is-framing .rc-program__guides-canvas.is-dragging {
  cursor: grabbing;
}

.rc-program__stage.is-framing .rc-program__video {
  object-position: center center;
}

.rc-program-side {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.45rem;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 0.45rem 0.55rem 0.55rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.rc-program-side__main {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  min-width: 0;
}

.rc-program-side__save {
  align-self: stretch;
  flex-shrink: 0;
}

.rc-program-side__trans-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
}

.rc-program-side__trans-actions .btn {
  width: 100%;
}

.rc-program__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center bottom;
  background: transparent;
  z-index: 1;
  pointer-events: none;
  /* Never CSS-animate opacity — JS drives crossfade; CSS transitions cause flicker */
  transition: none !important;
}

.rc-program__video--b {
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: none !important;
}

.rc-timeline-head__title {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  flex: 0 1 auto;
  min-width: 0;
}

.rc-timeline-head__title .panel-heading {
  flex: 0 0 auto;
  white-space: nowrap;
}

.rc-timeline-head__title .rc-duration {
  flex: 0 1 auto;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 4.5rem;
}

.rc-timeline-head .rc-options {
  flex-wrap: nowrap;
  gap: 0.3rem 0.4rem;
  flex: 0 0 auto;
}

.rc-timeline-head .rc-options__item {
  gap: 0.25rem;
  white-space: nowrap;
}

.rc-timeline-head .rc-options__item select {
  padding: 0.2rem 0.3rem;
  font-size: 0.8rem;
}

.rc-timeline-head .btn--small {
  padding: 0.25rem 0.45rem;
  white-space: nowrap;
}

.rc-trans-bar {
  margin: 0 0 0.65rem;
  padding: 0.55rem 0.65rem;
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius-md);
  background: rgba(201, 168, 76, 0.05);
}

.rc-trans-bar__hint {
  margin: 0 0 0.45rem;
}

.rc-trans-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.rc-trans-bar__count {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 0.15rem;
  white-space: nowrap;
}

.rc-tx-lanes {
  position: relative;
  border-bottom: 1px solid var(--border-subtle);
}

.rc-tx-lanes--audio {
  border-top: 1px solid rgba(120, 160, 220, 0.35);
  margin-top: 0.15rem;
}

.rc-tx-lane {
  position: relative;
  height: 1.65rem;
  border-bottom: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.2);
}

.rc-tx-lanes--audio .rc-tx-lane {
  background: rgba(80, 110, 160, 0.18);
}

.rc-tracks--audio {
  border-top: 1px solid rgba(120, 160, 220, 0.25);
  background: rgba(60, 90, 140, 0.06);
  overflow: visible;
}

.rc-row--audio,
.rc-row--audio .rc-row__lane-wrap,
.rc-row--audio .rc-row__lane {
  overflow: visible;
}

.rc-app.is-audio-tall .rc-row--audio {
  min-height: 6.5rem;
}

.rc-app.is-audio-tall .rc-row--audio .rc-row__lane {
  height: 6.5rem;
  min-height: 6.5rem;
}

.rc-app.is-audio-extra .rc-row--audio {
  min-height: 10rem;
}

.rc-app.is-audio-extra .rc-row--audio .rc-row__lane {
  height: 10rem;
  min-height: 10rem;
}

.rc-row--audio .rc-row__label {
  color: #9ab8e8;
}

.rc-row__badge--audio {
  color: #9ab8e8 !important;
}

.rc-row__mute {
  margin-top: 0;
}

.rc-row__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin-top: 0.18rem;
}

.rc-row__tog {
  min-width: 1.35rem;
  padding: 0.08rem 0.22rem !important;
  font-size: 0.62rem !important;
  font-weight: 700;
  letter-spacing: 0.04em;
  min-height: 0;
  line-height: 1.2;
}

.rc-row__tog.is-on {
  color: #14110a;
  background: var(--accent);
  border-color: var(--accent);
}

.rc-row__mute.is-on,
.rc-row__mute.is-muted {
  color: #fff;
  background: rgba(170, 72, 72, 0.92);
  border-color: transparent;
  opacity: 1;
}

.rc-row__badge--solo {
  color: #7eb6ff;
}

.rc-row__badge--lock {
  color: #d4b36a;
}

.rc-row.is-solo:not(.is-target) .rc-row__label {
  box-shadow: inset 3px 0 0 #7eb6ff;
}

.rc-row.is-locked .rc-row__lane {
  opacity: 0.78;
}

.rc-row.is-locked .rc-clip {
  cursor: not-allowed;
}

.rc-clip--detached-audio {
  border-style: dashed;
}

.rc-clip--has-detached {
  opacity: 0.92;
}

.rc-tx-bar--audio_fade_in,
.rc-tx-bar--audio_fade_out {
  background: #6ec9a8;
  color: #0a1210;
}

.rc-tx-lane__label {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.35);
  z-index: 2;
  border-right: 1px solid var(--border-subtle);
}

.rc-tx-lane__body {
  position: relative;
  height: 100%;
}

.rc-tx-bar {
  position: absolute;
  top: 0.2rem;
  bottom: 0.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.25rem;
  font-size: 0.62rem;
  font-weight: 700;
  color: #111;
  background: #c9a84c;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.2rem;
  cursor: grab;
  z-index: 3;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
}

.rc-tx-bar--dissolve {
  background: #7eb6ff;
}

.rc-tx-bar--fade_in,
.rc-tx-bar--fade_out,
.rc-tx-bar--fade_to_black {
  background: #b8a0e8;
}

.rc-tx-bar--cut {
  background: #e8a0a0;
  min-width: 4px;
  padding: 0;
}

.rc-tx-bar.is-selected {
  outline: 2px solid #fff;
  outline-offset: 1px;
  z-index: 4;
}

.rc-tx-bar:active,
.rc-tx-bar.is-dragging {
  cursor: grabbing;
  opacity: 0.9;
  z-index: 6;
}

body.is-rc-tx-drag {
  cursor: grabbing !important;
  user-select: none;
}

body.is-rc-tx-drag .rc-tx-bar {
  pointer-events: none;
}

body.is-rc-tx-drag .rc-tx-bar.is-dragging {
  pointer-events: auto;
}

.rc-clip.is-tx-selected {
  border-color: #7eb6ff !important;
  box-shadow: 0 0 0 2px rgba(126, 182, 255, 0.55);
  background: rgba(126, 182, 255, 0.22) !important;
}

body.is-rc-scrubbing {
  cursor: ew-resize !important;
  user-select: none;
}

body.is-rc-scrubbing .rc-playhead {
  cursor: ew-resize;
}

.rc-program__black {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  transition: opacity 0.08s linear;
}

.rc-program__audio {
  display: none;
}

.rc-program__empty {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  pointer-events: none;
}

.rc-program__empty[hidden] {
  display: none;
}

.rc-program__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin-top: 0;
}

.rc-program-side .rc-program__time {
  flex: 1 1 100%;
}

.rc-stitch-range {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.4rem;
  margin-top: 0;
  padding: 0.45rem 0.5rem;
  border: 1px solid rgba(201, 168, 76, 0.25);
  border-radius: var(--radius-md);
  background: rgba(201, 168, 76, 0.05);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.rc-program-side .rc-stitch-range {
  flex: 0 0 auto;
}

.rc-program-side .rc-stitch-range > .btn,
.rc-program-side .rc-stitch-range > .rc-stitch-range__field,
.rc-program-side .rc-stitch-range > .rc-stitch-range__hint {
  max-width: 100%;
  box-sizing: border-box;
}

.rc-program-side .rc-stitch-range > .btn {
  flex: 1 1 auto;
}

.rc-program-side .rc-inspector {
  overflow: auto;
  min-height: 0;
}

.rc-stitch-range__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 0.25rem;
}

.rc-stitch-range__field {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-width: 0;
  max-width: 100%;
}

.rc-stitch-range__field input {
  width: 5.4rem;
  max-width: 100%;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.35rem;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.rc-stitch-range__field--format {
  flex: 1 1 100%;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.rc-stitch-range__field--format select {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  width: 0;
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.35rem;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
}

.rc-stitch-range__hint {
  flex: 1 1 100%;
  margin: 0.15rem 0 0;
}

.rc-program__time {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1 1 12rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.rc-program__time input[type="range"] {
  flex: 1 1 auto;
  min-width: 6rem;
}

.rc-program__trans {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.rc-program__trans select,
.rc-program__trans input {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.25rem 0.4rem;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
}

/* Multi-row horizontally scrollable timeline */
.rc-scroll {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
  background: var(--bg-deep);
  max-width: 100%;
  min-height: 16rem;
  height: min(42vh, 26rem);
}

.rc-split-stack {
  flex: 1 1 0;
  min-height: 0;
  min-width: 100%;
  display: flex;
  flex-direction: column;
}

.rc-video-pane,
.rc-audio-pane {
  min-height: 4.5rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.rc-video-pane {
  flex: 0 0 58%;
}

.rc-audio-pane {
  flex: 1 1 0;
}

.rc-pane-split {
  flex: 0 0 7px;
  cursor: row-resize;
  touch-action: none;
  background: rgba(255, 255, 255, 0.06);
  border-top: 1px solid rgba(201, 168, 76, 0.28);
  border-bottom: 1px solid rgba(201, 168, 76, 0.28);
}

.rc-pane-split:hover,
.rc-pane-split:focus-visible,
.rc-pane-split.is-active {
  background: rgba(201, 168, 76, 0.28);
  outline: none;
}

.rc-ruler {
  position: relative;
  flex: 0 0 auto;
  height: 1.55rem;
  margin-left: 6.5rem;
  border-bottom: 1px solid var(--border-subtle);
  min-width: 100%;
}

.rc-ruler__tick {
  position: absolute;
  bottom: 0;
  width: 1px;
  background: rgba(240, 239, 233, 0.22);
  pointer-events: none;
}

.rc-ruler__tick--minor {
  height: 0.32rem;
}

.rc-ruler__tick--major {
  height: 0.62rem;
  background: rgba(240, 239, 233, 0.42);
}

.rc-ruler__mark {
  position: absolute;
  top: 0.05rem;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
  pointer-events: none;
}

.rc-playhead {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  margin-left: -5px;
  background: transparent;
  z-index: 8;
  pointer-events: auto;
  cursor: ew-resize;
  touch-action: none;
}

.rc-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 4px rgba(201, 168, 76, 0.6);
  pointer-events: none;
}

.rc-playhead::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 8px solid var(--accent);
  pointer-events: none;
}

.rc-tracks {
  position: relative;
  min-height: 8rem;
}

.rc-row {
  display: flex;
  align-items: stretch;
  min-height: 3.25rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.rc-row.is-target .rc-row__label {
  color: var(--text);
  background: rgba(201, 168, 76, 0.18);
  box-shadow: inset 3px 0 0 var(--accent);
}

.rc-row.is-target .rc-row__lane {
  background: rgba(201, 168, 76, 0.05);
}

.rc-row--audio.is-target .rc-row__label {
  color: #c5d8f4;
  background: rgba(120, 160, 220, 0.2);
  box-shadow: inset 3px 0 0 #9ab8e8;
}

.rc-row--audio.is-target .rc-row__lane {
  background: rgba(120, 160, 220, 0.08);
}

.rc-row__label {
  flex: 0 0 6.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 0.35rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(0, 0, 0, 0.25);
  border-right: 1px solid var(--border-subtle);
  position: sticky;
  left: 0;
  z-index: 3;
  cursor: pointer;
}

.rc-row__badge {
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.rc-row__lane-wrap {
  flex: 1 1 auto;
  min-width: 0;
}

.rc-row__lane {
  position: relative;
  height: 3.25rem;
  min-height: 3.25rem;
}

.rc-row__lane.is-drop {
  background: rgba(201, 168, 76, 0.08);
  outline: 1px dashed rgba(201, 168, 76, 0.45);
  outline-offset: -2px;
}

.rc-clip {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.25rem 0.55rem;
  font: inherit;
  font-size: 0.72rem;
  text-align: left;
  color: var(--text-primary);
  background: var(--accent-soft);
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: var(--radius-sm);
  cursor: grab;
  overflow: hidden;
  z-index: 2;
  box-sizing: border-box;
}

.rc-clip__still,
.rc-clip__wave {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.rc-clip__still {
  object-fit: cover;
  object-position: center;
}

.rc-clip.has-still {
  background: #161616;
  color: #f4f1e8;
}

.rc-clip.has-wave {
  background: rgba(40, 58, 88, 0.55);
}

.rc-clip.has-shot {
  box-shadow: inset 3px 0 0 var(--rc-shot-color, var(--accent));
}

.rc-clip.is-selected.has-shot {
  box-shadow:
    inset 3px 0 0 var(--rc-shot-color, var(--accent)),
    0 0 0 1px rgba(201, 168, 76, 0.45);
}

.rc-clip__shot {
  position: relative;
  z-index: 1;
  display: inline-block;
  margin-bottom: 0.05rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--rc-shot-color, var(--accent));
}

.rc-clip__shot[hidden] {
  display: none;
}

.rc-clip__note {
  position: absolute;
  top: 0.12rem;
  right: 0.55rem;
  z-index: 2;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 0.85rem;
  text-align: center;
  color: #1a1208;
  background: #e8a070;
}

.rc-clip__note[hidden] {
  display: none;
}

.rc-insp-shot {
  margin: 0 0 0.65rem;
  padding: 0.45rem 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
}

.rc-insp-shot__num {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
}

.rc-insp-shot__notes {
  margin: 0 0 0.4rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.rc-clip--audio.is-wave-grow {
  top: 0.2rem;
  bottom: auto;
  height: var(--rc-wave-peek, 10rem);
  z-index: 6;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
}

.rc-clip.has-still .rc-clip__name,
.rc-clip.has-wave .rc-clip__name {
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
}

.rc-clip.has-still .rc-clip__dur,
.rc-clip.has-wave .rc-clip__dur {
  position: relative;
  z-index: 1;
  color: rgba(255, 255, 255, 0.82);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.rc-clip__handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: ew-resize;
  z-index: 3;
}

.rc-clip__handle--in {
  left: 0;
}

.rc-clip__handle--out {
  right: 0;
}

.rc-clip__handle:hover,
.rc-clip.is-selected .rc-clip__handle {
  background: rgba(201, 168, 76, 0.38);
}

.rc-clip__handle[hidden] {
  display: none;
}

body.is-rc-trimming,
body.is-rc-trimming .rc-clip {
  cursor: ew-resize;
  user-select: none;
}

body.is-rc-pane-split {
  cursor: row-resize;
  user-select: none;
}

.rc-clip--audio {
  background: rgba(100, 140, 200, 0.18);
  border-color: rgba(120, 160, 220, 0.45);
}

.rc-clip.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.45);
  z-index: 4;
}

.rc-clip.is-dragging {
  opacity: 0.5;
  cursor: grabbing;
}

body.is-rc-clip-drag .rc-clip:not(.is-dragging) {
  pointer-events: none;
}

.rc-clip__name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.rc-clip__dur {
  font-size: 0.65rem;
  color: var(--text-muted);
}

.rc-inspector {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  bottom: 0.4rem;
  width: min(18rem, 78%);
  z-index: 8;
  margin: 0;
  padding: 0.65rem 0.75rem 0.75rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: -10px 0 28px rgba(0, 0, 0, 0.4);
  transform: translateX(calc(100% + 0.85rem));
  transition: transform 0.28s ease;
  pointer-events: none;
}

.rc-inspector.is-open {
  transform: translateX(0);
  pointer-events: auto;
}

.rc-inspector__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.rc-inspector__head .panel-heading {
  margin: 0;
}

.rc-inspector .panel-heading {
  margin: 0 0 0.35rem;
}

.rc-inspector .form-field {
  margin-bottom: 0.45rem;
}

.rc-inspector .form-actions {
  margin-top: 0.35rem;
}

.rc-insp-name {
  margin: 0 0 0.75rem;
  font-weight: 600;
}

.rc-bin-item.is-dragging {
  opacity: 0.5;
}

/* Stage 7 — gallery, admin, messages */
.nav-badge {
  display: inline-block;
  min-width: 1.1rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  color: #14120a;
  background: var(--accent);
  border-radius: 999px;
}

.showcase-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #000;
  overflow: hidden;
}

.showcase-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Iframe after play must fill the card media area (guest + signed-in) */
.showcase-card__media .gal-embed,
.showcase-card__media .gal-embed--card,
.showcase-card__media .yt-facade,
.showcase-card__media .yt-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding-bottom: 0;
  border-radius: 0;
  aspect-ratio: auto;
}

.showcase-card__media .gal-embed iframe,
.showcase-card__media .yt-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gal-detail__media {
  position: relative;
  width: 100%;
}

.gal-detail__media .yt-facade,
.gal-detail__media .gal-embed,
.gal-detail__media .yt-player {
  position: relative;
  width: 100%;
}

.showcase-card__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gal-filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  align-items: end;
}

.gal-filters__submit {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.4rem;
}

.gal-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.5rem, 1fr));
  gap: 0.85rem;
}

body.page-gallery .gal-grid,
body.page-gallery .gal-grid--playable {
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.85rem 0.9rem;
}

.gal-card {
  display: block;
  padding: 1.1rem 1.15rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast), transform var(--transition-fast);
  min-height: 100%;
}

.gal-card:hover {
  border-color: rgba(201, 168, 76, 0.4);
  transform: translateY(-2px);
  color: inherit;
}

.gal-card__genre {
  margin: 0 0 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.gal-card__title {
  margin: 0 0 0.35rem;
  font-size: 1.1rem;
  color: var(--text-primary);
}

.gal-card__by,
.gal-card__syn,
.gal-card__claps {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.gal-card__claps {
  color: var(--accent);
  font-weight: 600;
}

.gal-detail {
  max-width: 42rem;
}

.gal-detail--gone {
  padding: 0.25rem 0 2rem;
}

@media (min-width: 1100px) {
  .gal-detail {
    max-width: 56rem;
  }

  .gal-detail__media {
    max-width: none;
  }

  .gal-grid,
  .gal-grid--playable {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
  }

  body.page-gallery .gal-grid,
  body.page-gallery .gal-grid--playable {
    grid-template-columns: repeat(auto-fill, minmax(16.25rem, 1fr));
    gap: 0.95rem 1rem;
  }

  .gal-filters {
    max-width: none;
  }

  .gal-page-header--compact .gal-page-header__lead {
    max-width: none;
  }
}

@media (min-width: 1400px) {
  .gal-grid,
  .gal-grid--playable {
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  }

  body.page-gallery .gal-grid,
  body.page-gallery .gal-grid--playable {
    grid-template-columns: repeat(auto-fill, minmax(17.25rem, 1fr));
  }

  .gal-detail {
    max-width: 64rem;
  }
}

.gal-detail__title {
  margin: 0.5rem 0 0.35rem;
  font-size: 1.75rem;
}

.gal-detail__meta,
.gal-detail__synopsis {
  color: var(--text-secondary);
}

.gal-detail__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.gal-detail__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 1.25rem;
}

.gal-report summary {
  cursor: pointer;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.gal-report__form {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  max-width: 22rem;
}

.gal-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: #000;
}

.gal-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.gal-embed--card {
  padding-bottom: 62.5%;
  border-radius: 0;
}

/* —— YouTube player shell: default size + enlarge-to-float (not browser fullscreen) —— */
.yt-player {
  position: relative;
  width: 100%;
  /* Override legacy padding-bottom embed when using stage aspect-ratio */
  padding-bottom: 0 !important;
  height: auto !important;
  overflow: visible;
  background: transparent;
}

.yt-player__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.yt-player--card .yt-player__stage,
.showcase-card__media .yt-player__stage {
  aspect-ratio: 16 / 10;
  border-radius: 0;
}

.showcase-card__media .yt-player {
  overflow: visible;
}

/* When player is absolutely filling the card media box, stage fills height too */
.showcase-card__media .yt-player__stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}

.yt-player__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: inherit;
  overflow: hidden;
  box-shadow: none;
  transition: box-shadow 0.2s ease;
}

.yt-player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  z-index: 1;
}

/*
 * Still cover over the iframe until YouTube reports playing.
 * Hides black load screen / title overlay so play feels immediate.
 */
.yt-player__cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #0a0a0c;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.14s ease, visibility 0.14s ease;
  pointer-events: none;
}

.yt-player__cover.is-gone {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Once live / enlarged, never paint still covers above the embed */
.yt-player__frame.is-live .yt-player__cover,
.yt-player__frame.is-live .yt-player__rest-cover,
.yt-player-portal.is-active .yt-player__cover,
.yt-player-portal.is-active .yt-player__rest-cover,
.yt-player.is-enlarged .yt-player__cover,
.yt-player.is-enlarged .yt-player__rest-cover {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;
}

.yt-player__frame.is-live iframe,
.yt-player-portal.is-active .yt-player__frame iframe {
  z-index: 2;
}

.yt-player__cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.yt-player__cover-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border-radius: 50%;
  border: 2px solid rgba(201, 168, 76, 0.35);
  border-top-color: var(--accent, #c9a84c);
  animation: yt-player-spin 0.7s linear infinite;
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.35);
}

@keyframes yt-player-spin {
  to {
    transform: rotate(360deg);
  }
}

/*
 * Rest cover: when docked + paused, masks sticky YouTube title/controls chrome
 * after mouseleave. Removed while hovering so the player is usable.
 */
.yt-player__rest-cover {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #0a0a0c;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  /* Visual only — dock-hit above captures clicks so iframe never eats them */
  pointer-events: none;
  transition: opacity 0.16s ease, visibility 0.16s ease;
}

.yt-player__rest-cover.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/*
 * Full-frame transparent button over the docked YouTube iframe.
 * Required because clicks on cross-origin iframes never bubble to the page,
 * so "click video again to re-open lightbox" would otherwise do nothing.
 * z-index must beat the iframe (JS may set iframe z-index: 10 while live).
 */
.yt-player__dock-hit {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}

.yt-player__dock-hit.is-active {
  display: block;
  pointer-events: auto;
}

.yt-player__frame.has-dock-hit .yt-player__enlarge {
  z-index: 22;
}

.yt-player__rest-cover-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
}

.yt-player__rest-cover-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
  pointer-events: none;
}

.yt-player__rest-cover--plain {
  background: #0a0a0c;
}

/* Custom enlarge control — distinct from YouTube’s own fullscreen control */
.yt-player__enlarge {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 5;
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(201, 168, 76, 0.55);
  border-radius: 0.45rem;
  background: rgba(10, 10, 12, 0.78);
  color: var(--accent, #c9a84c);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.yt-player__enlarge:hover,
.yt-player__enlarge:focus-visible {
  background: rgba(20, 18, 10, 0.92);
  border-color: var(--accent, #c9a84c);
  transform: scale(1.06);
  outline: none;
}

.yt-player__enlarge:focus-visible {
  outline: 2px solid var(--focus-ring, #c9a84c);
  outline-offset: 2px;
}

.yt-player__enlarge svg {
  display: block;
  pointer-events: none;
}

/*
 * Lightbox: frame is moved to body (.yt-player-portal) so showcase-card
 * transform/overflow cannot trap or clip the video.
 */
.yt-player-backdrop {
  position: fixed;
  inset: 0;
  z-index: 10050;
  /* Dim only the page behind — video lives above this layer */
  background: rgba(0, 0, 0, 0.78);
  cursor: pointer;
  animation: yt-player-fade-in 1s ease;
}

.yt-player-backdrop[hidden] {
  display: none !important;
}

/* Full-viewport flex host — centers the 16:9 frame on screen */
.yt-player-portal {
  position: fixed;
  inset: 0;
  /* Above header, workspace, and any card stacking contexts */
  z-index: 10060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  box-sizing: border-box;
  /* Transparent: dimming is only on the backdrop underneath */
  background: transparent;
  pointer-events: none; /* empty space passes through to backdrop click */
}

.yt-player-portal[hidden] {
  display: none !important;
}

.yt-player-portal.is-active {
  pointer-events: none;
}

/*
 * Docked: frame stays in the portal (same iframe node — no reload) and is
 * positioned over the in-page stage via JS getBoundingClientRect.
 */
.yt-player-portal.is-docked {
  z-index: 50;
  display: block;
  padding: 0;
  align-items: stretch;
  justify-content: stretch;
  pointer-events: none;
}

.yt-player-portal.is-docked .yt-player__frame {
  pointer-events: auto;
  /* top/left/width/height set in JS */
  position: fixed;
  width: auto;
  height: auto;
  aspect-ratio: auto;
  max-width: none;
  max-height: none;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: #000;
}

.yt-player__stage.is-occupied-dock {
  /* Placeholder under the docked fixed frame */
  background: #0a0a0c;
}

@keyframes yt-player-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Floating frame: true 16:9, never square-cropped, fully bright */
.yt-player-portal.is-active .yt-player__frame {
  pointer-events: auto;
  position: relative;
  inset: auto;
  /* Cap by viewport width and height while locking 16:9 */
  width: min(92vw, 64rem, calc(82vh * 16 / 9));
  height: auto;
  aspect-ratio: 16 / 9;
  max-width: 92vw;
  max-height: 82vh;
  border-radius: var(--radius-lg, 0.75rem);
  overflow: hidden;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(201, 168, 76, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
    0 28px 80px rgba(0, 0, 0, 0.75);
  filter: none;
  opacity: 1;
  isolation: isolate;
}

.yt-player-portal .yt-player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  /* Ensure embed is not dimmed by parent filters */
  filter: none;
  opacity: 1;
}

.yt-player-portal.is-active .yt-player__enlarge {
  top: 0.75rem;
  right: 0.75rem;
  width: 2.5rem;
  height: 2.5rem;
  z-index: 6;
  background: rgba(10, 10, 12, 0.88);
}

/* In-page slot stays put while frame is portaled out — hide black placeholder */
.yt-player.is-enlarged .yt-player__stage,
.yt-player__stage.is-lightbox-slot {
  background: transparent !important;
  box-shadow: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Host boxes: no opaque black plate floating above the lightbox */
.gal-card__player:has(.yt-player.is-enlarged),
.profile-video-card__media:has(.yt-player.is-enlarged),
.gal-detail__media:has(.yt-player.is-enlarged),
.film-card__media:has(.yt-player.is-enlarged) {
  background: transparent !important;
}

.yt-player-portal.is-active .yt-player__frame {
  z-index: 1;
  isolation: isolate;
}

.yt-player-portal.is-active .yt-player__frame iframe {
  z-index: 2 !important;
  position: absolute !important;
  inset: 0 !important;
}

.yt-player-portal.is-opening .yt-player__frame {
  pointer-events: auto;
  z-index: 2;
}

.yt-player-portal.is-opening .yt-player__cover {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
  z-index: 4 !important;
}

.yt-player-portal.is-opening .yt-player__cover-pulse,
.yt-player-portal.is-opening .yt-player__dock-hit {
  display: none !important;
}

.yt-player-portal.is-active:not(.is-opening) .yt-player__cover,
.yt-player-portal.is-active:not(.is-opening) .yt-player__rest-cover,
.yt-player-portal.is-active:not(.is-opening) .yt-player__cover-img,
.yt-player-portal.is-active:not(.is-opening) .yt-player__rest-cover-img,
.yt-player-portal.is-active:not(.is-opening) .yt-player__cover-pulse,
.yt-player-portal.is-active:not(.is-opening) .yt-player__rest-cover-scrim,
.yt-player-portal.is-active:not(.is-opening) .yt-player__dock-hit {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* Soft lock scroll while enlarged (layout width preserved) */
html.yt-player-enlarged,
body.yt-player-enlarged {
  overflow: hidden;
}

@media (max-width: 540px) {
  .yt-player-portal.is-active {
    padding: 0.65rem;
  }

  .yt-player-portal.is-active .yt-player__frame {
    width: min(96vw, calc(70vh * 16 / 9));
    max-height: 70vh;
  }

  .yt-player__enlarge {
    top: 0.4rem;
    right: 0.4rem;
  }
}

/* YouTube facade: still thumbnail until play (no iframe / no YT player chrome) */
.yt-facade {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #0a0a0c;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.yt-facade--card {
  border-radius: 0;
  aspect-ratio: 16 / 10;
}

.yt-facade--detail {
  margin-bottom: 0.25rem;
}

.yt-facade__button {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: #0a0a0c;
  color: inherit;
}

.yt-facade__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.yt-facade__thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* slight zoom crops edge letterboxing / residual logo areas */
  transform: scale(1.04);
  transition: transform 0.35s ease, filter 0.35s ease;
}

/* Soft cinematic grade — also masks faint baked-in branding on some thumbs */
.yt-facade__scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, 0.45) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 35%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
  pointer-events: none;
}

.yt-facade__button:hover .yt-facade__thumb,
.yt-facade__button:focus-visible .yt-facade__thumb {
  transform: scale(1.08);
  filter: brightness(1.06);
}

.yt-facade__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  width: 3.35rem;
  height: 3.35rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  background: rgba(10, 10, 12, 0.72);
  border: 1.5px solid rgba(201, 168, 76, 0.6);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.45);
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
  pointer-events: none;
}

.yt-facade__play svg {
  margin-left: 0.15rem;
}

.yt-facade__button:hover .yt-facade__play,
.yt-facade__button:focus-visible .yt-facade__play {
  background: rgba(20, 18, 10, 0.85);
  border-color: var(--accent);
  transform: translate(-50%, -50%) scale(1.06);
}

.yt-facade__button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.msg-list {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-width: 36rem;
}

.msg-bubble {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

.msg-bubble--admin {
  border-left: 3px solid var(--accent);
}

.msg-bubble--me {
  border-left: 3px solid var(--border-medium);
  background: var(--bg-elevated);
}

.msg-bubble__meta {
  margin: 0 0 0.35rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.msg-bubble__body {
  margin: 0;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.msg-compose {
  max-width: 36rem;
}

.msg-admin-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

@media (min-width: 900px) {
  .msg-admin-layout {
    grid-template-columns: 16rem 1fr;
  }
}

.msg-thread-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.msg-thread-list__row {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.msg-thread-list__row > a {
  flex: 1;
  min-width: 0;
}

.msg-thread-list__mark {
  flex-shrink: 0;
  margin: 0;
}

.msg-thread-list a {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
}

.msg-thread-list a.is-active,
.msg-thread-list a:hover {
  background: var(--accent-soft);
  color: var(--accent);
}

.admin-nav-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.85rem;
}

.admin-nav-card {
  display: block;
  padding: 1.15rem 1.2rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition-fast);
}

.admin-nav-card:hover {
  border-color: rgba(201, 168, 76, 0.4);
  color: inherit;
}

.admin-nav-card h2 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  color: var(--accent);
}

.admin-nav-card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
  text-align: left;
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.admin-users__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.admin-table th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.8rem;
}

.admin-gal-form {
  margin-top: 0.75rem;
  width: 100%;
}

/* FAQ page */
.faq-item {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-subtle);
}

.faq-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.faq-item h2 {
  margin-top: 0;
}

.faq-item ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--text-secondary);
}

.faq-item li {
  margin-bottom: 0.35rem;
}

.faq-item code {
  font-size: 0.85em;
  color: var(--accent);
}

.media-intro code {
  font-size: 0.85em;
  color: var(--accent);
}

.media-banner {
  margin-bottom: 1rem;
}

.media-restore-actions {
  margin-top: 0.75rem;
}

.media-connect {
  margin-bottom: 2rem;
}

.media-connect__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.media-connect__head .panel-heading {
  margin: 0;
}

.media-connect__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.media-connect__options {
  margin-bottom: 0.85rem;
}

.media-connect__proj {
  color: var(--text-muted);
  font-weight: 400;
}

.imagine-sources {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-subtle);
}

.imagine-sources .panel-heading {
  margin: 0 0 0.4rem;
  font-size: 1rem;
}

.imagine-sources__steps {
  margin: 0.5rem 0 0.85rem;
  padding-left: 1.2rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.imagine-sources__steps li {
  margin-bottom: 0.4rem;
}

.imagine-sources__list {
  list-style: none;
  margin: 0.75rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.imagine-sources__item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
}

.imagine-sources__item-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.imagine-sources__item-main strong {
  font-size: 0.82rem;
}

.imagine-sources__url {
  font-size: 0.75rem;
  color: var(--accent);
  word-break: break-all;
}

.imagine-sources__empty {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.imagine-sources--compact {
  margin-top: 0;
  padding: 0.85rem 0.9rem 1rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-deep);
}

.imagine-sources--compact .panel-heading {
  margin: 0 0 0.35rem;
  font-size: 0.95rem;
}

.imagine-sources--compact .form-field {
  margin-bottom: 0.65rem;
}

.prompt-recent-slots {
  padding: 0.85rem 0.9rem 1rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.prompt-recent-slots .panel-heading {
  margin: 0 0 0.3rem;
  font-size: 0.95rem;
}

.prompt-recent-slots__list {
  list-style: none;
  margin: 0.45rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.prompt-recent-slots__empty {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.prompt-recent-slots__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-card);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.prompt-recent-slots__btn:hover {
  border-color: var(--accent);
}

.prompt-recent-slots__name {
  font-size: 0.82rem;
  font-weight: 600;
}

.prompt-recent-slots__snip {
  font-size: 0.74rem;
  color: var(--text-muted);
  line-height: 1.35;
  word-break: break-word;
}

.media-folder-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.media-folder-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  padding: 0.85rem 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.media-folder-card--need-reconnect {
  border-color: rgba(201, 168, 76, 0.45);
  background: rgba(201, 168, 76, 0.06);
}

.media-folder-card__title {
  font-weight: 600;
  color: var(--text-primary);
}

.media-folder-card__meta {
  flex: 1 1 12rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.media-folder-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.media-library__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.media-library__head .panel-heading {
  margin: 0;
}

.media-library__status {
  margin: 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.media-toolbar {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.media-toolbar__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.chip {
  padding: 0.35rem 0.75rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid var(--border-medium);
  border-radius: 999px;
  cursor: pointer;
  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast);
}

.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.chip.is-active {
  background: var(--accent-soft);
  border-color: rgba(201, 168, 76, 0.45);
  color: var(--accent);
}

.media-toolbar__search input[type="search"],
.media-toolbar__meta select {
  width: 100%;
  max-width: 20rem;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.95rem;
  color: var(--text-primary);
  background: var(--bg-deep);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-sm);
}

.media-toolbar__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.media-toolbar__meta select {
  max-width: 14rem;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: 0.85rem;
}

.media-grid .empty-state {
  grid-column: 1 / -1;
}

.media-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  transition:
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    opacity var(--transition-fast);
}

.media-card:hover,
.media-card:focus-visible {
  border-color: rgba(201, 168, 76, 0.4);
  transform: translateY(-2px);
  outline: none;
}

/* Multi-select + drag video → Sequence Board */
.media-seq-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.75rem;
  background: rgba(201, 168, 76, 0.06);
  border: 1px solid rgba(201, 168, 76, 0.22);
  border-radius: var(--radius-md);
}

.media-seq-bar__hint {
  margin: 0;
  flex: 1 1 14rem;
  min-width: 0;
}

.media-seq-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.media-seq-bar__count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 0.25rem;
}

.media-card--draggable {
  cursor: grab;
}

.media-card--draggable:active {
  cursor: grabbing;
}

.media-card.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.45);
}

.media-card.is-dragging {
  opacity: 0.45;
  transform: scale(0.98);
  border-color: var(--accent);
}

.media-card__pick {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  margin: 0;
  background: rgba(12, 12, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.3rem;
  cursor: pointer;
}

.media-card__pick:hover {
  border-color: var(--accent);
  background: rgba(12, 12, 16, 0.9);
}

.media-card__check {
  width: 0.95rem;
  height: 0.95rem;
  margin: 0;
  cursor: pointer;
  accent-color: var(--accent);
}

.seq-source-hint {
  margin: 0 0 0.65rem;
  max-width: 58rem;
}

.shot-video-bar__hint {
  flex: 1 1 100%;
  margin: 0.15rem 0 0;
  max-width: 52rem;
}

body.is-media-drag .workspace-nav__link[href*="section=sequence"],
.workspace-nav__link[data-drop-section="sequence"].is-drop-target {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: var(--accent-soft);
  color: var(--accent);
}

.workspace-nav__link.is-drop-target {
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.35);
}

body.is-media-drag .workspace-nav__link[href*="section=sequence"] {
  transition:
    background var(--transition-fast),
    outline-color var(--transition-fast),
    color var(--transition-fast);
}

.media-card__thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #121216;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.media-card__thumb img,
.media-card__thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-card__icon {
  font-size: 1.75rem;
  color: var(--accent);
  opacity: 0.85;
}

.media-card__type {
  position: absolute;
  left: 0.4rem;
  bottom: 0.4rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.65);
  border-radius: 3px;
}

.media-card__fav {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  color: var(--accent);
  font-size: 0.9rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

.media-card__body {
  padding: 0.55rem 0.65rem 0.7rem;
}

.media-card__name {
  margin: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.media-card__sub,
.media-card__tags {
  margin: 0.2rem 0 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Modals */
.media-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

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

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

.media-modal__dialog {
  position: relative;
  z-index: 1;
  width: min(40rem, 100%);
  max-height: min(90vh, 52rem);
  overflow: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.media-modal__dialog--sm {
  width: min(26rem, 100%);
}

.media-modal__close {
  position: absolute;
  top: 0.5rem;
  right: 0.65rem;
  z-index: 2;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.media-modal__close:hover {
  color: var(--text-primary);
}

.media-modal__preview {
  background: #000;
  min-height: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-modal__preview img,
.media-modal__preview video {
  max-width: 100%;
  max-height: 50vh;
  display: block;
}

.media-modal__preview audio {
  width: 90%;
  margin: 2rem 0;
}

.media-modal__body {
  padding: 1.15rem 1.25rem 1.35rem;
}

.media-modal__title {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
  padding-right: 1.5rem;
}

.media-modal__path {
  margin: 0 0 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  word-break: break-all;
}

/* Portal responsive: stack panels; collapse section menu so it doesn’t fill the screen.
   Desktop keeps locked document scroll + internal .workspace__content scroll.
   Mobile must use normal document scrolling — otherwise long tools are clipped. */
@media (max-width: 860px) {
  /* Unlock the viewport lock from the desktop portal shell */
  html:has(body.page-portal) {
    height: auto;
    overflow: auto;
    overflow-x: hidden;
  }

  body.page-portal {
    overflow: auto;
    overflow-x: hidden;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    overscroll-behavior: auto;
    display: flex;
    flex-direction: column;
  }

  body.page-portal .site-main--portal {
    flex: 1 0 auto;
    min-height: 0;
    display: block; /* leave flex row model; allow natural document flow */
  }

  .workspace {
    flex-direction: column;
    flex: none;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .workspace__main-wrap {
    flex: none;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .workspace__panels {
    flex: none;
    min-height: 0;
    height: auto;
    overflow: visible;
  }

  .workspace__nav {
    flex: none !important;
    width: 100% !important;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--border-subtle);
    overflow: visible;
  }

  .workspace__nav-head {
    display: none; /* username/eyebrow live in site header on phone */
  }

  /* Compact bar: current tool + open menu */
  .workspace-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: 100%;
    margin: 0;
    padding: 0.65rem 0.85rem;
    border: 0;
    border-bottom: 1px solid var(--border-subtle);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    font: inherit;
    text-align: left;
    cursor: pointer;
  }

  .workspace-nav-toggle:hover,
  .workspace-nav-toggle:focus-visible {
    background: rgba(201, 168, 76, 0.08);
  }

  .workspace-nav-toggle__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
  }

  .workspace-nav-toggle__eyebrow {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  .workspace-nav-toggle__current {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem 0.35rem;
    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .workspace-nav-toggle__group {
    color: var(--group-accent, var(--accent));
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .workspace-nav-toggle__sep {
    color: var(--text-muted);
    font-weight: 500;
  }

  .workspace-nav-toggle__tool {
    color: var(--text-primary);
  }

  .workspace-nav-toggle__action {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    border: 1px solid rgba(201, 168, 76, 0.35);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 650;
  }

  .workspace-nav-toggle__chevron {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -0.15rem;
    transition: transform 0.15s ease;
  }

  .workspace-nav-toggle[aria-expanded="true"] .workspace-nav-toggle__chevron {
    transform: rotate(-135deg);
    margin-top: 0.15rem;
  }

  /* Collapsed by default on mobile — open only when .is-open */
  .workspace-nav-body {
    display: none;
    flex: none;
    max-height: min(58vh, 22rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--border-subtle);
    background: #0d0d10;
  }

  .workspace-nav-body.is-open {
    display: flex;
    flex-direction: column;
  }

  .workspace-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0.45rem 0.5rem 0.35rem;
    gap: 0.2rem;
    flex: none;
  }

  .workspace-nav__group {
    width: 100%;
    margin-bottom: 0.25rem;
  }

  .workspace-nav__link {
    padding: 0.45rem 0.65rem;
    font-size: 0.88rem;
  }

  .workspace__nav-foot {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0.05rem;
    padding: 0.35rem 0.5rem 0.55rem;
  }

  .splitter {
    display: none;
  }

  .workspace__panels {
    flex-direction: column;
    flex: none;
  }

  /* Natural page scroll: don’t trap content in a non-growing flex pane */
  .workspace__content {
    flex: none !important;
    min-height: 0;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    -webkit-overflow-scrolling: auto;
  }

  .workspace__side {
    flex: none !important;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    border-left: none;
    border-top: 1px solid var(--border-subtle);
  }

  /* Toolbar: slightly tighter on phones */
  .workspace__toolbar {
    padding: 0.55rem 0.85rem;
    position: sticky;
    top: 0;
    z-index: 15;
  }

  /* Sequence / full-height tools: don’t force 100% viewport height on mobile */
  body.page-portal .workspace__content:has(.seq-app),
  body.page-portal .workspace__content:has(.seq-app) > .tool-desktop-only,
  body.page-portal .workspace__content:has(.seq-app) .tool-desktop-body,
  body.page-portal .workspace__content:has(.seq-app) .tool-desktop-body.seq-wrap,
  body.page-portal .workspace__content:has(.seq-app) .seq-wrap,
  body.page-portal .workspace__content:has(.seq-app) .seq-app {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    flex: none !important;
    overflow: visible !important;
  }

  /* Sticky ref filters still work with document scroll */
  .ref-toolbar {
    top: 0;
    max-height: min(38vh, 12rem);
  }
}

/* --------------------------------------------------------------------------
   Sequence Board — visual film arrangement
   -------------------------------------------------------------------------- */
.seq-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
}

.seq-app {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  position: relative;
}

.seq-project-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  margin: 0 0 0.55rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
  flex-shrink: 0;
}

.seq-project-bar[data-standalone="1"] {
  border-color: rgba(201, 168, 76, 0.3);
  background: rgba(201, 168, 76, 0.06);
}

.seq-project-bar__status {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-secondary);
  flex: 1 1 14rem;
  min-width: 0;
}

.seq-project-bar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.seq-project-bar__select {
  max-width: 12rem;
  padding: 0.28rem 0.4rem;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-deep, #0a0a0e);
  color: var(--text-primary);
}

.seq-project-bar__hint {
  flex: 1 1 100%;
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
}

.seq-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.75rem;
  padding: 0.45rem 0.15rem 0.55rem;
  border-bottom: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.seq-toolbar__left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
  flex: 1 1 12rem;
}

.seq-toolbar__title-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.seq-toolbar__title {
  min-width: 8rem;
  max-width: 16rem;
  flex: 1 1 10rem;
  padding: 0.28rem 0.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-deep, #0a0a0e);
  color: var(--text-primary);
}

.seq-status {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.seq-toolbar__modes,
.seq-toolbar__play,
.seq-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}

.seq-mode-btn.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201, 168, 76, 0.1);
}

.seq-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.seq-toggle input {
  margin: 0;
}

.seq-stills-rate select {
  height: 1.65rem;
  padding: 0 0.3rem;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-deep, #0a0a0e);
  color: var(--text-primary);
}

.seq-hint {
  margin: 0.4rem 0 0.5rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.35;
  flex-shrink: 0;
}

.seq-program {
  flex: 0 0 auto;
  margin: 0 0 0.65rem;
  padding: 0.65rem 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.seq-program__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 18rem;
  background: #000;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.seq-program__video,
.seq-program__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
  z-index: 1;
}

.seq-program__image[hidden],
.seq-program__video[hidden] {
  display: none !important;
}

.seq-program__black {
  position: absolute;
  inset: 0;
  background: #000;
  z-index: 0;
}

.seq-program__empty {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 1rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9rem;
  pointer-events: none;
}

.seq-program__empty[hidden] {
  display: none;
}

.seq-program__meta {
  margin-top: 0.4rem;
  min-height: 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
}

.seq-program__now {
  font-size: 0.85rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.seq-runtime {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 500;
}

.seq-runtime.is-over,
.rc-duration.is-over {
  color: #e8a070;
}

.seq-runtime.is-under,
.rc-duration.is-under {
  color: #8ec9a8;
}

.seq-runtime.is-on,
.rc-duration.is-on {
  color: var(--text-secondary);
}

.seq-stage-wrap {
  flex: 1 0 auto;
  min-height: 32rem;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  /* Board grows with rows; the portal content column scrolls (nav stays) */
  overflow: visible;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 8rem),
    #0c0c10;
  position: relative;
}

.seq-stage {
  position: relative;
  display: block;
  box-sizing: border-box;
  /* Width is set in JS from viewport so snap columns wrap; height grows with rows */
  min-height: 100%;
  min-width: 100%;
  padding: 0.25rem;
  outline: none;
}

.seq-stage[data-mode="snap"] {
  /* Prefer vertical growth/scroll in snap mode */
  max-width: none;
}

.seq-stage.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.seq-stage__empty {
  text-align: center;
  max-width: 22rem;
  padding: 1.5rem 1rem;
}

.seq-stage__empty .empty-state__title {
  margin: 0 0 0.4rem;
  font-size: 1.05rem;
}

.seq-stage__empty .empty-state__text {
  margin: 0 0 0.85rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.seq-clip {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: var(--bg-card, #14141a);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  cursor: grab;
  user-select: none;
  touch-action: none;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.seq-clip__title-row {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 1.9rem;
  background: rgba(201, 168, 76, 0.12);
  border-bottom: 1px solid rgba(201, 168, 76, 0.28);
}

.seq-clip__title,
.seq-clip__note {
  flex-shrink: 0;
  overflow: auto;
  padding: 0.22rem 0.4rem;
  font-size: 0.72rem;
  line-height: 1.3;
  color: var(--text-primary);
  cursor: text;
  user-select: text;
  outline: none;
  word-break: break-word;
}

.seq-clip__title {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  max-height: none;
  font-weight: 600;
  background: transparent;
  border: 0;
}

.seq-clip__note {
  height: 1.75rem;
  max-height: 1.75rem;
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid var(--border-subtle);
}

.seq-clip__correction {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  min-height: 1.9rem;
  max-height: 2.6rem;
  overflow: auto;
  padding: 0.2rem 0.4rem;
  font-size: 0.68rem;
  line-height: 1.3;
  color: #f0d0b0;
  background: rgba(180, 90, 40, 0.2);
  border-top: 1px solid rgba(232, 160, 112, 0.35);
}

.seq-clip__correction-mark {
  flex: 0 0 auto;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 0.85rem;
  text-align: center;
  color: #1a1208;
  background: #e8a070;
}

.seq-clip__correction-text {
  min-width: 0;
  word-break: break-word;
}

.seq-clip__title:empty::before,
.seq-clip__note:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-weight: 400;
  pointer-events: none;
}

.seq-clip__title:focus,
.seq-clip__note:focus {
  background: rgba(201, 168, 76, 0.16);
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.45);
}

.seq-clip--snap {
  transition: left 0.14s ease, top 0.14s ease, box-shadow 0.15s ease;
}

.seq-clip.is-dragging {
  cursor: grabbing;
  opacity: 0.95;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
  border-color: var(--accent);
  z-index: 30 !important;
  transition: none;
}

.seq-clip.is-playing-seq {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(201, 168, 76, 0.45);
}

.seq-clip__media {
  flex: 1 1 auto;
  min-height: 0;
  background: #000;
  position: relative;
  overflow: hidden;
}

.seq-clip__media img,
.seq-clip__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.seq-clip__missing {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0.5rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.3;
}

.seq-clip__bar {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.35rem;
  background: rgba(0, 0, 0, 0.45);
  border-top: 1px solid var(--border-subtle);
  flex-shrink: 0;
  height: 1.75rem;
}

.seq-clip__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.68rem;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.seq-clip__dup {
  flex: 0 0 1.7rem;
  width: 1.7rem;
  border: 0;
  border-left: 1px solid rgba(201, 168, 76, 0.28);
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.seq-clip__dup:hover {
  background: rgba(201, 168, 76, 0.35);
  color: #fff8e6;
}

.seq-clip__remove {
  flex: 0 0 1.9rem;
  width: 1.9rem;
  border: 0;
  border-left: 1px solid rgba(200, 80, 80, 0.35);
  background: rgba(160, 50, 50, 0.28);
  color: #f0c0c0;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.seq-clip__remove:hover {
  background: rgba(200, 70, 70, 0.5);
  color: #fff;
}

/* Add drawer */
.seq-drawer {
  position: absolute;
  top: 3.1rem;
  right: 0.35rem;
  bottom: auto;
  height: min(42rem, calc(100dvh - 8rem));
  max-height: calc(100dvh - 8rem);
  width: min(22rem, 92%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: #121218;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.45);
}

.seq-drawer[hidden] {
  display: none !important;
}

.seq-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  border-bottom: 1px solid var(--border-subtle);
}

.seq-drawer__title {
  margin: 0;
  font-size: 0.95rem;
}

.seq-drawer__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.4rem 0.55rem;
  border-bottom: 1px solid var(--border-subtle);
}

.seq-drawer__tab {
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.75rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  cursor: pointer;
}

.seq-drawer__tab.is-active {
  color: var(--text-primary);
  border-color: rgba(201, 168, 76, 0.4);
  background: rgba(201, 168, 76, 0.08);
}

.seq-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0.55rem 0.7rem 0.85rem;
}

.seq-drawer__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.seq-drawer__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
  text-align: left;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.seq-drawer__item:hover {
  border-color: rgba(201, 168, 76, 0.4);
}

.seq-drawer__thumb {
  width: 2.5rem;
  height: 1.5rem;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
  background: #000;
}

.seq-drawer__kind {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  flex-shrink: 0;
}

.seq-drawer__name {
  font-size: 0.8rem;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sequence: center column scrolls so several board rows can show; left nav stays. */
body.page-portal .workspace__content:has(.seq-app) {
  display: block;
  height: 100%;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  padding-bottom: 2rem;
}

body.page-portal .workspace__content:has(.seq-app) > .tool-desktop-only,
body.page-portal .workspace__content:has(.seq-app) .tool-desktop-body,
body.page-portal .workspace__content:has(.seq-app) .tool-desktop-body.seq-wrap,
body.page-portal .workspace__content:has(.seq-app) .seq-wrap,
body.page-portal .workspace__content:has(.seq-app) .seq-app {
  display: flex;
  flex-direction: column;
  flex: none;
  height: auto;
  min-height: 100%;
  max-height: none;
  overflow: visible;
}

/*
 * Mobile only (must come AFTER desktop portal height locks above):
 * re-enable normal page scrolling for all portal sections.
 */
@media (max-width: 860px) {
  html:has(body.page-portal) {
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.page-portal {
    height: auto !important;
    min-height: 100dvh;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: auto;
  }

  body.page-portal .site-main--portal {
    flex: 1 0 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
  }

  body.page-portal .workspace,
  body.page-portal .workspace__main-wrap,
  body.page-portal .workspace__panels {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.page-portal .workspace__content,
  body.page-portal .workspace__side {
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.page-portal .workspace__content:has(.seq-app),
  body.page-portal .workspace__content:has(.seq-app) > .tool-desktop-only,
  body.page-portal .workspace__content:has(.seq-app) .tool-desktop-body,
  body.page-portal .workspace__content:has(.seq-app) .tool-desktop-body.seq-wrap,
  body.page-portal .workspace__content:has(.seq-app) .seq-wrap,
  body.page-portal .workspace__content:has(.seq-app) .seq-app {
    display: block !important;
    flex: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

/* Keep toolbar / handoff chrome from eating the board; stage-wrap takes the rest */
body.page-portal .workspace__content:has(.seq-app) .resolve-handoff,
body.page-portal .workspace__content:has(.seq-app) .seq-toolbar,
body.page-portal .workspace__content:has(.seq-app) .seq-project-bar,
body.page-portal .workspace__content:has(.seq-app) .seq-hint {
  flex-shrink: 0;
}

/* ==========================================================================
   UI clarity pack (nav groups, context, banner, stepper, accents)
   ========================================================================== */

.flash.is-dismissing {
  opacity: 0;
  transform: translateY(-0.35rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* —— Portal nav groups —— */
.workspace-nav__group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-bottom: 0.65rem;
  padding: 0.15rem 0.1rem 0.3rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.workspace-nav__group:last-child {
  margin-bottom: 0;
}

/* Phase B: four group hues (Start gold · Plan steel · Media sage · Share rose) */
.workspace-nav__group {
  --group-accent: var(--accent);
}

.workspace-nav__group--start {
  --group-accent: #c9a84c; /* brand gold / amber */
}

.workspace-nav__group--plan {
  --group-accent: #7d9ab8; /* muted steel blue — only blue in the set */
}

.workspace-nav__group--media {
  --group-accent: #6aab92; /* sage / teal-green — not a second blue */
}

.workspace-nav__group--share {
  --group-accent: #c48b78; /* warm clay rose */
}

/* Soft tint on the group that contains the active tool (uses that group’s hue) */
.workspace-nav__group.is-active-group {
  background: color-mix(in srgb, var(--group-accent) 11%, transparent);
  border-color: color-mix(in srgb, var(--group-accent) 26%, transparent);
  padding: 0.25rem 0.15rem 0.4rem;
}

@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .workspace-nav__group.is-active-group {
    background: rgba(201, 168, 76, 0.06);
    border-color: rgba(201, 168, 76, 0.14);
  }
  .workspace-nav__group--plan.is-active-group {
    background: rgba(125, 154, 184, 0.1);
    border-color: rgba(125, 154, 184, 0.28);
  }
  .workspace-nav__group--media.is-active-group {
    background: rgba(106, 171, 146, 0.1);
    border-color: rgba(106, 171, 146, 0.28);
  }
  .workspace-nav__group--share.is-active-group {
    background: rgba(196, 139, 120, 0.1);
    border-color: rgba(196, 139, 120, 0.28);
  }
}

.workspace-nav__group-label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.35rem 0.75rem 0.2rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Always-visible group hue mark (scannable map of the four groups) */
.workspace-nav__group-label::before {
  content: "";
  flex-shrink: 0;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--group-accent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--group-accent) 35%, transparent);
}

.workspace-nav__group.is-active-group .workspace-nav__group-label {
  color: var(--group-accent);
}

.workspace-nav__btn {
  appearance: none;
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.workspace-nav__btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

.workspace-nav__btn:focus-visible,
.workspace-nav__link:focus-visible,
.splitter:focus-visible,
.workspace__context-toggle:focus-visible,
button:focus-visible,
a:focus-visible,
.chip:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--focus-ring, rgba(201, 168, 76, 0.55));
  outline-offset: 2px;
}

.workspace-nav__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem 0.15rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}

.workspace-nav__legal a {
  color: var(--text-muted);
}

.workspace-nav__legal a:hover {
  color: var(--accent);
}

/* —— Scratch / no-project banner —— */
.workspace-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.65rem 1.15rem;
  border-bottom: 1px solid rgba(201, 168, 76, 0.28);
  background: linear-gradient(90deg, rgba(201, 168, 76, 0.12), rgba(201, 168, 76, 0.04));
  flex-shrink: 0;
}

.workspace-banner[hidden] {
  display: none !important;
}

.workspace-banner__text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  font-size: 0.9rem;
}

.workspace-banner__detail {
  color: var(--text-secondary);
  font-size: 0.85rem;
}

.workspace-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* —— Context panel collapsible —— */
.workspace__side-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.workspace__side-head .workspace__side-title {
  margin: 0;
}

.workspace.workspace--context-hidden #split-side,
.workspace.workspace--context-hidden #panel-side {
  display: none !important;
}

.workspace.workspace--context-collapsed #panel-side[hidden],
.workspace.workspace--context-collapsed #split-side[hidden] {
  display: none !important;
}

.context-block--tip {
  border-left: 3px solid var(--group-accent, var(--accent));
  background: rgba(255, 255, 255, 0.03);
}

/* —— Phase B: four workflow-group hues (not one color per tool) ——
   Start = gold · Plan = steel blue · Media & edit = sage · Share = clay rose
   Active nav text / selection bar stay brand gold (--accent).
   --tool-accent aliases --group-accent for older empty-state kickers. */
.workspace {
  --group-accent: var(--accent);
  --tool-accent: var(--group-accent);
}

/* Start */
.workspace--section-onboarding,
.workspace--section-projects {
  --group-accent: #c9a84c;
}

/* Plan — single blue-family hue for the whole group */
.workspace--section-scripts,
.workspace--section-storyboard,
.workspace--section-reference,
.workspace--section-prompts {
  --group-accent: #7d9ab8;
}

/* Media & edit — sage/teal (distinct from Plan’s steel blue) */
.workspace--section-media,
.workspace--section-onion,
.workspace--section-sequence,
.workspace--section-editor {
  --group-accent: #6aab92;
}

/* Share — warm clay rose (all share tools match) */
.workspace--section-films,
.workspace--section-gallery,
.workspace--section-messages {
  --group-accent: #c48b78;
}

.workspace__title {
  border-left: 3px solid var(--group-accent, var(--accent));
  padding-left: 0.55rem;
}

/* Active nav item: always gold (Phase A) — do not recolor with group hue */

/* —— Simple path stepper —— */
.simple-path-stepper {
  margin: 0.75rem 0 0.25rem;
}

.simple-path-stepper__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.25rem;
}

.simple-path-stepper__sep {
  color: var(--text-muted);
  font-size: 0.85rem;
  padding: 0 0.15rem;
  user-select: none;
}

.simple-path-stepper__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.65rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 168, 76, 0.35);
  background: rgba(201, 168, 76, 0.08);
  color: var(--text-primary);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 600;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.simple-path-stepper__link:hover {
  background: rgba(201, 168, 76, 0.16);
  border-color: var(--accent);
  color: var(--text-primary);
}

.simple-path-stepper__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: rgba(201, 168, 76, 0.22);
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 700;
}

/* —— Home hero / features —— */
.hero__path-note {
  margin: 1rem 0 0;
  max-width: 36rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.75rem;
}

.hero__text-link {
  font-size: 0.9rem;
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.hero__text-link:hover {
  color: var(--accent);
}

.home-features__workflow-map {
  margin: 0 0 1.75rem;
}

.home-features__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem 1.35rem;
  margin-top: 0.75rem;
}

@media (max-width: 900px) {
  .home-features__cols {
    grid-template-columns: 1fr;
  }
}

.home-features__col-title {
  margin: 0 0 0.65rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.home-features__cols .home-features__grid {
  margin: 0;
  grid-template-columns: 1fr;
}

/* —— Gallery filter labels / chips —— */
.gal-filters__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 0.55rem;
}

.gal-filters__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gal-filters__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.25rem;
}

.gal-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.gal-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(201, 168, 76, 0.12);
  border: 1px solid rgba(201, 168, 76, 0.3);
  color: var(--text-secondary);
}

/* Empty state actions polish */
.empty-state__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.85rem;
}

.empty-state__kicker {
  margin: 0 0 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--group-accent, var(--accent));
}

/* ==========================================================================
   Notepad (floating) + project notes panel
   ========================================================================== */

.workspace__notepad-toggle.is-active {
  border-color: rgba(201, 168, 76, 0.55);
  background: rgba(201, 168, 76, 0.12);
  color: var(--accent);
}

.notepad {
  position: fixed;
  z-index: 11000;
  display: flex;
  flex-direction: column;
  min-width: 400px;
  min-height: 380px;
  max-width: min(92vw, 900px);
  max-height: min(88vh, 800px);
  width: min(520px, 92vw);
  height: min(560px, 80vh);
  resize: both;
  overflow: hidden;
  background: #141418;
  border: 1px solid rgba(201, 168, 76, 0.4);
  border-radius: var(--radius-md, 0.75rem);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.35),
    0 18px 48px rgba(0, 0, 0, 0.55);
}

@media (max-width: 860px) {
  .notepad {
    min-width: min(280px, 92vw);
    min-height: 280px;
    width: min(92vw, 520px);
    height: min(70vh, 520px);
  }
}

.notepad[hidden] {
  display: none !important;
}

.notepad__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: rgba(201, 168, 76, 0.1);
  border-bottom: 1px solid var(--border-subtle);
  cursor: grab;
  user-select: none;
  flex-shrink: 0;
  touch-action: none;
}

.notepad__head:active {
  cursor: grabbing;
}

.notepad__title-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.65rem;
  min-width: 0;
}

.notepad__title {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
}

.notepad__status {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.notepad__status.is-error {
  color: #e8a0a0;
}

.notepad__close {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
}

.notepad__close:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.06);
}

.notepad__body {
  flex: 1 1 auto;
  min-height: 6rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--border-subtle);
  resize: none;
  background: #0e0e12;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.92rem;
  line-height: 1.5;
}

.notepad__body:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(201, 168, 76, 0.35);
}

.notepad__foot {
  flex-shrink: 0;
  padding: 0.55rem 0.65rem 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  background: #121216;
}

.notepad__project-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.notepad__project-select {
  flex: 1 1 8rem;
  min-width: 0;
  max-width: 100%;
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #0e0e12;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
}

.notepad__actions {
  display: flex;
  gap: 0.35rem;
}

.notepad__hint {
  margin: 0;
  font-size: 0.72rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Project hub notes */
.project-notes {
  margin: 1rem 0 1.25rem;
  padding: 1rem 1.1rem;
}

.project-notes__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  margin-bottom: 0.75rem;
}

.project-notes__title {
  margin: 0 0 0.25rem;
  font-size: 1rem;
  font-weight: 600;
}

.project-notes__lead {
  margin: 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
  max-width: 40rem;
}

.project-notes__empty {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

.project-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-notes__item {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.2);
}

.project-notes__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}

.project-notes__body {
  margin: 0 0 0.35rem;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary);
  max-height: calc(1.5em * 5);
  overflow: hidden;
}

.project-notes__item.is-open .project-notes__body {
  max-height: none;
}

.project-notes__more {
  display: inline-block;
  margin: 0 0 0.45rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}

.project-notes__more:hover,
.project-notes__more:focus-visible {
  text-decoration: underline;
}

.project-notes__actions {
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   Shot list power (duration, transitions, correction, Imagine pack)
   ========================================================================== */

.shot-form__fieldset {
  margin: 0.85rem 0 0.5rem;
  padding: 0.75rem 0.85rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.15);
}

.shot-form__legend {
  padding: 0 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.shot-form__trans-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

@media (max-width: 520px) {
  .shot-form__trans-row {
    grid-template-columns: 1fr;
  }
}

.shot-form__sync {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.shot-form__ref-heading {
  margin: 0.75rem 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
}

.shot-form__ref-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.shot-form__ref-slot {
  display: grid;
  grid-template-columns: 1.5rem 1fr 1fr;
  gap: 0.35rem;
  align-items: center;
}

.shot-form__ref-slot input {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #0e0e12;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
}

.shot-form__ref-num {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-align: center;
}

.shot-list__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

.shot-list__pill--warn {
  background: rgba(201, 120, 60, 0.15);
  border-color: rgba(201, 120, 60, 0.4);
  color: #e8c090;
}

.shot-list__item.has-correction {
  border-left: 3px solid rgba(201, 120, 60, 0.55);
}

.shot-list__correction {
  margin: 0.35rem 0 0;
  padding: 0.45rem 0.55rem;
  border-radius: var(--radius-sm);
  background: rgba(201, 120, 60, 0.1);
  border: 1px solid rgba(201, 120, 60, 0.25);
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.shot-list__correction-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #e8c090;
  margin-bottom: 0.2rem;
}

/* ==========================================================================
   Shot collapsible sections (form + list cards)
   ========================================================================== */

.shot-form__optional-note {
  margin: 0.65rem 0 0.35rem;
}

.shot-collapse {
  margin: 0.45rem 0;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.shot-form__collapse {
  margin: 0.5rem 0;
}

.shot-collapse__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.65rem;
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.shot-collapse__summary::-webkit-details-marker {
  display: none;
}

.shot-collapse__summary:hover {
  background: rgba(255, 255, 255, 0.03);
}

.shot-collapse__label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-primary);
}

.shot-collapse__hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.shot-collapse__chevron {
  width: 0.55rem;
  height: 0.55rem;
  margin-left: auto;
  border-right: 2px solid var(--text-muted);
  border-bottom: 2px solid var(--text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
}

.shot-collapse[open] > .shot-collapse__summary .shot-collapse__chevron {
  transform: rotate(225deg);
  margin-top: 0.2rem;
}

.shot-collapse__body {
  padding: 0 0.75rem 0.75rem;
  border-top: 1px solid var(--border-subtle);
}

.shot-collapse__body.shot-form__fieldset {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0.75rem;
}

.shot-list__preview {
  margin: 0.35rem 0 0.25rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.shot-list__details {
  margin: 0.4rem 0 0.5rem;
}

.shot-list__details .shot-collapse__body {
  padding-top: 0.55rem;
}

.shot-list__ref-list {
  margin: 0.15rem 0 0.45rem 0.25rem;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.shot-list__ref-list li {
  margin: 0.15rem 0;
}

/* ==========================================================================
   Shot Imagine pack — local ref file slots
   ========================================================================== */

.shot-form__refs-folder {
  margin: 0.65rem 0 0.85rem;
  padding: 0.65rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(201, 168, 76, 0.35);
  background: rgba(201, 168, 76, 0.06);
}

.shot-form__refs-folder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
  margin-top: 0.35rem;
}

.shot-form__refs-folder-input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #0e0e12;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
}

.shot-form__ref-slot--file {
  display: grid;
  grid-template-columns: 1.5rem 1fr auto;
  gap: 0.45rem 0.5rem;
  align-items: start;
  padding: 0.5rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.18);
}

.shot-form__ref-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.shot-form__ref-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}

@media (max-width: 640px) {
  .shot-form__ref-fields {
    grid-template-columns: 1fr;
  }
  .shot-form__ref-slot--file {
    grid-template-columns: 1.25rem 1fr;
  }
  .shot-form__ref-preview {
    grid-column: 1 / -1;
  }
}

.shot-form__ref-fields input[type="text"] {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #0e0e12;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
}

.shot-form__ref-file-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.78rem;
}

.shot-form__ref-file-name {
  color: var(--accent);
  font-weight: 600;
  word-break: break-all;
}

.shot-form__ref-folder-name {
  color: var(--text-muted);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
}

.shot-form__ref-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.shot-form__ref-preview {
  width: 4.5rem;
  min-height: 3rem;
  flex-shrink: 0;
}

.shot-form__ref-thumb {
  display: block;
  width: 4.5rem;
  height: 4.5rem;
  object-fit: cover;
  border-radius: 0.35rem;
  border: 1px solid var(--border-subtle);
  background: #0a0a0c;
}

.shot-form__ref-audio {
  width: 100%;
  max-width: 12rem;
  height: 2rem;
}

.shot-list__folder-row,
.shot-list__ref-path-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  margin-top: 0.2rem;
}

.shot-list__folder-path,
.shot-list__ref-path-row code {
  font-size: 0.75rem;
  color: var(--text-muted);
  word-break: break-all;
}

/* Context panel — collapsible tool help */
.context-block--help {
  padding-bottom: 0.35rem;
}

.context-help-collapse {
  margin: 0.4rem 0;
  background: rgba(0, 0, 0, 0.2);
}

.context-help-body {
  padding-top: 0.55rem;
}

.context-help-body .context-block__text {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
}

.context-block__text--muted {
  color: var(--text-muted);
  font-size: 0.8rem !important;
}

.context-help-list {
  margin: 0 0 0.55rem;
  padding-left: 1.15rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.context-help-list li {
  margin: 0.3rem 0;
}

.context-help-list strong {
  color: var(--text-primary);
}

.context-workflow {
  list-style: none;
  margin: 0 0 0.65rem;
  padding: 0;
  counter-reset: ctx-flow;
}

.context-workflow li {
  position: relative;
  margin: 0;
  padding: 0.28rem 0 0.28rem 1.55rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  border-left: 1px solid rgba(201, 168, 76, 0.28);
}

.context-workflow li:first-child {
  padding-top: 0;
}

.context-workflow li:last-child {
  padding-bottom: 0;
  border-left-color: transparent;
}

.context-workflow li::before {
  counter-increment: ctx-flow;
  content: counter(ctx-flow);
  position: absolute;
  left: -0.55rem;
  top: 0.28rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid rgba(201, 168, 76, 0.45);
  color: var(--accent);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.05rem;
  text-align: center;
}

.context-workflow li:first-child::before {
  top: 0;
}

.context-workflow__offsite {
  color: var(--accent);
}

/* ==========================================================================
   Phase 4 — project model, runtime bar, inspiration, shot locks
   ========================================================================== */

.proj-meta-fields {
  margin-top: 0.35rem;
}

.proj-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.75rem;
}

@media (max-width: 520px) {
  .proj-meta-grid {
    grid-template-columns: 1fr;
  }
}

.proj-open__package {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.proj-runtime-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0.85rem 0 0.5rem;
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 168, 76, 0.28);
  background: rgba(201, 168, 76, 0.07);
}

.proj-runtime-bar__item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 8rem;
}

.proj-runtime-bar__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.proj-runtime-bar__value {
  font-size: 1.15rem;
  color: var(--text-primary);
}

.proj-runtime-bar__hint {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.proj-runtime-bar__hint.is-over {
  color: #e8a070;
}

.proj-runtime-bar__hint.is-under {
  color: #8ec9a8;
}

.proj-runtime-bar__note {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.proj-package-dl {
  margin: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.proj-package-dl__row {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 0.5rem;
  font-size: 0.9rem;
}

.proj-package-dl__row dt {
  margin: 0;
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.proj-package-dl__row dd {
  margin: 0;
  color: var(--text-secondary);
  white-space: pre-wrap;
}

.proj-insp-group {
  margin: 0.75rem 0;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.proj-insp-group legend {
  padding: 0 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
}

.proj-insp-add {
  margin-top: 0.35rem;
}

.proj-insp-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
}

@media (max-width: 720px) {
  .proj-insp-row {
    grid-template-columns: 1fr;
  }
  .proj-package-dl__row {
    grid-template-columns: 1fr;
  }
}

.proj-insp-row input {
  width: 100%;
  min-width: 0;
  padding: 0.35rem 0.45rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #0e0e12;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.85rem;
}

.proj-sheets {
  margin: 0 0 1.35rem;
  padding: 0 0 1.15rem;
  border-bottom: 1px solid var(--border-subtle);
}

.proj-sheets__title {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
}

.proj-sheets__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.85rem;
  margin: 0 0 1rem;
  font-size: 0.88rem;
}

.proj-sheet {
  margin-bottom: 1.25rem;
}

.proj-sheet__heading {
  margin: 0 0 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

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

@media (min-width: 720px) {
  .proj-sheet__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .proj-sheet__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.proj-sheet-card {
  display: flex;
  gap: 0.7rem;
  margin: 0;
  padding: 0.65rem;
  background: var(--bg-deep);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-width: 0;
  cursor: grab;
}

.proj-sheet-card.is-dragging {
  opacity: 0.55;
  cursor: grabbing;
}

.proj-sheet-card.is-drag-over {
  border-color: var(--accent);
}

.proj-sheet-card__grip {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: -0.15rem 0 0 -0.2rem;
  padding: 0.15rem 0.2rem;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.85rem;
  letter-spacing: -0.12em;
  line-height: 1;
  cursor: grab;
}

.proj-sheet-card__visual {
  flex: 0 0 4.5rem;
  width: 4.5rem;
  height: 4.5rem;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #16161c;
  border: 1px solid var(--border-subtle);
}

.proj-sheet-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.proj-sheet-card__mono {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--accent);
}

.proj-sheet-card__body {
  flex: 1;
  min-width: 0;
}

.proj-sheet-card__name {
  margin: 0 0 0.4rem;
  font-weight: 700;
  font-size: 0.95rem;
}

.proj-sheet-card__fields {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.proj-sheet-card__fields input,
.proj-sheet-card__fields select {
  width: 100%;
  min-width: 0;
  padding: 0.28rem 0.4rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: #0e0e12;
  color: var(--text-primary);
  font: inherit;
  font-size: 0.8rem;
}

.proj-sheet-card__note,
.proj-sheet-card__path,
.proj-sheet-card__hits {
  margin: 0.4rem 0 0;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--text-secondary);
}

.proj-sheet-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.7rem;
  margin: 0.45rem 0 0;
  font-size: 0.8rem;
}

.shot-list__pill--lock {
  background: rgba(120, 140, 180, 0.18);
  border-color: rgba(120, 140, 180, 0.45);
  color: #b8c8e0;
}

.shot-list__item.is-locked {
  border-left: 3px solid rgba(120, 140, 180, 0.55);
  opacity: 0.96;
}

.shot-video-bar__runtime {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.gal-detail__more {
  margin: 0.75rem 0 1rem;
}

/* Media folder cards — sync all / path */
.media-folder-card--sync {
  border-color: rgba(201, 168, 76, 0.35);
}

.media-folder-card__path {
  font-size: 0.75rem;
  color: var(--text-muted);
  word-break: break-all;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  margin: 0.15rem 0 0.35rem;
}

.media-folder-card__receipt {
  font-size: 0.78rem;
  color: var(--text-secondary);
  margin: 0 0 0.4rem;
  line-height: 1.35;
}

.media-folder-card__sync {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0.35rem 0 0.5rem;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.media-connect__options {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

/* --------------------------------------------------------------------------
   Build updates doc (public + window)
   -------------------------------------------------------------------------- */
.build-doc__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

.build-doc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1rem 0 1.5rem;
  align-items: start;
}

@media (max-width: 860px) {
  .build-doc {
    grid-template-columns: 1fr;
  }
}

.build-doc__col {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 1rem 1.1rem 1.15rem;
  min-height: 12rem;
  box-shadow: var(--shadow-card);
}

.build-doc__col--shipped {
  border-top: 3px solid rgba(201, 168, 76, 0.55);
}

.build-doc__col--planned {
  border-top: 3px solid rgba(120, 160, 200, 0.55);
}

.build-doc__col-head {
  margin-bottom: 0.85rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--border-subtle);
}

.build-doc__col-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 650;
  color: var(--text-primary);
}

.build-doc__col-lead {
  margin: 0.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.build-doc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.build-doc__item {
  margin: 0;
  padding: 0.65rem 0.7rem;
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid var(--border-subtle);
}

.build-doc__date {
  display: block;
  font-size: 0.75rem;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}

.build-doc__item-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--text-primary);
  line-height: 1.35;
}

.build-doc__item-body {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.build-doc__footnote {
  margin-bottom: 2rem;
}

.build-doc__window-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 1rem;
  margin: -0.5rem 0 1rem;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.9rem;
}

.build-doc__window-bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.page-updates--window .site-header {
  display: none;
}

.page-updates--window .site-main {
  padding-top: 0.5rem;
}

.page-updates--window .flash-stack {
  margin-top: 0.5rem;
}

/* Admin build updates editor */
.build-admin-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1rem;
  align-items: start;
}

@media (max-width: 900px) {
  .build-admin-cols {
    grid-template-columns: 1fr;
  }
}

.build-admin-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.build-admin-card {
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-card);
}

.build-admin-card.is-hidden-entry {
  opacity: 0.65;
  border-style: dashed;
}

.build-admin-card__meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.build-admin-card__title {
  display: block;
  font-size: 0.95rem;
  color: var(--text-primary);
}

.build-admin-card__body {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  white-space: pre-wrap;
  max-height: 8rem;
  overflow: auto;
}

.build-admin-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}

.form-row--2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

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

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  margin-top: 0.35rem;
}

.msg-feedback-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.55rem;
  align-items: center;
}

/* ==========================================================================
   Imagine scan, folder path notes, locks, admin bulk, featured
   ========================================================================== */

.scripts-panel__head--edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.scripts-panel__head--edit .panel-heading {
  margin: 0;
}

.shot-video-bar__scan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.shot-folder-bar {
  margin: 0.15rem 0 0;
}

.shot-folder-bar__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
  margin: 0;
  font-size: 0.85rem;
}

.shot-folder-bar__label {
  font-weight: 600;
  color: var(--text-secondary);
}

.shot-folder-bar__path {
  font-size: 0.8rem;
  color: var(--text-primary);
  max-width: 100%;
  overflow-wrap: anywhere;
}

.shot-folder-bar__hint {
  margin: 0.3rem 0 0;
}

.shot-scan-dock {
  margin-top: 0.35rem;
  padding: 0.7rem 0.75rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(201, 168, 76, 0.45);
  background: rgba(12, 12, 16, 0.92);
  position: sticky;
  top: 0;
  z-index: 4;
}

.shot-scan-dock__head {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  align-items: baseline;
}

.shot-scan-dock__kicker {
  margin: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}

.shot-scan-dock__progress {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.shot-scan-dock__shot {
  margin: 0.35rem 0 0.15rem;
  font-weight: 700;
  font-size: 1rem;
}

.shot-scan-dock__preview {
  margin: 0 0 0.55rem;
  font-size: 0.88rem;
  color: var(--text-secondary);
  line-height: 1.4;
}

.shot-scan-dock__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.shot-scan-dock__keys {
  margin: 0.45rem 0 0;
}

.shot-scan-dock__keys kbd {
  display: inline-block;
  padding: 0.05rem 0.3rem;
  border: 1px solid var(--border-subtle);
  border-radius: 3px;
  font-size: 0.75rem;
}

.shot-list__item.is-scan-current {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  background: rgba(201, 168, 76, 0.08);
}

.scripts-app.is-scan-mode .shot-list__item:not(.is-scan-current) {
  opacity: 0.55;
}

.media-path-note-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.media-path-note-row input {
  flex: 1;
  min-width: 0;
}

.media-folder-card__path--missing {
  color: #d4b56a;
  font-size: 0.8rem;
}

.sb-card.is-locked {
  border-color: rgba(120, 140, 180, 0.45);
}

.admin-mod-filter,
.admin-mod-bulk {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.75rem;
  align-items: flex-end;
  margin: 0 0 1.15rem;
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: rgba(0, 0, 0, 0.18);
}

.admin-mod-bulk__label {
  margin: 0;
  width: 100%;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.admin-mod-card {
  position: relative;
}

.admin-mod-card__pick {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  margin-bottom: 0.35rem;
}

.gal-card__worktype--featured,
.gal-pill--featured {
  background: rgba(201, 168, 76, 0.2);
  color: var(--accent);
  border-color: rgba(201, 168, 76, 0.4);
}

.profile-featured-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.65rem;
  align-items: center;
  margin: 0.75rem 0 1rem;
}

.profile-featured-form label {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

.profile-featured-form select {
  min-width: 12rem;
}

.hp-field {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.admin-external-warn {
  margin: 0.65rem 0 0.35rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(201, 120, 80, 0.45);
  border-radius: var(--radius-sm);
  background: rgba(201, 120, 80, 0.1);
}

.admin-external-warn__label {
  margin: 0 0 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.admin-external-warn__url {
  margin: 0 0 0.45rem;
  word-break: break-all;
  font-size: 0.82rem;
}

.admin-external-ack {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--text-primary);
}

.admin-external-ack--bulk {
  width: 100%;
  margin-top: 0.15rem;
}

.admin-user-secure {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}

.admin-user-secure input[type="password"] {
  width: 8.5rem;
  padding: 0.25rem 0.4rem;
  font-size: 0.8rem;
}

@media (max-width: 860px) {
  .shot-scan-dock {
    position: static;
  }
}

/* —— Story timeline (Plan) —— */
.st-app {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}

.st-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.25rem;
  align-items: flex-start;
}

.st-head__title {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
}

.st-head__lead {
  margin: 0;
  max-width: 42rem;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.st-head__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.25rem;
}

.st-toolbar,
.st-overlays {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.85rem;
  margin: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.st-overlays {
  border-style: dashed;
}

.st-overlays legend {
  padding: 0 0.35rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}

.st-overlays--films legend {
  color: #c4846a;
}

.st-overlays__hint {
  flex: 1 1 100%;
  margin: 0.1rem 0 0;
}

.st-toolbar__field,
.st-overlays__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0;
  font-size: 0.82rem;
  white-space: nowrap;
}

.st-toolbar__field select,
.st-toolbar__field input {
  min-width: 8rem;
  height: 1.7rem;
  padding: 0 0.4rem;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-deep, #0a0a0e);
  color: var(--text-primary);
}

.st-toolbar__read {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.st-board {
  position: relative;
  min-height: 16.5rem;
  padding: 1.6rem 1rem 1.1rem;
  background: var(--bg-deep, #0a0a0e);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: visible;
}

.st-ruler {
  position: relative;
  height: 1.1rem;
  margin-bottom: 0.35rem;
}

.st-ruler__tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: var(--text-muted);
  white-space: nowrap;
}

.st-ruler__tick::before {
  content: "";
  display: block;
  width: 1px;
  height: 0.35rem;
  margin: 0 auto 0.15rem;
  background: var(--border-medium);
}

.st-bands {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  min-height: 2.4rem;
}

.st-bands__row {
  position: relative;
  height: 1.45rem;
}

.st-band {
  position: absolute;
  top: 0;
  bottom: 0;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 0.35rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(240, 239, 233, 0.88);
}

.st-band--1 { background: rgba(201, 168, 76, 0.28); }
.st-band--2 { background: rgba(90, 140, 170, 0.32); }
.st-band--3 { background: rgba(140, 100, 160, 0.3); }
.st-band--4 { background: rgba(90, 140, 110, 0.3); }

.st-track {
  position: relative;
  height: 8.6rem;
  margin-top: 0.55rem;
}

.st-track.is-dragging {
  cursor: grabbing;
}

.st-node {
  position: absolute;
  top: 0.1rem;
  transform: translateX(-50%);
  width: 7.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: grab;
  text-align: center;
  z-index: 1;
}

.st-node--lane-1 {
  top: 2.55rem;
}

.st-node--custom-row {
  top: 5.35rem;
}

.st-node:hover,
.st-node:focus-visible,
.st-node.is-selected {
  z-index: 12;
}

.st-node.is-selected .st-node__dot {
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.45);
}

.st-node__dot {
  display: block;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0 auto 0.25rem;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg-deep, #0a0a0e);
}

.st-node--custom .st-node__dot {
  background: #7eb0d4;
  border-radius: 2px;
}

.st-node--film .st-node__dot {
  background: #c4846a;
}

.st-node__label {
  display: block;
  font-size: 0.66rem;
  line-height: 1.25;
  color: var(--text-secondary);
  max-height: 2.6rem;
  overflow: hidden;
  border-radius: 3px;
  transition: font-size 0.12s ease, max-height 0.12s ease, background-color 0.12s ease;
}

.st-node:hover .st-node__label,
.st-node:focus-visible .st-node__label {
  font-size: 0.86rem;
  line-height: 1.3;
  max-height: none;
  overflow: visible;
  padding: 0.18rem 0.28rem;
  color: var(--text-primary);
  background: var(--bg-card);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.st-marker {
  position: absolute;
  top: 1.4rem;
  bottom: 0.4rem;
  width: 0;
  border-left: 1px dashed rgba(201, 168, 76, 0.7);
  pointer-events: none;
}

.st-detail {
  padding: 0.75rem 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-card);
}

.st-detail__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.st-detail__field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0 0 0.55rem;
  font-size: 0.8rem;
  flex: 1 1 8rem;
}

.st-detail__field--grow {
  flex: 2 1 14rem;
}

.st-detail__field input,
.st-detail__field textarea {
  width: 100%;
  padding: 0.35rem 0.45rem;
  font: inherit;
  color: var(--text-primary);
  background: var(--bg-deep, #0a0a0e);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
}

.st-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.st-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.65rem 1rem;
}

@media (max-width: 720px) {
  .st-node {
    width: 5.2rem;
  }
}

/* --------------------------------------------------------------------------
   Onion Board — frame-by-frame onion-skin drawing
   -------------------------------------------------------------------------- */
.ob-wrap,
.ob-app {
  display: flex;
  flex-direction: column;
  min-height: 0;
  gap: 0.55rem;
}

.ob-project-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: rgba(255, 255, 255, 0.03);
}

.ob-project-bar__status {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.ob-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-subtle);
}

.ob-toolbar__left,
.ob-toolbar__onion,
.ob-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.55rem;
}

.ob-toolbar__title-label,
.ob-toolbar__group-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ob-toolbar__title {
  min-width: 8rem;
  max-width: 16rem;
  padding: 0.28rem 0.5rem;
  font-size: 0.85rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--bg-deep, #0a0a0e);
  color: var(--text-primary);
}

.ob-status {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.ob-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  color: var(--text-secondary);
  cursor: pointer;
}

.ob-toolbar__slider {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ob-toolbar__slider input[type="range"] {
  width: 5.2rem;
}

.ob-books {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
}

.ob-books__slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  min-width: 0;
}

.ob-book-slot.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201, 168, 76, 0.12);
}

.ob-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.2rem 0 0.45rem;
}

.ob-thumb {
  position: relative;
  flex: 0 0 7.2rem;
  width: 7.2rem;
  height: 4.15rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #121218 center / cover no-repeat;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}

.ob-thumb.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.45);
}

.ob-thumb.is-empty {
  background: repeating-linear-gradient(
    -45deg,
    #14141a,
    #14141a 6px,
    #18181f 6px,
    #18181f 12px
  );
}

.ob-thumb--add {
  font-size: 1.5rem;
  color: var(--accent);
  background: rgba(201, 168, 76, 0.08);
}

.ob-thumb__num {
  position: absolute;
  top: 0.2rem;
  left: 0.28rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px #000;
}

.ob-thumb__empty {
  font-size: 0.68rem;
  color: var(--text-muted);
}

.ob-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.45rem;
  margin-bottom: 0.45rem;
}

.ob-tool.is-active {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(201, 168, 76, 0.1);
}

.ob-tools__color,
.ob-tools__size {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ob-tools__size input[type="range"] {
  width: 5.5rem;
}

.ob-tools__aspect {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ob-tools__aspect select {
  height: 1.55rem;
  padding: 0 0.3rem;
  font-size: 0.72rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-deep, #0a0a0e);
  color: var(--text-primary);
}

.ob-save-mode {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.2rem;
}

.ob-frame-ops {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-left: 0.35rem;
  padding-left: 0.45rem;
  border-left: 1px solid var(--border-subtle);
}

.ob-tools__view {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.ob-tools__view input[type="range"] {
  width: 6.5rem;
}

.ob-stage-wrap {
  width: var(--ob-view-width, 100%);
  max-width: 100%;
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(201, 168, 76, 0.45);
  border-radius: var(--radius-md);
  background: #0c0c10;
  overflow: hidden;
}

.ob-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #121218;
}

.ob-stage canvas,
.ob-live {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#ob-onion {
  z-index: 1;
  pointer-events: none;
  opacity: 0.35;
}

.ob-live {
  z-index: 2;
}

#ob-base {
  pointer-events: none;
}

#ob-draw {
  cursor: crosshair;
  touch-action: none;
}

#ob-guide {
  z-index: 3;
  pointer-events: none;
}

.ob-player-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}

.ob-player {
  width: min(22rem, 100%);
}

.ob-player__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.ob-player__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.ob-player__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0.75rem;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.82rem;
}

.ob-player__now {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  color: var(--text-secondary);
}

.ob-hint {
  margin: 0.15rem 0 0;
}

@media (max-width: 860px) {
  .ob-stage {
    aspect-ratio: 16 / 9;
  }
}