:root { color-scheme: light; }
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--moja-paper);
  color: var(--moja-ink);
  -webkit-font-smoothing: antialiased;
}
body { overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
img, video { max-width: 100%; display: block; }

.app-shell { min-height: 100vh; background: #fff; }
.boot-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 18px;
  color: rgba(5,5,5,0.62);
}
.boot-screen .brand-lockup {
  transform: scale(1.08);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
  padding: 14px 24px;
  background: rgba(255,255,255,0.9);
  border-bottom: 2px solid rgba(5,5,5,0.08);
  backdrop-filter: blur(18px) saturate(140%);
}
.brand {
  border: 0;
  background: transparent;
  padding: 0;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--moja-ink);
  text-align: left;
}
.brand-lockup img {
  width: 64px;
  height: 42px;
  object-fit: contain;
}
.brand-lockup strong {
  color: var(--moja-ink);
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: none;
}
.boot-lockup {
  flex-direction: column;
  gap: 14px;
}
.boot-lockup img {
  width: 180px;
  height: auto;
}
.boot-lockup strong {
  font-size: 34px;
}
.icon-chip {
  min-height: 38px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: var(--radius-pill);
  padding: 9px 14px;
  color: rgba(5,5,5,0.78);
  background: rgba(5,5,5,0.04);
  font-weight: var(--fw-bold);
  transition: transform var(--dur-base) var(--ease-pop), background var(--dur-base), border-color var(--dur-base);
}
.icon-chip:hover {
  color: #050505;
  background: rgba(255,47,179,0.1);
  border-color: rgba(255,47,179,0.32);
}
.icon-chip.flame,
.btn-flame {
  color: #fff;
  background: var(--moja-flame);
  border-color: transparent;
  box-shadow: var(--shadow-flame), 0 3px 0 rgba(0,0,0,0.45);
}
.account-box {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(5,5,5,0.7);
  font-size: 13px;
}
.account-link {
  max-width: 220px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 9px 12px;
  overflow: hidden;
  color: rgba(5,5,5,0.72);
  background: transparent;
  font-weight: var(--fw-semibold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-link:hover,
.account-link.active {
  color: #050505;
  border-color: rgba(5,5,5,0.14);
  background: rgba(5,5,5,0.06);
}

.eyebrow {
  display: inline-flex;
  width: max-content;
  color: #050505;
  background: var(--moja-tano);
  border: 2px solid #050505;
  border-radius: var(--radius-pill);
  padding: 7px 12px;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}

.hero-band {
  position: relative;
  min-height: clamp(500px, calc(100vh - 112px), 680px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  border-bottom: 2px solid rgba(5,5,5,0.08);
}
.hero-band video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08);
}
.hero-band::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,7,7,0.96) 0%, rgba(7,7,7,0.7) 42%, rgba(7,7,7,0.18) 100%),
    linear-gradient(0deg, #070707 0%, rgba(7,7,7,0.12) 52%, rgba(7,7,7,0.25) 100%);
}
.hero-copy {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding: clamp(30px, 4.6vw, 58px);
}
.hero-copy h1 {
  margin: 24px 0 22px;
  max-width: 12ch;
  color: #fff;
  font-size: clamp(64px, 7.6vw, 98px);
  line-height: 1;
  letter-spacing: 0;
}
.hero-copy p {
  max-width: 22ch;
  color: rgba(255,255,255,0.76);
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.35;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.featured {
  position: relative;
  margin: 0;
  padding: clamp(18px, 3vw, 32px) clamp(16px, 3vw, 40px) 24px;
  background:
    radial-gradient(900px 360px at 92% 0%, rgba(0,174,239,0.18), transparent 68%),
    radial-gradient(760px 380px at 0% 8%, rgba(255,47,179,0.16), transparent 62%),
    #fff;
  overflow: hidden;
}
.featured::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,0.6) 0.5px, transparent 0.5px);
  background-size: 3px 3px;
}
.featured-frame {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  min-height: clamp(420px, calc(100vh - 130px), 780px);
  border-radius: 26px;
  background:
    radial-gradient(100% 80% at 25% 10%, rgba(255,47,179,0.24), transparent 58%),
    radial-gradient(100% 80% at 75% 0%, rgba(0,174,239,0.22), transparent 58%),
    #050505;
  isolation: isolate;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 28px 70px -30px rgba(5,5,5,0.34),
    0 0 0 2px rgba(5,5,5,0.9);
}
.featured-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,47,179,0.6), rgba(255,255,255,0.06) 35%, rgba(0,174,239,0.52));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.featured-video-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(8px, 1.4vw, 18px);
  padding: clamp(8px, 1.4vw, 18px);
}
.featured-video-panel {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: clamp(14px, 2vw, 22px);
  background: #000;
  box-shadow: 0 18px 44px rgba(0,0,0,0.36), 0 1px 0 rgba(255,255,255,0.08) inset;
}
.featured-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.featured-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 70% at 50% 0%, transparent 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 28%, rgba(0,0,0,0.15) 55%, rgba(10,10,10,0.92) 100%);
  pointer-events: none;
}
.featured-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(22px, 3vw, 36px);
}
.featured-overlay .eyebrow {
  color: #050505;
  background: var(--moja-tano);
  border: 2px solid #050505;
  border-radius: var(--radius-pill);
  padding: 6px 12px;
  box-shadow: var(--shadow-flame);
}
.featured-overlay h1 {
  margin: 12px 0 14px;
  color: #fff;
  font-size: clamp(40px, 7.2vw, 88px);
  font-weight: var(--fw-bold);
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 30px rgba(0,0,0,0.55);
}
.featured-overlay h1 em {
  color: var(--moja-saba);
  display: inline-block;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 0.94;
  text-transform: lowercase;
  -webkit-text-stroke: 2px #050505;
  text-shadow: 3px 3px 0 var(--moja-flame), 0 2px 30px rgba(0,0,0,0.55);
}
.hero-sub {
  max-width: 32ch;
  color: rgba(255,255,255,0.8);
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.4;
  text-shadow: 0 1px 16px rgba(0,0,0,0.6);
}
.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}
.soon-strip {
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.85);
  background: rgba(5,5,5,0.04);
  font-size: 12px;
  font-weight: var(--fw-bold);
  backdrop-filter: blur(14px);
}
.soon-strip .dot,
.featured-pill-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--moja-saba);
  box-shadow: 0 0 0 0 rgba(0,174,239,0.6), 0 0 12px rgba(0,174,239,0.9);
  animation: dot-pulse 1.8s var(--ease-pop) infinite;
}
.featured-pill-row {
  position: absolute;
  top: clamp(12px, 2vw, 18px);
  left: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
}
.featured-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgba(10,10,10,0.55);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.08) inset;
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  backdrop-filter: blur(14px) saturate(140%);
}
.featured-pill-tech {
  background: rgba(24,42,86,0.66);
  border-color: rgba(126,181,255,0.38);
}
.featured-pill-tech .featured-pill-dot {
  background: #70b7ff;
}
.featured-pill-failure {
  background: rgba(90,18,18,0.62);
  border-color: rgba(255,95,197,0.36);
}
.featured-pill-success {
  position: relative;
  overflow: hidden;
  background: rgba(8,72,42,0.62);
  border-color: rgba(112,255,185,0.34);
  animation: success-pill-pulse 2.4s var(--ease-pop) infinite;
}
.featured-pill-success .featured-pill-dot {
  background: #44ff9a;
}
body.modal-open {
  overflow: hidden;
}
body.modal-open .topbar,
body.modal-open main,
body.modal-open .tabbar {
  filter: blur(14px) saturate(110%);
  pointer-events: none;
  transition: filter 220ms var(--ease-pop);
}
.notify-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 20px;
}
.notify-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8,4,3,0.55);
  opacity: 0;
  backdrop-filter: blur(6px) saturate(140%);
  transition: opacity 200ms var(--ease-pop);
}
.notify-modal.is-open .notify-modal-backdrop {
  opacity: 1;
}
.notify-modal-card {
  position: relative;
  width: min(920px, 100%);
  max-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(240px, 0.78fr) minmax(320px, 1fr);
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 22px;
  background:
    radial-gradient(100% 80% at 0% 0%, rgba(255,47,179,0.28), transparent 55%),
    radial-gradient(90% 90% at 100% 0%, rgba(180,92,255,0.26), transparent 60%),
    linear-gradient(180deg, #1a1212 0%, #0d0808 100%);
  box-shadow: 0 34px 90px -22px rgba(0,0,0,0.86), 0 0 0 1px rgba(255,255,255,0.05);
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: transform 220ms var(--ease-pop), opacity 200ms var(--ease-pop);
}
.notify-modal.is-open .notify-modal-card {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.notify-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  color: rgba(255,255,255,0.8);
  background: rgba(10,10,10,0.48);
}
.notify-modal-copy {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px 30px;
  border-right: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, transparent 0%, rgba(10,10,10,0.78) 72%),
    url("/assets/movie-posters/001-x-o-manowar.png") center/cover no-repeat;
}
.notify-modal-copy .eyebrow,
.notify-form-head .eyebrow {
  width: max-content;
  color: #fff;
  background: var(--moja-flame);
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-flame);
}
.notify-modal-copy h2 {
  margin: 14px 0 10px;
  max-width: 9ch;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 0.96;
  letter-spacing: -0.02em;
}
.notify-modal-copy p,
.notify-form-head p,
.notify-form-status {
  margin: 0;
  color: rgba(255,255,255,0.66);
  line-height: 1.45;
}
.notify-form-shell {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
  padding: clamp(22px, 4vw, 42px);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,47,179,0.14), transparent 60%),
    rgba(13,8,8,0.92);
}
.notify-signup-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.notify-form-head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notify-form-head .eyebrow {
  color: var(--moja-flame);
  background: rgba(255,47,179,0.12);
  border: 1px solid rgba(255,47,179,0.22);
  box-shadow: none;
}
.notify-form-head h3 {
  margin: 0;
  font-size: clamp(32px, 5vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.03em;
}
.notify-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.notify-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notify-field-full {
  grid-column: 1 / -1;
}
.notify-field span {
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.notify-field input {
  width: 100%;
  min-height: 54px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  padding: 14px 15px;
  color: #fff;
  background: rgba(255,255,255,0.07);
  outline: none;
  font: inherit;
  font-size: 16px;
}
.notify-field input:focus {
  border-color: rgba(255,47,179,0.82);
  background: rgba(255,255,255,0.1);
  box-shadow: 0 0 0 4px rgba(255,47,179,0.14);
}
.notify-submit {
  justify-content: center;
  width: 100%;
  min-height: 54px;
}
.notify-signup-form.is-submitting .notify-submit {
  opacity: 0.72;
  pointer-events: none;
}
.notify-signup-form.is-complete .notify-form-status {
  color: #44ff9a;
}
.notify-submit-frame {
  position: absolute;
  width: 1px;
  height: 1px;
  border: 0;
  opacity: 0;
  pointer-events: none;
}
@keyframes dot-pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,47,179,0.55); }
  70% { box-shadow: 0 0 0 10px rgba(255,47,179,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,47,179,0); }
}
@keyframes success-pill-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 0 rgba(68,255,154,0); }
  45% { transform: scale(1.045); box-shadow: 0 10px 30px rgba(0,0,0,0.42), 0 0 0 7px rgba(68,255,154,0.18), 0 0 22px rgba(68,255,154,0.62); }
}
.btn-flame,
.btn-ghost {
  min-height: 48px;
  border-radius: var(--radius-pill);
  padding: 13px 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: var(--fw-bold);
  border: 1px solid transparent;
}
.btn-ghost {
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.18);
}
.account-shell .account-hero .hero-actions button.btn-ghost {
  color: var(--moja-ink) !important;
}
.play-tri {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 0 7px 11px;
  border-color: transparent transparent transparent currentColor;
}

.rail-stack {
  position: relative;
  padding: clamp(34px, 5vw, 72px) 0 clamp(70px, 8vw, 110px);
  background:
    radial-gradient(620px 260px at 6% 6%, rgba(255,47,179,0.1), transparent 72%),
    radial-gradient(680px 320px at 94% 18%, rgba(0,174,239,0.12), transparent 68%),
    #fff;
}
.rail-intro {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  max-width: 1380px;
  margin: 0 auto clamp(24px, 3vw, 40px);
  padding: 0 clamp(22px, 3vw, 40px);
}
.rail-intro h2 {
  max-width: 13ch;
  margin: 12px 0 0;
  color: var(--moja-ink);
  font-size: clamp(36px, 5vw, 68px);
  line-height: 0.95;
}
.rail-intro p {
  max-width: 42ch;
  color: rgba(5,5,5,0.64);
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.4;
}
.rail-section {
  max-width: 1380px;
  margin: 0 auto clamp(34px, 4vw, 54px);
}
.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 clamp(22px, 3vw, 40px);
  margin-bottom: 18px;
}
.row-head h2 {
  color: var(--moja-ink);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
}
.row-head span {
  color: rgba(5,5,5,0.56);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.poster-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px clamp(22px, 3vw, 40px) 26px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.poster-rail::-webkit-scrollbar { display: none; }
.poster-card {
  position: relative;
  flex: 0 0 210px;
  min-height: 370px;
  border: 2px solid #050505;
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  text-align: left;
  color: #fff;
  background: #141414;
  scroll-snap-align: start;
  box-shadow: 0 18px 34px rgba(5,5,5,0.18), 7px 7px 0 rgba(255,47,179,0.9);
  transition: transform var(--dur-base) var(--ease-pop), box-shadow var(--dur-base), border-color var(--dur-base);
}
.rail-section:first-of-type .poster-card:first-child {
  flex-basis: clamp(260px, 24vw, 340px);
  min-height: clamp(420px, 36vw, 520px);
}
.poster-card:hover {
  transform: translate(-2px, -5px);
  border-color: #050505;
  box-shadow: 0 24px 48px rgba(5,5,5,0.22), 10px 10px 0 rgba(0,174,239,0.9);
}
.poster-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
}
.poster-card::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.98) 8%, rgba(0,0,0,0.72) 55%, transparent);
  pointer-events: none;
}
.poster-title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 58px;
  z-index: 1;
  display: block;
  padding: 0 14px;
  margin: 0;
  min-height: auto;
  color: #fff;
  font-size: clamp(17px, 1.7vw, 22px);
  line-height: 1.05;
  font-weight: var(--fw-bold);
  text-shadow: 0 2px 14px rgba(0,0,0,0.72);
}
.poster-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.poster-meta small {
  color: rgba(255,255,255,0.72);
  font-size: 12px;
  font-weight: var(--fw-bold);
}
.poster-meta b {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 2px solid #050505;
  border-radius: var(--radius-pill);
  padding: 8px 12px;
  color: #050505;
  background: var(--moja-tano);
  box-shadow: 3px 3px 0 var(--moja-saba);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
}
.price-pill {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  border-radius: var(--radius-pill);
  padding: 6px 10px;
  color: #050505;
  background: #fff;
  border: 2px solid #050505;
  font-size: 12px;
  font-weight: var(--fw-bold);
  box-shadow: 3px 3px 0 var(--moja-flame);
}

.browse-shell,
.account-shell {
  min-height: calc(100vh - 90px);
  padding: clamp(28px, 5vw, 72px) 28px 92px;
  background:
    radial-gradient(circle at 82% 10%, rgba(255,47,179,0.14), transparent 28%),
    radial-gradient(circle at 0% 4%, rgba(0,174,239,0.12), transparent 30%),
    #fff;
}
.browse-head,
.account-hero {
  max-width: 820px;
}
.browse-head h1,
.account-hero h1 {
  margin: 16px 0 12px;
  color: var(--moja-ink);
  font-size: clamp(42px, 7vw, 82px);
  line-height: 0.95;
}
.browse-head p,
.account-hero p {
  max-width: 58ch;
  color: rgba(5,5,5,0.62);
  font-size: 18px;
}
.browse-stats,
.account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.browse-stats span,
.account-panel {
  min-height: 92px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  padding: 16px;
  color: rgba(5,5,5,0.66);
  background: rgba(255,255,255,0.82);
}
.browse-stats strong,
.account-panel strong {
  display: block;
  color: var(--moja-ink);
  font-size: 32px;
  line-height: 1;
}
.account-panel small {
  display: block;
  margin-bottom: 12px;
  color: rgba(5,5,5,0.52);
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.account-panel p {
  margin-top: 12px;
  color: rgba(5,5,5,0.62);
}
.browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 34px;
}
.browse-card {
  position: relative;
  min-height: 390px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  padding: 0 0 16px;
  overflow: hidden;
  text-align: left;
  color: #fff;
  background: #141414;
  box-shadow: 0 20px 54px rgba(0,0,0,0.34);
  transition: transform var(--dur-base) var(--ease-pop), border-color var(--dur-base);
}
.browse-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,47,179,0.55);
}
.browse-card img {
  width: 100%;
  aspect-ratio: 16 / 11;
  object-fit: cover;
}
.browse-card-meta,
.browse-card strong,
.browse-card small {
  display: block;
  padding: 0 16px;
}
.browse-card-meta {
  margin-top: 14px;
  color: rgba(255,255,255,0.48);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}
.browse-card strong {
  margin-top: 8px;
  min-height: 54px;
  font-size: 22px;
  line-height: 1.08;
}
.browse-card small {
  margin-top: 10px;
  color: rgba(255,255,255,0.62);
}
.browse-rails,
.account-ready-list {
  margin: 40px -28px 0;
}
.empty-state.compact {
  min-height: 220px;
  margin-top: 22px;
  padding: clamp(56px, 7vw, 92px) 32px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,0.045);
}

.player-main { min-height: calc(100vh - 90px); }
.player-layout {
  display: block;
  min-height: calc(100vh - 90px);
  padding: clamp(12px, 2vw, 24px);
}
.player-stage {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  height: clamp(420px, calc(100vh - 154px), 760px);
  min-height: 0;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: #000;
}
.player-frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.player-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.player-status {
  display: none;
}
.player-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: clamp(22px, 4vw, 54px);
  background: linear-gradient(0deg, rgba(0,0,0,0.92), rgba(0,0,0,0.2) 70%);
}
.player-overlay[hidden] { display: none; }
.player-overlay h1 {
  margin: 12px 0 8px;
  max-width: 12ch;
  font-size: clamp(34px, 5.8vw, 68px);
  line-height: 0.95;
  letter-spacing: 0;
}
.player-overlay p { max-width: 52ch; color: rgba(5,5,5,0.72); }
.player-ready-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}
.player-ready-strip span,
.player-ready-strip b {
  min-height: 34px;
  display: inline-grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  padding: 7px 10px;
  color: rgba(5,5,5,0.62);
  background: rgba(255,255,255,0.08);
  font-size: 12px;
  font-weight: var(--fw-bold);
}
.player-ready-strip b {
  min-width: 38px;
  color: #fff;
  background: linear-gradient(135deg, var(--tone-a), var(--tone-b));
  box-shadow: 0 10px 26px color-mix(in srgb, var(--tone-a) 28%, transparent);
}
.cue-hud {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}
.cue-prompt {
  position: absolute;
  inset: 0;
  color: #fff;
  pointer-events: none;
}
.cue-edge-gradient {
  position: absolute;
  pointer-events: none;
  opacity: 0.86;
}
.cue-edge-left .cue-edge-gradient,
.cue-edge-right .cue-edge-gradient {
  top: 0;
  bottom: 0;
  width: min(34%, 320px);
}
.cue-edge-left .cue-edge-gradient {
  left: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tone-a, #fff) 58%, transparent), transparent);
}
.cue-edge-right .cue-edge-gradient {
  right: 0;
  background: linear-gradient(270deg, color-mix(in srgb, var(--tone-a, #fff) 58%, transparent), transparent);
}
.cue-edge-top .cue-edge-gradient,
.cue-edge-bottom .cue-edge-gradient {
  left: 0;
  right: 0;
  height: min(30%, 220px);
}
.cue-edge-top .cue-edge-gradient {
  top: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone-a, #fff) 58%, transparent), transparent);
}
.cue-edge-bottom .cue-edge-gradient {
  bottom: 0;
  background: linear-gradient(0deg, color-mix(in srgb, var(--tone-a, #fff) 58%, transparent), transparent);
}
.cue-edge-token {
  position: absolute;
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,0.72);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--tone-a, #ff3b1f), var(--tone-b, #ffb000));
  box-shadow: 0 20px 52px color-mix(in srgb, var(--tone-a, #fff) 34%, transparent), 0 0 0 1px rgba(0,0,0,0.24);
  backdrop-filter: blur(10px);
}
.cue-edge-left .cue-edge-token {
  left: max(16px, env(safe-area-inset-left));
  top: 50%;
  transform: translateY(-50%);
}
.cue-edge-right .cue-edge-token {
  right: max(16px, env(safe-area-inset-right));
  top: 50%;
  transform: translateY(-50%);
}
.cue-edge-top .cue-edge-token {
  top: max(16px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
}
.cue-edge-bottom .cue-edge-token {
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
}
.cue-edge-right[data-input="A"] .cue-edge-token,
.cue-edge-left[data-input="X"] .cue-edge-token {
  top: 38%;
}
.cue-edge-right[data-input="B"] .cue-edge-token,
.cue-edge-left[data-input="Y"] .cue-edge-token {
  top: 62%;
}
.cue-token-icon svg {
  width: 24px;
  height: 24px;
}
.cue-edge-token b {
  display: block;
  font-size: 26px;
  line-height: 1;
  color: #fff;
}
.cue-token-only .cue-edge-token {
  width: 74px;
  height: 74px;
}
.cue-token-only .cue-edge-token b {
  font-size: 34px;
}
.cue-edge-token i {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 13px;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,0.24);
}
.cue-edge-token i::before {
  content: "";
  display: block;
  width: var(--cue-progress, 0%);
  height: 100%;
  border-radius: inherit;
  background: #fff;
}
.start-window-prompt {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: min(92%, 620px);
  min-height: 52px;
  padding: 10px 18px 10px 12px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px;
  color: #fff;
  background: linear-gradient(135deg, rgba(255,59,31,0.9), rgba(255,210,26,0.76));
  box-shadow: 0 18px 48px rgba(0,0,0,0.44), 0 0 36px rgba(255,92,31,0.26);
  backdrop-filter: blur(14px) saturate(150%);
}
.start-window-prompt b {
  font-size: clamp(14px, 2.2vw, 20px);
  line-height: 1.1;
  text-align: left;
}
.start-window-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 999px;
  background: rgba(0,0,0,0.26);
}
.start-window-icon svg {
  width: 22px;
  height: 22px;
}
.recap {
  display: grid;
  gap: 8px;
  padding: 14px;
  border-radius: 8px;
  background: rgba(0,0,0,0.68);
  box-shadow: 0 20px 70px rgba(0,0,0,0.48);
  backdrop-filter: blur(16px) saturate(140%);
}
.recap strong {
  font-size: 34px;
  color: var(--moja-tatu);
}
.player-recap-overlay {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: clamp(18px, 5vh, 54px);
  min-width: min(380px, calc(100% - 40px));
  transform: translateX(-50%);
  border: 1px solid rgba(255,255,255,0.14);
  text-align: center;
}
.player-recap-overlay[hidden] {
  display: none;
}
.player-recap-overlay h3 {
  margin: 0;
  color: rgba(255,255,255,0.76);
  font-size: 18px;
}
.player-recap-overlay span {
  color: rgba(5,5,5,0.72);
}
.player-fail-screen {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: block;
  overflow: hidden;
  text-align: center;
  background: #020202;
  animation: failPulse 900ms ease-out both;
}
.player-fail-screen[hidden] {
  display: none;
}
.fail-timeline-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  isolation: isolate;
}
.fail-timeline-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 50% 46%, rgba(127,29,29,0.28), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0,0,0,0.72) 72%),
    linear-gradient(0deg, rgba(15,0,0,0.82), rgba(0,0,0,0.72));
  pointer-events: none;
}
.fail-timeline-stage.static {
  background:
    radial-gradient(circle at 50% 46%, rgba(127,29,29,0.28), transparent 34%),
    radial-gradient(circle at 50% 50%, transparent 0 42%, rgba(0,0,0,0.72) 72%),
    linear-gradient(0deg, rgba(15,0,0,0.96), rgba(0,0,0,0.86));
}
.fail-timeline-media {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: failTimelineItem var(--fail-duration, 4s) linear both;
  animation-delay: var(--fail-start, 0s);
}
.fail-timeline-text {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 34%;
  max-width: min(88%, 680px);
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255,59,47,0.38), 0 8px 40px rgba(0,0,0,0.9);
  opacity: 0;
  animation: failTimelineItem var(--fail-duration, 2.2s) ease both;
  animation-delay: var(--fail-start, 0s);
}
.fail-timeline-text.title {
  font-size: clamp(42px, 8vw, 96px);
  line-height: 0.9;
}
.fail-timeline-copy {
  position: relative;
  z-index: 5;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  padding: 32px;
}
.fail-timeline-copy span {
  color: rgba(255,255,255,0.66);
  font-size: 13px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.fail-timeline-copy strong {
  color: #ff3b2f;
  font-size: clamp(54px, 10vw, 128px);
  line-height: 0.9;
  letter-spacing: 0;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255,59,47,0.38), 0 8px 40px rgba(0,0,0,0.9);
}
.fail-timeline-copy p,
.player-fail-screen > p {
  margin: 0;
  max-width: 40ch;
  color: #fff;
}
.player-fail-screen .btn-flame {
  margin-top: 8px;
}
@keyframes failTimelineItem {
  0% { opacity: 0; }
  8%, 86% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes failPulse {
  from {
    filter: saturate(0.5);
    opacity: 0;
  }
  to {
    filter: saturate(1);
    opacity: 1;
  }
}

.empty-state {
  min-height: 70vh;
  display: grid;
  place-content: center;
  gap: 16px;
  text-align: center;
  padding: 32px;
}
.admin-main {
  min-height: 100vh;
  background: #050505;
}
.admin-shell {
  display: grid;
  grid-template-columns: 292px minmax(0, 1fr);
  min-height: 100vh;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.admin-sidebar {
  border-right: 1px solid rgba(255,255,255,0.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035), transparent 160px),
    #090909;
  padding: 14px;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 14px;
}
.admin-brand {
  display: grid;
  gap: 2px;
  padding: 6px 4px 2px;
}
.admin-brand strong {
  color: #fff;
  font-size: 28px;
  line-height: 1;
}
.admin-brand span {
  color: rgba(255,255,255,0.62);
  font-size: 13px;
}
.sidebar-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: rgba(255,255,255,0.56);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sidebar-section-head button {
  min-height: 30px;
  border: 1px solid var(--moja-flame);
  border-radius: 7px;
  padding: 5px 10px;
  color: var(--moja-flame);
  background: rgba(255,47,179,0.08);
  font-size: 12px;
  font-weight: var(--fw-bold);
}
#adminVideoList {
  display: grid;
  gap: 8px;
  align-content: start;
}
.admin-video-row {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 86px;
  width: 100%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #fff;
  text-align: left;
  background: rgba(255,255,255,0.045);
  padding: 10px;
}
.admin-video-row.active {
  border-color: rgba(255,47,179,0.72);
  background: linear-gradient(90deg, rgba(255,47,179,0.16), rgba(255,47,179,0.05));
}
.admin-video-row img {
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 6px;
}
.admin-video-row span,
.admin-video-row small {
  grid-column: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-video-row small {
  color: rgba(255,255,255,0.5);
  font-size: 12px;
}
.admin-video-row small b {
  display: inline-block;
  margin-right: 6px;
  border-radius: 4px;
  padding: 2px 5px;
  color: #111;
  background: var(--moja-tano);
  font-size: 10px;
  text-transform: uppercase;
}
.admin-video-row.active small b {
  color: #07140c;
  background: var(--moja-tatu);
}
.admin-toolnav {
  display: grid;
  gap: 8px;
  padding-top: 20px;
}
.admin-toolnav button,
.project-settings {
  min-height: 42px;
  border: 0;
  border-radius: 0;
  padding: 10px 12px;
  color: rgba(5,5,5,0.7);
  background: transparent;
  text-align: left;
  font-weight: var(--fw-bold);
}
.admin-toolnav button.active {
  color: var(--moja-flame);
  background: linear-gradient(90deg, rgba(255,47,179,0.22), rgba(255,47,179,0.02));
  border-left: 3px solid var(--moja-flame);
}
.project-settings {
  align-self: end;
  border-top: 2px solid rgba(5,5,5,0.08);
  color: rgba(255,255,255,0.62);
}
.admin-workspace {
  padding: 0 14px 10px;
  background:
    radial-gradient(900px 480px at 62% 0%, rgba(255,47,179,0.11), transparent 58%),
    radial-gradient(820px 480px at 100% 8%, rgba(79,139,255,0.1), transparent 62%),
    #090909;
}
.console-head,
.studio-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  min-height: 62px;
  margin: 0 -14px 0;
  padding: 10px 14px;
  border-bottom: 2px solid rgba(5,5,5,0.08);
  background: rgba(5,5,5,0.72);
  backdrop-filter: blur(18px);
}
.console-head h1,
.studio-head h1 {
  margin: 0;
  font-size: 25px;
  line-height: 1;
}
.console-head h1 span {
  margin-left: 12px;
  color: var(--moja-flame);
  font-size: 17px;
}
.console-head p {
  margin-top: 6px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.studio-actions {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.console-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 346px;
  gap: 12px;
  margin: 12px 0;
}
.preview-console,
.console-side > *,
.timeline-card {
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035));
  box-shadow: 0 20px 60px rgba(0,0,0,0.28);
}
.preview-console {
  overflow: hidden;
}
.preview-topline {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  min-height: 36px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.preview-topline span:first-child {
  margin-right: auto;
  color: #fff;
}
.preview-monitor {
  position: relative;
  margin: 0 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background: #000;
  aspect-ratio: 16 / 5.15;
}
.preview-monitor video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.preview-monitor::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgba(0,0,0,0.35), transparent 42%),
    radial-gradient(720px 240px at 50% 100%, rgba(255,47,179,0.14), transparent 70%);
}
.preview-hud {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 2;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 220px;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
}
.preview-hud strong {
  font-size: 12px;
  letter-spacing: 0.1em;
}
.preview-hud span {
  color: rgba(255,255,255,0.64);
  font-size: 12px;
}
.transport-bar {
  display: grid;
  grid-template-columns: repeat(5, 50px) 184px minmax(160px, 1fr);
  gap: 8px;
  align-items: center;
  padding: 10px 14px 12px;
}
.transport-button {
  min-height: 38px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 7px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  font-weight: var(--fw-bold);
}
.transport-button.play {
  background: var(--moja-flame);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(255,59,27,0.28);
}
#previewTimecode {
  color: #fff;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.console-side {
  display: grid;
  gap: 10px;
  align-content: start;
}
.observability-list span,
.media-status span {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
}
.observability-list b,
.media-status b {
  color: rgba(5,5,5,0.62);
}
.observability-list em,
.media-status em {
  color: var(--moja-tatu);
  font-style: normal;
}
.readiness-card {
  justify-items: center;
  text-align: center;
  padding: 16px;
}
.readiness-card strong {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border: 9px solid var(--moja-tatu);
  border-radius: 999px;
  color: #fff;
  font-size: 28px;
}
.readiness-card span {
  color: var(--moja-tatu);
  font-weight: var(--fw-bold);
}
.compact-title-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 14px;
  box-shadow: none;
}
.compact-title-form label,
.compact-title-form label:nth-child(2),
.compact-title-form label:nth-child(4),
.compact-title-form label:nth-child(5) {
  grid-column: auto;
}
.compact-title-form textarea {
  min-height: 74px;
}
.studio-grid {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 280px;
  gap: 16px;
  margin-bottom: 16px;
}
.title-form,
.observability-card,
.timeline-card {
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.055);
  box-shadow: 0 20px 60px rgba(0,0,0,0.24);
}
.title-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 16px;
}
.title-form label,
.modal-card label {
  display: grid;
  gap: 7px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.title-form label:nth-child(2),
.title-form label:nth-child(4),
.title-form label:nth-child(5) {
  grid-column: 1 / -1;
}
.title-form input,
.title-form textarea,
.title-form select,
.modal-card input,
.modal-card textarea,
.modal-card select,
.cue-form input,
.cue-form select {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 11px 12px;
  color: #fff;
  background: rgba(0,0,0,0.24);
  outline: none;
}
.title-form textarea {
  min-height: 82px;
  resize: vertical;
}
.observability-card {
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 16px;
}
.observability-card strong {
  font-size: 34px;
  color: var(--moja-tatu);
}
.observability-card span {
  color: rgba(255,255,255,0.62);
}
.timeline-card {
  padding: 14px;
}
.timeline-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.timeline-head p {
  margin-top: 6px;
  color: rgba(255,255,255,0.56);
}
.timeline-window-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 2px 0 14px;
}
.timeline-window-controls label {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr) 58px;
  align-items: center;
  gap: 12px;
  min-height: 50px;
  padding: 10px 12px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
}
.timeline-window-controls span {
  color: rgba(5,5,5,0.72);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.timeline-window-controls output {
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.timeline-window-controls input[type="range"] {
  accent-color: var(--moja-flame);
}
.timeline-window-controls .timeline-slider.out {
  accent-color: #ffb800;
}
.timeline-ruler {
  --row-height: 46px;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  height: 360px;
  overflow: hidden;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(13,27,40,0.95);
}
.timeline-lane-labels {
  display: grid;
  grid-template-rows: repeat(8, 1fr);
  border-right: 1px solid rgba(255,255,255,0.16);
  background: rgba(0,0,0,0.18);
}
.timeline-lane-label {
  display: flex;
  align-items: center;
  padding: 0 12px;
  border-bottom: 2px solid rgba(5,5,5,0.08);
  color: rgba(5,5,5,0.7);
  font-size: 12px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}
.timeline-lane-label:last-child {
  border-bottom: 0;
}
.timeline-track {
  position: relative;
  overflow: hidden;
  cursor: crosshair;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 12.5%),
    rgba(21,50,74,0.92);
}
.timeline-track::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg, transparent, rgba(255,255,255,0.035), transparent);
  opacity: 0;
  transition: opacity var(--dur-base);
}
.timeline-track:hover::after {
  opacity: 1;
}
.window-selection {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  box-sizing: border-box;
  background: rgba(255,47,179,0.08);
  border-left: 2px solid rgba(255,47,179,0.85);
  border-right: 2px solid rgba(255,210,26,0.8);
  pointer-events: none;
}
.window-edge {
  position: absolute;
  top: 6px;
  z-index: 12;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: var(--radius-pill);
  color: #fff;
  background: rgba(255,47,179,0.92);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  pointer-events: auto;
  cursor: ew-resize;
}
.window-edge.in {
  transform: translateX(0);
}
.window-edge.out {
  transform: translateX(-100%);
  background: rgba(255,210,26,0.92);
  color: #111;
}
.timeline-row-line {
  position: absolute;
  left: 0;
  right: 0;
  top: calc((var(--row) + 1) * 12.5%);
  height: 1px;
  z-index: 2;
  background: rgba(255,255,255,0.08);
}
.cut-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  z-index: 3;
  background: rgba(190,190,190,0.78);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06);
}
.cue-bar {
  position: absolute;
  top: calc((var(--row) * 12.5%) + 6px);
  z-index: 4;
  min-width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: 8px;
  padding: 0 4px 0 10px;
  color: #fff;
  background: linear-gradient(90deg, var(--moja-saba), var(--moja-nane));
  box-shadow: 0 10px 24px rgba(79,139,255,0.26);
  cursor: grab;
  outline: none;
  user-select: none;
}
.cue-bar.selected {
  z-index: 6;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255,47,179,0.85), 0 18px 34px rgba(0,0,0,0.42);
}
.cue-bar.dragging {
  cursor: grabbing;
}
.cue-bar.trim-dragging {
  cursor: ew-resize;
}
.cue-bar .cue-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.cue-bar button {
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: rgba(0,0,0,0.28);
  margin-right: 8px;
  position: relative;
  z-index: 5;
}
.cue-trim-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  z-index: 4;
  cursor: ew-resize;
  touch-action: none;
}
.cue-trim-handle::after {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 999px;
  background: rgba(255,255,255,0.68);
  opacity: 0;
  transition: opacity 0.16s ease;
}
.cue-trim-start {
  left: 0;
}
.cue-trim-start::after {
  left: 3px;
}
.cue-trim-end {
  right: 0;
}
.cue-trim-end::after {
  right: 3px;
}
.cue-bar:hover .cue-trim-handle::after,
.cue-bar.selected .cue-trim-handle::after,
.cue-bar.trim-dragging .cue-trim-handle::after {
  opacity: 1;
}
.cue-route-popover {
  position: absolute;
  z-index: 10;
  width: min(520px, calc(100% - 32px));
  max-height: min(620px, calc(100vh - 220px));
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  color: #fff;
  background: rgba(12,12,12,0.96);
  box-shadow: 0 24px 60px rgba(0,0,0,0.52);
  overflow: auto;
  transform: translate(-50%, 12px);
}
.cue-route-popover::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 12px;
  height: 12px;
  border-left: 1px solid rgba(255,255,255,0.16);
  border-top: 1px solid rgba(255,255,255,0.16);
  background: rgba(12,12,12,0.96);
  transform: translateX(-50%) rotate(45deg);
}
.cue-route-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.cue-route-head strong {
  font-size: 18px;
}
.cue-route-head span,
.cue-route-popover label span {
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cue-route-popover label {
  display: grid;
  gap: 7px;
}
.cue-route-popover select,
.cue-route-popover button,
.cue-route-popover textarea {
  min-height: 40px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone-a) 58%, #060606), color-mix(in srgb, var(--tone-b) 42%, #060606)),
    #090909;
  font: inherit;
  font-weight: 800;
}
.cue-route-popover textarea {
  min-height: auto;
  resize: vertical;
  color: rgba(255,255,255,0.88);
  background: rgba(0,0,0,0.34);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.cue-route-popover option {
  color: #fff;
  background: color-mix(in srgb, var(--tone-a) 56%, #101010);
}
.cue-route-popover button {
  background: rgba(255,255,255,0.1);
}
.cue-route-popover .danger-action,
.link-zone-inspector .danger-action {
  border-color: rgba(248,113,113,0.45);
  color: #fecaca;
  background: rgba(127,29,29,0.38);
}
.cue-route-popover .danger-action:hover,
.link-zone-inspector .danger-action:hover {
  border-color: rgba(248,113,113,0.72);
  background: rgba(185,28,28,0.52);
}
.cue-style-editor {
  display: grid;
  gap: 10px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.cue-style-editor summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  list-style: none;
}
.cue-style-editor summary::-webkit-details-marker {
  display: none;
}
.cue-style-editor summary > span {
  display: grid;
  gap: 2px;
}
.cue-style-editor summary > span::before {
  content: "Show";
  color: rgba(255,255,255,0.54);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cue-style-editor[open] summary > span::before {
  content: "Hide";
}
.cue-style-editor summary strong {
  font-size: 13px;
}
.cue-style-editor summary em {
  color: rgba(255,255,255,0.52);
  font-size: 11px;
  font-style: normal;
}
.cue-style-editor:not([open]) label {
  display: none;
}
.cue-style-editor #resetInputStyle {
  min-height: 30px;
  width: auto;
  padding: 5px 9px;
  color: rgba(255,255,255,0.74);
  background: rgba(255,255,255,0.065);
}
.input-window-inspector {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(110px, 0.5fr) minmax(110px, 0.5fr) minmax(220px, 1.3fr);
  gap: 10px;
  align-items: end;
  margin-top: 12px;
  padding: 12px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(0,0,0,0.2);
}
.input-window-inspector.empty {
  display: flex;
  align-items: baseline;
  gap: 12px;
  color: rgba(255,255,255,0.58);
}
.input-window-inspector strong {
  color: #fff;
}
.input-window-inspector label {
  display: grid;
  gap: 7px;
}
.input-window-inspector span {
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.input-window-inspector input,
.input-window-inspector select {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 9px 10px;
  color: #fff;
  background: rgba(0,0,0,0.28);
}
.link-zone-inspector {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(110px, 0.7fr) minmax(220px, 1.2fr) repeat(4, minmax(70px, 0.4fr)) auto;
  gap: 10px;
  align-items: end;
  padding: 12px;
  border: 1px solid rgba(156,163,175,0.28);
  border-radius: 8px;
  background: rgba(148,163,184,0.08);
}
.link-zone-inspector > div {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 9px;
  row-gap: 2px;
  align-items: center;
}
.link-zone-inspector > div svg {
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  color: #cbd5e1;
}
.link-zone-inspector > div strong {
  color: #fff;
  font-size: 13px;
}
.link-zone-inspector > div span,
.link-zone-inspector label span {
  color: rgba(255,255,255,0.56);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.link-zone-inspector label {
  display: grid;
  gap: 6px;
}
.link-zone-inspector input {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  background: rgba(0,0,0,0.28);
}
.link-zone-inspector button {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-weight: 800;
}
.cue-form {
  display: grid;
  grid-template-columns: 110px 110px 110px minmax(180px, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  margin-top: 14px;
}
.timeline-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.timeline-list span {
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: var(--radius-pill);
  padding: 8px 10px;
  color: rgba(255,255,255,0.66);
  background: rgba(255,255,255,0.05);
  font-size: 12px;
}
.admin-mobile-block { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 18px;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(10px);
}
.modal-card {
  position: relative;
  width: min(440px, 100%);
  display: grid;
  gap: 16px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  background: #111;
  box-shadow: 0 30px 90px rgba(0,0,0,0.62);
}
.modal-card h2 { font-size: 30px; }
.modal-card small { color: rgba(255,255,255,0.52); }
.create-title-card {
  width: min(620px, 100%);
  max-height: min(860px, calc(100vh - 36px));
  overflow: auto;
}
.create-title-card textarea {
  min-height: 78px;
  resize: vertical;
}
.thumbnail-loader {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 12px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,59,31,0.1), rgba(255,210,26,0.08)),
    rgba(255,255,255,0.04);
}
.thumbnail-loader strong,
.thumbnail-loader span,
.thumbnail-loader output {
  display: block;
}
.thumbnail-loader strong {
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  text-transform: uppercase;
}
.thumbnail-loader span,
.thumbnail-loader output {
  color: rgba(255,255,255,0.62);
  font-size: 12px;
  line-height: 1.35;
}
.thumbnail-drop {
  min-height: 82px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: 8px;
  background: rgba(0,0,0,0.22);
  cursor: pointer;
}
.thumbnail-drop input {
  display: none;
}
.thumbnail-drop span {
  color: #fff;
  font-weight: 900;
}
.thumbnail-loader img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: #050505;
}
.thumbnail-loader output {
  align-self: end;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.modal-actions button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0 14px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-weight: 900;
}
.modal-card p {
  margin: 0;
  color: rgba(5,5,5,0.62);
  line-height: 1.45;
}
.modal-card output {
  min-height: 16px;
  color: rgba(255,255,255,0.58);
  font-size: 12px;
}
.danger-button {
  border-color: rgba(255,82,82,0.36) !important;
  color: #fff !important;
  background: linear-gradient(180deg, rgba(117,21,21,0.95), rgba(69,12,12,0.95)) !important;
}
.danger-button:hover:not(:disabled) {
  border-color: rgba(255,113,113,0.62) !important;
}
.danger-button:disabled {
  cursor: not-allowed;
  opacity: 0.46;
}
.delete-title-card {
  width: min(520px, 100%);
}

.tabbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 48;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,0.94);
  border-top: 2px solid rgba(5,5,5,0.08);
  backdrop-filter: blur(18px);
}
.tabbar button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  color: rgba(5,5,5,0.58);
  background: transparent;
  font-weight: var(--fw-bold);
}
.tabbar button.active {
  color: #fff;
  background: rgba(255,47,179,0.92);
}

@media (max-width: 920px) {
  .notify-modal {
    padding: 12px;
  }
  .notify-modal-card {
    max-height: calc(100vh - 24px);
    grid-template-columns: 1fr;
    overflow-y: auto;
    border-radius: 18px;
  }
  .notify-modal-copy {
    min-height: 230px;
    padding: 58px 22px 22px;
    border-right: 0;
    border-bottom: 2px solid rgba(5,5,5,0.08);
  }
  .notify-form-shell {
    min-height: 0;
    padding: 22px;
  }
  .notify-fields {
    grid-template-columns: 1fr;
  }
  .topbar {
    justify-content: space-between;
    padding: 12px 16px;
  }
  .brand-lockup img {
    width: 54px;
    height: 36px;
  }
  .brand-lockup strong {
    font-size: 18px;
  }
  .account-link { display: none; }
  .tabbar { display: grid; }
  .hero-band { min-height: 68vh; }
  .hero-copy { padding: 28px 20px 96px; }
  .browse-shell,
  .account-shell {
    padding: 28px 18px 96px;
  }
  .rail-intro {
    display: block;
    padding: 0 22px;
  }
  .rail-intro h2 {
    max-width: 9ch;
    font-size: clamp(40px, 13vw, 56px);
  }
  .rail-intro p {
    margin-top: 18px;
    max-width: 30ch;
  }
  .browse-stats,
  .account-grid {
    grid-template-columns: 1fr;
  }
  .browse-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  }
  .browse-card {
    min-height: 330px;
  }
  .browse-rails,
  .account-ready-list {
    margin-right: -18px;
    margin-left: -18px;
  }
  .player-layout {
    padding: 12px 12px 88px;
  }
  .player-stage {
    min-height: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .player-stage video { min-height: 0; }
  .player-overlay h1 {
    font-size: clamp(30px, 9vw, 48px);
  }
  .player-ready-strip {
    gap: 6px;
  }
  .player-ready-strip span,
  .player-ready-strip b {
    min-height: 30px;
    min-width: 32px;
    padding: 6px 8px;
    font-size: 11px;
  }
  .admin-shell { display: none; }
  .admin-mobile-block {
    min-height: calc(100vh - 68px);
    display: grid;
    place-content: center;
    gap: 12px;
    padding: 28px;
    text-align: center;
  }
}

@media (max-width: 720px) {
  .poster-card { flex-basis: 156px; min-height: 292px; }
  .studio-grid,
  .title-form {
    grid-template-columns: 1fr;
  }
  .cue-form {
    grid-template-columns: 1fr 1fr;
  }
}

/* Cinema Console admin rebuild */
.admin-main {
  padding: 0;
}
.cinema-admin {
  min-height: 100vh;
  height: 100vh;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: 66px minmax(0, 1fr);
  overflow: hidden;
  color: #f7f7f4;
  background:
    radial-gradient(circle at 75% 0%, rgba(255, 59, 26, 0.12), transparent 28%),
    linear-gradient(180deg, #090909 0%, #050505 100%);
  transition: grid-template-columns 180ms var(--ease-out);
}
.cinema-admin.left-collapsed {
  grid-template-columns: 44px minmax(0, 1fr);
}
.cinema-topbar {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 0 24px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  background: rgba(4,4,4,0.96);
}
.cinema-title {
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.cinema-title strong {
  font-size: 18px;
  letter-spacing: 0.02em;
}
.cinema-title span {
  color: rgba(255,255,255,0.52);
  font-size: 13px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.cinema-top-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.cinema-icon svg,
.cinema-nav svg,
.cinema-settings svg,
.sidebar-rail-toggle svg,
.ops-rail-toggle svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.cinema-top-actions button,
.cinema-sidebar-head button,
.cinema-settings,
.sidebar-rail-toggle,
.ops-rail-toggle,
.cinema-timeline-head button,
.cinema-cue-form button,
.cinema-transport button {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,0.07);
  font: inherit;
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.cinema-top-actions button {
  min-height: 38px;
  padding: 0 14px;
}
.cinema-save {
  background: rgba(255,255,255,0.12) !important;
}
.cinema-publish,
.cinema-sidebar-head button,
.cinema-cue-form #addCue {
  border-color: rgba(255,74,35,0.7) !important;
  background: #ff3b1f !important;
  box-shadow: 0 10px 26px rgba(255,59,31,0.25);
}
.cinema-sidebar {
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 16px;
  overflow: auto;
  border-right: 1px solid rgba(255,255,255,0.08);
  background: rgba(8,8,8,0.96);
  transition: padding 180ms var(--ease-out), opacity 180ms var(--ease-out);
}
.cinema-admin.left-collapsed .cinema-sidebar {
  padding: 12px 6px;
  opacity: 1;
  pointer-events: auto;
  overflow: hidden;
}
.cinema-admin.left-collapsed .cinema-sidebar-head span,
.cinema-admin.left-collapsed #newTitle,
.cinema-admin.left-collapsed .cinema-projects,
.cinema-admin.left-collapsed .cinema-nav,
.cinema-admin.left-collapsed .cinema-settings span {
  display: none;
}
.cinema-admin.left-collapsed .cinema-settings {
  justify-content: center;
  padding: 0;
}
.cinema-sidebar-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.cinema-sidebar-head span {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.cinema-sidebar-head button {
  min-height: 38px;
  padding: 0 13px;
}
.sidebar-rail-toggle {
  width: 30px;
  min-width: 30px;
  min-height: 30px !important;
  display: grid;
  place-items: center;
  padding: 0 !important;
  color: rgba(5,5,5,0.72);
  background: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.cinema-admin.left-collapsed .sidebar-rail-toggle {
  width: 32px;
  min-width: 32px;
}
.cinema-projects {
  display: grid;
  gap: 10px;
}
.cinema-project {
  width: 100%;
  min-height: 76px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 5px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,0.045);
  text-align: left;
  cursor: pointer;
}
.cinema-project.active {
  border-color: rgba(255,75,38,0.82);
  background: rgba(255,65,31,0.16);
}
.cinema-project img {
  grid-row: 1 / 3;
  width: 58px;
  height: 54px;
  border-radius: 6px;
  object-fit: cover;
}
.cinema-project span {
  min-width: 0;
  overflow: hidden;
  font-size: 14px;
  font-weight: var(--fw-bold);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cinema-project small {
  color: rgba(255,255,255,0.52);
  font-size: 12px;
}
.cinema-nav {
  display: grid;
  gap: 2px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cinema-nav button,
.cinema-settings {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 0;
  padding: 0 14px;
  text-align: left;
  color: rgba(255,255,255,0.67);
  background: transparent;
  box-shadow: none;
}
.cinema-nav button::before,
.cinema-settings::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}
.cinema-nav button:hover,
.cinema-settings:hover {
  color: #fff;
  background: rgba(255,255,255,0.045);
}
.cinema-nav button.active {
  color: #ff4a1f;
  background:
    linear-gradient(90deg, rgba(255,59,31,0.2), rgba(255,122,31,0.07) 48%, transparent 100%),
    rgba(255,255,255,0.015);
}
.cinema-nav button.active::before {
  background: #ff3b1f;
  box-shadow: 0 0 14px rgba(255,59,31,0.7);
}
.cinema-settings {
  margin-top: auto;
  justify-content: flex-start;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cinema-settings.active {
  color: #ff4a1f;
  background:
    linear-gradient(90deg, rgba(255,59,31,0.18), rgba(255,122,31,0.06), transparent),
    rgba(255,255,255,0.02);
}
.cinema-settings.active::before {
  background: #ff3b1f;
  box-shadow: 0 0 14px rgba(255,59,31,0.7);
}
.cinema-workspace {
  grid-row: 2;
  min-width: 0;
  overflow: auto;
  padding: 12px;
}
.cinema-edit-grid {
  min-height: calc(100vh - 90px);
  display: grid;
  grid-template-columns: minmax(720px, 1fr) 332px;
  gap: 12px;
  transition: grid-template-columns 180ms var(--ease-out);
}
.cinema-admin.right-collapsed .cinema-edit-grid {
  grid-template-columns: minmax(720px, 1fr) 44px;
}
.cinema-admin.right-collapsed .cinema-ops {
  overflow: hidden;
}
.cinema-admin.right-collapsed .cinema-ops > :not(.ops-rail-toggle) {
  display: none;
}
.cinema-preview,
.cinema-ops,
.cinema-panel,
.cinema-timeline-panel {
  min-width: 0;
}
.cinema-preview {
  display: grid;
  grid-template-rows: auto minmax(280px, 42vh) auto minmax(380px, 1fr);
  gap: 10px;
}
.cinema-preview-meta {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  color: rgba(255,255,255,0.58);
  background: rgba(255,255,255,0.045);
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.cinema-preview-meta span {
  padding-right: 10px;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.cinema-preview-meta span:last-child {
  border-right: 0;
}
.cinema-monitor {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: #000;
  box-shadow: 0 22px 70px rgba(0,0,0,0.46);
}
.cinema-upload-drop {
  position: absolute;
  inset: 14px;
  z-index: 3;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 1px dashed rgba(255,255,255,0.28);
  border-radius: 8px;
  color: #fff;
  background: rgba(0,0,0,0.42);
  text-align: center;
  cursor: pointer;
}
.cinema-upload-drop.dragging {
  border-color: rgba(255,59,31,0.78);
  background: rgba(255,59,31,0.12);
}
.cinema-upload-drop strong {
  font-size: 20px;
}
.cinema-upload-drop span {
  max-width: 340px;
  color: rgba(255,255,255,0.62);
}
.cinema-monitor:not(.upload-first) .cinema-upload-drop {
  display: none;
}
.cinema-monitor video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.cinema-monitor.upload-first video {
  opacity: 0;
  visibility: hidden;
}
.preview-link-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.preview-link-zone {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(156,163,175,0.72);
  border-radius: 4px;
  color: transparent;
  background: rgba(156,163,175,0.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
  pointer-events: auto;
  cursor: pointer;
}
.preview-link-zone span {
  max-width: calc(100% - 8px);
  overflow: hidden;
  color: rgba(255,255,255,0);
  font-size: 11px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.preview-link-zone:hover,
.preview-link-zone.selected {
  border-color: #e5e7eb;
  background: rgba(156,163,175,0.18);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.16), inset 0 0 24px rgba(255,255,255,0.08);
}
.preview-link-zone.selected {
  cursor: move;
}
.preview-link-zone:hover span,
.preview-link-zone.selected span {
  color: rgba(255,255,255,0.84);
}
.preview-link-resize {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255,255,255,0.92);
  border-radius: 999px;
  background: #0ea5e9;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 12px rgba(14,165,233,0.5);
}
.preview-link-resize.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.preview-link-resize.n { left: 50%; top: -5px; transform: translateX(-50%); cursor: ns-resize; }
.preview-link-resize.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.preview-link-resize.e { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.preview-link-resize.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.preview-link-resize.s { left: 50%; bottom: -5px; transform: translateX(-50%); cursor: ns-resize; }
.preview-link-resize.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.preview-link-resize.w { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.cinema-monitor-hud {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(0,0,0,0.58);
  backdrop-filter: blur(12px);
}
.cinema-monitor-hud strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cinema-monitor-hud span,
.cinema-monitor-badge {
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.cinema-monitor-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}
.cinema-transport {
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px 34px 64px 34px 34px minmax(120px, 0.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(13,13,13,0.96);
}
.cinema-transport button {
  min-height: 32px;
  padding: 0 7px;
  font-size: 12px;
}
.cinema-transport .play {
  background: #fff !important;
  color: #111;
}
.cinema-transport .marker-button,
.transport-bar .marker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  width: 100%;
  color: #bffcf2;
  border-color: rgba(45,212,191,0.36);
  background: rgba(20,184,166,0.14);
}
.cinema-transport .marker-button svg,
.transport-bar .marker-button svg {
  width: 15px;
  height: 15px;
}
.cinema-transport::after {
  content: "";
}
.cinema-window-controls input {
  accent-color: #ff3b1f;
}
.cinema-ops {
  display: grid;
  align-content: start;
  gap: 12px;
  min-width: 0;
  transition: opacity 180ms var(--ease-out);
}
.ops-rail-toggle {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(5,5,5,0.72);
  background: rgba(255,255,255,0.06) !important;
  box-shadow: none !important;
}
.cinema-admin.right-collapsed .ops-rail-toggle {
  width: 34px;
  min-width: 34px;
  padding: 0;
}
.cinema-admin.right-collapsed .ops-rail-toggle span {
  display: none;
}
.cinema-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(18,18,18,0.94);
}
.cinema-panel h3 {
  margin: 0;
  font-size: 16px;
}
.hero-metric strong {
  color: #35d07f;
  font-size: 34px;
  line-height: 1;
}
.cinema-panel span {
  color: rgba(255,255,255,0.58);
}
.cinema-ready {
  grid-template-columns: 78px minmax(0, 1fr);
  align-items: center;
}
.ready-ring {
  width: 66px;
  height: 66px;
  display: grid;
  place-items: center;
  border: 6px solid rgba(53,208,127,0.34);
  border-top-color: #35d07f;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 900;
}
.cinema-status span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.cinema-status b {
  font-size: 13px;
}
.cinema-status em {
  color: #35d07f;
  font-style: normal;
  font-size: 12px;
  font-weight: var(--fw-bold);
}
.cinema-hidden-form {
  display: none;
}
.cinema-timeline-panel {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(13,13,13,0.98);
}
.cinema-timeline-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.cinema-timeline-head h2 {
  margin: 0;
  font-size: 24px;
}
.cinema-timeline-head p {
  margin: 4px 0 0;
  color: rgba(255,255,255,0.55);
}
.cinema-timeline-head button {
  min-height: 42px;
  padding: 0 16px;
}
#saveCues {
  transition: transform 120ms var(--ease-out), background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
#saveCues:active,
#saveCues[aria-pressed="true"],
#saveCues.is-saving,
#saveCues.is-saved {
  transform: translateY(1px) scale(0.98);
  border-color: rgba(53,208,127,0.72);
  background: linear-gradient(135deg, rgba(53,208,127,0.36), rgba(20,184,166,0.18));
  box-shadow: inset 0 2px 10px rgba(0,0,0,0.42), 0 0 0 1px rgba(53,208,127,0.18);
}
#saveCues.is-saving {
  color: #d8fff0;
}
#saveCues.is-saved {
  color: #ecfff4;
}
#saveCues.is-error {
  border-color: rgba(255,107,92,0.72);
  color: #fff;
  background: rgba(239,68,68,0.26);
}
.cinema-timeline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.start-window-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.start-window-add-icon,
.start-window-bar-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.start-window-add-icon svg,
.start-window-bar-icon svg {
  width: 18px;
  height: 18px;
}
.cinema-window-controls { display: none; }
.cinema-window-controls label {
  display: grid;
  grid-template-columns: 78px minmax(120px, 1fr) 62px;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}
.cinema-window-controls span,
.cinema-lanes span {
  color: rgba(255,255,255,0.58);
  font-size: 12px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.cinema-window-controls output {
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight: 800;
  text-align: right;
}
.cinema-ruler {
  --timeline-rows: 9;
  display: grid;
  grid-template-columns: 122px minmax(0, 1fr);
  min-height: 352px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  overflow: hidden;
  background: #101010;
}
.cinema-lanes {
  display: grid;
  grid-template-rows: repeat(var(--timeline-rows), 1fr);
  border-right: 1px solid rgba(255,255,255,0.1);
  background: rgba(7,7,7,0.96);
}
.cinema-lanes span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.cinema-lanes .cinema-lane-label {
  position: relative;
  gap: 9px;
  padding: 0 22px 0 13px;
  color: rgba(255,255,255,0.88);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone-a) 14%, transparent), transparent 76%),
    rgba(255,255,255,0.015);
  font-weight: 800;
  text-shadow: none;
}
.cinema-lanes .cinema-lane-label::after {
  content: "<";
  position: absolute;
  right: 9px;
  color: rgba(255,255,255,0.22);
  font-size: 12px;
}
.cinema-lane-label svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  color: var(--tone-a);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tone-a) 55%, transparent));
}
.cinema-lane-label b {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0;
}
.cinema-link-lane-label {
  color: rgba(229,231,235,0.88) !important;
  background:
    linear-gradient(90deg, rgba(156,163,175,0.24), rgba(75,85,99,0.1), transparent 76%),
    rgba(255,255,255,0.018) !important;
}
.cinema-link-lane-label svg {
  color: #cbd5e1;
  filter: drop-shadow(0 0 8px rgba(203,213,225,0.35));
}
.cinema-lanes span:last-child {
  border-bottom: 0;
}
.cinema-track {
  --timeline-rows: 9;
  position: relative;
  min-height: 352px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.12) 0 1px, transparent 1px 12.5%),
    linear-gradient(180deg, rgba(24,70,104,0.85), rgba(18,46,68,0.86));
}
.timeline-inactive {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.055) 0 1px, transparent 1px 9px),
    rgba(6,6,6,0.58);
  border-inline: 1px solid rgba(255,255,255,0.08);
  box-shadow: inset 0 0 28px rgba(0,0,0,0.52);
  backdrop-filter: grayscale(1) brightness(0.58);
  pointer-events: none;
}
.timeline-inactive.before {
  border-left: 0;
}
.timeline-inactive.after {
  border-right: 0;
}
.cinema-row-band {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--row-top);
  height: var(--row-height);
  z-index: 0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone-a) 22%, transparent), color-mix(in srgb, var(--tone-b) 10%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--tone-a) 7%, transparent), transparent);
  pointer-events: none;
}
.link-row-band {
  background:
    linear-gradient(90deg, rgba(156,163,175,0.22), rgba(75,85,99,0.14), transparent 72%),
    rgba(255,255,255,0.015);
}
.timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9;
  width: 16px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent calc(50% - 1px), #ff3b1f calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  cursor: ew-resize;
  filter: drop-shadow(0 0 10px rgba(255,59,31,0.55));
  pointer-events: auto;
  touch-action: none;
}
.timeline-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #ff3b1f;
  pointer-events: none;
}
.timeline-playhead.scrubbing {
  filter: drop-shadow(0 0 16px rgba(255,86,48,0.85));
}
.timeline-timecode {
  position: absolute;
  top: 2px;
  z-index: 10;
  min-width: 74px;
  transform: translateX(-50%);
  padding: 2px 4px;
  border: 1px solid rgba(255,59,31,0.42);
  border-radius: 6px;
  color: #fff;
  background: rgba(0,0,0,0.78);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}
.cinema-row-line {
  top: var(--row-end);
  background: color-mix(in srgb, var(--tone-b) 24%, rgba(255,255,255,0.04));
}
.cinema-cut {
  background: rgba(200,200,200,0.72);
}
.transition-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 18px;
  transform: translateX(-50%);
  border: 0;
  padding: 0;
  color: #2dd4bf;
  background: linear-gradient(90deg, transparent calc(50% - 1px), #2dd4bf calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  cursor: pointer;
  filter: drop-shadow(0 0 12px rgba(45,212,191,0.52));
}
.transition-marker span {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid rgba(45,212,191,0.75);
  border-radius: 999px;
  background: rgba(8,47,73,0.86);
}
.transition-marker svg {
  width: 14px;
  height: 14px;
}
.cinema-cue {
  top: calc(var(--row-top) + 8px);
  height: calc(var(--row-height) - 12px);
  min-height: 24px;
  max-height: 32px;
  min-width: 48px;
  border-radius: 7px;
  background: linear-gradient(90deg, var(--tone-a), var(--tone-b));
  box-shadow: 0 12px 26px color-mix(in srgb, var(--tone-a) 30%, transparent);
}
.cinema-cue.selected {
  z-index: 7;
}
.html-zone-bar {
  position: absolute;
  top: calc(var(--row-top) + 7px);
  z-index: 4;
  min-width: 58px;
  height: calc(var(--row-height) - 12px);
  min-height: 24px;
  max-height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px dashed rgba(229,231,235,0.62);
  border-radius: 7px;
  padding: 0 4px 0 10px;
  color: rgba(255,255,255,0.88);
  background: linear-gradient(90deg, rgba(156,163,175,0.78), rgba(75,85,99,0.72));
  box-shadow: 0 12px 26px rgba(148,163,184,0.2);
  cursor: grab;
  outline: none;
  user-select: none;
}
.html-zone-bar.selected {
  z-index: 7;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(148,163,184,0.72), 0 18px 34px rgba(0,0,0,0.42);
}
.html-zone-bar.dragging {
  cursor: grabbing;
}
.html-zone-bar button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: rgba(0,0,0,0.3);
}
.cinema-cue-form {
  display: none;
}
.cinema-cue-form select,
.cinema-cue-form input,
.input-window-inspector select,
.input-window-inspector input {
  min-height: 40px;
}
.input-window-inspector select {
  color: #fff;
  border-color: color-mix(in srgb, var(--tone-b) 62%, rgba(255,255,255,0.14));
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone-a) 58%, #060606), color-mix(in srgb, var(--tone-b) 42%, #060606)),
    #090909;
  font-weight: 800;
}
.input-window-inspector option {
  color: #fff;
  background: color-mix(in srgb, var(--tone-a) 56%, #101010);
}
.cinema-cue-form button {
  min-height: 48px;
  padding: 0 12px;
}
.cinema-cue-form #addTimeline {
  background: rgba(255,255,255,0.1);
}
.cinema-timeline-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 2px;
}
.timeline-project-set {
  display: grid;
  gap: 8px;
}
.timeline-project-set > span {
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.timeline-project-set > div {
  display: block;
}
.timeline-canvas {
  position: relative;
  min-height: 178px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
}
.timeline-canvas-hint {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 4;
  padding: 4px 8px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-pill);
  color: rgba(255,255,255,0.42);
  background: rgba(0,0,0,0.52);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.04em;
  pointer-events: none;
}
.timeline-canvas-viewport {
  position: relative;
  min-height: 178px;
  max-height: 220px;
  overflow: auto;
  cursor: grab;
  scrollbar-color: rgba(255,255,255,0.22) rgba(255,255,255,0.04);
  scrollbar-width: thin;
}
.timeline-canvas-viewport.panning {
  cursor: grabbing;
  user-select: none;
}
.timeline-canvas-plane {
  position: relative;
  width: max(100%, calc(var(--timeline-count) * 300px));
  min-width: 720px;
  height: 178px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(0deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    rgba(0,0,0,0.22);
  background-size: 44px 44px;
}
.timeline-noodles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
.timeline-noodle {
  fill: none;
  stroke-width: 0.9;
  vector-effect: non-scaling-stroke;
  opacity: 0.74;
}
.timeline-noodle.success {
  stroke: rgba(34,197,94,0.88);
}
.timeline-noodle.fail {
  stroke: rgba(251,113,133,0.9);
}
.timeline-noodle-dot {
  opacity: 0.95;
}
.timeline-noodle-dot.success {
  fill: #22c55e;
}
.timeline-noodle-dot.fail {
  fill: #fb7185;
}
.timeline-card {
  position: absolute;
  width: 300px;
  min-width: 210px;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: grid;
  gap: 7px;
  padding: 8px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(16,16,18,0.96);
  box-shadow: 0 16px 28px rgba(0,0,0,0.3);
}
.timeline-card.current {
  border-color: rgba(255,59,31,0.56);
  background: linear-gradient(135deg, rgba(91,23,17,0.98), rgba(36,17,15,0.96));
}
.timeline-chip {
  min-height: 54px;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
  background: rgba(5,5,5,0.58);
  text-align: left;
  cursor: pointer;
}
.timeline-chip small,
.timeline-chip span {
  color: rgba(255,255,255,0.62);
  font-size: 11px;
  font-weight: var(--fw-bold);
}
.timeline-chip strong {
  font-size: 13px;
}
.timeline-chip.above {
  border-color: rgba(79,139,255,0.55);
  background: rgba(79,139,255,0.16);
}
.timeline-chip.current {
  border-color: rgba(255,59,31,0.72);
  background: linear-gradient(135deg, rgba(255,59,31,0.28), rgba(255,59,31,0.12));
}
.timeline-chip.below {
  border-color: rgba(53,208,127,0.58);
  background: rgba(53,208,127,0.14);
}
.timeline-chip.other.color-0 {
  border-color: rgba(255,210,26,0.58);
  background: rgba(255,210,26,0.12);
}
.timeline-chip.other.color-1 {
  border-color: rgba(143,98,255,0.58);
  background: rgba(143,98,255,0.14);
}
.timeline-chip.other.color-2 {
  border-color: rgba(26,188,255,0.58);
  background: rgba(26,188,255,0.13);
}
.timeline-chip.other.color-3 {
  border-color: rgba(255,47,179,0.58);
  background: rgba(255,47,179,0.12);
}
.timeline-chip.empty {
  color: rgba(5,5,5,0.58);
  border-style: dashed;
  background: rgba(255,255,255,0.035);
}
.timeline-name-button,
.timeline-name-input {
  min-width: 0;
  color: #fff;
  font: inherit;
  font-weight: var(--fw-bold);
  text-align: left;
}
.timeline-name-button {
  width: fit-content;
  max-width: 100%;
  justify-self: start;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: text;
}
.timeline-name-button:hover,
.timeline-name-button:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  outline: 0;
}
.timeline-name-input {
  width: 100%;
  height: 34px;
  border: 1px solid rgba(45,156,255,0.74);
  border-radius: 7px;
  padding: 0 9px;
  background: rgba(0,0,0,0.34);
}
.timeline-name-input:focus {
  outline: 2px solid rgba(45,156,255,0.78);
  outline-offset: 1px;
}
.admin-tool-panel {
  min-height: calc(100vh - 90px);
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,59,31,0.1), transparent 34%),
    rgba(13,13,13,0.98);
}
.admin-tool-head {
  display: grid;
  gap: 5px;
}
.admin-tool-head span,
.admin-tool-card small,
.admin-tool-form span {
  color: rgba(255,255,255,0.52);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-tool-head h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 56px);
  letter-spacing: 0;
}
.admin-tool-head.compact h2 {
  margin: 0;
  font-size: 22px;
}
.admin-tool-head p,
.admin-tool-card p {
  margin: 0;
  color: rgba(255,255,255,0.62);
}
.admin-tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.admin-tool-card {
  min-height: 150px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}
.admin-tool-card h3 {
  margin: 0;
  font-size: 22px;
}
.admin-tool-card.timeline-color-0 { border-color: rgba(255,59,31,0.45); background: rgba(255,59,31,0.12); }
.admin-tool-card.timeline-color-1 { border-color: rgba(79,139,255,0.45); background: rgba(79,139,255,0.12); }
.admin-tool-card.timeline-color-2 { border-color: rgba(53,208,127,0.45); background: rgba(53,208,127,0.1); }
.admin-tool-card.timeline-color-3 { border-color: rgba(255,210,26,0.45); background: rgba(255,210,26,0.1); }
.admin-tool-card.ghost {
  border-style: dashed;
}
.media-stage3-grid {
  display: grid;
  gap: 14px;
}
.media-upload-card {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 0.55fr);
  gap: 14px;
  align-items: center;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background:
    linear-gradient(135deg, rgba(255,59,31,0.16), transparent 40%),
    rgba(255,255,255,0.045);
}
.media-upload-card h2,
.media-upload-card p {
  margin: 0;
}
.media-upload-card small {
  color: rgba(255,255,255,0.52);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.media-upload-card p,
.media-upload-card output {
  color: rgba(255,255,255,0.62);
}
.media-file-picker {
  min-height: 92px;
  display: grid;
  place-items: center;
  border: 1px dashed rgba(255,255,255,0.22);
  border-radius: 8px;
  color: #fff;
  background: rgba(0,0,0,0.22);
  cursor: pointer;
}
.media-file-picker input {
  display: none;
}
.media-file-picker span {
  font-weight: 900;
}
.start-window-bar {
  position: absolute;
  top: 8px;
  bottom: 8px;
  z-index: 4;
  min-width: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 0 10px 12px;
  border: 1px solid rgba(255,210,26,0.58);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,210,26,0.16), rgba(255,59,31,0.26)),
    linear-gradient(90deg, rgba(255,59,31,0.36), rgba(255,210,26,0.28));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 16px 36px rgba(0,0,0,0.3);
  cursor: grab;
  user-select: none;
}
.start-window-bar.dragging {
  z-index: 13;
  cursor: grabbing;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255,210,26,0.62), 0 18px 34px rgba(0,0,0,0.45);
}
.start-window-bar span {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.start-window-bar small {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  color: #15110a;
  background: rgba(255,255,255,0.78);
  font-size: 10px;
  font-weight: 900;
}
.media-upload-actions {
  display: flex;
  gap: 10px;
}
.media-upload-actions button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 0 14px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-weight: 900;
}
.media-upload-actions button.primary {
  border-color: rgba(255,59,31,0.72);
  background: #ff3b1f;
}
.media-upload-card output {
  grid-column: 1 / -1;
  min-height: 34px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: 8px;
  background: rgba(0,0,0,0.25);
}
.media-library-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}
.media-library-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
}
.media-library-head h2,
.media-library-head p {
  margin: 0;
}
.media-library-head small {
  color: rgba(255,255,255,0.52);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.media-library-head p,
.media-library-empty,
.media-asset-row span {
  color: rgba(255,255,255,0.62);
}
.media-library-head > span {
  max-width: 220px;
  padding: 6px 10px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,0.24);
  font-size: 12px;
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-library-list {
  display: grid;
  gap: 8px;
}
.media-asset-row,
.media-library-empty {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  min-height: 58px;
  padding: 10px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(0,0,0,0.2);
}
.media-asset-row.attached {
  border-color: rgba(53,208,127,0.5);
  background: rgba(53,208,127,0.11);
}
.media-asset-row div,
.media-library-empty {
  min-width: 0;
}
.media-asset-row strong,
.media-asset-row span,
.media-library-empty strong,
.media-library-empty span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.media-asset-row button {
  flex: 0 0 auto;
  min-height: 36px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  padding: 0 14px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  font: inherit;
  font-weight: 900;
}
.media-asset-row button:not(:disabled) {
  border-color: rgba(79,139,255,0.55);
  background: rgba(79,139,255,0.22);
}
.media-warmup-video {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -100px;
  top: -100px;
}
.media-metadata-form {
  max-width: none;
}
.admin-tool-metrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 12px;
}
.admin-tool-metrics div {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
}
.admin-tool-metrics strong {
  color: #35d07f;
  font-size: 34px;
}
.admin-tool-metrics span {
  color: rgba(255,255,255,0.58);
}
.admin-tool-form {
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 12px;
}
.admin-tool-form label {
  display: grid;
  gap: 7px;
  color: rgba(255,255,255,0.58);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.admin-tool-form label:nth-child(2),
.admin-tool-form label:nth-child(4),
.admin-tool-form label:nth-child(5) {
  grid-column: 1 / -1;
}
.admin-tool-form input,
.admin-tool-form textarea,
.admin-tool-form select {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  background: rgba(0,0,0,0.28);
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
}
.admin-tool-form select {
  appearance: none;
}
.admin-tool-form textarea {
  min-height: 120px;
  resize: vertical;
}
.title-management-grid {
  display: grid;
  grid-template-columns: minmax(360px, 1.35fr) minmax(220px, 0.65fr);
  gap: 14px;
}
.title-editor-card,
.title-poster-preview,
.category-manager,
.title-catalogue-card {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 16px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}
.title-editor-card,
.title-catalogue-card,
.category-manager {
  grid-column: span 1;
}
.category-manager,
.title-catalogue-card {
  grid-column: 1 / -1;
}
.title-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}
.title-card-head small {
  color: rgba(255,255,255,0.54);
  font-size: 11px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.title-card-head h2 {
  margin: 3px 0 0;
  font-size: 22px;
}
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 999px;
  color: rgba(5,5,5,0.78);
  background: rgba(255,255,255,0.08);
  font-size: 12px;
  font-weight: var(--fw-bold);
}
.status-pill.published {
  border-color: rgba(53,208,127,0.42);
  color: #35d07f;
  background: rgba(53,208,127,0.12);
}
.status-pill.draft {
  border-color: rgba(255,210,26,0.36);
  color: #ffbf34;
  background: rgba(255,210,26,0.1);
}
.title-stage2-form {
  max-width: none;
}
.source-url-note {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding: 11px 12px;
  border: 1px solid rgba(255,210,26,0.2);
  border-radius: 8px;
  color: rgba(5,5,5,0.72);
  background:
    linear-gradient(135deg, rgba(255,210,26,0.1), rgba(255,59,31,0.07)),
    rgba(255,255,255,0.035);
}
.source-url-note strong {
  color: rgba(255,255,255,0.9);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.source-url-note p {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
}
.source-url-note code {
  padding: 1px 5px;
  border-radius: 5px;
  color: #fff;
  background: rgba(0,0,0,0.3);
  font-family: var(--font-mono);
  font-size: 11px;
}
.title-stage2-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.title-stage2-actions .danger-button {
  margin-right: auto;
}
.title-poster-preview img,
.title-admin-card img {
  width: 100%;
  object-fit: cover;
  background: rgba(0,0,0,0.42);
}
.title-poster-preview img {
  aspect-ratio: 16 / 9;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
}
.title-poster-preview div {
  display: grid;
  gap: 3px;
}
.title-share-box {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 2px solid rgba(5,5,5,0.08);
}
.title-share-box input {
  width: 100%;
  min-width: 0;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  padding: 10px 11px;
  color: rgba(255,255,255,0.82);
  background: rgba(0,0,0,0.28);
  font: 12px/1.2 var(--font-mono);
}
.title-share-box button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.title-share-box button svg {
  width: 16px;
  height: 16px;
}
.title-poster-preview span,
.title-admin-card small,
.category-row input::placeholder {
  color: rgba(255,255,255,0.56);
}
.title-catalogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.title-admin-card {
  display: grid;
  gap: 8px;
  text-align: left;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 8px;
  padding: 10px;
  color: #fff;
  background: rgba(0,0,0,0.24);
}
.title-admin-card.active {
  border-color: rgba(255,59,31,0.72);
  background: rgba(255,59,31,0.13);
}
.title-admin-card img {
  aspect-ratio: 16 / 10;
  border-radius: 6px;
}
.title-admin-card span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: var(--fw-bold);
}
.category-row {
  display: grid;
  grid-template-columns: minmax(160px, 0.8fr) minmax(220px, 1.3fr) 90px auto;
  gap: 8px;
}
.category-row input {
  min-height: 40px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 9px 10px;
  color: #fff;
  background: rgba(0,0,0,0.25);
}
.empty-admin-state {
  display: grid;
  place-items: center;
  min-height: 420px;
  gap: 12px;
  text-align: center;
  color: rgba(5,5,5,0.72);
}
.empty-admin-state svg {
  width: 42px;
  height: 42px;
  color: #ff3b1f;
}
.empty-admin-state h1,
.empty-admin-state h3,
.empty-admin-state p {
  margin: 0;
}
.empty-admin-state.small {
  min-height: 150px;
  place-items: start;
  text-align: left;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,0.16);
  border-radius: 8px;
}
.admin-v2-empty-list {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px dashed rgba(255,255,255,0.14);
  border-radius: 8px;
  color: rgba(255,255,255,0.64);
}
.admin-v2-empty-list strong {
  color: #fff;
}
.admin-defaults-panel {
  display: grid;
  gap: 12px;
}
.admin-defaults-grid {
  display: grid;
  gap: 10px;
}
.default-style-row {
  display: grid;
  grid-template-columns: 120px repeat(3, minmax(180px, 1fr));
  gap: 10px;
  align-items: stretch;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--tone-a) 38%, rgba(255,255,255,0.08));
  border-radius: 8px;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone-a) 16%, transparent), transparent 72%),
    rgba(255,255,255,0.035);
}
.default-style-row > div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-weight: var(--fw-bold);
}
.default-style-row svg {
  width: 20px;
  height: 20px;
  color: var(--tone-a);
}
.default-style-row label {
  display: grid;
  gap: 6px;
}
.default-style-row label span {
  color: rgba(255,255,255,0.52);
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.default-style-row textarea {
  min-height: 72px;
  resize: vertical;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 9px 10px;
  color: rgba(255,255,255,0.88);
  background: rgba(0,0,0,0.28);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
}

/* Admin GUI v2 clean rebuild */
.admin-v2 {
  --admin-panel: rgba(16,16,16,0.96);
  --admin-panel-2: rgba(24,24,24,0.9);
  --admin-border: rgba(255,255,255,0.1);
  --admin-muted: rgba(255,255,255,0.58);
  min-height: 100vh;
  height: 100vh;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-rows: 64px minmax(0, 1fr);
  overflow: hidden;
  color: #f8f8f6;
  background:
    radial-gradient(circle at 18% 0%, rgba(255,47,179,0.16), transparent 26%),
    radial-gradient(circle at 82% 16%, rgba(79,139,255,0.12), transparent 24%),
    linear-gradient(180deg, #080808 0%, #030303 100%);
}
.admin-v2.left-collapsed {
  grid-template-columns: 52px minmax(0, 1fr);
}
.admin-v2-topbar {
  grid-column: 1 / -1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 18px 0 24px;
  border-bottom: 1px solid var(--admin-border);
  background: rgba(3,3,3,0.96);
}
.admin-v2-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
}
.admin-v2-brand strong {
  overflow: hidden;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-v2-brand span {
  color: var(--admin-muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}
.admin-lock-status {
  min-width: max-content;
  padding: 4px 8px;
  border: 1px solid rgba(53,208,127,0.28);
  border-radius: 999px;
  color: #8ef7bd !important;
  background: rgba(53,208,127,0.08);
}
.admin-v2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.autosave-status {
  min-width: 112px;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 999px;
  color: rgba(255,255,255,0.58);
  background: rgba(255,255,255,0.045);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}
.autosave-status[data-state="dirty"],
.autosave-status[data-state="saving"] {
  border-color: rgba(255,209,102,0.26);
  color: #ffd166;
  background: rgba(255,209,102,0.08);
}
.autosave-status[data-state="saved"] {
  border-color: rgba(53,208,127,0.26);
  color: #35d07f;
  background: rgba(53,208,127,0.08);
}
.autosave-status[data-state="error"] {
  border-color: rgba(255,107,92,0.32);
  color: #ff6b5c;
  background: rgba(255,107,92,0.08);
}
.admin-v2-actions button,
.admin-v2-rail-head button,
.admin-v2-settings,
.admin-v2-nav button,
.admin-v2 .cinema-timeline-head button,
.admin-v2 .cinema-transport button,
.admin-v2 .ops-rail-toggle {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,0.075);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}
.admin-v2-actions button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 13px;
}
.admin-v2-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.admin-v2-actions svg {
  width: 15px;
  height: 15px;
}
.admin-v2-actions .primary,
.admin-v2-rail-head #newTitle {
  border-color: rgba(255,47,179,0.85);
  background: #ff3b14;
  box-shadow: 0 10px 28px rgba(255,47,179,0.28);
}
.admin-v2-actions .exit-admin {
  color: #cfd8e3;
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.045);
}
.admin-v2-actions .exit-admin:hover,
.admin-v2 .cinema-transport .test-player:hover {
  color: #fff;
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.12);
}
.admin-v2-sidebar {
  grid-row: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 16px;
  overflow: auto;
  border-right: 1px solid var(--admin-border);
  background: rgba(7,7,7,0.97);
}
.admin-v2-rail-head {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.admin-v2-rail-toggle {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
}
.admin-v2-rail-toggle svg,
.admin-v2-nav svg,
.admin-v2-settings svg {
  width: 18px;
  height: 18px;
  flex: none;
}
.admin-v2-rail-head div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.admin-v2-rail-head span {
  color: var(--admin-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.admin-v2-rail-head strong {
  overflow: hidden;
  color: #fff;
  font-size: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-v2-rail-head #newTitle {
  min-height: 38px;
  padding: 0 13px;
}
.admin-v2-projects {
  display: grid;
  gap: 10px;
}
.admin-v2-project {
  width: 100%;
  min-height: 78px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: 1fr 1fr;
  column-gap: 12px;
  padding: 10px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  color: #fff;
  background: rgba(255,255,255,0.04);
  text-align: left;
  cursor: pointer;
}
.admin-v2-project.active {
  border-color: rgba(255,47,179,0.82);
  background:
    linear-gradient(90deg, rgba(255,47,179,0.2), rgba(255,210,26,0.06)),
    rgba(255,255,255,0.04);
}
.admin-v2-project img {
  grid-row: 1 / 3;
  width: 58px;
  height: 56px;
  border-radius: 6px;
  object-fit: cover;
}
.admin-v2-project span,
.admin-v2-project small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-v2-project span {
  align-self: end;
  font-size: 14px;
  font-weight: 900;
}
.admin-v2-project small {
  align-self: start;
  color: var(--admin-muted);
  font-size: 12px;
}
.admin-v2-nav {
  display: grid;
  gap: 3px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.admin-v2-nav button,
.admin-v2-settings {
  position: relative;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  border: 0;
  border-radius: 0;
  padding: 0 14px;
  color: rgba(5,5,5,0.62);
  background: transparent;
  text-align: left;
  box-shadow: none;
}
.admin-v2-nav button::before,
.admin-v2-settings::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  bottom: 9px;
  width: 3px;
  border-radius: 999px;
  background: transparent;
}
.admin-v2-nav button:hover,
.admin-v2-settings:hover {
  color: #fff;
  background: rgba(255,255,255,0.045);
}
.admin-v2-nav button.active,
.admin-v2-settings.active {
  color: #ff5a2e;
  background:
    linear-gradient(90deg, rgba(255,47,179,0.24), rgba(255,210,26,0.07) 58%, transparent),
    rgba(255,255,255,0.02);
}
.admin-v2-nav button.active::before,
.admin-v2-settings.active::before {
  background: #ff3b14;
  box-shadow: 0 0 14px rgba(255,47,179,0.72);
}
.admin-v2-settings {
  margin-top: auto;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.admin-v2.left-collapsed .admin-v2-sidebar {
  padding: 14px 8px;
  overflow: hidden;
}
.admin-v2.left-collapsed .admin-v2-rail-head {
  grid-template-columns: 34px;
}
.admin-v2.left-collapsed .admin-v2-rail-head div,
.admin-v2.left-collapsed #newTitle,
.admin-v2.left-collapsed .admin-v2-projects,
.admin-v2.left-collapsed .admin-v2-nav,
.admin-v2.left-collapsed .admin-v2-settings span {
  display: none;
}
.admin-v2.left-collapsed .admin-v2-settings {
  min-height: 40px;
  justify-content: center;
  padding: 0;
}
.admin-v2-workspace {
  grid-row: 2;
  min-width: 0;
  overflow: auto;
  overflow-x: hidden;
  padding: 12px;
}
.admin-v2 .cinema-edit-grid {
  min-height: calc(100vh - 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
  gap: 12px;
}
.admin-v2.right-collapsed .cinema-edit-grid {
  grid-template-columns: minmax(0, 1fr) 46px;
}
.admin-v2 .cinema-preview {
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(260px, 42vh) auto auto;
  gap: 10px;
}
.admin-v2 .cinema-preview-meta,
.admin-v2 .cinema-transport,
.admin-v2 .cinema-timeline-panel,
.admin-v2 .cinema-panel,
.admin-v2 .admin-tool-panel {
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  background: var(--admin-panel);
}
.admin-v2 .cinema-preview-meta {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.admin-v2 .cinema-monitor {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 8px;
  background: #000;
}
.admin-v2 .cinema-monitor video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}
.admin-v2 .cinema-monitor.upload-first video {
  opacity: 0;
  visibility: hidden;
}
.admin-v2 .cinema-upload-drop {
  position: absolute;
  inset: 14px;
  z-index: 4;
  display: grid;
  place-content: center;
  gap: 8px;
  border: 1px dashed rgba(255,255,255,0.25);
  border-radius: 8px;
  color: #fff;
  background: #000;
  text-align: center;
  cursor: pointer;
}
.admin-v2 .cinema-upload-drop.dragging {
  border-color: rgba(255,59,31,0.78);
  background: rgba(255,59,31,0.12);
}
.admin-v2 .cinema-upload-drop strong {
  font-size: 20px;
}
.admin-v2 .cinema-upload-drop span {
  max-width: 340px;
  color: rgba(255,255,255,0.62);
}
.admin-v2 .cinema-monitor:not(.upload-first) .cinema-upload-drop {
  display: none;
}
.admin-v2 .cinema-monitor-hud {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: rgba(0,0,0,0.68);
}
.admin-v2 .cinema-monitor-hud strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-v2 .cinema-monitor-hud span,
.admin-v2 .cinema-monitor-badge {
  color: var(--admin-muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.admin-v2 .cinema-monitor-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 9px;
  border-radius: 8px;
  background: rgba(255,255,255,0.08);
}
.admin-v2 .preview-link-layer {
  position: absolute;
  left: var(--preview-frame-left, 0);
  top: var(--preview-frame-top, 0);
  width: var(--preview-frame-width, 100%);
  height: var(--preview-frame-height, 100%);
  z-index: 5;
  pointer-events: none;
}
.admin-v2 .preview-link-zone {
  position: absolute;
  border: 1px dashed rgba(203,213,225,0.74);
  border-radius: 4px;
  background: rgba(148,163,184,0.08);
  pointer-events: auto;
  cursor: pointer;
}
.admin-v2 .preview-link-zone span {
  display: none;
}
.admin-v2 .preview-link-zone:hover,
.admin-v2 .preview-link-zone.selected {
  background: rgba(148,163,184,0.18);
  box-shadow: 0 0 0 2px rgba(255,255,255,0.18);
}
.admin-v2 .preview-link-zone.selected {
  cursor: move;
}
.admin-v2 .preview-link-resize {
  position: absolute;
  z-index: 2;
  width: 10px;
  height: 10px;
  border: 1px solid rgba(255,255,255,0.94);
  border-radius: 999px;
  background: #0ea5e9;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.55), 0 0 12px rgba(14,165,233,0.52);
}
.admin-v2 .preview-link-resize.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.admin-v2 .preview-link-resize.n { left: 50%; top: -5px; transform: translateX(-50%); cursor: ns-resize; }
.admin-v2 .preview-link-resize.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.admin-v2 .preview-link-resize.e { right: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.admin-v2 .preview-link-resize.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.admin-v2 .preview-link-resize.s { left: 50%; bottom: -5px; transform: translateX(-50%); cursor: ns-resize; }
.admin-v2 .preview-link-resize.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.admin-v2 .preview-link-resize.w { left: -5px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.admin-v2 .preview-input-layer {
  position: absolute;
  left: var(--preview-frame-left, 0);
  top: var(--preview-frame-top, 0);
  width: var(--preview-frame-width, 100%);
  height: var(--preview-frame-height, 100%);
  z-index: 6;
  pointer-events: none;
}
.admin-preview-fail-screen {
  position: absolute;
  left: var(--preview-frame-left, 0);
  top: var(--preview-frame-top, 0);
  width: var(--preview-frame-width, 100%);
  height: var(--preview-frame-height, 100%);
  z-index: 7;
}
.admin-preview-fail-screen[hidden] {
  display: none;
}
.admin-preview-fail-screen .fail-timeline-copy {
  padding: 20px;
}
.admin-preview-fail-screen .fail-timeline-copy strong {
  font-size: clamp(28px, 4vw, 58px);
}
.admin-v2 .preview-input-window {
  position: absolute;
  inset: 0;
}
.admin-v2 .preview-input-window[hidden] {
  display: none;
}
.admin-v2 .preview-input-window .cue-edge-token {
  width: 72px;
  height: 72px;
}
.admin-v2 .preview-input-window .cue-token-only .cue-edge-token {
  width: 70px;
  height: 70px;
}
.admin-v2 .preview-input-window .cue-token-only .cue-edge-token b {
  font-size: 32px;
}
.admin-v2 .cinema-transport {
  min-height: 46px;
  display: grid;
  grid-template-columns: 34px 34px 64px 34px 34px minmax(120px, 0.5fr) minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
}
.admin-v2 .cinema-transport button {
  min-height: 32px;
  padding: 0 7px;
  font-size: 12px;
}
.admin-v2 .cinema-transport .play {
  color: #101010;
  background: #fff;
}
.admin-v2 .cinema-transport .test-player {
  color: #d7fbff;
  border-color: rgba(45,212,191,0.38);
  background: rgba(20,184,166,0.14);
}
.admin-v2 .marker-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  width: 100%;
  color: #bffcf2;
  border-color: rgba(45,212,191,0.36);
  background: rgba(20,184,166,0.14);
}
.admin-v2 .marker-button svg {
  width: 15px;
  height: 15px;
}
.admin-v2 .cinema-ops {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 12px;
}
.admin-v2 .ops-rail-toggle {
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.admin-v2.right-collapsed .cinema-ops > :not(.ops-rail-toggle) {
  display: none;
}
.admin-v2.right-collapsed .ops-rail-toggle {
  width: 34px;
  padding: 0;
}
.admin-v2.right-collapsed .ops-rail-toggle span {
  display: none;
}
.admin-v2 .cinema-panel {
  display: grid;
  gap: 10px;
  padding: 16px;
}
.admin-v2 .hero-metric strong {
  color: #1fae6f;
  font-size: 34px;
  line-height: 1;
}
.admin-v2 .cinema-status span {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.admin-v2 .cinema-status em {
  color: #1fae6f;
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}
.admin-v2 .cinema-timeline-panel {
  min-width: 0;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 14px;
}
.admin-v2 .cinema-timeline-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.admin-v2 .cinema-timeline-head h2 {
  margin: 0;
  font-size: 22px;
  letter-spacing: 0;
}
.admin-v2 .cinema-timeline-head p {
  margin: 4px 0 0;
  color: var(--admin-muted);
}
.admin-v2 .cinema-timeline-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.admin-v2 .start-window-add {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-color: rgba(255,210,26,0.36);
  color: #fff;
  background: linear-gradient(135deg, rgba(255,47,179,0.28), rgba(255,210,26,0.14));
}
.admin-v2 .start-window-add:disabled {
  color: rgba(255,255,255,0.48);
  border-color: rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.admin-v2 .start-window-add-icon,
.admin-v2 .start-window-bar-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.admin-v2 .start-window-add-icon svg,
.admin-v2 .start-window-bar-icon svg {
  width: 18px;
  height: 18px;
}
.admin-v2 .cinema-window-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(260px, 0.7fr);
  gap: 8px;
}
.admin-v2 .cinema-window-controls label {
  min-width: 0;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  background: rgba(255,255,255,0.045);
}
.admin-v2 .cinema-window-controls .window-range-control {
  grid-template-columns: minmax(0, 1fr) 54px;
}
.admin-v2 .cinema-window-controls span {
  color: rgba(255,255,255,0.56);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.admin-v2 .cinema-window-controls output {
  color: #fff;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 12px;
  font-weight: 900;
  text-align: right;
}
.admin-v2 .cinema-window-controls .crossfade-control {
  grid-template-columns: 104px 18px minmax(62px, 1fr) 54px;
}
.admin-v2 .cinema-window-controls .crossfade-control input[type="text"] {
  min-width: 0;
  height: 28px;
  border: 2px solid rgba(5,5,5,0.1);
  border-radius: 6px;
  padding: 0 8px;
  color: #fff;
  background: rgba(0,0,0,0.36);
  font: 800 12px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
.admin-v2 .cinema-ruler {
  --timeline-rows: 9;
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  min-width: 0;
  min-height: 354px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  background: #0d0d0d;
}
.admin-v2 .cinema-lanes {
  display: grid;
  grid-template-rows: repeat(var(--timeline-rows), 1fr);
  border-right: 1px solid rgba(255,255,255,0.1);
  background: #080808;
}
.admin-v2 .cinema-lane-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 22px 0 13px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.9);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone-a) 22%, transparent), transparent 80%),
    rgba(255,255,255,0.012);
}
.admin-v2 .cinema-lane-label::after {
  content: "<";
  position: absolute;
  right: 9px;
  color: rgba(255,255,255,0.24);
  font-size: 12px;
}
.admin-v2 .cinema-lane-label svg {
  width: 20px;
  height: 20px;
  color: var(--tone-a);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--tone-a) 55%, transparent));
}
.admin-v2 .cinema-lane-label b {
  font-size: 12px;
  letter-spacing: 0;
}
.admin-v2 .cinema-link-lane-label {
  background:
    linear-gradient(90deg, rgba(156,163,175,0.28), rgba(75,85,99,0.12), transparent 80%),
    rgba(255,255,255,0.014);
}
.admin-v2 .cinema-track {
  --timeline-rows: 9;
  position: relative;
  min-width: 0;
  min-height: 354px;
  overflow: hidden;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.14) 0 1px, transparent 1px 12.5%),
    linear-gradient(180deg, rgba(23,72,102,0.82), rgba(20,45,67,0.88));
}
.admin-v2 .cinema-row-band {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--row-top);
  height: var(--row-height);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--tone-a) 24%, transparent), color-mix(in srgb, var(--tone-b) 10%, transparent), transparent 76%),
    rgba(255,255,255,0.012);
  pointer-events: none;
}
.admin-v2 .link-row-band {
  background:
    linear-gradient(90deg, rgba(156,163,175,0.24), rgba(75,85,99,0.14), transparent 76%),
    rgba(255,255,255,0.012);
}
.admin-v2 .timeline-inactive {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 5;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 9px),
    rgba(5,5,5,0.62);
  pointer-events: none;
}
.admin-v2 .timeline-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 9;
  width: 16px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent calc(50% - 1px), #ff3b14 calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  cursor: ew-resize;
  filter: drop-shadow(0 0 10px rgba(255,47,179,0.56));
  pointer-events: auto;
  touch-action: none;
}
.admin-v2 .timeline-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #ff3b14;
  pointer-events: none;
}
.admin-v2 .timeline-playhead.scrubbing {
  filter: drop-shadow(0 0 16px rgba(255,86,48,0.86));
}
.admin-v2 .timeline-timecode {
  position: absolute;
  top: 2px;
  z-index: 10;
  min-width: 74px;
  transform: translateX(-50%);
  padding: 2px 4px;
  border: 1px solid rgba(255,47,179,0.42);
  border-radius: 6px;
  color: #fff;
  background: rgba(0,0,0,0.8);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  text-align: center;
  pointer-events: none;
}
.admin-v2 .cinema-row-line {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--row-end);
  z-index: 2;
  height: 1px;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}
.admin-v2 .cinema-cut {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 1px;
  background: rgba(210,210,210,0.72);
}
.admin-v2 .transition-marker {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 6;
  width: 18px;
  transform: translateX(-50%);
  border: 0;
  padding: 0;
  color: #2dd4bf;
  background: linear-gradient(90deg, transparent calc(50% - 1px), #2dd4bf calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px));
  cursor: pointer;
  filter: drop-shadow(0 0 12px rgba(45,212,191,0.56));
}
.admin-v2 .transition-marker span {
  position: absolute;
  top: 17px;
  left: 50%;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 1px solid rgba(45,212,191,0.76);
  border-radius: 999px;
  background: rgba(8,47,73,0.9);
}
.admin-v2 .transition-marker svg {
  width: 14px;
  height: 14px;
}
.admin-v2 .transition-marker:hover {
  color: #99f6e4;
  filter: drop-shadow(0 0 16px rgba(45,212,191,0.86));
}
.admin-v2 .start-window-bar {
  position: absolute;
  top: 8px;
  bottom: 8px;
  z-index: 4;
  min-width: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
  padding: 0 10px 12px;
  border: 1px solid rgba(255,210,26,0.62);
  border-radius: 8px;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255,210,26,0.14), rgba(255,47,179,0.28)),
    linear-gradient(90deg, rgba(255,47,179,0.36), rgba(255,210,26,0.28));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 16px 36px rgba(0,0,0,0.3);
  cursor: grab;
  user-select: none;
}
.admin-v2 .start-window-bar.dragging {
  z-index: 13;
  cursor: grabbing;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255,210,26,0.62), 0 18px 34px rgba(0,0,0,0.45);
}
.admin-v2 .start-window-bar span {
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
  text-align: center;
}
.admin-v2 .start-window-bar small {
  flex: 0 0 auto;
  padding: 3px 6px;
  border-radius: 999px;
  color: #15110a;
  background: rgba(255,255,255,0.8);
  font-size: 10px;
  font-weight: 900;
}
.admin-v2 .window-edge {
  position: absolute;
  top: 8px;
  z-index: 12;
  transform: translateX(-50%);
  padding: 3px 7px;
  border-radius: 999px;
  color: #fff;
  background: #ff3b14;
  font-size: 10px;
  font-weight: 900;
  cursor: ew-resize;
}
.admin-v2 .window-edge.out {
  background: #ffb800;
  color: #101010;
}
.admin-v2 .cinema-cue,
.admin-v2 .html-zone-bar {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  user-select: none;
}
.admin-v2 .cinema-cue {
  top: calc(var(--row-top) + 8px);
  z-index: 4;
  min-width: 52px;
  height: calc(var(--row-height) - 12px);
  min-height: 24px;
  max-height: 32px;
  border-radius: 7px;
  padding: 0 4px 0 10px;
  background: linear-gradient(90deg, var(--tone-a), var(--tone-b));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--tone-a) 32%, transparent);
  cursor: grab;
}
.admin-v2 .cinema-cue.selected {
  z-index: 12;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(255,47,179,0.72), 0 18px 34px rgba(0,0,0,0.45);
}
.admin-v2 .cinema-cue.trim-dragging {
  z-index: 13;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.9), 0 0 0 5px rgba(0,145,255,0.66), 0 18px 34px rgba(0,0,0,0.45);
}
.admin-v2 .cinema-cue .cue-label {
  position: relative;
  z-index: 3;
  max-width: calc(100% - 42px);
}
.admin-v2 .html-zone-bar button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  background: rgba(0,0,0,0.3);
  margin-right: 8px;
  position: relative;
  z-index: 5;
}
.admin-v2 .cue-route-badges {
  position: relative;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  min-width: 28px;
  margin-left: auto;
  padding-right: 4px;
}
.admin-v2 .cue-route-badge {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 999px;
  color: #fff;
  background: rgba(0,0,0,0.34);
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}
.admin-v2 .cue-route-badge.success {
  border-color: rgba(62,255,149,0.58);
  background: rgba(11,121,65,0.82);
}
.admin-v2 .cue-route-badge.fail {
  border-color: rgba(255,129,102,0.7);
  background: rgba(184,36,36,0.86);
}
.admin-v2 .cinema-cue .cue-trim-handle {
  z-index: 14;
}
.admin-v2 .html-zone-bar {
  top: calc(var(--row-top) + 7px);
  z-index: 4;
  min-width: 66px;
  height: calc(var(--row-height) - 12px);
  min-height: 24px;
  max-height: 30px;
  border: 1px dashed rgba(229,231,235,0.68);
  border-radius: 7px;
  padding: 0 4px 0 10px;
  color: rgba(255,255,255,0.88);
  background: linear-gradient(90deg, rgba(156,163,175,0.82), rgba(75,85,99,0.76));
  cursor: grab;
}
.admin-v2 .html-zone-bar.selected {
  z-index: 7;
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(148,163,184,0.7);
}
.admin-v2 .cue-route-popover,
.admin-v2 .link-zone-inspector {
  z-index: 20;
}
.admin-v2 .cue-route-popover {
  position: static;
  width: auto;
  max-height: 380px;
  transform: none;
}
.admin-v2 .cue-route-popover::before {
  display: none;
}
.admin-v2 .cinema-timeline-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}
.admin-v2 .timeline-project-set > div {
  display: block;
}
.admin-v2 .timeline-chip {
  min-width: 0;
  border-radius: 8px;
}
.admin-v2 .admin-tool-panel {
  min-height: calc(100vh - 88px);
  align-content: start;
  gap: 18px;
  padding: 20px;
}

/* YourPlayables admin skin */
.admin-v2 {
  --admin-panel: rgba(255,255,255,0.96);
  --admin-panel-2: rgba(255,255,255,0.9);
  --admin-border: rgba(5,5,5,0.16);
  --admin-muted: rgba(5,5,5,0.58);
  color: var(--moja-ink);
  background:
    radial-gradient(circle at 8% 18%, rgba(255,47,179,0.16), transparent 24%),
    radial-gradient(circle at 92% 16%, rgba(0,174,239,0.16), transparent 25%),
    radial-gradient(circle at 76% 88%, rgba(255,210,26,0.2), transparent 26%),
    #fff;
}
.admin-v2-topbar {
  border-bottom: 2px solid var(--moja-ink);
  background: rgba(255,255,255,0.94);
  box-shadow: 0 12px 30px rgba(5,5,5,0.08);
  backdrop-filter: blur(16px);
}
.admin-v2-brand {
  align-items: center;
}
.admin-v2-brand img {
  width: 42px;
  height: 28px;
  object-fit: contain;
}
.admin-v2-brand strong,
.admin-v2-rail-head strong,
.admin-v2-project span,
.admin-v2 .cinema-timeline-head h2,
.admin-tool-head h1,
.admin-tool-card h3,
.default-style-row > div {
  color: var(--moja-ink);
}
.admin-v2-brand span,
.admin-v2-rail-head span,
.admin-v2-project small,
.admin-v2 .cinema-preview-meta,
.admin-v2 .cinema-timeline-head p,
.admin-v2 .cinema-status span,
.admin-tool-head span,
.admin-tool-card small,
.admin-tool-form span,
.admin-tool-head p,
.admin-tool-card p,
.media-upload-card small,
.media-upload-card p,
.media-upload-card output,
.media-library-head small,
.media-library-head p,
.media-library-empty,
.media-asset-row span,
.default-style-row label span {
  color: var(--admin-muted);
}
.admin-lock-status,
.autosave-status {
  border: 2px solid var(--moja-ink);
  color: var(--moja-ink) !important;
  background: #fff;
  box-shadow: 3px 3px 0 rgba(0,174,239,0.28);
}
.autosave-status[data-state="dirty"],
.autosave-status[data-state="saving"] {
  color: var(--moja-ink);
  background: var(--moja-tano);
}
.autosave-status[data-state="saved"],
.admin-lock-status {
  color: var(--moja-ink) !important;
  background: color-mix(in srgb, #35d07f 26%, #fff);
}
.autosave-status[data-state="error"] {
  color: #fff;
  background: #ff3b3b;
}
.admin-v2-actions button,
.admin-v2-rail-head button,
.admin-v2-settings,
.admin-v2-nav button,
.admin-v2 .cinema-timeline-head button,
.admin-v2 .cinema-transport button,
.admin-v2 .ops-rail-toggle,
.media-upload-actions button {
  border: 2px solid var(--moja-ink);
  color: var(--moja-ink);
  background: #fff;
  box-shadow: 3px 3px 0 rgba(5,5,5,0.14);
}
.admin-v2-actions .primary,
.admin-v2-rail-head #newTitle,
.media-upload-actions button.primary {
  border-color: var(--moja-ink);
  color: #fff;
  background: var(--moja-flame);
  box-shadow: 4px 4px 0 var(--moja-ink);
}
.admin-v2-actions .exit-admin,
.admin-v2 .cinema-transport .test-player,
.admin-v2 .marker-button {
  color: var(--moja-ink);
  background: #fff;
}
.admin-v2-actions .exit-admin:hover,
.admin-v2 .cinema-transport .test-player:hover,
.admin-v2-nav button:hover,
.admin-v2-settings:hover {
  color: var(--moja-ink);
  background: color-mix(in srgb, var(--moja-saba) 12%, #fff);
}
.admin-v2-sidebar {
  border-right: 2px solid var(--moja-ink);
  background: rgba(255,255,255,0.96);
  box-shadow: 12px 0 32px rgba(5,5,5,0.06);
}
.admin-v2-project {
  border: 2px solid var(--moja-ink);
  color: var(--moja-ink);
  background: #fff;
  box-shadow: 4px 4px 0 rgba(0,174,239,0.55);
}
.admin-v2-project.active {
  border-color: var(--moja-ink);
  background:
    linear-gradient(135deg, rgba(255,210,26,0.52), rgba(255,255,255,0.86) 54%),
    #fff;
  box-shadow: 5px 5px 0 var(--moja-flame);
}
.admin-v2-nav {
  border-top-color: rgba(5,5,5,0.12);
}
.admin-v2-nav button,
.admin-v2-settings {
  color: rgba(5,5,5,0.7);
}
.admin-v2-nav button.active,
.admin-v2-settings.active {
  color: var(--moja-ink);
  background: var(--moja-tano);
  box-shadow: 3px 3px 0 var(--moja-flame);
}
.admin-v2-nav button.active::before,
.admin-v2-settings.active::before {
  background: var(--moja-saba);
  box-shadow: none;
}
.admin-v2-settings {
  border-top: 2px solid rgba(5,5,5,0.12);
}
.admin-v2-workspace {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.72), rgba(255,255,255,0.96)),
    radial-gradient(circle at 0% 18%, rgba(255,47,179,0.1), transparent 28%),
    radial-gradient(circle at 100% 72%, rgba(0,174,239,0.12), transparent 30%);
}
.admin-v2 .cinema-preview-meta,
.admin-v2 .cinema-transport,
.admin-v2 .cinema-timeline-panel,
.admin-v2 .cinema-panel,
.admin-v2 .admin-tool-panel,
.admin-tool-card,
.media-upload-card,
.media-library-card,
.media-asset-row,
.media-library-empty,
.title-admin-card,
.default-style-row {
  border: 2px solid var(--moja-ink);
  background: rgba(255,255,255,0.94);
  box-shadow: 6px 6px 0 rgba(0,174,239,0.18);
}
.admin-v2 .cinema-preview-meta {
  color: var(--admin-muted);
  background: var(--moja-tano);
}
.admin-v2 .cinema-monitor {
  border: 2px solid var(--moja-ink);
  background: #050505;
  box-shadow: 6px 6px 0 var(--moja-ink);
}
.admin-v2 .cinema-upload-drop {
  border: 2px dashed rgba(255,255,255,0.55);
  color: #fff;
  background: #050505;
}
.admin-v2 .cinema-upload-drop span,
.admin-v2 .cinema-monitor-hud span,
.admin-v2 .cinema-monitor-badge {
  color: rgba(255,255,255,0.7);
}
.admin-v2 .cinema-transport .play {
  color: #fff;
  background: var(--moja-flame);
}
.admin-v2 .hero-metric strong,
.admin-v2 .cinema-status em {
  color: #118d5a;
}
.admin-v2 .cinema-window-controls label,
.admin-tool-form input,
.admin-tool-form textarea,
.admin-tool-form select,
.category-row input,
.default-style-row textarea,
.media-file-picker,
.media-upload-card output,
.media-library-head > span {
  border: 2px solid rgba(5,5,5,0.16);
  color: var(--moja-ink);
  background: #fff;
}
.admin-v2 .cinema-window-controls span {
  color: var(--admin-muted);
}
.admin-v2 .cinema-window-controls output,
.admin-v2 .cinema-window-controls .crossfade-control input[type="text"] {
  color: var(--moja-ink);
}
.admin-v2 .cinema-window-controls .crossfade-control input[type="text"] {
  background: #fff;
}
.admin-v2 .cinema-ruler {
  border: 2px solid var(--moja-ink);
  box-shadow: 4px 4px 0 rgba(255,47,179,0.32);
}
.admin-v2 .cinema-timeline-head {
  align-items: center;
}
.admin-v2 .cinema-timeline-actions {
  flex-wrap: nowrap;
  min-width: max-content;
}
.admin-v2 .cinema-timeline-actions button,
.admin-v2 .timeline-autosave-status {
  min-height: 36px;
  white-space: nowrap;
}
.admin-v2 .start-window-add {
  color: var(--moja-ink);
  background: color-mix(in srgb, var(--moja-tano) 36%, #fff);
}
.admin-v2 .start-window-add:disabled {
  color: rgba(5,5,5,0.42);
  border-color: rgba(5,5,5,0.16);
  background: #fff;
  box-shadow: none;
}
.admin-v2 .cinema-cue.selected {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--moja-flame), 0 18px 34px rgba(0,0,0,0.35);
}
.admin-tool-card.timeline-color-0 { border-color: var(--moja-ink); background: color-mix(in srgb, var(--moja-flame) 18%, #fff); }
.admin-tool-card.timeline-color-1 { border-color: var(--moja-ink); background: color-mix(in srgb, var(--moja-saba) 16%, #fff); }
.admin-tool-card.timeline-color-2 { border-color: var(--moja-ink); background: color-mix(in srgb, #35d07f 15%, #fff); }
.admin-tool-card.timeline-color-3 { border-color: var(--moja-ink); background: color-mix(in srgb, var(--moja-tano) 24%, #fff); }
.empty-admin-state.small,
.admin-v2-empty-list {
  border: 2px dashed rgba(5,5,5,0.2);
  color: var(--admin-muted);
  background: rgba(255,255,255,0.78);
}
.admin-v2-empty-list strong {
  color: var(--moja-ink);
}
.title-admin-card {
  color: var(--moja-ink);
}
.title-admin-card.active {
  border-color: var(--moja-ink);
  background: color-mix(in srgb, var(--moja-tano) 28%, #fff);
  box-shadow: 5px 5px 0 var(--moja-flame);
}

@media (max-width: 1040px), (pointer: coarse) {
  .cinema-admin,
  .admin-v2 { display: none; }
  .admin-mobile-block {
    min-height: 100vh;
    display: grid;
    place-content: center;
    gap: 12px;
    padding: 28px;
    text-align: center;
  }
}