/* VMF patch: system font fallback */
:root,
body,
button,
input,
textarea,
select {
  font-family: "SF Pro Display", Arial, sans-serif !important;
}

:root {
  color-scheme: light;
  --bg: #f7f7f8;
  --bg-2: #fafafa;
  --surface: rgba(255, 255, 255, .9);
  --surface-raised: rgba(255, 255, 255, .98);
  --line: rgba(17, 24, 39, .08);
  --line-2: rgba(17, 24, 39, .12);
  --text: #111827;
  --muted: #6b7280;
  --muted-2: #9ca3af;
  --green: #16a34a;
  --blue: #ef4444;
  --purple: #dc2626;
  --radius-xl: 18px;
  --radius-2xl: 22px;
  --shadow-lg: 0 20px 50px rgba(17, 24, 39, .10);
  --shadow-md: 0 14px 34px rgba(17, 24, 39, .08);
  --shadow-sm: 0 8px 22px rgba(17, 24, 39, .06);
}

@font-face {
  font-family: "Bebas Neue";
  src:
    local("Bebas Neue"),
    local("Bebas Neue Regular"),
    url("/font-assets/fonts/BebasNeue-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Coolvetica";
  src: url("/font-assets/fonts/Coolvetica%20Rg.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Burbank Big Black";
  src:
    local("Burbank Big Black"),
    local("BurbankBigRegular-Black"),
    url("/font-assets/fonts/BurbankBigRegular-Black.otf?v=20260726-font-library-1") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "Komika Axis";
  src:
    local("Komika Axis"),
    local("KOMIKAX"),
    url("/font-assets/fonts/KOMIKAX.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "TikTok Display";
  src:
    local("TikTok Display Medium"),
    local("TikTokDisplayMedium"),
    url("/font-assets/fonts/TikTokDisplayMedium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Made Tommy";
  src:
    local("MADE TOMMY Bold"),
    local("MADE TOMMY"),
    url("/font-assets/fonts/MADE%20TOMMY%20Bold_PERSONAL%20USE.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Lemon Milk";
  src:
    local("LEMON MILK Bold"),
    local("LEMONMILK-Bold"),
    url("/font-assets/fonts/LEMONMILK-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Arial Uploaded";
  src:
    local("Arial"),
    local("Arial Narrow"),
    local("ArialNarrow"),
    url("/font-assets/fonts/ARIALN.TTF") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin: 0;
  border: 1.5px solid #cbd5e1;
  border-radius: 5px;
  background: #ffffff;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 11px 11px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .06);
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

input[type="checkbox"]:hover:not(:disabled) {
  border-color: #93a4bd;
  box-shadow: 0 2px 5px rgba(15, 23, 42, .12);
}

input[type="checkbox"]:checked {
  border-color: #2563eb;
  background-color: #2563eb;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25'/%3E%3C/svg%3E");
  box-shadow: 0 2px 5px rgba(37, 99, 235, .28);
}

input[type="checkbox"]:focus-visible {
  outline: 3px solid rgba(37, 99, 235, .22);
  outline-offset: 2px;
}

input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 1;
  border-color: #d7deea;
  background-color: #f1f5f9;
  box-shadow: none;
}

input[type="checkbox"]:disabled:checked {
  border-color: #7aa2f7;
  background-color: #7aa2f7;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3 8 3 3 7-7' fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.25'/%3E%3C/svg%3E");
}

html, body { min-height: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(1500px 820px at 50% -220px, rgba(249, 115, 22, .26), transparent 72%),
    radial-gradient(1200px 560px at 18% -160px, rgba(251, 146, 60, .16), transparent 68%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
  color: var(--text);
  font-family: "SF Pro Display", Arial, sans-serif;
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
}
body::before {
  content: "";
  position: fixed;
  inset: 0 auto 0 0;
  width: 244px;
  background: rgba(249, 250, 251, .82);
  pointer-events: none;
  z-index: 0;
}
button, input, select, textarea {
  font: inherit;
  font-synthesis: none;
  letter-spacing: 0;
}
button { cursor: pointer; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a, button, input, select { transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.app-header {
  height: 68px;
  position: relative;
  z-index: 20;
  overflow: visible;
  border-bottom: 1px solid rgba(17, 24, 39, .08);
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 32px;
}
.welcome-message {
  display: none;
}
.header-user {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-self: end;
  position: relative;
  overflow: visible;
}
.signed-in-as {
  color: var(--muted);
  font-size: 13px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text);
  background: transparent;
  border: 0;
  font-weight: 800;
  font-size: 19px;
  position: relative;
  z-index: 2;
}
.brand-mark {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: #fff;
  background:
    radial-gradient(12px 12px at 28% 26%, rgba(255,255,255,.95), rgba(255,255,255,.55)),
    linear-gradient(135deg, #ef4444, #dc2626);
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(239, 68, 68, .22);
}
.view-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-self: center;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  border: 1px solid rgba(17, 24, 39, .08);
  box-shadow: 0 10px 24px rgba(17, 24, 39, .04);
}
.view-tab {
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--muted);
  background: transparent;
}
.view-tab.active {
  color: #b91c1c;
  background: #fff5f5;
  border-color: rgba(239, 68, 68, .14);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .08);
}
.view-tab span { color: var(--muted); margin-left: 4px; }

.auth-view {
  width: min(1320px, calc(100% - 32px));
  margin: 0 auto;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
  padding: 24px 24px 56px;
}
.auth-page {
  min-height: 100vh;
  background: #fff;
  display: grid;
  place-items: center;
  padding: 28px 16px;
}
.auth-reset-page {
  width: min(560px, 100%);
}
.reset-dialog {
  width: 100%;
}
.landing-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1120px, 100%);
  min-height: 56px;
}
.landing-auth-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.landing-signin {
  border: 0;
  background: transparent;
  color: #5f6673;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: 999px;
}
.create-blank-button {
  margin-top: 12px;
  justify-self: center;
}
.landing-signin:hover,
.landing-signin:focus-visible {
  color: #b91c1c;
  background: rgba(255, 255, 255, .6);
}
.landing-create-account {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(110deg, #ff981b 0%, #ff6517 48%, #ff4316 100%);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 12px 26px rgba(220, 74, 26, .18);
}
.landing-create-account:hover,
.landing-create-account:focus-visible {
  background: linear-gradient(110deg, #ffab28 0%, #ff701b 48%, #ff511b 100%);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(220, 74, 26, .22);
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.hero-cta {
  min-width: 196px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: #e14f1e;
  color: #fff;
  font-weight: 750;
  box-shadow: 0 16px 34px rgba(225, 79, 30, .18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-cta:hover,
.hero-cta:focus-visible {
  background: #e14f1e;
  box-shadow: 0 16px 34px rgba(225, 79, 30, .18);
  transform: none;
}
.hero-cta.hero-primary {
  background: #e14f1e;
  background-image: none;
}
.hero-cta.hero-primary:hover,
.hero-cta.hero-primary:focus-visible {
  background: #e14f1e;
  background-image: none;
}
.hero-cta::after {
  content: "";
  position: absolute;
  inset: -35% -48%;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, .58) 48%, rgba(255, 255, 255, .24) 54%, transparent 68%);
  transform: translateX(-140%) skewX(-18deg);
  opacity: .55;
  pointer-events: none;
  animation: heroSweepLoop 4.25s linear infinite;
}
.hero-cta:hover::after,
.hero-cta:focus-visible::after {
  opacity: .55;
  animation-duration: 4.25s;
}
.hero-cta-arrow {
  display: inline-block;
  font-size: 1.2em;
  font-weight: 900;
  line-height: 1;
  transform: translateX(0);
  transition: transform .18s ease;
}
.hero-cta:hover .hero-cta-arrow,
.hero-cta:focus-visible .hero-cta-arrow {
  transform: translateX(4px);
  animation: heroArrowNudge .9s ease-in-out infinite;
}
.hero-showcase {
  display: none;
}
.showcase-card {
  min-height: 360px;
  border: 1px solid var(--line);
  border-radius: 26px;
  background:
    radial-gradient(1200px 440px at 50% 18%, rgba(239, 68, 68, .10), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, #f7f7f8 100%);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.showcase-left {
  background:
    radial-gradient(900px 360px at 55% 40%, rgba(239, 68, 68, .10), transparent 50%),
    linear-gradient(180deg, #fff 0%, #f4f4f5 100%);
}
.showcase-right {
  background:
    radial-gradient(820px 320px at 50% 30%, rgba(239, 68, 68, .08), transparent 55%),
    linear-gradient(180deg, #fff 0%, #fafafa 100%);
}
.profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  width: max-content;
  min-width: 204px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px 6px 12px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 8px 18px rgba(17, 24, 39, .04);
  min-height: 42px;
}
.profile-avatar {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border-radius: 50%;
  overflow: hidden;
  background: #e5e7eb;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar.initials {
  background: linear-gradient(135deg, #dc2626, #b91c1c);
}
.profile-chip .signed-in-as {
  display: inline-block;
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-weight: 650;
  font-size: 14px;
  line-height: 1;
  order: 2;
}
.profile-caret {
  width: 18px;
  height: 18px;
  color: var(--muted);
  flex: 0 0 auto;
  margin-left: 0;
  order: 1;
}
.profile-chip .profile-avatar {
  order: 3;
}
.profile-menu {
  position: fixed;
  top: 0;
  left: 0;
  min-width: 260px;
  padding: 8px;
  border: 1px solid rgba(17, 24, 39, .10);
  border-radius: 20px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 18px 45px rgba(17, 24, 39, .12);
  display: grid;
  gap: 4px;
  z-index: 100;
  pointer-events: auto;
}
.profile-menu button {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  font-size: 15px;
  text-align: left;
}
.profile-menu button:hover,
.profile-menu button:focus-visible {
  background: rgba(239, 68, 68, .08);
  outline: none;
}
.profile-menu .danger {
  color: #b91c1c;
}
.profile-menu .danger:hover,
.profile-menu .danger:focus-visible {
  background: rgba(239, 68, 68, .12);
}
.auth-hero {
  width: min(880px, 100%);
  margin: auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 24px 0 10px;
  text-align: center;
}
.auth-hero h1 {
  margin: 0;
  font-family: "SF Pro Display", Arial, sans-serif;
  font-size: clamp(40px, 5.1vw, 62px);
  line-height: .98;
  max-width: 720px;
  letter-spacing: -.01em;
  text-wrap: balance;
  font-weight: 700;
  text-transform: none;
}
.hero-copy {
  margin: 0;
  font-family: "SF Pro Display", Arial, sans-serif;
  max-width: 700px;
  color: #7d8490;
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.55;
  font-weight: 400;
  opacity: .78;
}
.hero-copy-secondary {
  display: block;
}
.hero-link-bar {
  width: min(640px, 100%);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .08);
  box-shadow: 0 14px 30px rgba(17, 24, 39, .08);
}
.hero-file-trigger {
  width: auto;
  height: auto;
  padding: 0 2px 0 2px;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: #5f6673;
  background: transparent;
  cursor: pointer;
}
.hero-upload-icon {
  width: 14px;
  height: 14px;
  display: block;
  position: relative;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat;
}
.hero-upload-icon::before {
  content: none;
}
.hero-link-field {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  min-height: 48px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .03);
}
.hero-link-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
}
.hero-link-field input::placeholder {
  color: var(--muted);
}
.hero-link-button {
  min-width: 136px;
  min-height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff8a2a 0%, #f97316 46%, #ea580c 100%);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  box-shadow: 0 10px 20px rgba(249, 115, 22, .24);
}
.hero-link-button:hover,
.hero-link-button:focus-visible {
  background: linear-gradient(135deg, #ff973e 0%, #fb923c 48%, #ea580c 100%);
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(249, 115, 22, .28);
}
.hero-link-button-icon {
  font-size: 1.05em;
  line-height: 1;
}
.hero-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.trust-avatars {
  display: flex;
  align-items: center;
}
.trust-avatar {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  margin-left: -8px;
  border-radius: 50%;
  overflow: hidden;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}
.trust-avatar:first-child {
  margin-left: 0;
}
.trust-avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.hero-trust p {
  margin: 0;
  color: #5f6471;
}
.auth-hero > * {
  position: relative;
}

.landing-pricing {
  width: min(1180px, 100%);
  margin: 70px auto 0;
  padding: 0 24px;
}
.landing-pricing-heading {
  max-width: 680px;
  margin: 0 auto 34px;
  text-align: center;
}
.landing-section-kicker {
  color: #e85d17;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}
.landing-pricing-heading h2 {
  margin: 10px 0 12px;
  color: var(--text);
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.05;
  font-weight: 700;
}
.landing-pricing-heading p {
  margin: 0;
  color: #737b89;
  font-size: 15px;
  line-height: 1.55;
}
.landing-pricing-toggle {
  display: inline-flex;
  gap: 3px;
  margin-top: 20px;
  padding: 3px;
  border: 1px solid rgba(17, 24, 39, .12);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .05);
}
.landing-pricing-period {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #697384;
  font-size: 12px;
  font-weight: 750;
}
.landing-pricing-period span {
  margin-left: 3px;
  color: #1d9b58;
}
.landing-pricing-period.active {
  background: #f97316;
  color: #fff;
  box-shadow: 0 4px 10px rgba(249, 115, 22, .22);
}
.landing-pricing-period.active span {
  color: #fff;
}
.landing-pricing-period:focus-visible {
  outline: 2px solid #222c3d;
  outline-offset: 2px;
}
.landing-pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
body.free-plan-enabled .landing-pricing-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1050px) {
  .landing-pricing-grid,
  body.free-plan-enabled .landing-pricing-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.landing-plan-card {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 24px 20px 22px;
  border: 1px solid rgba(17, 24, 39, .1);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 26px rgba(17, 24, 39, .05);
}
.landing-plan-card-featured {
  border: 2px solid #ff7417;
  box-shadow: 0 16px 32px rgba(249, 115, 22, .16);
}
.landing-plan-badge {
  position: absolute;
  top: -12px;
  left: 18px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #f97316;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}
.landing-plan-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.2;
}
.landing-plan-head p {
  min-height: 38px;
  margin: 7px 0 0;
  color: #737b89;
  font-size: 13px;
  line-height: 1.45;
}
.landing-plan-price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin: 22px 0 18px;
  color: #77808f;
}
.landing-plan-price strong {
  color: var(--text);
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
}
.landing-plan-price span {
  font-size: 12px;
  font-weight: 600;
}
.landing-plan-action {
  min-height: 44px;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #f97316;
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  box-shadow: 0 8px 17px rgba(249, 115, 22, .2);
}
.landing-plan-action:hover,
.landing-plan-action:focus-visible {
  background: #ea580c;
  box-shadow: 0 10px 20px rgba(234, 88, 12, .25);
  transform: translateY(-1px);
}
.landing-plan-action-secondary {
  border: 1px solid rgba(17, 24, 39, .13);
  background: #fff;
  color: #293242;
  box-shadow: none;
}
.landing-plan-action-secondary:hover,
.landing-plan-action-secondary:focus-visible {
  border-color: #f97316;
  background: #fff7ed;
  color: #c2410c;
  box-shadow: none;
}
.landing-plan-features {
  display: grid;
  gap: 12px;
  margin: 21px 0 0;
  padding: 0;
  color: #596274;
  font-size: 13px;
  line-height: 1.35;
  list-style: none;
}
.landing-plan-features li {
  position: relative;
  padding-left: 21px;
}
.landing-plan-features li::before {
  content: "";
  position: absolute;
  top: .45em;
  left: 1px;
  width: 8px;
  height: 5px;
  border-bottom: 2px solid #22a25d;
  border-left: 2px solid #22a25d;
  transform: rotate(-45deg);
}
.landing-plan-features strong {
  color: #222c3d;
}
.landing-pricing-note {
  margin: 20px 0 0;
  color: #7b8491;
  font-size: 12px;
  text-align: center;
}

.landing-faq {
  width: min(980px, 100%);
  margin: 64px auto 0;
  padding: 8px 24px 96px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.landing-faq-inner {
  width: min(820px, 100%);
  margin: 0 auto;
  text-align: center;
}
.landing-faq h2 {
  margin: 0 0 30px;
  color: var(--text);
  font-family: "SF Pro Display", Arial, sans-serif;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1;
  letter-spacing: -.02em;
  font-weight: 700;
}
.faq-list {
  display: grid;
  gap: 14px;
  text-align: left;
}
.faq-item {
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 18px;
  background: rgba(255, 255, 255, .92);
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(17, 24, 39, .04);
}
.faq-item[open] {
  background: #fff;
  border-color: rgba(17, 24, 39, .12);
}
.faq-item summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  cursor: pointer;
  color: var(--text);
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  display: grid;
  place-items: center;
  color: var(--muted);
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
  transition: transform .18s ease, opacity .18s ease, color .18s ease;
}
.faq-item[open] summary::after {
  transform: rotate(225deg);
  color: var(--text);
  opacity: .82;
}
.faq-item p {
  margin: 0;
  padding: 0 22px 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.75;
  max-width: 72ch;
}

@keyframes heroArrowNudge {
  0%, 100% { transform: translateX(4px); }
  50% { transform: translateX(8px); }
}

@keyframes heroSweepLoop {
  0%, 55% {
    transform: translateX(-140%) skewX(-18deg);
    opacity: 0;
  }
  62% {
    opacity: .56;
  }
  82% {
    transform: translateX(140%) skewX(-18deg);
    opacity: .44;
  }
  100% {
    transform: translateX(140%) skewX(-18deg);
    opacity: 0;
  }
}

@keyframes heroSweep {
  0% {
    transform: translateX(-120%) skewX(-18deg);
  }
  100% {
    transform: translateX(120%) skewX(-18deg);
  }
}
.auth-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.auth-modal .auth-dialog {
  width: min(560px, 100%);
}
.auth-modal .feedback-head {
  position: relative;
  justify-content: center;
  text-align: center;
  margin-bottom: 16px;
  padding-right: 42px;
}
.auth-head-copy {
  display: grid;
  gap: 6px;
  justify-items: center;
}
.auth-modal .feedback-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.03em;
}
.auth-modal .feedback-head p {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--muted);
}

/* Keep the add-streamer heading visually centered without moving its close control. */
#collectionModal .feedback-head {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 46px;
  text-align: center;
}
#collectionModal .feedback-head > div:first-child {
  width: 100%;
}
#collectionModal .feedback-head .icon-close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.auth-actions {
  display: grid;
  gap: 14px;
}
.google-button {
  min-height: 46px;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  background: #fff;
}
.google-mark {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
  border-radius: 0;
  background: transparent;
}
.google-mark img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.auth-inline-form {
  display: grid;
  gap: 12px;
}
.auth-inline-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.auth-inline-form input {
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 0 12px;
  font-weight: 400;
}
.auth-inline-form input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}
.auth-policy-acceptance {
  display: flex !important;
  align-items: flex-start;
  gap: 9px;
  color: #626b7b !important;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.45;
}
.auth-policy-acceptance input {
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: #ef5b1c;
}
.auth-policy-acceptance a { color: #ca4d15; }
.policy-acceptance-modal { z-index: 140; background: rgba(17, 24, 39, .48); }
.policy-acceptance-dialog {
  width: min(500px, 100%);
  max-width: 500px;
  padding: 28px;
  border: 1px solid #e7e8ec;
  border-radius: 16px;
  box-shadow: 0 28px 70px rgba(15, 23, 42, .24);
}
.policy-acceptance-header {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  margin-bottom: 22px;
}
.policy-acceptance-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 11px;
  background: #fff4ec;
}
.policy-acceptance-mark img { width: 32px; height: 32px; object-fit: contain; }
.policy-acceptance-kicker { margin: 1px 0 4px; color: #e5571b; font-size: 10px; font-weight: 800; letter-spacing: .09em; }
.policy-acceptance-header h2 { margin: 0; color: #172033; font-size: 22px; line-height: 1.2; letter-spacing: 0; }
.policy-acceptance-header > div > p:last-child { margin: 5px 0 0; color: #697386; font-size: 13px; line-height: 1.45; }
.policy-acceptance-dialog .auth-actions { gap: 12px; }
.policy-document-links { display: grid; gap: 8px; }
.policy-document-links a {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 13px;
  border: 1px solid #e7e9ee;
  border-radius: 8px;
  color: #283346;
  background: #fff;
  text-decoration: none;
}
.policy-document-links a > span:first-child { display: grid; gap: 1px; min-width: 0; }
.policy-document-links strong { font-size: 13px; line-height: 1.2; }
.policy-document-links small { color: #7b8494; font-size: 11px; line-height: 1.25; }
.policy-link-arrow { flex: none; color: #9ca3af; font-size: 18px; font-weight: 600; }
.policy-document-links a:hover,
.policy-document-links a:focus-visible { border-color: #ff9a62; background: #fffaf7; color: #d85216; outline: none; }
.policy-document-links a:hover .policy-link-arrow,
.policy-document-links a:focus-visible .policy-link-arrow { color: #e5571b; }
.policy-modal-check {
  min-height: 44px;
  margin-top: 2px;
  padding: 10px 12px;
  border: 1px solid #edf0f3;
  border-radius: 8px;
  background: #f8fafc;
  color: #566174 !important;
}
.policy-modal-check input { margin-top: 1px; }
.policy-acceptance-button {
  min-height: 46px;
  border: 0;
  border-radius: 8px;
  background: #f45d17;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  box-shadow: 0 12px 24px rgba(235, 89, 23, .2);
}
.policy-acceptance-button span { margin-left: 7px; font-size: 17px; line-height: 0; }
.policy-acceptance-button:hover,
.policy-acceptance-button:focus-visible { background: #e65412; box-shadow: 0 14px 26px rgba(235, 89, 23, .26); outline: none; }
.policy-acceptance-button:disabled { cursor: wait; opacity: .7; }
@media (max-width: 480px) {
  .policy-acceptance-dialog { padding: 22px 18px; border-radius: 12px; }
  .policy-document-links small { display: none; }
  .policy-document-links a { min-height: 48px; }
}
.landing-legal-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  padding: 26px 20px 34px;
  color: #747c89;
  font-size: 13px;
}
.landing-legal-footer a { color: inherit; font-weight: 650; text-decoration: none; }
.landing-legal-footer a:hover,
.landing-legal-footer a:focus-visible { color: #d85216; text-decoration: underline; }
.auth-inline-form select,
.favorite-form select {
  appearance: none;
  -webkit-appearance: none;
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .96)),
    #fff;
  color: var(--text);
  padding: 0 40px 0 12px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02);
}
.auth-inline-form select {
  background-image:
    linear-gradient(45deg, transparent 50%, #9ea3b3 50%),
    linear-gradient(135deg, #9ea3b3 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.auth-inline-select {
  position: relative;
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.auth-inline-select-label { line-height: 1; }
.auth-inline-select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  opacity: 0;
  pointer-events: none;
}
.auth-inline-select-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  text-align: left;
  box-shadow: 0 1px 0 rgba(17, 24, 39, .02);
}
.auth-inline-select-trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: #8d96a5;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.auth-inline-select.is-open .auth-inline-select-trigger {
  border-color: #ff9e54;
  box-shadow: 0 0 0 3px rgba(255, 105, 0, .12);
}
.auth-inline-select.is-open .auth-inline-select-trigger svg { transform: rotate(180deg); }
.auth-inline-select-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(17, 24, 39, .10);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(17, 24, 39, .14);
}
.auth-inline-select-menu[hidden] { display: none !important; }
.auth-inline-select-menu button {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  text-align: left;
}
.auth-inline-select-menu button:hover,
.auth-inline-select-menu button:focus-visible,
.auth-inline-select-menu button[aria-selected="true"] {
  background: var(--orange-accent-soft, #fff0e2);
  color: #d85b00;
  outline: none;
}

/* Platform choices stay neutral; orange is reserved for the active outline/CTA. */
#favoritePlatformMenu.auth-inline-select-menu {
  gap: 5px;
  padding: 7px;
  border-color: rgba(249, 115, 22, .24);
  background: #fffaf7;
  box-shadow: 0 16px 30px rgba(234, 88, 12, .16);
}
#favoritePlatformMenu.auth-inline-select-menu > button {
  min-height: 42px;
  border: 1px solid #f1ddd0;
  border-radius: 9px;
  background: #fff;
  color: #3b2a21;
}
#favoritePlatformMenu.auth-inline-select-menu > button:hover,
#favoritePlatformMenu.auth-inline-select-menu > button:focus-visible,
#favoritePlatformMenu.auth-inline-select-menu > button[aria-selected="true"] {
  border-color: #ff9a55;
  background: #fff;
  color: #c2410c;
  box-shadow: inset 3px 0 0 #ff6b11;
}
.auth-inline-form button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(110deg, #ff981b 0%, #ff6517 48%, #ff4316 100%);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 12px 24px rgba(220, 74, 26, .18);
}
.auth-inline-form button:hover,
.auth-inline-form button:focus-visible {
  background: linear-gradient(110deg, #ffab28 0%, #ff701b 48%, #ff511b 100%);
  box-shadow: 0 14px 28px rgba(220, 74, 26, .22);
}
.auth-form-error {
  min-height: 18px;
  margin: 2px 4px 0;
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
}
.auth-switch {
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}
.auth-switch button {
  border: 0;
  background: transparent;
  color: #d74717;
  font-weight: 650;
  padding: 0;
}
.auth-close {
  position: absolute;
  right: 0;
  top: 0;
}
.auth-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  padding: 22px;
  display: grid;
  gap: 14px;
  box-shadow: var(--shadow-sm);
}
.auth-card h2 { margin: 0; font-size: 20px; }
.auth-card label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
}
.auth-card input {
  height: 44px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 0 12px;
}
.auth-card button {
  min-height: 44px;
  border: 0;
  border-radius: 8px;
  background: #f5f5f6;
  color: #111216;
  font-weight: 750;
}

.app-shell {
  width: 100%;
  margin: 0;
  position: relative;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
  gap: 18px;
  align-items: start;
  padding: 20px 24px 36px;
}
.app-shell::before {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  left: 244px;
  width: 1px;
  background: rgba(17, 24, 39, .08);
  pointer-events: none;
  z-index: 30;
}
.app-sidebar {
  position: fixed;
  top: 68px;
  left: 0;
  width: 244px;
  bottom: 0;
  border-right: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 18px 14px 24px;
  display: block;
  min-height: calc(100vh - 68px);
  overflow-y: auto;
}
.sidebar-nav {
  display: grid;
  gap: 4px;
  align-content: start;
}
.sidebar-link {
  width: 100%;
  height: 42px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: #6b7280;
  font-weight: 550;
  font-size: 16px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  text-align: left;
  padding: 0 9px;
  line-height: 1;
}
.sidebar-link-icon {
  width: 19px;
  height: 19px;
  color: #7b808b;
  justify-self: center;
  display: grid;
  place-items: center;
}
.sidebar-link-icon svg {
  width: 19px;
  height: 19px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sidebar-link:first-child .sidebar-link-icon svg {
  fill: currentColor;
  stroke: none;
}
.sidebar-link:hover,
.sidebar-link:focus-visible {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(17, 24, 39, .08);
  color: #111827;
  box-shadow: none;
}
.sidebar-link.active {
  background: rgba(255, 255, 255, .62);
  border-color: rgba(17, 24, 39, .10);
  color: #111827;
  box-shadow: none;
}
.sidebar-link.active .sidebar-link-icon {
  color: #111827;
}
.sidebar-link:focus-visible,
.view-tab:focus-visible {
  outline: none;
  box-shadow: none;
}
.app-content {
  min-width: 0;
  grid-column: 2;
}

.create-view {
  position: relative;
  min-height: auto;
  display: grid;
  align-items: start;
  justify-items: center;
  padding: 56px 24px 22px;
}
.create-shell {
  width: min(860px, 100%);
  display: block;
  position: relative;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.create-hero-copy {
  display: grid;
  justify-items: center;
  gap: 16px;
  margin: 0 auto 30px;
  text-align: center;
}
.create-hero-copy h1 {
  margin: 0;
  font-family: "SF Pro Display", Arial, sans-serif;
  color: var(--text);
  font-size: clamp(54px, 6.2vw, 74px);
  line-height: 0.98;
  font-weight: 700;
  letter-spacing: 0;
}
.create-hero-copy p {
  margin: 0;
  color: #8a93a3;
  font-size: clamp(16px, 1.7vw, 22px);
  line-height: 1.45;
}
.first-project-guide {
  width: min(620px, 100%);
  margin: -10px auto 18px;
}
.first-project-guide-action {
  width: 100%;
  min-height: 74px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 28px;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(225, 79, 30, .22);
  border-radius: 8px;
  background: linear-gradient(112deg, #fff2e8 0%, #fff9f4 48%, #ffffff 100%);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(225, 79, 30, .08);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.first-project-guide-action:hover,
.first-project-guide-action:focus-visible {
  border-color: rgba(225, 79, 30, .5);
  box-shadow: 0 14px 28px rgba(225, 79, 30, .13);
  outline: none;
  transform: translateY(-1px);
}
.first-project-guide-step {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border-radius: 50%;
  background: #ff5a1f;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}
.first-project-guide-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.first-project-guide-copy strong {
  font-size: 14px;
  line-height: 1.2;
}
.first-project-guide-copy small {
  color: #697386;
  font-size: 12px;
  line-height: 1.35;
}
.first-project-guide-arrow {
  color: #e14f1e;
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  animation: first-project-arrow 1.4s ease-in-out infinite;
}
@keyframes first-project-arrow {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(3px); }
}
.create-copy {
  max-width: none;
  min-width: 0;
  padding: 0 8px 0 20px;
  align-self: center;
  display: grid;
  gap: 14px;
}
.create-headline {
  margin: 8px 0 16px;
  font-family: inherit;
  font-weight: 800;
  font-size: clamp(34px, 3.1vw, 58px);
  line-height: 1.03;
  letter-spacing: 0;
  max-width: 18ch;
}
.create-subtitle {
  margin: 0;
  font-family: inherit;
  color: #6c7280;
  font-size: 18px;
  line-height: 1.55;
  max-width: 52ch;
}
.create-submit {
  width: fit-content;
  min-height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 999px;
  background: #e14f1e;
  background-image: none;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  box-shadow: 0 16px 32px rgba(225, 79, 30, .18);
}
.create-submit:hover,
.create-submit:focus-visible {
  background: #ec6135;
  background-image: none;
  box-shadow: 0 18px 36px rgba(225, 79, 30, .22);
  transform: translateY(-1px);
}
.source-card {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  backdrop-filter: none;
  display: grid;
  gap: 12px;
  z-index: 1;
  box-shadow: none;
}
.source-link-list {
  display: grid;
  gap: 12px;
  margin-top: 0;
  margin-bottom: 8px;
}
.source-card.busy::before {
  content: none;
}
.source-card.busy::after {
  content: none;
}
@keyframes trace { to { transform: rotate(360deg); } }
.source-card.dragging { background: transparent; }
.url-field {
  min-height: 52px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 0 15px;
  gap: 12px;
}
.url-field:focus-within { border-color: rgba(239,68,68,.55); box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.source-link-row {
  position: relative;
}
.source-link-row.has-remove {
  padding-right: 54px;
}
.source-link-row.file-selected .source-url-input {
  display: none;
}
.source-link-row.file-selected .source-link-file-name {
  display: inline-flex;
}
.source-link-remove {
  position: absolute;
  top: 50%;
  right: 14px;
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(17, 24, 39, .05);
  color: #7c8494;
  font-size: 16px;
  line-height: 1;
  transform: translateY(-50%);
}
.source-link-remove:hover,
.source-link-remove:focus-visible {
  background: rgba(239, 68, 68, .10);
  color: #b91c1c;
  outline: none;
}
.add-link-zone {
  display: grid;
  justify-items: center;
  gap: 8px;
}
.add-link-button {
  border: 0;
  background: transparent;
  color: #a3a9b5;
  font-size: 13px;
  font-weight: 500;
  padding: 0 2px;
  text-align: center;
}
.add-link-button:hover,
.add-link-button:focus-visible {
  color: #7c8494;
  outline: none;
}
.url-field-preview {
  width: 100%;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  color: var(--muted-2);
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.url-preview-text {
  color: var(--muted-2);
  font-size: 14px;
}
.link-glyph-preview {
  color: #c0c6d2;
}
.add-link-zone:hover .url-field-preview,
.add-link-zone:focus-within .url-field-preview {
  opacity: .96;
  transform: translateY(0);
  pointer-events: auto;
}
.add-link-zone.at-limit .url-field-preview,
.add-link-zone.file-mode .url-field-preview {
  display: none;
}
.source-link-file-name {
  min-width: 0;
  flex: 1;
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.link-glyph {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted-2);
  font-weight: 700;
  font-size: 20px;
}
.url-field input {
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  color: var(--text);
  background: transparent;
  font-size: 14px;
}
.url-field input::placeholder { color: var(--muted-2); }
.source-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 20px;
}
.text-action {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}
.text-action:first-child::before { content: "\2191"; margin-right: 9px; }
.text-action.unavailable { color: #c4c9d4; cursor: default; }
.text-action input { display: none; }
.selected-source {
  min-width: 0;
  margin-left: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.generation-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  border-top: 0;
  padding-top: 0;
  margin-top: 8px;
}

@media (max-width: 1100px) {
  .create-shell {
    max-width: 760px;
    padding: 0;
  }
  .create-copy {
    max-width: none;
    padding: 10px 6px 0;
  }
  .create-headline {
    max-width: 100%;
    font-size: clamp(30px, 7vw, 52px);
  }
  .create-submit {
    width: 100%;
    justify-self: stretch;
  }
}
.generation-options label {
  display: grid;
  gap: 8px;
  color: #5f6673;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
}
.field-label-with-help {
  display: inline-block;
  cursor: help;
}
.generation-options select {
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
}
.generation-options input {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
}
.local-model-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 10px;
  font-size: 12px;
  color: var(--muted);
  background: #fff;
}
.local-model-note {
  margin: -4px 2px 2px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
.local-model-status.is-error {
  border-color: rgba(185, 28, 28, .35);
  color: #991b1b;
}
.preset-picker {
  display: grid;
  grid-template-columns: repeat(3, 232px);
  gap: 8px;
  justify-content: center;
  justify-items: center;
  align-items: center;
}
.preset-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 86px;
  width: 232px;
  min-width: 232px;
  max-width: 232px;
  padding: 0 14px;
  border: 2px solid rgba(255, 255, 255, .88);
  border-radius: 14px;
  background: linear-gradient(180deg, #3b3d43 0%, #2f3138 100%);
  color: #fff;
  font-size: 34px;
  font-weight: 700;
  line-height: .82;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
  text-transform: none;
  box-shadow: 0 10px 20px rgba(17, 24, 39, .22);
}
.preset-chip:hover,
.preset-chip:focus-visible {
  border-color: rgba(255, 255, 255, .94);
  background: linear-gradient(180deg, #3f4148 0%, #32353d 100%);
  color: #fff;
  outline: none;
}
.preset-chip.active {
  border-color: rgba(255, 255, 255, .94);
  background: linear-gradient(180deg, #3f4148 0%, #32353d 100%);
  color: #fff;
  box-shadow:
    0 0 0 3px rgba(249, 115, 22, .88),
    0 10px 20px rgba(17, 24, 39, .22);
}
.preset-chip-viral {
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  height: 86px !important;
  font-family: "Bebas Neue", sans-serif !important;
  font-weight: 400;
  font-size: 32px;
  line-height: .9;
  letter-spacing: .01em;
  white-space: nowrap;
  color: #fff;
  -webkit-text-stroke: 0;
  text-shadow:
    -2px -2px 0 #05070b,
    0 -2px 0 #05070b,
    2px -2px 0 #05070b,
    -2px 0 0 #05070b,
    2px 0 0 #05070b,
    -2px 2px 0 #05070b,
    0 2px 0 #05070b,
    2px 2px 0 #05070b,
    0 3px 0 rgba(17, 24, 39, .35);
}
.preset-chip-burbank {
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  height: 86px !important;
  font-family: "Burbank Big Black", "Bebas Neue", sans-serif !important;
  font-weight: 900;
  font-size: 24px;
  line-height: .84;
  letter-spacing: .005em;
  color: #FEDF0B;
  text-transform: uppercase;
  -webkit-text-stroke: 0;
  text-shadow:
    -2px -2px 0 #05070b,
    0 -2px 0 #05070b,
    2px -2px 0 #05070b,
    -2px 0 0 #05070b,
    2px 0 0 #05070b,
    -2px 2px 0 #05070b,
    0 2px 0 #05070b,
    2px 2px 0 #05070b,
    0 3px 0 rgba(0, 0, 0, .36);
}
.preset-chip-burbank:hover,
.preset-chip-burbank:focus-visible,
.preset-chip-burbank.active {
  color: #FEDF0B;
}
.preset-chip-komika {
  width: 232px !important;
  min-width: 232px !important;
  max-width: 232px !important;
  height: 86px !important;
  font-family: "Komika Axis", "Bebas Neue", sans-serif !important;
  font-weight: 400;
  font-size: 21px;
  line-height: .9;
  letter-spacing: 0;
  color: #ffffff;
  text-shadow:
    0 3px 0 #111827,
    0 -3px 0 #111827,
    3px 0 0 #111827,
    -3px 0 0 #111827,
    3px 3px 0 #111827,
    -3px -3px 0 #111827,
    3px -3px 0 #111827,
    -3px 3px 0 #111827;
}
.preset-chip-tiktok {
  font-family: "TikTok Display", "SF Pro Display", Arial, sans-serif !important;
  font-weight: 500;
  font-size: 30px;
  line-height: .92;
  letter-spacing: .005em;
  color: #ffffff;
  text-shadow:
    0 3px 0 #111827,
    3px 0 0 #111827,
    -3px 0 0 #111827,
    0 -3px 0 #111827;
}
.preset-chip-tommy {
  font-family: "Made Tommy", "SF Pro Display", Arial, sans-serif !important;
  font-weight: 700;
  font-size: 25px;
  line-height: .95;
  letter-spacing: .01em;
  color: #ffffff;
  text-transform: none;
  text-shadow:
    0 3px 0 #111827,
    3px 0 0 #111827,
    -3px 0 0 #111827,
    0 -3px 0 #111827;
}
.preset-chip-arial {
  font-family: "Arial Uploaded", Arial, "SF Pro Display", sans-serif !important;
  font-weight: 400;
  font-size: 24px;
  line-height: .95;
  letter-spacing: 0;
  color: #ffffff;
  text-transform: none;
  text-shadow: none;
}
.preset-chip-lemon {
  font-family: "Lemon Milk", Arial, sans-serif !important;
  font-weight: 700;
  font-size: 24px;
  line-height: .95;
  letter-spacing: .02em;
  color: #ffffff;
  text-transform: none;
  white-space: nowrap;
  text-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}
.preset-chip-tiktok-whitebox {
  font-family: "TikTok Display", "SF Pro Display", Arial, sans-serif !important;
  font-weight: 500;
  font-size: 0;
  line-height: 1;
  letter-spacing: 0;
  color: inherit;
  text-transform: none;
  text-shadow: none;
}
.preset-chip-tiktok-whitebox > span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  background: #ffffff;
  color: #111111;
  font-family: inherit;
  font-size: 25px;
  font-weight: 500;
  line-height: .95;
  letter-spacing: .002em;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .06);
}
.preset-chip-coolvetica {
  font-family: "Coolvetica", "SF Pro Display", Arial, sans-serif !important;
  font-weight: 400;
  font-size: 25px;
  line-height: .92;
  letter-spacing: .01em;
  color: #ffffff;
  text-transform: none;
  text-shadow:
    0 3px 0 #111827,
    3px 0 0 #111827,
    -3px 0 0 #111827,
    0 -3px 0 #111827;
}

.editor-text-preset-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.editor-text-preset-chip {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 58px !important;
  padding: 0 10px !important;
  border-width: 1.5px;
  border-radius: 12px;
  font-size: 24px;
  line-height: 0.92;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .16);
}

.editor-text-preset-chip.preset-chip-viral {
  font-size: 20px;
}

.editor-text-preset-chip.preset-chip-burbank {
  font-size: 19px;
}

.editor-text-preset-chip.preset-chip-komika {
  font-size: 15px;
  line-height: .84;
  text-shadow:
    0 2px 0 #111827,
    0 -2px 0 #111827,
    2px 0 0 #111827,
    -2px 0 0 #111827,
    2px 2px 0 #111827,
    -2px -2px 0 #111827,
    2px -2px 0 #111827,
    -2px 2px 0 #111827;
}

.editor-text-preset-chip.is-compact {
  letter-spacing: -0.01em;
}

.editor-text-preset-chip.preset-chip-tiktok,
.editor-text-preset-chip.preset-chip-tommy,
.editor-text-preset-chip.preset-chip-arial,
.editor-text-preset-chip.preset-chip-coolvetica {
  font-size: 21px;
}

.editor-text-preset-chip.preset-chip-lemon {
  font-size: 14px;
  white-space: normal;
  line-height: .88;
  letter-spacing: .01em;
}

.editor-text-preset-chip.preset-chip-tiktok-whitebox {
  font-size: 0;
}

.editor-text-preset-chip.preset-chip-tiktok-whitebox > span {
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 16px;
  line-height: .9;
}
.generate-button {
  height: 49px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: #e14f1e;
  color: #fff;
  font-weight: 750;
  transition: background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
  box-shadow: 0 14px 28px rgba(225, 79, 30, .18);
}
.generate-button:hover,
.generate-button:focus-visible {
  background: #d74717;
  box-shadow: 0 16px 32px rgba(225, 79, 30, .22);
  transform: translateY(-1px);
}
.generate-button:disabled {
  border-color: rgba(17, 24, 39, .08);
  background: #f3f4f6;
  color: #9ca3af;
  cursor: not-allowed;
}
.create-status {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 22px;
  color: var(--muted);
  font-size: 14px;
}
.loader {
  height: 16px;
  width: 16px;
  border-radius: 50%;
  border: 2px solid #fca5a5;
  border-top-color: #b91c1c;
  animation: trace .8s linear infinite;
}

.projects-view {
  width: min(1260px, 100%);
  margin: 0 auto;
  padding: 26px 30px 48px;
}
.projects-head, .projects-tabs {
  display: flex;
  align-items: center;
}
.projects-head {
  justify-content: space-between;
  margin-bottom: 20px;
}
.clip-analytics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.analytics-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
  display: grid;
  gap: 4px;
}
.analytics-card small {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.analytics-card strong {
  font-size: 18px;
}
.analytics-card span {
  color: var(--text);
  font-size: 13px;
}
.projects-tabs { gap: 28px; }
.project-filter {
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 14px;
  font-weight: 650;
  padding: 0;
}
.project-filter.muted { color: var(--muted); }
.project-create-button {
  min-height: 42px;
  border: 1px solid #e14f1e;
  border-radius: 12px;
  background: #e14f1e;
  color: #fff;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 750;
  letter-spacing: .01em;
  box-shadow: 0 12px 24px rgba(225, 79, 30, .18);
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, color .18s ease;
}
.project-create-button:hover,
.project-create-button:focus-visible {
  background: #d74717;
  border-color: #d74717;
  color: #fff;
  box-shadow: 0 14px 28px rgba(225, 79, 30, .22);
  transform: translateY(-1px);
}
.project-create-button:disabled {
  border-color: rgba(17, 24, 39, .08);
  background: #f3f4f6;
  color: #9ca3af;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
.new-project, .quiet-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  padding: 0 16px;
  box-shadow: 0 4px 16px rgba(17, 24, 39, .03);
}
.calendar-filter-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.calendar-filter-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.projects-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  gap: 18px;
  align-items: stretch;
  grid-auto-rows: 1fr;
  isolation: isolate;
}
.projects-grid.has-project-expand {
  grid-template-columns: repeat(4, minmax(220px, 1fr));
}
.projects-grid.has-project-expand.is-projects-expanded {
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}
@media (max-width: 1180px) {
  .projects-grid.has-project-expand {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
  .projects-grid.has-project-expand .project-expand-card {
    right: -66px;
  }
  .projects-grid.has-project-expand.is-projects-expanded {
    grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
  }
}
.projects-grid.is-empty {
  min-height: calc(100vh - 68px - 172px);
  grid-template-columns: 1fr;
  place-items: center;
}
.projects-grid.is-error {
  min-height: 260px;
  grid-template-columns: 1fr;
  place-items: center;
}
.projects-load-error {
  display: grid;
  justify-items: center;
  gap: 8px;
  max-width: 420px;
  padding: 56px 24px;
  text-align: center;
}
.projects-load-error-title {
  color: var(--text);
  font-size: 18px;
  line-height: 1.3;
}
.projects-load-error-copy {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.projects-load-retry {
  min-height: 38px;
}
.no-projects {
  color: var(--muted);
  padding: 40px 0;
}
.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 18px;
  padding: 8px;
  text-align: left;
  color: var(--text);
  background: rgba(255,255,255,.98);
  min-width: 220px;
  min-height: 0;
  box-shadow: none;
  overflow: visible;
  align-self: stretch;
  transform: translateY(0) scale(1);
  transition:
    border-color .16s ease,
    background-color .16s ease,
    opacity .15s ease,
    transform .15s ease,
    max-height .18s ease,
    padding .18s ease,
    margin .18s ease;
}
.project-card:hover {
  border-color: rgba(239,68,68,.18);
  background: #fff;
  transform: translateY(-1px);
}
.project-card.menu-open {
  border-color: rgba(239,68,68,.18);
  z-index: 8;
}
.project-card.is-removing {
  opacity: 0;
  transform: scale(.98);
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  pointer-events: none;
  margin: 0;
}
.project-card-main {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.project-card-main:focus-visible,
.project-card-menu:focus-visible,
.project-action:focus-visible {
  outline: 2px solid rgba(239,68,68,.35);
  outline-offset: 2px;
}
.project-card-menu {
  position: absolute;
  top: 194px;
  right: 14px;
  z-index: 3;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  display: grid;
  place-items: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  opacity: .82;
  transition: opacity .16s ease, background-color .16s ease, border-color .16s ease, color .16s ease;
}
.project-card:hover .project-card-menu,
.project-card:focus-within .project-card-menu,
.project-card.menu-open .project-card-menu {
  opacity: 1;
  color: var(--text);
}
.project-card-menu:hover {
  background: rgba(17,24,39,.05);
}
.project-thumbnail {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.08);
  background: rgba(255,255,255,.04);
  flex: 0 0 auto;
  margin-bottom: 8px;
}
.project-thumbnail::after {
  display: none;
}
.project-progress-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, .55);
  background: rgba(6, 78, 59, .92);
  color: #ccfbf1;
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(6, 78, 59, .3);
}
.project-progress-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
}
.project-thumbnail-failed {
  background: linear-gradient(135deg, rgba(17,24,39,.04), rgba(239,68,68,.06));
}
.project-thumbnail-failed .project-failed-chip {
  position: absolute;
  top: 10px;
  left: 10px;
}
.project-thumbnail img,
.project-thumbnail video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.project-thumbnail .project-thumbnail-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 145, 0, .10), transparent 42%),
    linear-gradient(145deg, #fffaf6 0%, #fff 54%, #fff7ef 100%);
}
.project-thumbnail .project-thumbnail-placeholder img {
  position: static;
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(255, 105, 0, .22));
}
.project-eta-chip {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(16, 185, 129, .55);
  background: rgba(6, 78, 59, .92);
  color: #ccfbf1;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 10px 24px rgba(6, 78, 59, .3);
}
.project-eta-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 2px solid #34d399;
  box-shadow: 0 0 0 3px rgba(52, 211, 153, .22);
}
.processing-chip {
  display: inline-flex;
  align-items: center;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  min-width: 0;
}
.project-failed-chip {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(185,28,28,.92);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}
.project-new-chip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 22px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(17, 24, 39, .18);
  background: #ffffff;
  color: #111827;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}
.project-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  min-width: 0;
}
.project-title-text {
  min-width: 0;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  text-overflow: clip;
  word-break: normal;
}
.project-title-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border-radius: 999px;
  background: rgba(234, 91, 26, .12);
  color: #ea5b1a;
  font-size: 10px;
  line-height: 1;
}
.project-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  margin-top: 4px;
}
.project-age {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}
.project-card-age {
  margin-top: 8px;
  padding-top: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.2;
}
.project-version-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
}
.project-state {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  margin-top: 4px;
}
.project-upload-fallback {
  width: fit-content;
  border: 1px solid rgba(234, 91, 26, .18);
  border-radius: 999px;
  background: rgba(255, 247, 237, .96);
  color: #c2410c;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 700;
}
.project-upload-fallback:hover,
.project-upload-fallback:focus-visible {
  background: rgba(255, 237, 213, .98);
  color: #9a3412;
}
.project-state-inline {
  white-space: nowrap;
}
.project-state-error {
  color: #991b1b;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.project-expand-card {
  position: absolute;
  right: -72px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  min-height: 0;
  border: 1px solid rgba(255, 107, 17, .30);
  border-radius: 999px;
  background: linear-gradient(135deg, #fff 0%, #fff3e8 100%);
  color: var(--orange-accent);
  box-shadow: 0 8px 18px rgba(255, 107, 17, .12);
  padding: 0;
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.project-expand-card span {
  display: flex;
  flex-direction: column;
  transform: translateY(-2px);
}
.projects-grid.is-projects-expanded .project-expand-card {
  position: static;
  transform: none;
  grid-column: 1 / -1;
  grid-row: auto;
  justify-self: center;
  width: 52px;
  height: 52px;
  margin-top: 2px;
}
.project-expand-card:hover,
.project-expand-card:focus-visible {
  border-color: transparent;
  background: linear-gradient(135deg, var(--orange-accent-2) 0%, var(--orange-accent) 100%);
  color: #fff;
  box-shadow: 0 12px 24px rgba(255, 107, 17, .25);
  transform: translateY(-50%) translateX(2px);
}
.project-expand-card.is-expanded:hover,
.project-expand-card.is-expanded:focus-visible {
  transform: translateX(-2px);
}
.projects-grid.is-projects-expanded .project-expand-card:hover,
.projects-grid.is-projects-expanded .project-expand-card:focus-visible {
  transform: translateX(-2px);
}
.project-actions {
  position: absolute;
  bottom: 14px;
  right: 14px;
  z-index: 4;
  min-width: 148px;
  padding: 7px;
  display: grid;
  gap: 4px;
  border: 1px solid rgba(249, 115, 22, .23);
  border-radius: 16px;
  background: linear-gradient(145deg, #fffdfb 0%, #fff5ee 100%);
  box-shadow: 0 16px 34px rgba(234, 88, 12, .18), 0 2px 8px rgba(17,24,39,.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(.985);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
}
.project-card:hover .project-actions,
.project-card:focus-within .project-actions,
.project-card.menu-open .project-actions {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.project-action {
  border: 1px solid transparent;
  background: transparent;
  color: #3b2a21;
  border-radius: 11px;
  padding: 9px 11px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.project-action:hover {
  border-color: rgba(249, 115, 22, .22);
  background: linear-gradient(135deg, rgba(255, 237, 213, .9), rgba(255, 247, 237, .92));
  color: #c2410c;
}
.project-action-danger {
  color: #c2410c;
}
.project-action-danger:hover {
  border-color: rgba(220, 38, 38, .22);
  background: linear-gradient(135deg, #fff1ed, #ffebe8);
  color: #b91c1c;
}
.project-action:disabled {
  opacity: .45;
  cursor: not-allowed;
}
.project-detail {
  position: fixed;
  inset: 0;
  z-index: 70;
  margin: 0;
  border: 0;
  padding: 48px 24px;
  overflow: auto;
  background: rgba(17, 24, 39, .28);
  backdrop-filter: blur(8px);
}
.project-detail[hidden] {
  display: none !important;
}
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(1180px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(17,24,39,.08);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: rgba(255,255,255,.98);
}
.detail-head h2 { margin: 0; font-size: 19px; }
.detail-summary {
  margin: 6px 0 0;
  max-width: 760px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}
.clips {
  width: min(1180px, calc(100vw - 48px));
  margin: 0 auto;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 18px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 0 0 22px 22px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 60px rgba(17,24,39,.16);
}
.clip {
  position: relative;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: visible;
  box-shadow: var(--shadow-sm);
}

.editor-view {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 18px 24px 42px;
  border-radius: 32px;
  transition: background .18s ease;
}

.editor-view.dragging-files {
  background:
    radial-gradient(520px 220px at 50% 0%, rgba(59,130,246,.08), transparent 70%);
}

.editor-shell {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(720px 220px at 50% -20%, rgba(234, 91, 26, .08), transparent 58%),
    rgba(255,255,255,.98);
  box-shadow: 0 20px 44px rgba(17, 24, 39, .08);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.editor-shell.dragging-files {
  border-color: rgba(59,130,246,.32);
  background:
    radial-gradient(720px 220px at 50% -20%, rgba(59,130,246,.12), transparent 58%),
    rgba(255,255,255,.99);
  box-shadow: 0 22px 48px rgba(59,130,246,.12);
}

.editor-main {
  display: grid;
  gap: 0;
  min-width: 0;
}

.editor-stage-card,
.editor-timeline-card,
.editor-transcript-card,
.editor-sidebar {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
}

.editor-stage-card {
  padding: 22px 24px 0;
}

.editor-stage-head,
.editor-timeline-head,
.editor-transcript-head,
.editor-sidebar-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.editor-timeline-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.editor-stage-head h2,
.editor-timeline-head h3,
.editor-transcript-head h3,
.editor-sidebar-head h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.08;
}

.editor-project-meta,
.editor-sidebar-head p,
.editor-timeline-summary {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.editor-timeline-head-compact {
  justify-content: flex-end;
  align-items: center;
}

.editor-stage-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.editor-stage-actions .quiet-button {
  min-height: 42px;
  border-color: var(--line);
  background: #fff;
  color: var(--text);
  box-shadow: none;
}

.editor-stage-actions .quiet-button:hover,
.editor-stage-actions .quiet-button:focus-visible {
  background: #fff7f3;
}

.editor-preview-shell {
  display: grid;
  justify-items: center;
  align-items: start;
  grid-template-rows: auto minmax(74px, auto);
  gap: 0;
  margin-top: 18px;
}

.editor-video-stage {
  position: relative;
  overflow: hidden;
  width: min(100%, 720px);
  max-height: min(58vh, 560px);
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.02)),
    #f6f7fb;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.editor-video-stage.drop-active {
  border-color: #60a5fa;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22), 0 0 0 4px rgba(191, 219, 254, 0.32);
  background:
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(239,246,255,.12)),
    radial-gradient(circle at top, rgba(96,165,250,.18), transparent 62%),
    #f6f7fb;
}

.editor-video-stage video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: #000000;
  transform-origin: center center;
  transition: transform .18s ease;
}

.editor-image-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #000;
}

.editor-video-stage[style*="9 / 16"],
.editor-video-stage[style*="9/16"] {
  width: min(100%, 360px);
  max-height: min(60vh, 620px);
}

.editor-text-overlay-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
  transform-origin: center center;
}

.editor-loading-state {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  background: #000000;
  color: rgba(255,255,255,.92);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  pointer-events: none;
}

.editor-loading-state span {
  opacity: .92;
}

.editor-video-stage.is-loading video,
.editor-video-stage.is-loading .editor-image-preview,
.editor-video-stage.is-loading .editor-text-overlay-layer,
.editor-video-stage.is-loading .editor-empty-state {
  visibility: hidden;
}

.editor-text-overlay {
  position: absolute;
  display: inline-block;
  width: max-content;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  max-width: min(88%, 560px);
  min-width: 24px;
  padding: var(--editor-text-box-padding-y, 8px) var(--editor-text-box-padding-x, 12px);
  border: 0;
  border-radius: var(--editor-text-box-radius, 0);
  background: var(--editor-text-box-color, transparent);
  color: #fff;
  font-size: 72px;
  font-weight: 800;
  /* Several selectable fonts ship with a regular face only.  Let the browser
     synthesize bold and italic variants for the live editor preview. */
  font-synthesis: weight style;
  line-height: 1.04;
  letter-spacing: .01em;
  text-transform: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  -webkit-text-stroke: var(--editor-text-stroke, 4px) var(--editor-text-stroke-color, #111827);
  text-shadow: 0 4px 12px rgba(0,0,0,.4);
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  outline: none;
}

.editor-text-overlay:focus,
.editor-text-overlay:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.editor-text-overlay.is-popping {
  animation: editorTextPopIn .7s cubic-bezier(0.16, 1, 0.3, 1);
}

.editor-text-overlay.is-left {
  transform: translate(-50%, -50%);
}

.editor-text-overlay.is-right {
  transform: translate(-50%, -50%);
}

.editor-text-overlay.active {
  outline: 2px solid rgba(239, 68, 68, .95);
  outline-offset: 6px;
}

.editor-text-overlay.selected {
  outline: 2px solid rgba(59, 130, 246, .55);
  outline-offset: 6px;
}

.editor-text-overlay.has-box {
  box-shadow: none;
}

.editor-text-overlay.editing {
  cursor: text;
  user-select: text;
  outline: 2px solid rgba(59, 130, 246, .95);
  outline-offset: 4px;
  background: rgba(255, 255, 255, .04);
}

@keyframes editorTextPopIn {
  0% {
    transform: translate(-50%, -50%) scale(0.05);
  }
  30% {
    transform: translate(-50%, -50%) scale(0.88);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}

.editor-text-overlay:active {
  cursor: grabbing;
}

.editor-empty-state {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 32px;
  text-align: center;
  background: radial-gradient(560px 240px at 50% 50%, rgba(234, 91, 26, .08), transparent 62%);
}

.editor-empty-state h3 {
  margin: 0;
  font-size: 34px;
  line-height: 1.02;
}

.editor-empty-state p {
  margin: 0;
  max-width: 420px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
}

.editor-empty-icon {
  width: 74px;
  height: 74px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  color: #ffb088;
  font-size: 30px;
  background: rgba(234, 91, 26, .14);
  box-shadow: inset 0 0 0 1px rgba(234, 91, 26, .18);
}

.editor-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 74px;
  padding: 12px 0 4px;
}

.editor-hud[hidden] {
  display: none !important;
  padding: 0;
}

.editor-video-stage[style*="9 / 16"] + .editor-hud,
.editor-video-stage[style*="9/16"] + .editor-hud {
  width: 100%;
}

.editor-transport-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 0 auto;
}

.editor-timecode {
  font-size: 14px;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  font-weight: 800;
  white-space: nowrap;
}

.editor-timecode-end {
  color: #374151;
}

.editor-transport-play {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111827;
  box-shadow: none;
}

.editor-transport-play:hover,
.editor-transport-play:focus-visible {
  background: transparent;
  color: #0f172a;
}

.editor-text-panel {
  margin-top: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: grid;
  gap: 14px;
}

.editor-text-panel-head h3 {
  margin: 0;
  font-size: 24px;
  line-height: 1.08;
}

.editor-control {
  display: grid;
  gap: 5px;
}

.editor-control > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background: transparent;
  cursor: pointer;
  --range-track-color: #374151;
  --range-thumb-fill: #ffffff;
  --range-thumb-border: #4b5563;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: var(--range-track-color);
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border-radius: 50%;
  border: 2px solid var(--range-thumb-border);
  background: var(--range-thumb-fill);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

input[type="range"]::-moz-range-track {
  height: 3px;
  border-radius: 999px;
  background: var(--range-track-color);
}

input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--range-thumb-border);
  background: var(--range-thumb-fill);
  box-shadow: 0 1px 2px rgba(15, 23, 42, .12);
}

.editor-control input[type="text"],
.editor-control select {
  width: 100%;
  min-height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
}

.editor-control input[type="range"] {
  width: 100%;
}

.editor-control input[type="color"] {
  width: 100%;
  height: 42px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 4px;
}

.editor-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.editor-effects-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.editor-effects-reset-button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #64748b;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 4px 10px rgba(15, 23, 42, .05);
}

.editor-effects-reset-button:hover,
.editor-effects-reset-button:focus-visible {
  border-color: rgba(59, 130, 246, .24);
  color: #2563eb;
  outline: none;
}

.editor-range-with-value {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 54px;
  gap: 10px;
  align-items: center;
}

.editor-range-value-input {
  width: 54px;
  min-height: 34px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  padding: 6px 8px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
}

.editor-control-checkbox {
  align-content: end;
}

.editor-control-checkbox input {
  justify-self: start;
}

.editor-align-group {
  display: inline-grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  padding: 3px;
  border: 1px solid #e5e7eb;
  border-radius: 11px;
  overflow: hidden;
  background: #ffffff;
}

.editor-align-button {
  position: relative;
  min-height: 31px;
  border: 0;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  border-radius: 8px;
  transition: background-color .16s ease, color .16s ease;
}

.editor-align-button.active {
  background: #f3f4f6;
  color: #111827;
}

.editor-align-icon-image {
  display: block;
  width: 37px;
  height: 37px;
  object-fit: contain;
  pointer-events: none;
  image-rendering: -webkit-optimize-contrast;
}

.editor-align-icon {
  display: inline-grid;
  gap: 3px;
  width: 15px;
}

.editor-align-icon i {
  display: block;
  height: 1.75px;
  border-radius: 999px;
  background: currentColor;
}

.editor-align-icon-left {
  justify-items: start;
}

.editor-align-icon-left i:nth-child(1) { width: 12px; }
.editor-align-icon-left i:nth-child(2) { width: 8px; }
.editor-align-icon-left i:nth-child(3) { width: 10px; }

.editor-align-icon-center {
  justify-items: center;
}

.editor-align-icon-center i:nth-child(1) { width: 12px; }
.editor-align-icon-center i:nth-child(2) { width: 8px; }
.editor-align-icon-center i:nth-child(3) { width: 10px; }

.editor-align-icon-right {
  justify-items: end;
}

.editor-align-icon-right i:nth-child(1) { width: 12px; }
.editor-align-icon-right i:nth-child(2) { width: 8px; }
.editor-align-icon-right i:nth-child(3) { width: 10px; }

.editor-align-button:hover {
  background: #f8fafc;
}

.editor-timeline-card {
  padding: 18px 24px 22px;
  border-top: 1px solid var(--line);
}

.editor-transcript-card {
  padding: 18px 24px 20px;
  border-top: 1px solid var(--line);
}

.editor-transcript-card[hidden] {
  display: none !important;
}

.editor-transcript-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.editor-zoom-control {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.editor-zoom-control select {
  min-width: 96px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 700;
}

.editor-waveform {
  position: relative;
  height: auto;
  margin-top: 12px;
  padding: 12px 10px 10px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(249,250,251,.95)),
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(17,24,39,.04) 59px 60px);
  border: 1px solid var(--line);
}

.editor-waveform-scroll {
  overflow-x: hidden;
  overflow-y: hidden;
  padding-bottom: 4px;
}

.editor-waveform-canvas {
  min-width: 100%;
}

.editor-timeline-stack {
  display: grid;
  gap: 10px;
}

.editor-ruler {
  position: relative;
  height: 22px;
}

.editor-ruler-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.editor-ruler-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 16px;
  width: 1px;
  height: 10px;
  transform: translateX(-50%);
  background: rgba(17,24,39,.16);
}

.editor-timeline-lane {
  position: relative;
  overflow: hidden;
  min-height: 58px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%);
  cursor: pointer;
}

.editor-track-row {
  display: block;
}

.editor-track-row-video .editor-timeline-lane {
  min-height: 56px;
}

.editor-track-row-captions .editor-timeline-lane {
  min-height: 54px;
}

.editor-track-row-audio .editor-timeline-lane {
  min-height: 82px;
}

.editor-track-row-overlay {
  display: grid;
  grid-template-columns: calc(74px + 22px * var(--editor-track-scale)) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.editor-overlay-label {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.editor-timeline-lane-captions {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.editor-timeline-lane-overlay {
  min-height: 58px;
}

.editor-caption-bed {
  position: absolute;
  inset: 10px 14px;
  overflow: hidden;
  z-index: 2;
}

.editor-caption-chip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 9px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(59,130,246,.18);
  box-shadow: 0 3px 10px rgba(148,163,184,.14);
  color: #475569;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-caption-chip:focus,
.editor-caption-chip:focus-visible {
  outline: none;
}

.editor-caption-chip.active {
  border-color: rgba(59,130,246,.52);
  box-shadow: 0 0 0 2px rgba(59,130,246,.14), 0 6px 14px rgba(59,130,246,.18);
  color: #1d4ed8;
}

.editor-audio-bed {
  position: absolute;
  inset: 10px 14px;
  display: grid;
  gap: 1px;
  align-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(191, 219, 254, .22), rgba(224, 242, 254, .08));
}

.editor-audio-bed::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  transform: translateY(-50%);
  background: rgba(56, 189, 248, .55);
  pointer-events: none;
}

.editor-wave-bar {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(125, 211, 252, .92), rgba(56, 189, 248, .98));
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .08);
  opacity: .96;
  transition: transform .16s ease, opacity .16s ease, background .16s ease;
  align-self: center;
}

.editor-wave-bar.played {
  background: linear-gradient(180deg, rgba(59, 130, 246, .96), rgba(14, 165, 233, .9));
  opacity: 1;
}

.editor-playback-shade {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0 !important;
  background: transparent;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
}

.editor-playhead {
  position: absolute;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 999px;
  background: #111111;
  box-shadow: 0 0 0 1px rgba(255,255,255,.78);
  left: 0;
  z-index: 12;
  transform: translateX(-1px);
  pointer-events: none;
}

.editor-playhead-marker {
  position: absolute;
  top: -2px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border: 0;
  border-radius: 4px 4px 10px 10px;
  background: #111111;
  box-shadow: 0 0 0 1px rgba(255,255,255,.82);
  left: 0;
  z-index: 13;
  cursor: ew-resize;
}

.editor-playhead-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: #111111;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.82);
}

.editor-selection-window {
  position: absolute;
  top: 8px;
  bottom: 8px;
  overflow: visible;
  border-radius: 14px;
  border: 1px solid rgba(14,165,233,.5);
  background: rgba(14,165,233,.14);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
  z-index: 3;
}

.editor-selection-window-ghost {
  border-style: dashed;
  opacity: .7;
  pointer-events: none;
}

.editor-timeline-drop-ghost {
  opacity: .46;
  border-style: solid;
  border-color: rgba(255,255,255,.74);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(59, 130, 246, .16);
  z-index: 7;
}

.editor-timeline-drop-ghost.is-stacked-above {
  transform: translateY(-12px);
}

.editor-timeline-drop-ghost.is-stacked-below {
  transform: translateY(12px);
}

.editor-timeline-drop-ghost .editor-selection-fill-overlay {
  border-color: rgba(255,255,255,.42);
  background: linear-gradient(180deg, rgba(251, 146, 60, .18), rgba(249, 115, 22, .1));
}

.editor-timeline-drop-ghost .editor-overlay-name {
  opacity: .86;
}

.editor-selection-fill {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 6px 26px;
  background: linear-gradient(180deg, rgba(8,145,178,.22), rgba(14,165,233,.12));
  pointer-events: none;
}

.editor-selection-window-overlay {
  top: 4px;
  bottom: 4px;
  border: 0;
  background: transparent;
  box-shadow: none;
  cursor: grab;
  min-width: 72px;
}

.editor-selection-window-overlay .editor-handle {
  top: 2px;
  bottom: 2px;
  z-index: 4;
}

.editor-selection-window-overlay .editor-handle::after {
  background: rgba(255,255,255,.98);
}

.editor-selection-window-overlay.active {
  box-shadow: 0 0 0 2px rgba(255,255,255,.96);
  z-index: 6;
}

.editor-selection-window-overlay.active .editor-selection-fill-overlay {
  border-color: rgba(194, 65, 12, .42);
  background: linear-gradient(180deg, rgba(234, 88, 12, .34), rgba(194, 65, 12, .22));
}

.editor-selection-window-overlay.active .editor-track-filmstrip {
  background-color: rgba(0,0,0,.12);
  box-shadow: inset 0 0 0 1px rgba(124, 45, 18, .24);
}

.editor-selection-window-overlay.active .editor-overlay-wave span {
  background: linear-gradient(180deg, rgba(251, 191, 36, .94), rgba(249, 115, 22, .96));
}

.editor-selection-window-overlay.dragging,
.editor-selection-window-overlay:active {
  cursor: grabbing;
}

.editor-selection-fill-overlay {
  position: absolute;
  inset: 0;
  justify-content: center;
  gap: 10px;
  padding: 4px 24px;
  border-radius: 8px;
  border: 1px solid rgba(249, 115, 22, .28);
  background: linear-gradient(180deg, rgba(251, 146, 60, .24), rgba(249, 115, 22, .14));
  overflow: hidden;
  pointer-events: none;
}

.editor-overlay-name {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 9px;
  color: #1f2937;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

.editor-overlay-wave {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(28, minmax(0, 1fr));
  gap: 1px;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.editor-overlay-wave span {
  display: block;
  width: 100%;
  border-radius: 999px;
  min-height: 2px;
  background: linear-gradient(180deg, rgba(125, 211, 252, .9), rgba(56, 189, 248, .94));
}

.editor-selection-fill[data-editor-window-drag] {
  pointer-events: auto;
  cursor: grab;
}

.editor-selection-fill[data-editor-window-drag]:active {
  cursor: grabbing;
}

.editor-selection-window[data-editor-window="audio"]:not(.editor-selection-window-ghost) {
  border-color: rgba(59,130,246,.42);
  background: rgba(59,130,246,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.32);
}

.editor-selection-window[data-editor-window="audio"]:not(.editor-selection-window-ghost) .editor-selection-fill {
  background: linear-gradient(180deg, rgba(96,165,250,.22), rgba(59,130,246,.1));
}

.editor-track-filmstrip {
  width: 100%;
  height: 100%;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.72);
  background-color: rgba(255,255,255,.18);
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: left center;
  box-shadow: inset 0 0 0 1px rgba(14,165,233,.16);
}

.editor-track-filmstrip-fallback {
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.72) 0 3px, transparent 3px 26px),
    linear-gradient(180deg, rgba(255,255,255,.2), rgba(255,255,255,.08));
}

.editor-handle {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 14px;
  border: 0;
  background: transparent;
  cursor: ew-resize;
}

.editor-handle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 22px;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  background:
    linear-gradient(90deg,
      #2563eb 0 2px,
      #ffffff 2px 6px,
      #2563eb 6px 8px);
  z-index: 2;
}

.editor-handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 6px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(37,99,235,.26);
  box-shadow: 0 3px 8px rgba(15,23,42,.12);
}

.editor-handle-start {
  left: 4px;
}

.editor-handle-end {
  right: 4px;
}

.editor-track-menu {
  position: fixed;
  z-index: 1400;
  width: 196px;
  min-width: 196px;
  max-width: 196px;
  box-sizing: border-box;
  padding: 8px;
  border-radius: 14px;
  border: 1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.98);
  box-shadow: 0 18px 38px rgba(15,23,42,.16);
}

.editor-track-menu button {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border: 0;
  border-radius: 10px;
  padding: 11px 12px;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.editor-track-menu button:hover,
.editor-track-menu button:focus-visible {
  background: #fff7f3;
  color: var(--brand);
}

.editor-track-menu button[id="editorTrackMenuDelete"],
.editor-track-menu button[id="editorTrackMenuRemoveTrack"],
.editor-track-menu button[id="editorTrackMenuClear"] {
  color: #b42318;
}

.editor-track-menu button[id="editorTrackMenuDelete"]:hover,
.editor-track-menu button[id="editorTrackMenuDelete"]:focus-visible,
.editor-track-menu button[id="editorTrackMenuRemoveTrack"]:hover,
.editor-track-menu button[id="editorTrackMenuRemoveTrack"]:focus-visible,
.editor-track-menu button[id="editorTrackMenuClear"]:hover,
.editor-track-menu button[id="editorTrackMenuClear"]:focus-visible {
  background: #fef3f2;
  color: #912018;
}

.editor-sidebar {
  padding: 18px 16px;
  border-right: 1px solid var(--line);
  min-height: 100%;
}

.editor-count-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(234, 91, 26, .12);
  color: #c2410c;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

.editor-sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}

.editor-sidebar-tab {
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.editor-sidebar-tab.active {
  border-color: rgba(234,91,26,.34);
  background: #fff7f3;
  color: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(234,91,26,.1);
}

.editor-sidebar-panel {
  margin-top: 14px;
}

.editor-caption-warning {
  margin-bottom: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(234, 91, 26, 0.22);
  background: #fff7f3;
  color: #9a3412;
  font-size: 13px;
  line-height: 1.5;
}

.editor-text-panel .is-readonly .editor-control,
.editor-text-panel .is-readonly .editor-control-grid,
.editor-text-panel .is-readonly .editor-align-group {
  opacity: 0.55;
}

.editor-text-panel .is-readonly input,
.editor-text-panel .is-readonly select,
.editor-text-panel .is-readonly button {
  pointer-events: none;
}

.editor-media-panel {
  display: grid;
  gap: 12px;
  padding: 0;
  margin: 0;
  border-radius: 18px;
  transition: background .18s ease, box-shadow .18s ease;
}

.editor-media-panel.dragging-files {
  background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(240,247,255,.72));
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.18);
}

.editor-media-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.editor-media-toolbar.dragging-files {
  background: transparent;
  box-shadow: none;
}

.editor-media-toolbar h4,
.editor-media-toolbar p {
  margin: 0;
}

.editor-media-toolbar h4 {
  font-size: 16px;
  line-height: 1.2;
  color: var(--text);
  font-weight: 700;
}

.editor-media-toolbar p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
}

.editor-media-toolbar-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.editor-media-toolbar-icon,
.editor-media-toolbar-action {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.08);
  background: #ffffff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.editor-media-toolbar-icon svg,
.editor-media-toolbar-action svg,
.editor-media-add-button svg,
.editor-media-drag-handle svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
}

.editor-media-toolbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.editor-media-toolbar-action {
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.editor-media-toolbar-action.is-active,
.editor-media-toolbar-action:hover,
.editor-media-toolbar-action:focus-visible {
  background: #fff7f3;
  color: var(--brand);
  border-color: rgba(234,91,26,.14);
  outline: none;
}

.editor-media-toolbar-add-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(17,24,39,.12);
  background: #ffffff;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.editor-media-toolbar-add-button:hover,
.editor-media-toolbar-add-button:focus-visible {
  background: #fff7f3;
  color: var(--brand);
  border-color: rgba(234,91,26,.18);
  box-shadow: 0 8px 16px rgba(234,91,26,.08);
  outline: none;
}

.editor-media-toolbar-add-button svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
}

.editor-media-section {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}

.editor-media-dropzone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 10px;
  border-radius: 0;
  border: 0;
  border-bottom: 1px solid rgba(17,24,39,.08);
  background: transparent;
  text-align: left;
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.editor-media-dropzone.dragging {
  border-bottom-color: rgba(59,130,246,.55);
  background: linear-gradient(180deg, rgba(240,247,255,.72), rgba(240,247,255,.18));
  box-shadow: inset 0 -1px 0 rgba(59,130,246,.12);
}

.editor-media-dropzone-copy p {
  margin: 0;
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
}

.editor-media-add-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(225, 79, 30, .18);
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  color: #e14f1e;
  font-size: 12px;
  font-weight: 700;
  padding: 7px 12px;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(225, 79, 30, .08);
}

.editor-media-add-button:hover,
.editor-media-add-button:focus-visible {
  background: #fff7f3;
  border-color: rgba(225, 79, 30, .28);
  outline: none;
}

.editor-media-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 420px);
  overflow: auto;
  padding-right: 2px;
  border-radius: 12px;
  transition: background .18s ease, box-shadow .18s ease;
}

.editor-media-list.dragging-files {
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.14);
}

.editor-media-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(17,24,39,.08);
}

.editor-media-tab {
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
  padding: 10px 10px 9px;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.editor-media-tab span {
  color: #94a3b8;
  font-size: 10px;
  margin-left: 3px;
}

.editor-media-tab.active {
  color: var(--brand);
  border-bottom-color: rgba(234,91,26,.9);
}

.editor-media-library-grid {
  display: grid;
  gap: 8px;
  padding-top: 8px;
}

.editor-media-library-grid-clips {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-media-library-grid-imported {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-media-empty {
  padding: 14px 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.editor-media-upload-empty {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  grid-column: 1 / -1;
  align-self: stretch;
  padding: 24px 0 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: center;
}

.editor-media-upload-empty-illustration {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.96), rgba(239,246,255,.9));
  color: #60a5fa;
  font-size: 30px;
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.12);
}

.editor-media-upload-empty h4 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
}

.editor-media-upload-empty p {
  margin: 0;
  max-width: 240px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.editor-media-upload-empty-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 128px;
  padding: 8px 14px;
  border: 0;
  border-radius: 10px;
  background: #3b82f6;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(59,130,246,.18);
}

.editor-media-upload-empty-button:hover,
.editor-media-upload-empty-button:focus-visible {
  background: #2563eb;
  outline: none;
}

.editor-media-item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 9px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: #ffffff;
  box-shadow: none;
  cursor: grab;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.editor-media-item.is-pending {
  cursor: progress;
  opacity: .86;
}

.editor-media-item.is-failed {
  border-color: rgba(239,68,68,.28);
  background: #ffffff;
}

.editor-media-item:active {
  cursor: grabbing;
}

.editor-media-item.active {
  background: #ffffff;
  border-color: rgba(59,130,246,.38);
  box-shadow: inset 0 0 0 1px rgba(59,130,246,.16), 0 12px 24px rgba(59,130,246,.08);
}

.editor-media-item-project-clip {
  cursor: pointer;
  user-select: auto;
  -webkit-user-drag: none;
  touch-action: manipulation;
  min-height: 108px;
  align-content: start;
}

.editor-media-item:hover {
  background: #ffffff;
  border-color: rgba(17,24,39,.07);
}

.editor-media-item.dragging {
  opacity: .38;
  transform: scale(.985);
}

.editor-media-item-ghost {
  position: fixed;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: min(220px, 24vw);
  padding: 8px 10px 8px 8px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(14px);
  pointer-events: none;
  opacity: .98;
  z-index: 1200;
  transform: translate(0, 0) scale(.98);
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.18);
}

.editor-media-drag-preview-thumb {
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: 12px;
  background: #e2e8f0;
}

.editor-media-drag-preview-thumb img,
.editor-media-drag-preview-thumb video,
.editor-media-drag-preview-thumb .editor-media-thumb-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editor-media-drag-preview-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.editor-media-drag-preview-copy strong,
.editor-drop-indicator-copy strong {
  display: block;
  overflow: hidden;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.editor-media-drag-preview-copy span,
.editor-drop-indicator-copy span {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
}

.editor-media-thumb {
  position: relative;
  overflow: hidden;
  width: 60px;
  height: 42px;
  border-radius: 6px;
  aspect-ratio: auto;
  background: #eef2f7;
}

.editor-media-thumb-duration {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(15, 23, 42, .76);
  color: #ffffff;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  z-index: 2;
}

.editor-media-thumb-kind {
  position: absolute;
  left: 6px;
  top: 6px;
  display: inline-flex;
  align-items: center;
  padding: 1px 5px;
  border-radius: 5px;
  background: rgba(219, 234, 254, .96);
  color: #2563eb;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  z-index: 2;
}

.editor-media-thumb img,
.editor-media-thumb-fallback {
  width: 100%;
  height: 100%;
  display: block;
}

.editor-media-thumb img {
  object-fit: cover;
  object-position: center center;
  background: transparent;
}

.editor-media-thumb.is-portrait img {
  object-fit: contain;
}

.editor-media-thumb.is-landscape img {
  object-fit: cover;
}

.editor-media-thumb-fallback {
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  background: linear-gradient(135deg, #eef2f7, #e2e8f0);
}

.editor-media-meta {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 3px;
}

.editor-media-meta h4,
.editor-media-meta p {
  margin: 0;
}

.editor-media-meta h4 {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-media-meta p {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}

.editor-media-item-imported {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.10);
  background: #ffffff;
  cursor: grab;
}

.editor-media-item-imported .editor-media-thumb {
  width: 100%;
  height: auto;
  min-height: 118px;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #f6f9ff 0%, #eef5ff 100%);
}

.editor-media-item-imported .editor-media-meta {
  padding: 8px 10px 10px;
  gap: 2px;
}

.editor-media-item-imported .editor-media-meta h4 {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.28;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.editor-media-item-imported .editor-media-meta p {
  font-size: 11px;
  color: #94a3b8;
}

.editor-media-meta-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #94a3b8;
  display: inline-block;
}

.editor-media-drag-handle {
  color: #94a3b8;
  cursor: grab;
  padding: 4px;
  flex-shrink: 0;
}

.editor-media-drag-handle:active {
  cursor: grabbing;
}

.editor-media-item.is-pending .editor-media-meta p {
  color: #2563eb;
}

.editor-media-item.is-failed .editor-media-meta p {
  color: #dc2626;
}

.editor-clip-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  max-height: calc(100vh - 170px);
  overflow: auto;
  padding-right: 4px;
  align-content: start;
}

.editor-clip-rail-media {
  grid-template-columns: 1fr;
  max-height: 240px;
  margin-top: 0;
  padding-right: 2px;
}

.editor-media-subtitle-tools {
  margin-top: 18px;
}

.editor-clip-empty {
  padding: 18px;
  border-radius: 18px;
  border: 1px dashed var(--line);
  color: var(--muted);
  background: #fffaf8;
  font-size: 14px;
  line-height: 1.55;
}

.editor-clip-card {
  padding: 8px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 10px 24px rgba(17,24,39,.04);
}

.editor-clip-card.active {
  border-color: rgba(234, 91, 26, .42);
  box-shadow: inset 0 0 0 1px rgba(234, 91, 26, .22), 0 14px 28px rgba(0,0,0,.18);
}

.editor-clip-card-head {
  display: grid;
  gap: 3px;
  margin-top: 6px;
}

.editor-clip-card-head h4 {
  margin: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-clip-card-head p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.editor-score-pill {
  position: absolute;
  right: 8px;
  top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  min-width: 34px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(17,24,39,.82);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  z-index: 2;
}

.editor-clip-preview {
  position: relative;
  width: 100%;
  margin-top: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #eef2f7;
  aspect-ratio: 9 / 16;
}

.editor-clip-preview img,
.editor-clip-thumb-fallback {
  width: 100%;
  height: 100%;
  display: block;
}

.editor-clip-preview img {
  object-fit: cover;
}

.editor-clip-thumb-fallback {
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.72);
  font-size: 14px;
  font-weight: 700;
}

.editor-clip-card-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.editor-clip-card-actions .generate-button {
  height: 32px;
  box-shadow: none;
  font-size: 11px;
}

.editor-transcript {
  margin-top: 0;
  max-height: 560px;
  overflow: auto;
  padding: 6px 10px 10px;
  scrollbar-color: rgba(148,163,184,.35) transparent;
}

.editor-transcript .transcript-cue {
  grid-template-columns: 72px minmax(0, 1fr) 44px;
  padding: 8px 10px;
  border-radius: 0;
  border-bottom: 1px solid #eef2f7;
  gap: 10px;
}

.editor-transcript .transcript-cue time {
  width: auto;
  font-variant-numeric: tabular-nums;
  color: #64748b;
  font-size: 12px;
  letter-spacing: .02em;
}

.editor-transcript .transcript-edit {
  min-height: 44px;
  border-radius: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  color: #0f172a;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
}

.editor-transcript .transcript-clear {
  min-height: 38px;
  border-radius: 12px;
  padding: 0;
  width: 38px;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #dbe3ee;
  background: #f8fafc;
  color: #64748b;
}

.editor-transcript .transcript-clear svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.editor-transcript .transcript-cue:hover,
.editor-transcript .transcript-cue.active {
  background: #f8fafc;
  color: #0f172a;
}

.editor-transcript .transcript-cue.uncertain {
  background: rgba(245, 158, 11, .12);
  color: #92400e;
}

.editor-transcript .transcript-cue.uncertain:hover,
.editor-transcript .transcript-cue.uncertain.active {
  background: rgba(245, 158, 11, .18);
}

.editor-transcript .transcript-edit:focus {
  outline: none;
  color: #0f172a;
}

.editor-transcript .transcript-clear:hover,
.editor-transcript .transcript-clear:focus-visible {
  color: #0f172a;
  border-color: #cbd5e1;
  background: #eef2f7;
}

.editor-transcript .transcript-cue:last-child {
  border-bottom: 0;
}

.editor-transcript-empty {
  padding: 18px;
  border-radius: 16px;
  border: 1px dashed #dbe3ee;
  background: #f8fafc;
  color: #64748b;
  font-size: 14px;
}

.toast-stack {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 40px));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  color: var(--text);
  padding: 12px 14px;
  box-shadow: 0 14px 34px rgba(17,24,39,.08);
  font-size: 13px;
  line-height: 1.35;
  transform: translateY(0);
  opacity: 1;
  transition: opacity .18s ease, transform .18s ease;
}
.toast.is-hiding {
  opacity: 0;
  transform: translateY(6px);
}
.toast-action {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #ff8a4c 0%, #ea5b1a 100%);
  color: #fff;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(234, 91, 26, .16);
}
.toast-action:hover {
  box-shadow: 0 10px 20px rgba(234, 91, 26, .22);
}
.clip-preview-frame {
  position: relative;
  width: min(100%, 214px);
  margin: 0 auto;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  background: #08090d;
  aspect-ratio: 9 / 16;
}
.clip-preview-frame video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: transparent;
}
.clip-preview-duration {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .78);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  backdrop-filter: blur(6px);
}
.clip-preview-duration span:last-child {
  color: rgba(255,255,255,.74);
}
.clip-preview-progress {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 8px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255,255,255,.30);
  overflow: hidden;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
  transition: opacity .16s ease;
}
.clip-preview-progress.is-ready {
  opacity: 1;
  pointer-events: auto;
}
.clip-preview-progress-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  transform-origin: left center;
  transform: scaleX(0);
}
.clip-card-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #111827;
  display: grid;
  place-items: center;
  font-size: 17px;
  line-height: 1;
  padding-left: 3px;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(0,0,0,.24);
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.clip-card-play:hover,
.clip-card-play:focus-visible {
  background: #fff;
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
}
.clip-card-fullscreen {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: transform .16s ease, opacity .16s ease;
  opacity: .9;
  text-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.clip-card-fullscreen:hover,
.clip-card-fullscreen:focus-visible {
  opacity: 1;
  transform: scale(1.05);
}
.inline-clip-modal {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: rgba(0,0,0,.78);
  display: grid;
  place-items: center;
  padding: 18px;
}
.inline-clip-modal.is-fullscreen-preview {
  padding: 0;
  background: rgba(0,0,0,.72);
  place-items: center;
}
.inline-clip-dialog {
  position: relative;
  width: min(92vw, 1100px);
  height: min(88vh, 840px);
  display: grid;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.inline-clip-modal.is-fullscreen-preview .inline-clip-dialog {
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  border-radius: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04);
}
.inline-clip-dialog video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.inline-clip-modal.is-fullscreen-preview .inline-clip-dialog video {
  object-fit: contain;
}
.inline-clip-controls {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.72) 68%);
}
.inline-clip-modal.is-fullscreen-preview .inline-clip-controls {
  padding: 14px 18px calc(18px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.10) 20%, rgba(0,0,0,.58) 100%);
}
.inline-icon-control {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  opacity: .95;
}
.inline-icon-control .icon-pause,
.inline-icon-control .icon-play,
.inline-icon-control .icon-volume-off,
.inline-icon-control .icon-volume-low,
.inline-icon-control .icon-volume-high {
  display: none;
}
.inline-icon-control.is-paused .icon-play,
.inline-icon-control:not(.is-paused) .icon-pause,
.inline-icon-control.is-volume-off .icon-volume-off,
.inline-icon-control.is-volume-low .icon-volume-low,
.inline-icon-control.is-volume-high .icon-volume-high {
  display: inline;
}
.inline-icon-control:hover,
.inline-icon-control:focus-visible {
  opacity: 1;
}
#inlineClipSeek {
  flex: 1 1 auto;
  min-width: 120px;
  accent-color: #fff;
  height: 4px;
}
.inline-clip-duration {
  margin-left: auto;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0,0,0,.45);
}
.clip-info { padding: 14px; display: grid; gap: 10px; }
.clip-info h3, .clip-info p { margin: 0; }
.clip-title-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clip-feedback-status {
  color: var(--muted);
  font-size: 12px;
}
.project-feedback-badge {
  color: #0f766e;
  font-size: 11px;
  font-weight: 700;
}
.clip-info p { color: var(--muted); font-size: 13px; }
.clip-fix {
  color: var(--text) !important;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
}
.clip-meta { color: var(--muted); font-size: 13px; }
.clip-actions { display: grid; grid-template-columns: minmax(110px, 1.1fr) minmax(88px, .9fr) 34px; gap: 7px; align-items: stretch; }
.clip-actions a, .clip-actions button {
  min-height: 38px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.download { background: linear-gradient(180deg, #dc2626, #b91c1c); color: #fff; }
.clip-action-menu { position: relative; z-index: 3; }
.clip-more-actions {
  width: 34px;
  padding: 0;
  border: 1px solid var(--line);
  background: #fff;
  color: #667085;
  font-size: 21px !important;
  font-weight: 800 !important;
  line-height: 1;
  cursor: pointer;
}
.clip-more-actions svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  pointer-events: none;
}
.clip-more-actions:hover,
.clip-more-actions:focus-visible {
  border-color: rgba(240, 90, 18, .34);
  background: #fff8f3;
  color: #ed5a16;
  outline: none;
}
.clip-more-menu {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  min-width: 112px;
  padding: 5px;
  border: 1px solid rgba(240, 90, 18, .18);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(17, 24, 39, .16);
}
.clip-more-menu .post-clip {
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #ec5b16;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
}
.clip-more-menu .post-clip:hover,
.clip-more-menu .post-clip:focus-visible {
  background: #fff2ea;
  outline: none;
}
.edit-caption, .open-clip, .edit-clip { border: 1px solid var(--line); background: #fff; color: var(--text); }
.clip-review-link {
  margin-top: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  text-align: left;
  padding: 0;
}

.clip-review-link:hover,
.clip-review-link:focus-visible {
  color: #d74717;
  outline: none;
}

@media (max-width: 1180px) {
  .editor-shell {
    grid-template-columns: minmax(0, 1fr);
    border-radius: 22px;
  }

  .editor-sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .editor-clip-rail {
    max-height: none;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

@media (max-width: 780px) {
  .editor-view {
    padding-inline: 12px;
  }

  .editor-stage-card,
  .editor-timeline-card,
  .editor-sidebar {
    border-radius: 0;
  }

  .editor-stage-head,
  .editor-timeline-head,
  .editor-sidebar-head {
    flex-direction: column;
  }

  .editor-hud {
    grid-template-columns: 1fr;
  }

  .editor-video-stage {
    min-height: 260px;
  }

  .editor-timeline-body {
    display: block;
  }

  .editor-timeline-bottom {
    margin-top: 10px;
  }

  .editor-timeline-sidezoom {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .editor-timeline-sidezoom-label {
    width: 100%;
    text-align: left;
  }

  .editor-timeline-sidezoom-control {
    width: 100%;
  }

  .editor-zoom-slider-side {
    width: 100%;
    height: 16px;
  }

  .editor-waveform {
    height: 112px;
    gap: 3px;
  }
}
.inline-volume-menu {
  position: fixed;
  z-index: 120;
  min-width: 168px;
  padding: 10px 12px;
  border: 1px solid rgba(17,24,39,.12);
  border-radius: 12px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 16px 34px rgba(17,24,39,.18);
  display: grid;
  gap: 6px;
}
.inline-volume-menu label {
  font-size: 12px;
  font-weight: 700;
  color: #6b7280;
}
.inline-volume-menu input[type="range"] {
  width: 100%;
  accent-color: #ea5b1a;
}
.inline-scrub-tooltip {
  position: fixed;
  transform: translate(-50%, -100%);
  padding: 4px 8px;
  border-radius: 8px;
  background: rgba(17, 24, 39, 0.92);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  pointer-events: none;
  z-index: 121;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.28);
}

.clip-viewer {
  position: fixed;
  inset: 0;
  z-index: 90;
  overflow: auto;
  background: rgba(17, 24, 39, .34);
  backdrop-filter: blur(8px);
  color: var(--text);
}
.viewer-header {
  width: min(980px, calc(100% - 40px));
  margin: 42px auto 0;
  padding: 22px 24px 18px 74px;
  position: relative;
  border: 1px solid rgba(17,24,39,.08);
  border-bottom: 0;
  border-radius: 24px 24px 0 0;
  background: rgba(255,255,255,.98);
}
.viewer-header h1 {
  margin: 0;
  max-width: 720px;
  font-size: 27px;
  line-height: 1.18;
}
.viewer-kicker {
  color: var(--muted);
  font-size: 13px;
  margin: 0 0 8px;
}
.viewer-back {
  position: absolute;
  left: 20px;
  top: 22px;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: #111827;
  background: #fff;
}
.viewer-grid {
  width: min(980px, calc(100% - 40px));
  margin: 0 auto 44px;
  display: grid;
  grid-template-columns: minmax(260px, 430px) minmax(320px, 1fr);
  gap: 16px;
  align-items: start;
  padding: 22px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 0 0 24px 24px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 26px 70px rgba(17,24,39,.18);
}
.viewer-video-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 74vh;
  border-radius: 14px;
  overflow: hidden;
  background: #08090d;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.viewer-video-wrap video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #08090d;
}
.viewer-play-overlay {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74px;
  height: 74px;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #111827;
  font-size: 30px;
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
  cursor: pointer;
}
.transcript-panel {
  height: auto;
  min-height: 0;
  max-height: 74vh;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 16px 14px;
  overflow: auto;
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.transcript-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 45px;
  border-bottom: 1px solid var(--line);
}
.transcript-head h2 {
  font-size: 13px;
  margin: 0;
}
.transcript-head span {
  color: var(--muted);
  font-size: 12px;
}
.scene-analysis {
  border-bottom: 1px solid var(--line);
  margin: 0;
  padding: 14px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-line;
}
.viewer-transcript {
  display: grid;
  padding-top: 12px;
}
.transcript-cue {
  border: 0;
  border-radius: 8px;
  color: var(--text);
  background: transparent;
  text-align: left;
  padding: 6px 5px;
  line-height: 1.45;
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: 8px;
}
.transcript-clear {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  cursor: pointer;
}
.transcript-clear:hover {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fff5f5;
}
.transcript-cue:hover,
.transcript-cue.active {
  background: #fff5f5;
  color: #991b1b;
}
.transcript-cue.uncertain {
  background: rgba(253, 224, 71, 0.18);
  color: #92400e;
}
.transcript-cue.uncertain:hover,
.transcript-cue.uncertain.active {
  background: rgba(253, 224, 71, 0.28);
}
.transcript-cue time {
  color: var(--muted);
  display: inline-block;
  width: 48px;
  vertical-align: top;
}
.transcript-seek {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.transcript-edit {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  color: var(--text);
  background: #fff;
}
.viewer-actions {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  align-content: start;
}
.viewer-actions > * {
  min-height: 42px;
  display: block;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.viewer-actions .viewer-primary {
  background: #ea5b1a;
  color: #fff;
  border-color: #ea5b1a;
  text-align: center;
  padding: 10px 12px;
}
.viewer-field {
  display: grid;
  gap: 6px;
}
.viewer-field > span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.viewer-field input,
.viewer-field textarea,
.viewer-field select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  color: var(--text);
  background: #fff;
}
.viewer-field textarea {
  min-height: 100px;
  resize: vertical;
}
.viewer-boundary-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}
.viewer-boundary-head h3 {
  margin: 0;
  font-size: 13px;
}
.viewer-boundary-head span {
  color: var(--muted);
  font-size: 12px;
}
.viewer-boundary-sliders {
  display: grid;
  gap: 8px;
}
.viewer-boundary-sliders label {
  display: grid;
  gap: 4px;
}
.viewer-boundary-sliders span {
  font-size: 12px;
  color: var(--muted);
}
.viewer-reasons,
.viewer-positives {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  display: grid;
  gap: 6px;
}
.viewer-reasons legend,
.viewer-positives legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 12px;
}
.viewer-reasons label,
.viewer-positives label {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.viewer-rating-grid {
  display: grid;
  gap: 8px;
}
.viewer-rating-grid label {
  display: grid;
  gap: 4px;
  font-size: 12px;
  color: var(--muted);
}
.viewer-rating-grid input[type="range"] {
  accent-color: #ea5b1a;
}
.viewer-toggle,
.viewer-toggle {
  grid-template-columns: 18px 1fr;
  align-items: center;
  min-height: 0;
  cursor: pointer;
}
.viewer-toggle input {
  width: 16px;
  height: 16px;
  margin: 0;
}

.feedback-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: rgba(17, 24, 39, .58);
  display: grid;
  place-items: center;
  padding: 24px;
}
.feedback-dialog {
  width: min(720px, 100%);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 20px;
  box-shadow: var(--shadow-lg);
}
.feedback-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.feedback-head h2 {
  margin: 0 0 6px;
  font-size: 20px;
}
.feedback-head p {
  margin: 0;
  color: var(--muted);
}
.delete-project-dialog {
  width: min(440px, 100%);
}
.icon-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #6b7280;
  display: grid;
  place-items: center;
  font-size: 18px;
  line-height: 1;
  padding: 0;
  box-shadow: none;
}
.icon-close:hover,
.icon-close:focus-visible {
  background: rgba(17, 24, 39, .04);
  color: #111827;
}
.feedback-form {
  display: grid;
  gap: 16px;
}
.feedback-form label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}
.feedback-form input[type="text"] {
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 0 12px;
}
.feedback-form input[type="text"]:focus {
  outline: none;
  border-color: rgba(234, 91, 26, .45);
  box-shadow: 0 0 0 3px rgba(234, 91, 26, .14);
}
.delete-project-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.editor-track-filmstrip-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  border-radius: inherit;
}

/* Project deletion follows the warm Shortly confirmation treatment rather
   than the browser-like red danger dialog. */
#deleteProjectModal {
  background: rgba(48, 31, 21, .48);
  backdrop-filter: blur(6px);
}
#deleteProjectModal .delete-project-dialog {
  width: min(560px, 100%);
  padding: 24px 20px 20px;
  border: 1px solid rgba(249, 115, 22, .24);
  border-radius: 18px;
  background: linear-gradient(145deg, #ffffff 0%, #fff8f2 100%);
  box-shadow: 0 24px 60px rgba(105, 49, 18, .27), 0 1px 0 rgba(255, 255, 255, .9) inset;
}
#deleteProjectModal .feedback-head {
  align-items: center;
  margin-bottom: 18px;
  padding: 0 4px;
}
#deleteProjectModal .feedback-head h2 {
  color: #1f2937;
}
#deleteProjectModal .feedback-head p {
  color: #6b7280;
}
#deleteProjectModal .icon-close:hover,
#deleteProjectModal .icon-close:focus-visible {
  background: #fff0e6;
  color: #ea580c;
}
#deleteProjectModal .delete-project-actions {
  gap: 12px;
}
#deleteProjectModal .delete-project-actions button {
  min-height: 44px;
  border-radius: 12px;
  font-weight: 800;
}
#deleteProjectModal .delete-project-actions .quiet-button {
  border-color: #f1d8c6;
  background: #fffdfb;
  color: #9a3412;
}
#deleteProjectModal .delete-project-actions .quiet-button:hover {
  background: #fff1e8;
}
#deleteProjectModal .delete-project-actions .feedback-submit {
  border: 0;
  background: linear-gradient(135deg, var(--orange-accent-2) 0%, var(--orange-accent) 100%);
  color: #fff;
  box-shadow: 0 10px 22px rgba(255, 107, 17, .24);
}
#deleteProjectModal .delete-project-actions .feedback-submit:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

/* Compact light-mode rename dialog, aligned with the ChatGPT rename flow. */
#renameProjectModal {
  background: rgba(15, 23, 42, .38);
}

#renameProjectModal .rename-project-dialog {
  width: min(420px, 100%);
  padding: 20px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .18);
}

#renameProjectModal .feedback-head {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding-right: 0;
  text-align: left;
}

#renameProjectModal .feedback-head h2 {
  margin: 0 0 4px;
  color: #1f2937;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -.02em;
}

#renameProjectModal .feedback-head p {
  color: #6b7280;
  font-size: 14px;
}

#renameProjectModal .icon-close {
  width: 28px;
  height: 28px;
  color: #6b7280;
  font-size: 20px;
}

#renameProjectModal .rename-project-field {
  display: block;
  margin: 0;
}

#renameProjectModal .rename-project-field input {
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #d1d5db;
  border-radius: 11px;
  background: #ffffff;
  color: #1f2937;
  font-size: 14px;
  font-weight: 450;
  box-shadow: none;
}

#renameProjectModal .rename-project-field input:focus {
  border-color: #6b7280;
  box-shadow: 0 0 0 3px rgba(107, 114, 128, .14);
}

#renameProjectModal .rename-project-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

#renameProjectModal .rename-project-actions button {
  min-height: 32px;
  padding: 0 16px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
}

#renameProjectModal .rename-project-actions .quiet-button {
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
}

#renameProjectModal .rename-project-actions .feedback-submit {
  border: 1px solid #212121;
  background: #212121;
  color: #ffffff;
}
.clip-rendering-actions {
  grid-template-columns: 1fr;
}
.delete-confirm-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  color: #4b5563;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}
.delete-confirm-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.delete-checkmark {
  width: 20px;
  height: 20px;
  border-radius: 7px;
  border: 1px solid rgba(17,24,39,.16);
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.delete-checkmark::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px);
  opacity: 0;
}
.delete-confirm-toggle input:checked + .delete-checkmark {
  border-color: #ef4444;
  background: #ef4444;
  box-shadow: 0 6px 16px rgba(239,68,68,.22);
}
.delete-confirm-toggle input:checked + .delete-checkmark::after {
  opacity: 1;
}
.delete-confirm-toggle:hover .delete-checkmark {
  border-color: rgba(239,68,68,.44);
}
.delete-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.delete-confirm-actions .quiet-button,
.delete-confirm-actions .feedback-submit {
  min-width: 62px;
  border-radius: 12px;
}
.feedback-notes {
  display: grid;
  gap: 8px;
  color: var(--muted);
}
.feedback-notes textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  padding: 12px;
  resize: vertical;
}
.feedback-ratings {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.88);
}
.rating-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  color: var(--text);
}
.rating-hint {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.rating-row {
  display: grid;
  grid-template-columns: 88px 1fr 24px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.rating-row input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
}
.rating-row strong {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.feedback-options {
  display: grid;
  gap: 10px;
}
.feedback-options label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
}
.feedback-options input {
  width: 16px;
  height: 16px;
}
.feedback-actions {
  display: flex;
  justify-content: end;
  gap: 10px;
}
.feedback-submit {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(180deg, #dc2626, #b91c1c);
  color: #fff;
  font-weight: 750;
}
.delete-confirm-toggle {
  width: 100%;
  margin-bottom: 6px;
}
.delete-confirm-actions {
  display: flex;
  justify-content: end;
  gap: 10px;
}

.streamers-view {
  width: min(1380px, 100%);
  margin: 0 auto;
  padding: 24px 0 72px;
}
.streamers-layout {
  display: grid;
  grid-template-columns: minmax(320px, 360px) minmax(0, 1fr);
  gap: 18px;
}
.streamers-sidebar {
  min-width: 0;
}
.stack-card,
.streamer-clips-panel {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255, 255, 255, .94);
  box-shadow: var(--shadow-md);
  padding: 18px;
}
.stack-card-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.stack-card-head .plus-button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff5f5;
  color: #b91c1c;
  font-size: 22px;
  line-height: 1;
}
.stack-card-head h2,
.streamer-clips-head h2 {
  margin: 4px 0 0;
  font-size: 24px;
}
.panel-kicker {
  margin: 0;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 11px;
}
.favorite-form {
  display: grid;
  gap: 12px;
  margin-bottom: 18px;
}
.view-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-bottom: 14px;
}
.view-form input {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  padding: 0 12px;
}
.favorite-form label,
.clip-date-range label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 14px;
}
.favorite-form input,
.favorite-form select,
.streamer-clips-controls select,
.clip-date-range input,
.clip-date-range select {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  padding: 0 12px;
}
.favorite-form select,
.streamer-clips-controls select,
.clip-date-range select {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 18px,
    calc(100% - 12px) 18px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}
.favorite-form select:focus,
.streamer-clips-controls select:focus,
.clip-date-range select:focus,
.auth-inline-form select:focus {
  outline: none;
  border-color: rgba(239, 68, 68, .55);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.favorites-list {
  display: grid;
  gap: 10px;
}
.stack-action {
  width: 100%;
  margin-top: 12px;
}
.views-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.views-list.drop-active {
  outline: 1px solid rgba(94, 145, 255, .35);
  outline-offset: 2px;
  border-radius: 12px;
}
.panel-note {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.empty-state {
  padding: 10px 0 4px;
}
.create-group-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px dashed rgba(255,105,0,.32);
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,145,0,.13), rgba(255,105,0,.055));
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.create-group-row:hover {
  border-color: rgba(255,105,0,.58);
  background: linear-gradient(135deg, rgba(255,145,0,.20), rgba(255,105,0,.10));
  transform: translateY(-1px);
}
.create-group-plus {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff9100, #ff6900);
  color: #fff;
  box-shadow: 0 8px 16px rgba(255,105,0,.18);
  font-size: 23px;
}
.create-group-row strong,
.create-group-row small {
  display: block;
}
.create-group-row strong {
  font-size: 14px;
}
.create-group-row small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}
.favorite-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  backdrop-filter: blur(10px);
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.favorite-card:hover {
  border-color: rgba(239,68,68,.16);
  background: #fff7f7;
}
.favorite-card.platform-twitch {
  border-color: rgba(145, 70, 255, .32);
}
.favorite-card.platform-kick {
  border-color: rgba(239, 68, 68, .22);
}
.favorite-card[draggable="true"] {
  cursor: grab;
}
.favorite-card[draggable="true"]:active {
  cursor: grabbing;
}
.favorite-card.active {
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .26);
}
.favorite-card.active.platform-twitch {
  border-color: rgba(145, 70, 255, .82);
}
.favorite-card.active.platform-kick {
  border-color: rgba(239, 68, 68, .82);
}
.favorite-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow: hidden;
  background: #f3f4f6;
  display: grid;
  place-items: center;
  color: #111827;
  font-weight: 750;
  border: 2px solid rgba(239, 68, 68, .14);
}
.favorite-card.platform-twitch .favorite-avatar {
  border-color: rgba(145, 70, 255, .46);
}
.favorite-card.platform-kick .favorite-avatar {
  border-color: rgba(239, 68, 68, .38);
}
.favorite-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.favorite-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.favorite-copy strong {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.favorite-copy span {
  color: var(--muted);
  font-size: 13px;
}
.favorite-platform {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f3f4f6;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 11px;
}
.favorite-platform.platform-twitch {
  background: rgba(145, 70, 255, .11);
  color: #7c3aed;
  border: 1px solid rgba(145, 70, 255, .24);
}
.favorite-platform.platform-kick {
  background: #fff5f5;
  color: #b91c1c;
  border: 1px solid rgba(239, 68, 68, .16);
}
.favorite-remove {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(17,24,39,.08);
  border-radius: 12px;
  background: rgba(255,255,255,.82);
  color: #8a93a3;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.favorite-remove:hover {
  background: #fff1f1;
  border-color: rgba(239,68,68,.26);
  color: #dc2626;
  box-shadow: 0 8px 18px rgba(239,68,68,.12);
  transform: translateY(-1px);
}
.trash-icon {
  width: 17px;
  height: 17px;
  display: block;
  stroke-width: 2.2;
}
.view-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 62px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  backdrop-filter: blur(10px);
  color: var(--text);
}
.view-card:hover {
  border-color: rgba(239,68,68,.16);
  background: #fff7f7;
}
.view-card.active {
  border-color: rgba(239, 68, 68, .82);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .22);
}
.view-card.is-editing {
  border-color: rgba(239, 68, 68, .9);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .26), 0 0 0 1px rgba(239, 68, 68, .12);
}
.individuals-card.active {
  border-color: rgba(239, 68, 68, .82);
  box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .22);
}
.view-card-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.view-card-main strong {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.view-card-main span {
  color: var(--muted);
  font-size: 13px;
}
.view-card-edit {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.view-rename-input {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(239, 68, 68, .55);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  padding: 0 12px;
  font-weight: 700;
  outline: none;
}
.view-rename-input:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.view-rename-meta {
  color: var(--muted);
  font-size: 13px;
}
.view-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.view-card.is-editing .view-card-actions {
  gap: 6px;
}
.view-card.is-editing .view-card-actions .quiet-link {
  min-height: 34px;
  padding: 0 10px;
  border-radius: 8px;
}
.view-card.drop-active,
.individuals-card.drop-active {
  border-color: rgba(239, 68, 68, .82);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, .2), inset 0 0 0 1px rgba(239, 68, 68, .16);
}
.streamer-clips-panel {
  min-width: 0;
}

.clips-pagination {
  display: flex;
  justify-content: center;
  padding: 14px 0 6px;
}
.load-more-button {
  position: relative;
  overflow: visible;
  min-width: 168px;
  border: 0;
  color: #fff;
  font-weight: 800;
  letter-spacing: .01em;
  background: linear-gradient(180deg, #ff8a4c 0%, #ea5b1a 100%);
  box-shadow:
    0 10px 22px rgba(234, 91, 26, .22),
    0 0 0 1px rgba(255, 142, 89, .28);
}
.load-more-button::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from 0deg,
    rgba(255,255,255,0) 0deg,
    rgba(255,255,255,.92) 48deg,
    rgba(255,174,117,.95) 92deg,
    rgba(255,255,255,0) 140deg,
    rgba(255,255,255,0) 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: loadMoreRingSpin 2.8s linear infinite;
  pointer-events: none;
  opacity: .95;
}
.load-more-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.08);
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.load-more-button:hover,
.load-more-button:focus-visible {
  transform: translateY(-1px);
  box-shadow:
    0 12px 26px rgba(234, 91, 26, .28),
    0 0 0 1px rgba(255, 142, 89, .34);
}
.load-more-button:hover::after,
.load-more-button:focus-visible::after {
  opacity: 1;
}
.load-more-button:disabled {
  color: rgba(255,255,255,.78);
  background: linear-gradient(180deg, #ff9a66 0%, #ef6b2f 100%);
  opacity: .92;
}
@keyframes loadMoreRingSpin {
  to { transform: rotate(360deg); }
}
.streamer-clips-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
.streamer-clips-head p {
  margin: 4px 0 0;
  color: var(--muted);
}
.streamer-clips-controls {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
}
.filter-sort,
.filter-time-group {
  display: grid;
  gap: 7px;
}
.filter-sort {
  min-width: 190px;
}
.clip-sort-picker { position: relative; }
.clip-sort-native {
  position: absolute;
  width: 1px !important;
  min-height: 1px !important;
  height: 1px;
  margin: -1px;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.clip-sort-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font: inherit;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(17, 24, 39, .02);
}
.clip-sort-trigger svg {
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  fill: none;
  stroke: #8d96a5;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.clip-sort-picker.is-open .clip-sort-trigger {
  border-color: #ff9e54;
  box-shadow: 0 0 0 3px rgba(255, 105, 0, .12);
}
.clip-sort-picker.is-open .clip-sort-trigger svg { transform: rotate(180deg); }
.clip-sort-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  display: grid;
  gap: 3px;
  padding: 6px;
  border: 1px solid rgba(17, 24, 39, .10);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(17, 24, 39, .14);
}
.clip-sort-menu[hidden] { display: none !important; }
.clip-sort-menu button {
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.clip-sort-menu button:hover,
.clip-sort-menu button:focus-visible,
.clip-sort-menu button[aria-selected="true"] {
  background: var(--orange-accent-soft, #fff0e2);
  color: #d85b00;
  outline: none;
}
.filter-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.filter-time-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.streamer-clips-controls select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, #6b7280 50%),
    linear-gradient(135deg, #6b7280 50%, transparent 50%);
  background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.hours-filter input {
  width: 120px;
  min-height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  padding: 0 12px;
  outline: none;
}
.hours-filter input:focus {
  border-color: rgba(239, 68, 68, .8);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, .12);
}
.clip-date-range {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, auto));
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}
.clip-date-range button {
  align-self: end;
}
.social-clips {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}
.social-clip {
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  backdrop-filter: blur(12px);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transform: translateY(0);
}
.social-clip:hover {
  border-color: rgba(239,68,68,.16);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.skeleton-card {
  pointer-events: none;
}
.skeleton-media {
  display: block;
  aspect-ratio: 16 / 9;
}
.skeleton-line {
  display: block;
  height: 12px;
  border-radius: 999px;
}
.skeleton-title {
  width: 78%;
  height: 14px;
}
.skeleton-meta {
  width: 56%;
}
.skeleton-action {
  width: 100%;
  height: 39px;
  border-radius: 12px;
  margin-top: 4px;
}
.skeleton-shimmer {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
}
.skeleton-shimmer::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: shimmer 1.25s ease-in-out infinite;
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}
.social-clip-preview {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: #f3f4f6;
  aspect-ratio: 16 / 9;
  cursor: pointer;
}
.social-clip-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.00), rgba(17,24,39,.08));
  pointer-events: none;
}
.social-clip-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.social-clip-play {
  position: absolute;
  left: 10px;
  top: 10px;
  padding: 5px 9px;
  border-radius: 7px;
  background: rgba(17, 24, 39, .82);
  color: #fff;
  font-size: 12px;
  font-weight: 750;
}
.social-clip-body {
  display: grid;
  gap: 8px;
  padding: 11px 12px 12px;
}
.social-clip-title {
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  color: var(--text);
}
.social-clip-meta {
  display: flex;
  gap: 6px 8px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 12px;
}
.social-clip-creator {
  color: var(--muted);
  font-size: 12px;
}
.social-clip-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.use-source-button,
.quiet-link {
  min-height: 34px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.use-source-button {
  width: 100%;
  min-height: 40px;
  background: #fff5f5;
  border-color: rgba(239,68,68,.18);
  font-weight: 700;
}
.use-source-button:hover {
  background: #fee2e2;
  border-color: rgba(239,68,68,.28);
}
.quiet-link {
  text-decoration: none;
}
.use-source-button:hover,
.quiet-link:hover {
  border-color: rgba(239,68,68,.35);
}

.streamer-preview-modal {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(17, 24, 39, .42);
  display: grid;
  place-items: center;
  padding: 24px;
}
.streamer-preview-dialog {
  width: min(1100px, 100%);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  box-shadow: var(--shadow-lg);
}
.streamer-preview-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.streamer-preview-head h2 {
  margin: 4px 0 6px;
  font-size: 24px;
}
.streamer-preview-head p {
  margin: 0;
  color: var(--muted);
}
.streamer-preview-player {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid var(--line);
}
.streamer-preview-player video,
.streamer-preview-player iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #f3f4f6;
}
.streamer-preview-actions {
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 980px) {
  .create-shell {
    max-width: 620px;
  }
  .create-copy {
    max-width: none;
    padding-bottom: 6px;
  }
}

@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
    gap: 12px;
    padding-top: 12px;
  }
  .app-sidebar {
    position: static;
    border-right: 0;
    padding: 0 4px;
    gap: 8px;
    width: auto;
    min-height: 0;
    overflow: visible;
  }
  .app-content { grid-column: 1; }
.sidebar-nav {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sidebar-link {
    text-align: center;
    justify-content: center;
  }
  .app-header { padding: 0 14px; }
  .brand span:last-child { display: none; }
  .welcome-message { left: 92px; font-size: 13px; }
  .header-user { gap: 8px; }
  .signed-in-as { display: none; }
  .auth-view { width: calc(100% - 28px); padding: 28px 0 44px; min-height: calc(100vh - 68px); }
  .auth-grid { grid-template-columns: 1fr; }
  .generation-options { grid-template-columns: 1fr; }
  .create-view { padding: 18px 14px 32px; }
  .create-shell { padding: 0; border-radius: 0; }
  .create-copy { padding: 16px 12px 8px; }
  .projects-view { padding: 28px 14px; }
  .projects-head { align-items: start; gap: 20px; flex-direction: column; }
  .projects-grid, .clips { grid-template-columns: 1fr; }
  .projects-grid.has-project-expand {
    grid-template-columns: minmax(220px, 1fr);
  }
  .projects-grid.has-project-expand.is-projects-expanded {
    grid-template-columns: 1fr;
  }
  .projects-grid.has-project-expand .project-expand-card {
    right: 12px;
    top: 50%;
  }
  .projects-grid.has-project-expand.is-projects-expanded .project-expand-card {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
  }
  .viewer-header, .viewer-grid { width: calc(100% - 28px); }
  .viewer-grid { grid-template-columns: 1fr; }
  .viewer-video-wrap { width: min(100%, 300px); margin: 0 auto; }
  .transcript-panel { height: min(54vh, 420px); }
  .viewer-actions { grid-column: auto; grid-template-columns: 1fr 1fr; }
  .feedback-actions { flex-direction: column; }
.feedback-actions > * { width: 100%; }
  .landing-nav {
    gap: 12px;
    width: 100%;
  }
  .landing-auth-actions {
    gap: 8px;
  }
  .landing-signin {
    padding-inline: 10px;
  }
  .landing-create-account {
    padding-inline: 14px;
  }
  .auth-hero {
    gap: 16px;
    padding-top: 12px;
  }
  .auth-hero h1 {
    font-size: clamp(30px, 9vw, 46px);
    max-width: 16ch;
  }
  .hero-copy {
    font-size: 16px;
  }
  .hero-link-bar {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    border-radius: 18px;
    padding: 10px;
  }
  .hero-link-field {
    min-height: 44px;
    padding: 0 12px;
    border-radius: 18px;
  }
  .hero-link-button {
    width: 100%;
  }
  .hero-trust {
    flex-direction: column;
    gap: 10px;
  }
  .landing-faq {
    margin-top: 44px;
    padding: 0 16px 72px;
  }
  .landing-pricing {
    margin-top: 52px;
    padding: 0 2px;
  }
  .landing-pricing-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  body.free-plan-enabled .landing-pricing-grid {
    grid-template-columns: 1fr;
  }
  .landing-plan-card {
    padding: 22px 20px;
  }
  .landing-plan-head p {
    min-height: 0;
  }
  .landing-faq h2 {
    margin-bottom: 22px;
    font-size: clamp(32px, 10vw, 44px);
  }
  .faq-item summary {
    padding: 18px 16px;
    font-size: 16px;
  }
  .faq-item p {
    padding: 0 16px 18px;
    font-size: 14px;
  }
  .streamers-layout {
    grid-template-columns: 1fr;
  }
  .streamer-clips-head {
    flex-direction: column;
  }
  .streamer-clips-controls,
  .filter-sort,
  .filter-time-group {
    width: 100%;
  }
  .filter-time-actions .hours-filter {
    flex: 1;
  }
  .hours-filter input {
    width: 100%;
  }
  .view-form {
    grid-template-columns: 1fr;
  }
  .social-clips {
    grid-template-columns: 1fr;
  }
  .clip-date-range {
    grid-template-columns: 1fr;
  }
  .view-card {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .view-card-actions {
    justify-content: space-between;
  }
  .favorite-card {
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .favorite-remove {
    grid-column: 3;
    justify-self: end;
  }
  .streamer-preview-dialog {
    padding: 14px;
  }
}

@media (min-width: 1100px) {
  .social-clips {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (min-width: 760px) and (max-width: 1099px) {
  .social-clips {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Desktop AI video editor */
body.editor-mode {
  min-height: 100vh;
  overflow: hidden;
  background: #f6f7fb;
}

body.editor-mode::before,
body.editor-mode #appHeader,
body.editor-mode .app-sidebar,
body.editor-mode .app-shell::before {
  display: none !important;
}

body.editor-mode .app-shell {
  display: block;
  padding: 0;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body.editor-mode .app-content {
  min-height: 100vh;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

body.editor-mode #editorView {
  display: block !important;
  position: fixed;
  inset: 0;
  z-index: 100;
}

body.editor-mode #createView,
body.editor-mode #projectsView,
body.editor-mode #streamersView,
body.editor-mode #clipViewer {
  display: none !important;
}

.editor-view {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #f6f7fb;
}

.editor-shell {
  display: grid;
  grid-template-columns: 76px 340px minmax(0, 1fr);
  width: 100%;
  height: 100vh;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: #f6f7fb;
  box-shadow: none;
}

.editor-tool-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  padding: 14px 8px;
  border-right: 1px solid #e5e7eb;
  background: #ffffff;
}

.editor-tool-stack {
  display: grid;
  gap: 6px;
}

.editor-tool-button {
  min-height: 62px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #6b7280;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
}

.editor-tool-button.active,
.editor-tool-button[aria-selected="true"],
.editor-tool-button:hover,
.editor-tool-button:focus-visible {
  background: #eff6ff;
  color: #2563eb;
}

.editor-tool-icon {
  width: 26px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #f3f4f6;
  color: inherit;
}

.editor-tool-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.editor-tool-button.active .editor-tool-icon,
.editor-tool-button[aria-selected="true"] .editor-tool-icon {
  background: #dbeafe;
}

.editor-tool-bottom {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.editor-tool-round,
.editor-icon-button,
.editor-transport-button {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #4b5563;
  font-size: 18px;
  font-weight: 800;
  box-shadow: none;
}

.editor-icon-button svg,
.editor-transport-button svg,
.editor-transport-play svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  pointer-events: none;
}

.editor-icon-button-label {
  width: auto;
  min-width: 74px;
  padding: 0 12px;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.editor-icon-button-label span {
  line-height: 1;
  white-space: nowrap;
}

.editor-tool-round:hover,
.editor-icon-button:hover,
.editor-transport-button:hover,
.editor-tool-round:focus-visible,
.editor-icon-button:focus-visible,
.editor-transport-button:focus-visible {
  border-color: transparent;
  background: transparent;
  color: #111827;
}

.editor-icon-button:disabled,
.editor-transport-button:disabled,
.editor-fit-button:disabled {
  cursor: not-allowed;
  opacity: .42;
}

.editor-sidebar {
  min-height: 100vh;
  padding: 22px 18px;
  border-right: 1px solid #e5e7eb;
  background: #ffffff;
  overflow: auto;
}

.editor-sidebar-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 16px;
}

.editor-sidebar-head {
  align-items: flex-start;
  margin-bottom: 18px;
}

.editor-sidebar-head h3,
.editor-text-panel-head h3 {
  margin: 0;
  color: #111827;
  font-size: 21px;
  line-height: 1.15;
}

.editor-sidebar-head p,
.editor-text-panel-head p {
  margin: 7px 0 0;
  color: #6b7280;
  font-size: 13px;
  line-height: 1.45;
}

.editor-sidebar-panel {
  margin-top: 0;
}

.editor-text-panel {
  display: grid;
  gap: 12px;
}

.editor-subtitle-workspace {
  display: grid;
  gap: 14px;
}

.editor-subtitle-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.editor-subtitle-primary {
  min-height: 42px;
}

.editor-transcript-card-sidebar {
  display: grid;
  gap: 0;
  padding: 0;
  border: 1px solid #e6ebf2;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
  overflow: hidden;
}

.editor-transcript-card-sidebar .editor-transcript-head {
  margin-bottom: 0;
  padding: 16px 16px 12px;
  border-bottom: 1px solid #eef2f7;
}

.editor-transcript-card-sidebar .panel-kicker {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.editor-effects-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.editor-effects-card-label {
  margin: 0;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.editor-apply-all-button {
  width: 100%;
  min-height: 42px;
  border: 1px solid rgba(234, 91, 26, 0.24);
  border-radius: 12px;
  background: linear-gradient(180deg, #ff7b3d 0%, #ea5b1a 100%);
  color: #ffffff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 10px 24px rgba(234, 91, 26, 0.2);
}

.editor-apply-all-button:hover,
.editor-apply-all-button:focus-visible {
  filter: brightness(1.03);
}

.editor-apply-all-button:disabled {
  cursor: not-allowed;
  opacity: .55;
  filter: none;
  box-shadow: none;
}

.editor-control-stackless {
  gap: 0;
}

.editor-color-control input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.editor-color-picker-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  width: 100%;
  padding: 0 9px;
  border: 1px solid #d8e0eb;
  border-radius: 10px;
  background: #ffffff;
  box-sizing: border-box;
  box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 2px 8px rgba(15, 23, 42, .03);
}

.editor-color-picker-swatch {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(15, 23, 42, .12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45);
  flex: 0 0 auto;
}

.editor-color-picker-value {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
}

.editor-control-toggle {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.editor-subtitle-options {
  display: grid;
  gap: 12px;
}

.editor-subtitle-card {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(15, 23, 42, .04);
}

.editor-subtitle-card h4,
.editor-supported-imports h4 {
  margin: 0;
  color: #111827;
  font-size: 14px;
  line-height: 1.2;
}

.editor-subtitle-card p {
  margin: 5px 0 0;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.45;
}

.editor-whisper-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.editor-whisper-meta span,
.editor-import-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #475569;
  font-size: 11px;
  font-weight: 800;
}

.editor-whisper-status {
  min-height: 18px;
  color: #2563eb;
  font-size: 12px;
  line-height: 1.35;
}

.editor-whisper-status.error {
  color: #b91c1c;
}

.editor-supported-imports {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  background: #f9fafb;
}

.editor-import-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.editor-text-panel textarea,
.editor-text-panel select,
.editor-text-panel input[type="color"] {
  border-radius: 9px;
}

.editor-text-panel textarea {
  min-height: 52px;
  padding: 8px 10px;
  border: 1px solid #d8e0eb;
  background: #ffffff;
  color: #111827;
  font-size: 12px;
  line-height: 1.35;
  resize: vertical;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, .03);
}

.editor-text-panel select {
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #d8e0eb;
  background: #ffffff;
  color: #111827;
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .03);
}

.editor-text-panel input[type="range"] {
  accent-color: #3b82f6;
}

.editor-main {
  min-width: 0;
  min-height: 100vh;
  height: auto;
  display: grid;
  grid-template-rows: 68px auto auto auto;
  background: #f6f7fb;
}

.editor-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 24px;
  border-bottom: 1px solid #e5e7eb;
  background: rgba(255,255,255,.94);
}

.editor-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 0 1 520px;
  justify-content: flex-end;
}

.editor-export-status {
  min-width: 0;
  flex: 1 1 auto;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.editor-export-button {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .editor-header-actions {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex: 0 0 auto;
  }

  .editor-export-status {
    max-width: 220px;
    text-align: right;
  }
}

.editor-export-status[data-tone="working"] {
  color: #2563eb;
}

.editor-export-status[data-tone="success"] {
  color: #15803d;
}

.editor-export-status[data-tone="error"] {
  color: #b91c1c;
}

.editor-title-block {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.editor-back-button {
  width: 36px;
  height: 36px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fff;
  color: #374151;
  font-size: 18px;
  font-weight: 800;
}

.editor-project-title-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  border: 0;
  background: transparent;
  color: #111827;
  padding: 0;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  border-radius: 10px;
  transition: color .16s ease, background-color .16s ease;
}

.editor-project-title-button .project-title-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  font-size: 11px;
}

.editor-project-title-button:hover,
.editor-project-title-button:focus-visible {
  color: #ea5b1a;
  background: rgba(234, 91, 26, .06);
  outline: none;
}

.editor-title-chevron {
  color: #6b7280;
  font-size: 12px;
}

.editor-export-button,
.editor-fit-button {
  min-height: 38px;
  border: 0;
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  box-shadow: none;
}

.editor-export-button {
  padding: 0 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #2563eb);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .24);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}

.editor-export-button:hover,
.editor-export-button:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 14px 28px rgba(37, 99, 235, .3);
  outline: none;
}

.editor-export-button:disabled {
  cursor: default;
  filter: saturate(.7);
  opacity: .75;
  transform: none;
  box-shadow: none;
}

.editor-fit-button {
  border-radius: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111827;
  box-shadow: none;
}

.editor-stage-head {
  display: none;
}

.editor-stage-card {
  min-height: 0;
  padding: 16px 24px 10px;
  display: grid;
  align-content: start;
}

.editor-preview-shell {
  height: 100%;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  align-items: start;
  gap: 18px;
}

.editor-video-stage,
.editor-video-stage[style*="9 / 16"],
.editor-video-stage[style*="9/16"] {
  width: auto !important;
  height: min(40vh, 400px, calc(100vh - 520px)) !important;
  min-width: 0;
  max-width: min(340px, 100%);
  max-height: none !important;
  aspect-ratio: 9 / 16 !important;
  border-radius: 18px;
  border: 1px solid rgba(15,23,42,.10);
  background:
    linear-gradient(180deg, rgba(37,99,235,.10), rgba(20,184,166,.10)),
    #e5e7eb;
  box-shadow: 0 18px 38px rgba(15,23,42,.16);
}

.editor-preview-shell[data-zoom-level="fit"] .editor-video-stage,
.editor-preview-shell[data-zoom-level="fit"] .editor-video-stage[style*="9 / 16"],
.editor-preview-shell[data-zoom-level="fit"] .editor-video-stage[style*="9/16"] {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.editor-video-stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000000;
}

.editor-video-stage.is-blank {
  background: #000000;
}

.editor-video-stage.is-loading {
  background: #000000;
}

.editor-empty-state {
  background:
    linear-gradient(180deg, rgba(17,24,39,.12), rgba(17,24,39,.04)),
    linear-gradient(135deg, #dbeafe, #ccfbf1 50%, #f5d0fe);
}

.editor-loading-state {
  background: #000000;
  color: rgba(255,255,255,.92);
}

.editor-video-stage.is-loading video,
.editor-video-stage.is-loading .editor-image-preview,
.editor-video-stage.is-loading .editor-text-overlay-layer,
.editor-video-stage.is-loading .editor-empty-state {
  visibility: hidden;
}

.editor-empty-state.is-blank {
  background: #000000;
}

.editor-empty-state.is-blank > * {
  display: none;
}

.editor-empty-state h3 {
  color: #ffffff;
  font-size: 42px;
  line-height: .98;
  text-transform: uppercase;
  text-shadow:
    0 3px 0 #111827,
    0 8px 18px rgba(0,0,0,.28);
}

.editor-empty-state p {
  color: #22d3ee;
  font-size: 28px;
  font-weight: 900;
  text-shadow: 0 2px 0 #0f172a;
}

.editor-empty-icon {
  width: auto;
  height: auto;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: #2563eb;
  font-size: 12px;
}

.editor-text-overlay-layer {
  pointer-events: none;
}

.editor-text-overlay {
  transform-origin: 50% 50%;
  max-width: 86%;
  padding: var(--editor-text-box-padding-y, 6px) var(--editor-text-box-padding-x, 10px);
  border-radius: var(--editor-text-box-radius, 0);
  background: var(--editor-text-box-color, transparent);
  color: inherit;
  font-size: 72px;
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: .01em;
  text-align: center;
  text-transform: none;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  word-break: normal;
  text-shadow: none;
}

.editor-accent-overlay {
  position: absolute;
  left: 50%;
  top: 69%;
  transform: translate(-50%, -50%);
  color: #22d3ee;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 0 #0f172a, 0 6px 14px rgba(0,0,0,.24);
  pointer-events: none;
}

.editor-transport-play {
  min-width: 28px;
  height: 28px;
  border-color: transparent;
  background: transparent;
  color: #111827;
  font-size: 0;
}

.editor-transport-row {
  padding: 4px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  flex: 0 0 auto;
}

.editor-timecode {
  color: #374151;
  font-size: 13px;
  letter-spacing: 0;
}

.editor-timecode-end::before {
  content: "/ ";
  color: #9ca3af;
}

.editor-timeline-card {
  min-height: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid #e5e7eb;
  background: #ffffff;
}

.editor-timeline-head-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.editor-timeline-toolbar,
.editor-timeline-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.editor-timeline-toolbar {
  flex: 1 1 auto;
  min-width: 0;
  flex-wrap: wrap;
  justify-self: start;
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.editor-timeline-toolbar .editor-icon-button {
  border: 1px solid rgba(196, 206, 221, 0.9);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.05);
}

.editor-timeline-head-compact > .editor-transport-row {
  justify-self: center;
  margin: 0;
}

.editor-timeline-actions {
  justify-content: flex-end;
  justify-self: end;
  min-width: 0;
}

.editor-zoom-slider {
  width: 168px;
  accent-color: #111827;
}

.editor-timeline-body {
  display: block;
  margin-top: 10px;
}

.editor-timeline-bottom {
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 12px;
}

.editor-timeline-sidezoom {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
}

.editor-timeline-sidezoom-label {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: right;
}

.editor-timeline-sidezoom-control {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
}

.editor-zoom-slider-side {
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.editor-zoom-slider-side:focus {
  outline: none;
}

.editor-zoom-slider-side::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fafc, #e5e7eb);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .45);
}

.editor-zoom-slider-side::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -4px;
  border: 0;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

.editor-zoom-slider-side::-moz-range-track {
  height: 8px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, #f8fafc, #e5e7eb);
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, .45);
}

.editor-zoom-slider-side::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 999px;
  background: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .14);
}

.editor-fit-button-side {
  min-width: 0;
  min-height: 34px;
  padding-inline: 16px;
  flex: 0 0 auto;
}

.editor-speaker-panel {
  display: grid;
  gap: 1px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.06);
}

.editor-speaker-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #2b2b2b;
  color: #f8fafc;
}

.editor-speaker-badge {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 900;
  color: #ffffff;
}

.editor-speaker-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.editor-speaker-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.editor-speaker-layer-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.22);
  color: #93c5fd;
  font-size: 12px;
  font-weight: 700;
}

.editor-speaker-meta {
  color: #cbd5e1;
  font-size: 13px;
}

.editor-speaker-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.editor-speaker-color {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(15, 23, 42, 0.32);
}

.editor-speaker-color input[type="color"] {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.editor-speaker-color-value {
  min-width: 76px;
  color: #f8fafc;
  font-size: 14px;
  font-weight: 700;
  text-transform: lowercase;
}

.editor-speaker-color-label {
  color: #94a3b8;
  font-size: 13px;
  text-transform: lowercase;
}

.editor-caption-chip[data-speaker-color] {
  background: color-mix(in srgb, var(--speaker-chip-color, #60a5fa) 24%, #dbeafe);
  border-color: color-mix(in srgb, var(--speaker-chip-color, #60a5fa) 52%, #93c5fd);
}

.editor-waveform {
  --editor-track-scale: 1;
  min-height: 232px;
  height: auto;
  margin-top: 0;
  padding: 8px 8px 14px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
}

.editor-waveform-scroll {
  overflow-x: auto;
  overflow-y: visible;
  min-height: 210px;
  height: auto;
}

.editor-waveform-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  height: auto;
}

.editor-timeline-empty {
  min-height: 210px;
  display: grid;
  place-items: center;
  padding: 20px 16px 28px;
  border-radius: 12px;
  border: 1px dashed #cbd5e1;
  background: linear-gradient(180deg, #f8fafc, #eef6ff);
  position: relative;
  overflow: hidden;
}

.editor-timeline-empty.drop-active,
.editor-timeline-lane.drop-active {
  border-color: #60a5fa;
  box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22), 0 0 0 3px rgba(191, 219, 254, 0.45);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(239,246,255,.92)),
    radial-gradient(circle at top, rgba(96,165,250,.16), transparent 58%);
}

.editor-media-dragging .editor-timeline-empty-panel {
  opacity: .22;
  transform: scale(.985);
}

.editor-drop-indicator {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 190px;
  max-width: min(280px, calc(100% - 24px));
  padding: 8px 12px 8px 8px;
  border-radius: 18px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 16px 36px rgba(37, 99, 235, 0.16);
  pointer-events: none;
}

.editor-drop-indicator-thumb {
  width: 42px;
  height: 42px;
  overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(180deg, #dbeafe, #bfdbfe);
}

.editor-drop-indicator-thumb img,
.editor-drop-indicator-thumb .editor-drop-indicator-thumb-fallback {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.editor-drop-indicator-thumb-fallback {
  display: grid;
  place-items: center;
  color: #1d4ed8;
  font-size: 16px;
  font-weight: 900;
}
.sidebar-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(17, 24, 39, .08);
}
.sidebar-plan-link {
  color: #f25c16;
}
.sidebar-plan-link .sidebar-link-icon {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  color: #fff;
  background: linear-gradient(135deg, #ff9a1f 0%, #ff6a16 52%, #ff4f1a 100%);
  box-shadow: 0 5px 12px rgba(255, 106, 22, .22);
}
.sidebar-plan-link .sidebar-link-icon svg {
  width: 15px;
  height: 15px;
}
.sidebar-plan-link:hover,
.sidebar-plan-link:focus-visible {
  border-color: rgba(255, 122, 0, .2);
  background: #fff4ea;
}

.editor-drop-indicator-thumb-fallback .shortly-drop-logo {
  width: 72%;
  height: 72%;
  object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(238, 96, 0, .18));
}

.editor-drop-indicator-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.editor-timeline-empty-panel {
  max-width: 420px;
  width: min(100%, 420px);
  display: grid;
  justify-items: center;
  gap: 10px;
  text-align: center;
  color: #334155;
  transition: opacity .16s ease, transform .16s ease;
}

.editor-timeline-empty-panel h3 {
  margin: 4px 0 0;
  font-size: 18px;
  line-height: 1.2;
}

.editor-timeline-empty-panel p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
  line-height: 1.45;
}

.editor-empty-open-media {
  min-height: 40px;
  padding: 0 16px;
  margin-top: 2px;
  border-radius: 999px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 800;
  cursor: pointer;
}

.editor-ruler {
  height: 26px;
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 8px;
  border-bottom: 1px solid #e5e7eb;
}

.editor-ruler-scale {
  position: relative;
  min-width: 0;
  height: 100%;
}

.editor-ruler-tick {
  color: #64748b;
}

.editor-timeline-stack {
  display: grid;
  gap: 0;
  padding-top: 0;
  padding-bottom: 2px;
}

.editor-track-row {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  position: relative;
}

.editor-track-row + .editor-track-row {
  border-top: 0;
}

.editor-track-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 calc(6px + 4px * var(--editor-track-scale));
  min-height: calc(42px * var(--editor-track-scale));
  border: 0;
  border-right: 1px solid #e8edf5;
  border-radius: 0;
  background: transparent;
  color: #334155;
  font-size: calc(10px + 2px * var(--editor-track-scale));
  font-weight: 800;
}

.editor-track-label-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: calc(3px + 2px * var(--editor-track-scale));
  color: #94a3b8;
  font-size: calc(10px + 1px * var(--editor-track-scale));
}

.editor-track-action-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.editor-track-action-button.is-off {
  color: #cbd5e1;
  opacity: .58;
}

.editor-track-label-secondary {
  gap: 6px;
}

.editor-track-action-icon {
  display: inline-flex;
  width: calc(10px + 4px * var(--editor-track-scale));
  height: calc(10px + 4px * var(--editor-track-scale));
}

.editor-track-action-icon svg {
  width: calc(10px + 4px * var(--editor-track-scale));
  height: calc(10px + 4px * var(--editor-track-scale));
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.editor-timeline-lane {
  min-height: calc(42px * var(--editor-track-scale));
  border: 0;
  border-radius: 0;
  background: transparent;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.editor-track-row-captions .editor-timeline-lane {
  min-height: calc(42px * var(--editor-track-scale));
}

.editor-track-row-video .editor-timeline-lane {
  min-height: calc(46px * var(--editor-track-scale));
}

.editor-track-row-audio .editor-timeline-lane {
  min-height: calc(50px * var(--editor-track-scale));
}

.editor-track-row-audio {
  margin-bottom: 0;
}

.editor-caption-chip {
  height: calc(20px + 8px * var(--editor-track-scale));
  border-color: rgba(20,184,166,.35);
  background: #ccfbf1;
  color: #0f766e;
  text-transform: none;
  min-width: 44px;
  padding-left: calc(8px + 6px * var(--editor-track-scale));
  padding-right: calc(8px + 6px * var(--editor-track-scale));
  font-size: calc(9px + 2px * var(--editor-track-scale));
}

.editor-caption-chip.active {
  border-color: #0f766e;
  background: #99f6e4;
  box-shadow: 0 0 0 2px rgba(20,184,166,.18);
  color: #0f766e;
}

.editor-caption-handle {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 10px;
  border-radius: 6px;
  background:
    linear-gradient(90deg,
      #2563eb 0 2px,
      #ffffff 2px 6px,
      #2563eb 6px 8px,
      rgba(255,255,255,.92) 8px 10px);
  border: 1px solid rgba(37,99,235,.18);
  box-shadow: 0 2px 6px rgba(15,23,42,.1);
}

.editor-caption-handle-start {
  left: 3px;
}

.editor-caption-handle-end {
  right: 3px;
}

.editor-caption-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.editor-selection-window {
  border-color: rgba(249, 115, 22, .45);
  background: rgba(249, 115, 22, .13);
}

.editor-selection-window.active {
  border-color: #ffffff;
  background: rgba(194, 65, 12, .18);
  box-shadow: 0 0 0 2px rgba(251, 146, 60, .2);
}

.editor-selection-window.active .editor-selection-fill {
  background: linear-gradient(180deg, rgba(234, 88, 12, .32), rgba(194, 65, 12, .18));
}

.editor-selection-window.active .editor-selection-fill-overlay {
  border-color: rgba(194, 65, 12, .44);
  background: linear-gradient(180deg, rgba(234, 88, 12, .36), rgba(194, 65, 12, .24));
}

.editor-selection-window.active .editor-track-filmstrip {
  background-color: rgba(0, 0, 0, .14);
  box-shadow: inset 0 0 0 1px rgba(124, 45, 18, .26);
}

.editor-selection-window.active .editor-overlay-wave span {
  background: linear-gradient(180deg, rgba(251, 191, 36, .96), rgba(249, 115, 22, .98));
}

.editor-waveform-all-selected .editor-timeline-lane {
  border-color: rgba(249, 115, 22, .42);
  box-shadow: inset 0 0 0 2px rgba(249, 115, 22, .12);
}

/* Ctrl/Cmd+A selects the complete timeline, including clips on every lane. */
.editor-waveform-all-selected .editor-selection-window,
.editor-waveform-all-selected .editor-audio-bed {
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .55) !important;
}

.editor-waveform-all-selected .editor-selection-fill,
.editor-waveform-all-selected .editor-selection-fill-overlay {
  background: linear-gradient(180deg, rgba(249, 115, 22, .38), rgba(194, 65, 12, .24)) !important;
}

.editor-selection-fill {
  background: linear-gradient(180deg, rgba(251, 146, 60, .22), rgba(249, 115, 22, .12));
}

.editor-selection-window[data-editor-window="audio"]:not(.editor-selection-window-ghost) {
  border-color: rgba(249, 115, 22, .42);
  background: rgba(249, 115, 22, .11);
}

.editor-wave-bar {
  background: linear-gradient(180deg, rgba(253, 186, 116, .94), rgba(249, 115, 22, .98));
}

.editor-selection-window-audio-clip {
  border-color: rgba(249, 115, 22, .48);
  background: rgba(249, 115, 22, .12);
}

.editor-selection-window-audio-clip .editor-selection-fill-overlay {
  background: linear-gradient(180deg, rgba(251, 146, 60, .24), rgba(249, 115, 22, .16));
}

.editor-audio-inline-label,
.editor-overlay-name-audio {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  max-width: calc(100% - 20px);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: #9a3412;
  font-size: calc(9px + 1px * var(--editor-track-scale));
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-overlay-name-audio {
  right: auto;
  bottom: auto;
  text-shadow: none;
}

.editor-control input[type="text"],
.editor-control textarea,
.editor-control select {
  width: 100%;
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #111827;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
}

.editor-control textarea {
  resize: vertical;
  line-height: 1.35;
}

.editor-control > span {
  color: #64748b;
}


/* Restore dark blank timeline drop zone */
.editor-timeline-empty {
  min-height: 185px !important;
  width: 100% !important;
  background: #181818 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

.editor-timeline-empty-panel {
  display: block !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.editor-timeline-empty-panel .panel-kicker,
.editor-timeline-empty-panel p,
.editor-timeline-empty-panel button {
  display: none !important;
}

.editor-timeline-empty-panel h3 {
  display: block !important;
  margin: 0 !important;
  color: #d1d5db !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.editor-waveform-canvas:has(.editor-timeline-empty),
.editor-waveform-scroll:has(.editor-timeline-empty) {
  background: #181818 !important;
  border-radius: 0 !important;
}


/* Force dark empty timeline drop zone when no sequence exists */
.editor-timeline-empty {
  min-height: 185px !important;
  width: 100% !important;
  background: #181818 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center !important;
}

.editor-timeline-empty-panel {
  display: grid !important;
  place-items: center !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.editor-timeline-empty-panel .panel-kicker,
.editor-timeline-empty-panel p,
.editor-timeline-empty-panel button {
  display: none !important;
}

.editor-timeline-empty-panel h3 {
  display: block !important;
  margin: 0 !important;
  color: #d1d5db !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

.editor-waveform-canvas:has(.editor-timeline-empty),
.editor-waveform-scroll:has(.editor-timeline-empty) {
  background: #181818 !important;
  border-radius: 0 !important;
}


/* Hide editor diagnostics unless manually inspected in console */
#editorMediaDebugPanel {
  display: none !important;
}


/* Cleaner empty sequence text */
.editor-timeline-empty {
  display: grid !important;
  place-items: center !important;
}

.editor-timeline-empty-panel {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.editor-timeline-empty-panel .panel-kicker,
.editor-timeline-empty-panel p,
.editor-timeline-empty-panel button {
  display: none !important;
}

.editor-timeline-empty-panel h3 {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: center !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Premiere-like blank program monitor */
body.editor-empty-program .editor-video-stage {
  position: relative !important;
  background: #111214 !important;
}

body.editor-empty-program .editor-video-stage::before,
body.editor-empty-program .editor-video-stage::after {
  content: "00:00:00:00";
  position: absolute;
  bottom: 22px;
  color: #667085;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  z-index: 3;
  pointer-events: none;
}

body.editor-empty-program .editor-video-stage::before {
  left: 22px;
}

body.editor-empty-program .editor-video-stage::after {
  right: 22px;
}

body.editor-empty-program #editorVideo {
  background: #111214 !important;
}


/* Remove empty preview timecode overlay */
body.editor-empty-program .editor-video-stage::before,
body.editor-empty-program .editor-video-stage::after {
  content: none !important;
  display: none !important;
}

/* Empty play button is inert */
#editorTransportPlay[data-disabled-empty="true"] {
  opacity: 0.45 !important;
  cursor: default !important;
}


/* Final empty editor state: normal white timeline, centered text, no preview overlay */
body.editor-empty-program .editor-video-stage::before,
body.editor-empty-program .editor-video-stage::after {
  content: none !important;
  display: none !important;
}

.editor-timeline-empty {
  min-height: 185px !important;
  width: 100% !important;
  background: #f8fafc !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  user-select: none !important;
}

.editor-timeline-empty-panel {
  width: 100% !important;
  height: 100% !important;
  min-height: 185px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.editor-timeline-empty-panel .panel-kicker,
.editor-timeline-empty-panel p,
.editor-timeline-empty-panel button {
  display: none !important;
}

.editor-timeline-empty-panel h3 {
  display: block !important;
  margin: 0 auto !important;
  width: auto !important;
  text-align: center !important;
  color: #64748b !important;
  background: transparent !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

.editor-waveform-canvas:has(.editor-timeline-empty),
.editor-waveform-scroll:has(.editor-timeline-empty) {
  background: #ffffff !important;
  border-radius: 10px !important;
}

#editorTransportPlay[data-disabled-empty="true"] {
  opacity: 0.45 !important;
  cursor: default !important;
}


/* Keep program preview black; do not make the timeline black */
.editor-video-stage,
body.editor-empty-program .editor-video-stage,
body.editor-empty-program #editorVideo,
#editorVideo,
.editor-image-preview {
  background: #000000 !important;
}

.editor-timeline-empty,
.editor-waveform-canvas:has(.editor-timeline-empty),
.editor-waveform-scroll:has(.editor-timeline-empty) {
  background: #ffffff !important;
}


/* Keep short imported timelines full width */
.editor-waveform-scroll,
.editor-waveform-canvas,
.editor-timeline-grid {
  min-width: 100% !important;
}

.editor-waveform-canvas {
  width: 100% !important;
}


/* VMF patch: prevent 0s playhead/clip edge clipping */
#editorView .editor-waveform-canvas {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

.editor-waveform-canvas {
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
}

.editor-timeline-grid,
.editor-timeline-tracks,
.editor-track-row,
.editor-ruler,
.editor-ruler-scale,
.editor-timeline-lane {
  overflow: visible !important;
}

.editor-selection-window,
.editor-selection-window-overlay,
.editor-playhead,
.editor-playhead-marker,
[data-editor-playhead] {
  overflow: visible !important;
}

.editor-playhead,
[data-editor-playhead] {
  z-index: 80 !important;
}

.editor-selection-window,
.editor-selection-window-overlay {
  z-index: 20 !important;
}


/* VMF patch: allow transformable video/image preview layers */
.editor-video-stage video,
.editor-image-preview {
  position: absolute !important;
  inset: auto !important;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  will-change: transform, opacity, clip-path;
}


/* VMF patch: tighter video effects controls */
#editorEffectsVideoSection {
  display: grid;
  gap: 14px;
}

#editorEffectsVideoSection[hidden] {
  display: none !important;
}


/* VMF patch: real reload reset icons */
.editor-effects-reset-button {
  display: inline-grid !important;
  place-items: center !important;
}

.editor-reset-svg {
  width: 15px;
  height: 15px;
  display: block;
}


/* VMF patch: stable preview media anchoring */
.editor-video-stage video,
.editor-image-preview {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 50%;
  transform-origin: 50% 50% !important;
}

/* Author display rules above must not override the native hidden state. An
   empty image preview otherwise remains painted over a playing video as a
   solid black layer. */
.editor-video-stage video[hidden],
.editor-video-stage .editor-image-preview[hidden] {
  display: none !important;
}


/* VMF patch: one stable preview transform anchor */
.editor-video-stage video,
.editor-image-preview {
  position: absolute !important;
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform-origin: 50% 50% !important;
}


/* VMF patch: preview layer move cursor */
.editor-video-stage.is-moving-layer,
.editor-video-stage:has(video:not([hidden])),
.editor-video-stage:has(.editor-image-preview:not([hidden])) {
  cursor: move;
}


/* VMF patch: hide preview drop UI entirely */
.editor-video-stage .editor-drop-indicator,
.editor-video-stage .editor-timeline-drop-ghost {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.editor-video-stage.drop-active {
  box-shadow: none !important;
  border-color: var(--line) !important;
}


/* VMF patch: unified media upload + sequence controls */
.vmf-upload-file-button,
.vmf-create-sequence-button {
  width: 100%;
  min-height: 42px;
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  background: #ffffff;
  color: #111827;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  margin: 10px 0;
}

.vmf-upload-file-button span,
.vmf-create-sequence-button span {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: inline-grid;
  place-items: center;
  background: #eef2ff;
  color: #2563eb;
  font-size: 15px;
  line-height: 1;
}

.vmf-upload-file-button:hover,
.vmf-create-sequence-button:hover {
  border-color: #93c5fd;
  background: #f8fbff;
}

.editor-media-item-project-clip.active {
  outline: 2px solid rgba(37, 99, 235, 0.35);
  outline-offset: 2px;
}

.editor-media-tab[hidden] {
  display: none !important;
}


/* VMF patch: solid unbroken playhead */
#editorWaveform {
  position: relative !important;
  overflow: visible !important;
}

/* kill broken row-by-row playhead lines */
.editor-timeline-lane .editor-playhead,
.editor-track-row .editor-playhead,
.editor-timeline-lane [data-editor-playhead],
.editor-track-row [data-editor-playhead],
.vmf-global-timeline-playhead,
.editor-timeline-tracks::after {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
}

/* keep the top marker visible */
.editor-ruler .editor-playhead,
.editor-ruler [data-editor-playhead],
.editor-playhead-marker {
  display: block !important;
  opacity: 1 !important;
  background: #111827 !important;
}

/* keep only the top marker */
.editor-ruler .editor-playhead,
.editor-ruler [data-editor-playhead],
.editor-playhead-marker {
  display: block !important;
  opacity: 1 !important;
}

/* keep visible top marker */
.editor-playhead-marker,
.editor-ruler .editor-playhead,
.editor-ruler [data-editor-playhead] {
  display: block !important;
  opacity: 1 !important;
  z-index: 2147483647 !important;
}


/* VMF patch: duplicate button */
.vmf-duplicate-layer-button {
  position: relative;
}

.vmf-duplicate-icon {
  position: relative;
  width: 18px;
  height: 16px;
  display: inline-block;
}

.vmf-duplicate-sheet {
  position: absolute;
  width: 10px;
  height: 12px;
  border: 1.5px solid #475569;
  border-radius: 2px;
  background: #ffffff;
}

.vmf-duplicate-sheet-back {
  left: 5px;
  top: 1px;
  opacity: .9;
}

.vmf-duplicate-sheet-front {
  left: 2px;
  top: 4px;
}

/* VMF patch: keyframe panel */
.vmf-keyframe-card {
  margin-top: 14px;
}

.vmf-kf-prop-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.vmf-kf-prop-button {
  border: 1px solid #dbe2ea;
  background: #ffffff;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 6px 10px;
  cursor: pointer;
}

.vmf-kf-prop-button.active {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #2563eb;
}

.vmf-kf-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.vmf-kf-button {
  min-width: 32px;
  height: 32px;
  border-radius: 10px;
  border: 1px solid #dbe2ea;
  background: #ffffff;
  color: #334155;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.vmf-kf-easing {
  flex: 1;
  min-height: 32px;
  border-radius: 10px;
  border: 1px solid #dbe2ea;
  background: #ffffff;
  color: #0f172a;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 700;
}

.vmf-kf-graph-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 12px;
}

.vmf-keyframe-graph-svg {
  width: 100%;
  display: block;
}


/* VMF patch: remove weird preview/layer nudge animations */
.editor-video-stage video,
.editor-image-preview,
.editor-selection-window,
.editor-selection-window-overlay,
.editor-media-layer-preview {
  transition: none !important;
  animation: none !important;
}


/* VMF patch: Premiere-style keyframe diamonds */
.vmf-effect-label-with-keyframe {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
}

.vmf-inline-keyframe-button {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  display: inline-grid;
  place-items: center;
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
}

.vmf-keyframe-diamond {
  width: 9px;
  height: 9px;
  display: block;
  border: 1.5px solid #64748b;
  background: #ffffff;
  transform: rotate(45deg);
  box-sizing: border-box;
}

.vmf-keyframe-diamond.mini {
  width: 7px;
  height: 7px;
}

.vmf-inline-keyframe-button.has-keyframes .vmf-keyframe-diamond {
  border-color: #2563eb;
}

.vmf-inline-keyframe-button.active .vmf-keyframe-diamond,
.vmf-kf-diamond-action .vmf-keyframe-diamond {
  background: #2563eb;
  border-color: #2563eb;
}

.vmf-inline-keyframe-button:hover .vmf-keyframe-diamond {
  border-color: #1d4ed8;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.vmf-kf-button svg {
  width: 16px;
  height: 16px;
  display: block;
}

.vmf-kf-button {
  display: inline-grid;
  place-items: center;
}

/* remove old question-mark-looking glyph issues */
.vmf-kf-button {
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}


/* VMF patch: safe effects/keyframe layout reset */
#editorView .editor-shell {
  display: grid !important;
  grid-template-columns: 64px 420px minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
}

#editorView .editor-tool-rail {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  flex: 0 0 64px !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  background: #fff !important;
}

#editorView .editor-tool-button,
#editorView .editor-tool-round,
#editorView .editor-tool-icon,
#editorView .editor-tool-icon svg,
#editorView .editor-tool-button svg {
  opacity: 1 !important;
  visibility: visible !important;
  display: grid !important;
}

#editorView .editor-tool-icon svg,
#editorView .editor-tool-button svg {
  display: block !important;
}

#editorView .editor-sidebar {
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  flex: 0 0 420px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #fff !important;
}

#editorView .editor-main,
#editorView .editor-stage,
#editorView .editor-timeline {
  min-width: 0 !important;
  max-width: 100% !important;
}

#editorEffectsVideoSection:not([hidden]) {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

#editorEffectsVideoSection > .editor-effects-card,
#editorEffectsVideoSection > .vmf-keyframe-panel-mount {
  grid-column: 1 !important;
  grid-row: auto !important;
  position: static !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.vmf-keyframe-card,
.vmf-keyframe-track-card {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 0 !important;
  overflow: hidden !important;
}

.vmf-kf-track-panel {
  width: 100% !important;
  max-width: 100% !important;
}

.vmf-kf-track-ruler {
  padding-left: 92px !important;
}

.vmf-kf-track-row {
  grid-template-columns: 84px minmax(0, 1fr) !important;
}

.vmf-kf-track-playhead {
  margin-left: 94px !important;
}

/* prevent sidebar from swallowing the preview/timeline space */
.editor-preview-shell,
.editor-waveform,
.editor-timeline-card {
  max-width: 100% !important;
}


/* VMF patch: Premiere-style Effects panel v3 */
#editorView.vmf-premiere-effects-mode .editor-shell {
  display: grid !important;
  grid-template-columns: 64px 620px minmax(0, 1fr) !important;
  width: 100% !important;
  max-width: 100% !important;
}

#editorView.vmf-premiere-effects-mode .editor-tool-rail {
  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #fff !important;
}

#editorView.vmf-premiere-effects-mode .editor-tool-button,
#editorView.vmf-premiere-effects-mode .editor-tool-icon,
#editorView.vmf-premiere-effects-mode .editor-tool-button svg {
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#editorView.vmf-premiere-effects-mode .editor-tool-button svg {
  display: block !important;
}

#editorView.vmf-premiere-effects-mode .editor-sidebar {
  width: 620px !important;
  min-width: 620px !important;
  max-width: 620px !important;
  overflow: hidden !important;
}

#editorEffectsVideoSection.vmf-premiere-mounted > .editor-effects-card,
#editorEffectsVideoSection.vmf-premiere-mounted > .vmf-keyframe-panel-mount {
  display: none !important;
}

#editorEffectsVideoSection.vmf-premiere-mounted {
  display: block !important;
}

.vmf-premiere-effects-mount {
  width: 100%;
  min-width: 0;
}

.vmf-prem-effects {
  --vmf-prem-line: rgba(15, 23, 42, .08);
  --vmf-prem-blue: #5a6ff0;
  position: relative;
  width: 100%;
  height: min(66vh, 620px);
  min-height: 430px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--vmf-prem-line);
  border-radius: 14px;
  background: #fff;
}

.vmf-prem-header {
  flex: 0 0 auto;
  padding: 10px 12px;
  border-bottom: 1px solid var(--vmf-prem-line);
  background: #fff;
}

.vmf-prem-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 750;
}

.vmf-prem-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  overflow: hidden;
}

.vmf-prem-props {
  min-width: 0;
  overflow: auto;
  border-right: 1px solid var(--vmf-prem-line);
  background: #fff;
}

.vmf-prem-timeline {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.vmf-prem-section-head {
  height: 26px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-bottom: 1px solid var(--vmf-prem-line);
  background: #f8fafc;
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vmf-prem-prop-row {
  height: 28px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 52px 20px 58px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
  border-bottom: 1px solid rgba(15, 23, 42, .045);
}

.vmf-prem-prop-row:hover {
  background: #f8fafc;
}

.vmf-prem-stopwatch,
.vmf-prem-kf-diamond,
.vmf-prem-kf-nav {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #64748b;
}

.vmf-prem-stopwatch {
  width: 16px;
  height: 16px;
}

.vmf-prem-stopwatch.on .vmf-keyframe-diamond,
.vmf-prem-kf-diamond.active .vmf-keyframe-diamond {
  background: var(--vmf-prem-blue);
  border-color: #4050c8;
}

.vmf-keyframe-diamond {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border: 1.5px solid #94a3b8;
  border-radius: 1px;
  background: #fff;
  display: block;
}

.vmf-keyframe-diamond.active {
  background: var(--vmf-prem-blue);
  border-color: #4050c8;
}

.vmf-prem-prop-name {
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vmf-prem-prop-val {
  width: 52px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #2563eb;
  font-size: 11px;
  font-weight: 750;
  text-align: right;
  padding: 0 3px;
}

.vmf-prem-prop-val:focus {
  outline: 1px solid #93c5fd;
  background: #fff;
}

.vmf-prem-prop-suffix {
  color: #64748b;
  font-size: 10px;
}

.vmf-prem-kf-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.vmf-prem-kf-nav {
  width: 13px;
  height: 18px;
  font-size: 8px;
}

.vmf-prem-spacer {
  width: 18px;
}

.vmf-prem-select {
  grid-column: 3 / span 3;
  height: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
}

.vmf-prem-ruler {
  position: relative;
  flex: 0 0 24px;
  border-bottom: 1px solid var(--vmf-prem-line);
  background: #f8fafc;
}

.vmf-prem-ruler span {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  color: #64748b;
  font-size: 9px;
  font-weight: 750;
}

.vmf-prem-tl-body {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.vmf-prem-tl-section {
  height: 26px;
  border-bottom: 1px solid var(--vmf-prem-line);
  background: #f8fafc;
}

.vmf-prem-tl-row {
  position: relative;
  height: 28px;
  border-bottom: 1px solid rgba(15, 23, 42, .045);
  background: #fff;
}

.vmf-prem-tl-row:hover {
  background: #f8fafc;
}

.vmf-prem-kf-line {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #c4caff;
  pointer-events: none;
}

.vmf-prem-diamond {
  all: unset;
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 4;
}

.vmf-prem-diamond .vmf-keyframe-diamond {
  background: var(--vmf-prem-blue);
  border-color: #4050c8;
}

.vmf-prem-diamond.active .vmf-keyframe-diamond {
  box-shadow: 0 0 0 4px rgba(90, 111, 240, .15);
}

.vmf-prem-playhead {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  transform: translateX(-1px);
  background: var(--vmf-prem-blue);
  z-index: 10;
  pointer-events: none;
}

.vmf-prem-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--vmf-prem-blue);
}

.vmf-prem-bottom {
  flex: 0 0 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  border-top: 1px solid var(--vmf-prem-line);
  background: #f8fafc;
  font-size: 11px;
  font-weight: 750;
}

.vmf-prem-easing-current {
  height: 22px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
}

.vmf-prem-context {
  position: fixed;
  z-index: 2147483647;
  min-width: 140px;
  padding: 4px 0;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 14px 30px rgba(15, 23, 42, .16);
}

.vmf-prem-context button {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 7px 12px;
  text-align: left;
  color: #111827;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}

.vmf-prem-context button:hover {
  background: #f1f5f9;
}

.vmf-prem-context [data-vmf-delete-kf] {
  color: #b91c1c;
}

.vmf-prem-context hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 4px 0;
}

@media (max-width: 1280px) {
  #editorView.vmf-premiere-effects-mode .editor-shell {
    grid-template-columns: 64px 540px minmax(0, 1fr) !important;
  }

  #editorView.vmf-premiere-effects-mode .editor-sidebar {
    width: 540px !important;
    min-width: 540px !important;
    max-width: 540px !important;
  }

  .vmf-prem-split {
    grid-template-columns: 240px minmax(0, 1fr);
  }
}


/* VMF patch: Effects panel v4 cleanup */
.vmf-prem-header {
  display: none !important;
}

.vmf-prem-effects {
  height: min(68vh, 640px) !important;
  min-height: 500px !important;
}

.vmf-prem-split {
  grid-template-columns: 280px minmax(0, 1fr) !important;
}

.vmf-prem-playhead {
  background: #111827 !important;
  cursor: ew-resize !important;
  width: 2px !important;
}

.vmf-prem-playhead::before {
  border-top-color: #111827 !important;
}

.vmf-prem-diamond,
.vmf-prem-kf-diamond,
.vmf-prem-stopwatch {
  cursor: pointer !important;
}

.vmf-prem-ruler,
.vmf-prem-tl-row {
  cursor: crosshair !important;
}

.vmf-prem-ruler span {
  font-size: 8px !important;
}

.vmf-prem-tl-row {
  height: 34px !important;
}

.vmf-prem-prop-row {
  height: 34px !important;
}

.vmf-prem-tl-section,
.vmf-prem-section-head {
  height: 30px !important;
}

.vmf-prem-bottom {
  height: 34px !important;
}

.vmf-prem-easing-current {
  color: #111827 !important;
}


/* VMF patch: Effects panel v5 layout and draggable timeline */
#editorView.vmf-premiere-effects-mode .editor-shell {
  grid-template-columns: 64px clamp(660px, 42vw, 820px) minmax(0, 1fr) !important;
}

#editorView.vmf-premiere-effects-mode .editor-sidebar {
  width: clamp(660px, 42vw, 820px) !important;
  min-width: 660px !important;
  max-width: 820px !important;
}

.vmf-prem-effects {
  height: min(74vh, 720px) !important;
  min-height: 560px !important;
}

.vmf-prem-split {
  grid-template-columns: 300px minmax(0, 1fr) !important;
}

.vmf-prem-props {
  overflow: auto !important;
}

.vmf-prem-timeline {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-gutter: stable !important;
  padding-bottom: 10px !important;
}

.vmf-prem-ruler,
.vmf-prem-tl-body {
  min-width: 1280px !important;
}

.vmf-prem-bottom {
  display: none !important;
}

.vmf-prem-playhead {
  background: #111827 !important;
  pointer-events: auto !important;
  cursor: ew-resize !important;
  width: 3px !important;
  z-index: 40 !important;
}

.vmf-prem-playhead::before {
  border-top-color: #111827 !important;
}

.vmf-prem-playhead::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 23px;
  background: transparent;
}

.vmf-prem-diamond {
  cursor: ew-resize !important;
  width: 24px !important;
  height: 24px !important;
}

.vmf-prem-diamond .vmf-keyframe-diamond {
  cursor: ew-resize !important;
}

.vmf-prem-tl-row {
  height: 36px !important;
}

.vmf-prem-prop-row {
  height: 36px !important;
}

.vmf-prem-tl-section,
.vmf-prem-section-head {
  height: 30px !important;
}

.vmf-prem-prop-row {
  grid-template-columns: 18px minmax(0, 1fr) 64px 20px 62px !important;
}

.vmf-prem-prop-val {
  width: 64px !important;
}

.vmf-prem-ruler span {
  font-size: 9px !important;
}

.vmf-prem-kf-line {
  height: 2px !important;
}

@media (max-width: 1280px) {
  #editorView.vmf-premiere-effects-mode .editor-shell {
    grid-template-columns: 64px 620px minmax(0, 1fr) !important;
  }

  #editorView.vmf-premiere-effects-mode .editor-sidebar {
    width: 620px !important;
    min-width: 620px !important;
    max-width: 620px !important;
  }

  .vmf-prem-ruler,
  .vmf-prem-tl-body {
    min-width: 1080px !important;
  }

  .vmf-prem-split {
    grid-template-columns: 280px minmax(0, 1fr) !important;
  }
}


/* VMF patch: prevent accidental page text selection in editor chrome */
#editorView,
#editorView .editor-shell,
#editorView .editor-waveform,
#editorView .editor-timeline-card,
#editorView .vmf-prem-effects {
  user-select: none;
}

#editorView input,
#editorView textarea,
#editorView [contenteditable="true"] {
  user-select: text;
}


/* VMF patch: hide old Effects UI before Premiere panel mounts */
#editorView.vmf-premiere-effects-mode #editorEffectsVideoSection > .editor-effects-card,
#editorView.vmf-premiere-effects-mode #editorEffectsVideoSection > .vmf-keyframe-panel-mount {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#editorView.vmf-premiere-effects-mode #editorEffectsVideoSection > .vmf-premiere-effects-mount {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#editorEffectsVideoSection.vmf-premiere-loading > .editor-effects-card,
#editorEffectsVideoSection.vmf-premiere-loading > .vmf-keyframe-panel-mount {
  display: none !important;
}

#editorEffectsVideoSection.vmf-premiere-loading > .vmf-premiere-effects-mount:empty {
  min-height: 420px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #ffffff;
}


/* VMF patch: exact row alignment for Premiere keyframe tracks */
.vmf-prem-effects {
  --vmf-prem-section-h: 28px;
  --vmf-prem-row-h: 32px;
}

.vmf-prem-section-head,
.vmf-prem-tl-section {
  height: var(--vmf-prem-section-h) !important;
  min-height: var(--vmf-prem-section-h) !important;
  max-height: var(--vmf-prem-section-h) !important;
}

.vmf-prem-prop-row,
.vmf-prem-tl-row {
  height: var(--vmf-prem-row-h) !important;
  min-height: var(--vmf-prem-row-h) !important;
  max-height: var(--vmf-prem-row-h) !important;
}

.vmf-prem-tl-section {
  pointer-events: none !important;
  background: #f8fafc !important;
  border-bottom: 1px solid rgba(15, 23, 42, .08) !important;
}

.vmf-prem-tl-row {
  position: relative !important;
  background: #ffffff !important;
  overflow: visible !important;
}

.vmf-prem-tl-row:nth-of-type(even) {
  background: #fcfdff !important;
}

.vmf-prem-track-centerline {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 50% !important;
  height: 1px !important;
  transform: translateY(-50%) !important;
  background: rgba(148, 163, 184, .18) !important;
  pointer-events: none !important;
}

.vmf-prem-kf-line {
  top: 50% !important;
  height: 2px !important;
  transform: translateY(-50%) !important;
  background: #c4caff !important;
}

.vmf-prem-diamond {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.vmf-prem-diamond .vmf-keyframe-diamond {
  width: 9px !important;
  height: 9px !important;
}

/* stop gray section/header boxes from visually splitting keyframe rows */
.vmf-prem-tl-section + .vmf-prem-tl-row {
  border-top: 0 !important;
}

/* make crop/opacity rows line up exactly with labels */
.vmf-prem-section,
.vmf-prem-props,
.vmf-prem-tl-body {
  line-height: normal !important;
}


/* VMF patch: selected keyframes + marquee */
.vmf-keyframe-marquee {
  position: fixed;
  display: none;
  z-index: 2147483647;
  border: 1px solid rgba(37, 99, 235, .85);
  background: rgba(37, 99, 235, .14);
  pointer-events: none;
}

.vmf-prem-diamond.vmf-kf-selected .vmf-keyframe-diamond {
  background: #2563eb !important;
  border-color: #1d4ed8 !important;
  box-shadow: 0 0 0 5px rgba(37, 99, 235, .20) !important;
}

.vmf-prem-diamond.vmf-kf-selected {
  z-index: 20 !important;
}


/* VMF patch: stable aligned Premiere effects grid v6 */
#editorView.vmf-premiere-effects-mode .editor-shell {
  grid-template-columns: 64px 720px minmax(0, 1fr) !important;
}

#editorView.vmf-premiere-effects-mode .editor-sidebar {
  width: 720px !important;
  min-width: 720px !important;
  max-width: 720px !important;
  overflow: hidden !important;
}

.vmf-prem-effects.vmf-prem-grid-effects {
  --vmf-prop-width: 300px;
  --vmf-track-width: 1280px;
  --vmf-section-h: 28px;
  --vmf-row-h: 32px;
  height: min(74vh, 720px) !important;
  min-height: 560px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff !important;
}

.vmf-prem-grid-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  scrollbar-gutter: stable;
}

.vmf-prem-grid {
  position: relative;
  display: grid;
  grid-template-columns: var(--vmf-prop-width) var(--vmf-track-width);
  grid-auto-rows: auto;
  min-width: calc(var(--vmf-prop-width) + var(--vmf-track-width));
  background: #fff;
}

.vmf-prem-grid-ruler-left,
.vmf-prem-grid-ruler {
  height: 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
  position: sticky;
  top: 0;
  z-index: 12;
}

.vmf-prem-grid-ruler-left {
  left: 0;
  z-index: 14;
  border-right: 1px solid #e5e7eb;
}

.vmf-prem-grid-ruler {
  position: sticky;
  top: 0;
}

.vmf-prem-grid-ruler span {
  position: absolute;
  bottom: 4px;
  transform: translateX(-50%);
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.vmf-prem-grid-section-left,
.vmf-prem-grid-section-right {
  height: var(--vmf-section-h);
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}

.vmf-prem-grid-section-left {
  position: sticky;
  left: 0;
  z-index: 8;
  border-right: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.vmf-prem-grid-section-right {
  background: #ffffff !important;
  pointer-events: none;
}

.vmf-prem-grid-prop,
.vmf-prem-grid-track {
  height: var(--vmf-row-h);
  border-bottom: 1px solid rgba(15, 23, 42, .055);
  background: #fff;
}

.vmf-prem-grid-prop {
  position: sticky;
  left: 0;
  z-index: 7;
  border-right: 1px solid #e5e7eb;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) 64px 20px 62px;
  align-items: center;
  gap: 4px;
  padding: 0 8px;
}

.vmf-prem-grid-prop:hover,
.vmf-prem-grid-track:hover {
  background: #f8fafc;
}

.vmf-prem-grid-track {
  position: relative;
  overflow: visible;
}

.vmf-prem-grid-track-empty {
  pointer-events: none;
}

.vmf-prem-track-centerline {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(148, 163, 184, .22);
  transform: translateY(-50%);
  pointer-events: none;
}

.vmf-prem-kf-line {
  position: absolute;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #c4caff;
  pointer-events: none;
}

.vmf-prem-diamond {
  all: unset;
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  cursor: ew-resize;
  z-index: 10;
}

.vmf-prem-diamond .vmf-keyframe-diamond,
.vmf-prem-kf-diamond.active .vmf-keyframe-diamond,
.vmf-prem-stopwatch.on .vmf-keyframe-diamond {
  background: #5a6ff0;
  border-color: #4050c8;
}

.vmf-prem-grid-playhead {
  position: absolute;
  top: 24px;
  bottom: 0;
  width: 2px;
  background: #111827;
  transform: translateX(-1px);
  z-index: 20;
  pointer-events: auto;
  cursor: ew-resize;
}

.vmf-prem-grid-playhead::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #111827;
}

.vmf-prem-grid-playhead::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -10px;
  width: 22px;
  background: transparent;
}

.vmf-prem-prop-name {
  min-width: 0;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.vmf-prem-prop-val {
  width: 64px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  text-align: right;
  padding: 0 3px;
}

.vmf-prem-prop-val:focus {
  outline: 1px solid #93c5fd;
  background: #fff;
}

.vmf-prem-prop-suffix {
  color: #64748b;
  font-size: 10px;
}

.vmf-prem-kf-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.vmf-prem-stopwatch,
.vmf-prem-kf-diamond,
.vmf-prem-kf-nav {
  all: unset;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.vmf-prem-stopwatch {
  width: 16px;
  height: 16px;
}

.vmf-prem-kf-nav {
  width: 13px;
  height: 18px;
  color: #64748b;
  font-size: 8px;
}

.vmf-keyframe-diamond {
  width: 9px;
  height: 9px;
  display: block;
  transform: rotate(45deg);
  border: 1.5px solid #94a3b8;
  border-radius: 1px;
  background: #fff;
}

.vmf-keyframe-diamond.active {
  background: #5a6ff0;
  border-color: #4050c8;
}

.vmf-prem-select {
  grid-column: 3 / span 3;
  height: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  background: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 0 6px;
}

/* kill older split-panel layout inside the mounted effects view */
.vmf-prem-grid-effects .vmf-prem-split,
.vmf-prem-grid-effects .vmf-prem-props,
.vmf-prem-grid-effects .vmf-prem-timeline,
.vmf-prem-grid-effects .vmf-prem-bottom {
  display: none !important;
}

@media (max-width: 1280px) {
  #editorView.vmf-premiere-effects-mode .editor-shell {
    grid-template-columns: 64px 640px minmax(0, 1fr) !important;
  }

  #editorView.vmf-premiere-effects-mode .editor-sidebar {
    width: 640px !important;
    min-width: 640px !important;
    max-width: 640px !important;
  }

  .vmf-prem-effects.vmf-prem-grid-effects {
    --vmf-prop-width: 280px;
    --vmf-track-width: 1080px;
  }
}


/* VMF patch: compact effects grid height + visible playhead */
.vmf-prem-effects.vmf-prem-grid-effects {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(72vh, 680px) !important;
  align-self: start !important;
}

.vmf-prem-grid-scroll {
  height: auto !important;
  min-height: 0 !important;
  max-height: min(72vh, 680px) !important;
  overflow: auto !important;
}

.vmf-prem-grid {
  align-content: start !important;
  min-height: 0 !important;
}

.vmf-prem-grid-playhead {
  position: absolute !important;
  top: 24px !important;
  bottom: 0 !important;
  height: auto !important;
  width: 2px !important;
  background: #111827 !important;
  opacity: 1 !important;
  display: block !important;
  z-index: 9999 !important;
  pointer-events: auto !important;
  cursor: ew-resize !important;
}

.vmf-prem-grid-playhead::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -4px !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 7px solid #111827 !important;
}

.vmf-prem-grid-playhead::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -10px !important;
  width: 22px !important;
  background: transparent !important;
}


/* VMF patch: no keyframe/playhead flicker */
.vmf-prem-grid-playhead,
.vmf-prem-diamond,
.vmf-prem-diamond .vmf-keyframe-diamond,
.vmf-prem-kf-line {
  transition: none !important;
  animation: none !important;
}

.vmf-prem-grid-playhead {
  background: #111827 !important;
  opacity: 1 !important;
  display: block !important;
  will-change: left;
}

.vmf-prem-grid-playhead::before {
  border-top-color: #111827 !important;
}

.vmf-prem-diamond {
  will-change: left;
}


/* VMF patch: stable keyframe dragging */
body.vmf-prem-keyframe-dragging .vmf-prem-grid,
body.vmf-prem-keyframe-dragging .vmf-prem-diamond,
body.vmf-prem-keyframe-dragging .vmf-prem-grid-playhead,
body.vmf-prem-keyframe-dragging .vmf-prem-kf-line {
  transition: none !important;
  animation: none !important;
}

body.vmf-prem-keyframe-dragging {
  cursor: ew-resize !important;
}

.vmf-prem-diamond {
  cursor: ew-resize !important;
  backface-visibility: hidden !important;
}

.vmf-prem-grid-playhead {
  backface-visibility: hidden !important;
}


/* VMF patch: stable editable effect value boxes */
.vmf-prem-prop-val,
[data-vmf-prem-value] {
  pointer-events: auto !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  position: relative !important;
  z-index: 30 !important;
}

.vmf-prem-prop-val:focus,
[data-vmf-prem-value]:focus {
  background: #ffffff !important;
  border-color: #93c5fd !important;
  outline: 2px solid rgba(37, 99, 235, .22) !important;
  outline-offset: 1px !important;
}

.vmf-prem-kf-diamond,
.vmf-prem-stopwatch,
[data-vmf-prem-toggle-kf] {
  pointer-events: auto !important;
  position: relative !important;
  z-index: 35 !important;
}


/* VMF patch: preserve existing controls, reflow into top split + bottom timeline */
#editorView {
  height: calc(100vh - 82px) !important;
  min-height: 720px !important;
  overflow: hidden !important;
  background: #f7f8fb !important;
}

#editorView .editor-shell {
  display: grid !important;
  grid-template-columns: 108px minmax(310px, 29vw) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) minmax(360px, 43vh) !important;
  grid-template-areas:
    "rail sidebar main"
    "rail timeline timeline" !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

#editorView .editor-tool-rail {
  grid-area: rail !important;
  width: 108px !important;
  min-width: 108px !important;
  max-width: 108px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 22px 16px 20px !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  z-index: 10 !important;
}

#editorView .editor-tool-top {
  width: 100% !important;
  display: grid !important;
  place-items: center !important;
  padding-bottom: 10px !important;
}

#editorView .editor-tool-divider {
  width: 100% !important;
  height: 1px !important;
  background: #e5e7eb !important;
  margin: 0 0 2px !important;
}

#editorView .editor-tool-stack,
#editorView .editor-tool-bottom {
  width: 100% !important;
}

#editorView .editor-tool-stack {
  gap: 14px !important;
}

#editorView .editor-tool-bottom {
  margin-top: auto !important;
}

#editorView .editor-tool-button {
  min-height: 108px !important;
  gap: 12px !important;
  justify-items: center !important;
  padding: 14px 8px !important;
  border-radius: 18px !important;
}

#editorView .editor-tool-button span:last-child {
  font-size: 13px !important;
}

#editorView .editor-tool-round,
#editorView .editor-back-button {
  width: 56px !important;
  height: 56px !important;
  border-radius: 16px !important;
}

#editorView .editor-sidebar {
  grid-area: sidebar !important;
  width: auto !important;
  min-width: 310px !important;
  max-width: none !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  z-index: 6 !important;
}

#editorView .editor-sidebar-head {
  padding: 26px 20px 18px !important;
  border-bottom: 1px solid #eef2f7 !important;
}

#editorView .editor-sidebar-head h3 {
  font-size: 26px !important;
  line-height: 1.08 !important;
}

#editorView .editor-sidebar-head p {
  max-width: 340px !important;
  margin-top: 6px !important;
}

#editorView .editor-sidebar-panel {
  min-height: 0 !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 20px 20px !important;
}

#editorView .editor-main {
  grid-area: main !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 86px minmax(0, 1fr) !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#editorView .editor-main-header {
  height: 86px !important;
  min-height: 86px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
  padding: 0 28px 0 24px !important;
  background: #ffffff !important;
  border-bottom: 0 !important;
}

#editorView .editor-title-block {
  gap: 0 !important;
}

#editorView .editor-project-title-button {
  font-size: 19px !important;
  font-weight: 500 !important;
}

#editorView .editor-export-button {
  min-height: 52px !important;
  padding: 0 32px !important;
  border-radius: 26px !important;
  font-size: 17px !important;
}

#editorView .editor-stage-card {
  min-height: 0 !important;
  height: 100% !important;
  display: block !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 0 24px 0 !important;
}

#editorView .editor-stage-head {
  display: none !important;
}

#editorView .editor-preview-shell {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  min-height: 0 !important;
  padding: 6px 20px 20px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  align-items: start !important;
  justify-items: center !important;
  gap: 18px !important;
}

#editorView .editor-video-stage {
  aspect-ratio: 9 / 16 !important;
  width: min(100%, 320px) !important;
  max-width: min(100%, 320px) !important;
  height: auto !important;
  max-height: min(calc(100vh - 390px), 580px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 46px rgba(16, 24, 40, 0.12) !important;
  background: #000000 !important;
}

#editorView .editor-video-stage[style*="9 / 16"],
#editorView .editor-video-stage[style*="9/16"] {
  width: min(100%, 320px) !important;
  max-width: min(100%, 320px) !important;
  max-height: min(calc(100vh - 390px), 580px) !important;
}

#editorView .editor-video-stage video,
#editorView .editor-video-stage img,
#editorView #editorVideo,
#editorView #editorImagePreview {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

#editorView .editor-hud {
  min-height: 0 !important;
  padding: 0 !important;
}

#editorView .editor-timeline-card {
  grid-area: timeline !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  overflow: hidden !important;
  border-top: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#editorView .editor-timeline-head {
  min-height: 74px !important;
  height: auto !important;
  padding: 14px 18px 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  overflow: visible !important;
}

#editorView .editor-timeline-body {
  height: auto !important;
  min-height: 290px !important;
  overflow: hidden !important;
  margin-top: 0 !important;
}

#editorView .editor-waveform {
  height: 100% !important;
  max-height: 100% !important;
}

#editorView .editor-timeline-bottom {
  height: 30px !important;
  min-height: 30px !important;
  border-top: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  margin-top: 0 !important;
}

#editorView .editor-timeline-head-compact {
  min-height: 0 !important;
  align-items: center !important;
  grid-template-columns: auto 1fr auto !important;
  gap: 18px !important;
}

#editorView .editor-timeline-toolbar,
#editorView .editor-timeline-actions,
#editorView .editor-transport-row {
  align-self: center !important;
}

#editorView .editor-timeline-toolbar {
  flex-wrap: nowrap !important;
  overflow: visible !important;
  gap: 10px !important;
}

#editorView .editor-transport-row {
  padding: 0 !important;
  justify-self: center !important;
}

#editorView .editor-timeline-actions {
  flex-wrap: nowrap !important;
  gap: 10px !important;
  min-width: 0 !important;
}

#editorView .editor-zoom-slider {
  width: 150px !important;
}

#editorView [data-close-editor-alt] {
  display: none !important;
}

#editorView.vmf-premiere-effects-mode .editor-shell {
  grid-template-columns: 108px minmax(420px, 38vw) minmax(0, 1fr) !important;
}

#editorView.vmf-premiere-effects-mode .editor-sidebar {
  min-width: 420px !important;
  max-width: none !important;
}

#editorView.vmf-premiere-effects-mode .vmf-prem-effects.vmf-prem-grid-effects {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#editorView.vmf-premiere-effects-mode .vmf-prem-grid-scroll {
  max-height: none !important;
  overflow: auto !important;
}

#editorView:not(.vmf-premiere-effects-mode) .vmf-premiere-effects-mount,
#editorView:not(.vmf-premiere-effects-mode) .vmf-keyframe-panel-mount,
#editorEffectsVideoSection:not(.vmf-premiere-mounted) .vmf-premiere-effects-mount {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#editorView:not(.vmf-premiere-effects-mode) #editorEffectsVideoSection > .editor-effects-card {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#editorView .editor-tool-button,
#editorView .editor-tool-icon,
#editorView .editor-tool-icon svg,
#editorView .editor-tool-button svg {
  opacity: 1 !important;
  visibility: visible !important;
}

#editorView .editor-tool-icon svg,
#editorView .editor-tool-button svg {
  display: block !important;
}

@media (max-width: 1320px) {
  #editorView .editor-shell {
    grid-template-columns: 96px minmax(280px, 31vw) minmax(0, 1fr) !important;
  }

  #editorView .editor-video-stage {
    width: min(100%, 290px) !important;
    max-width: min(100%, 290px) !important;
  }

  #editorView.vmf-premiere-effects-mode .editor-shell {
    grid-template-columns: 96px minmax(360px, 36vw) minmax(0, 1fr) !important;
  }

  #editorView.vmf-premiere-effects-mode .editor-sidebar {
    min-width: 360px !important;
  }
}

@media (max-width: 1080px) {
  #editorView .editor-shell {
    grid-template-columns: 90px minmax(250px, 32vw) minmax(0, 1fr) !important;
    grid-template-rows: minmax(0, 1fr) minmax(320px, 42vh) !important;
    grid-template-areas:
      "rail sidebar main"
      "rail timeline timeline" !important;
  }

  #editorView .editor-sidebar {
    min-width: 250px !important;
  }

  #editorView .editor-video-stage {
    width: min(100%, 250px) !important;
    max-width: min(100%, 250px) !important;
  }

  #editorView.vmf-premiere-effects-mode .editor-shell {
    grid-template-columns: 90px minmax(320px, 40vw) minmax(0, 1fr) !important;
  }

  #editorView.vmf-premiere-effects-mode .editor-sidebar {
    min-width: 320px !important;
  }
}

@media (max-width: 860px) {
  #editorView {
    height: auto !important;
    min-height: 0 !important;
    overflow: auto !important;
  }

  #editorView .editor-shell {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    grid-template-rows: auto auto auto !important;
    grid-template-areas:
      "rail main"
      "rail sidebar"
      "rail timeline" !important;
    min-height: calc(100vh - 82px) !important;
  }

  #editorView .editor-main {
    min-height: 560px !important;
  }

  #editorView .editor-sidebar {
    min-width: 0 !important;
    width: auto !important;
    max-height: none !important;
    border-right: 0 !important;
    border-top: 1px solid #e5e7eb !important;
  }

  #editorView .editor-timeline-card {
    min-height: 360px !important;
  }

  #editorView.vmf-premiere-effects-mode .editor-shell {
    grid-template-columns: 84px minmax(0, 1fr) !important;
  }

  #editorView.vmf-premiere-effects-mode .editor-sidebar {
    min-width: 0 !important;
  }
}


/* VMF patch: clean editor layout v2 */
#editorView.vmf-clean-editor-layout-v2 {
  height: calc(100vh - 82px) !important;
  min-height: 680px !important;
  overflow: hidden !important;
  background: #f7f8fb !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-shell {
  height: 100% !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 60px 320px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

/* left rail fixed: no leaking */
#editorView.vmf-clean-editor-layout-v2 .editor-tool-rail {
  width: 60px !important;
  min-width: 60px !important;
  max-width: 60px !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  z-index: 20 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button {
  width: 52px !important;
  max-width: 52px !important;
  min-height: 58px !important;
  margin: 4px auto !important;
  border-radius: 14px !important;
  padding: 6px 2px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button span:last-child {
  font-size: 10px !important;
  line-height: 1.05 !important;
  white-space: nowrap !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-icon {
  width: 22px !important;
  height: 22px !important;
  margin: 0 auto 4px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-icon svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

/* T text tool */
#editorView.vmf-clean-editor-layout-v2 .vmf-text-tool-glyph {
  width: 20px !important;
  height: 20px !important;
  border-radius: 6px !important;
  display: grid !important;
  place-items: center !important;
  background: #e8f0ff !important;
  color: #2563eb !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

/* sidebar compact */
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar {
  width: 320px !important;
  min-width: 320px !important;
  max-width: 320px !important;
  height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  z-index: 10 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-sidebar-head {
  padding: 18px 18px 10px !important;
}

/* remove orange tags / counts / descriptions */
#editorView.vmf-clean-editor-layout-v2 #editorClipCount,
#editorView.vmf-clean-editor-layout-v2 .editor-count-pill,
#editorView.vmf-clean-editor-layout-v2 .editor-layer-pill,
#editorView.vmf-clean-editor-layout-v2 .editor-status-pill,
#editorView.vmf-clean-editor-layout-v2 .editor-tag,
#editorView.vmf-clean-editor-layout-v2 .editor-badge {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorSidebarSubtitle,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsEmpty,
#editorView.vmf-clean-editor-layout-v2 .editor-panel-description,
#editorView.vmf-clean-editor-layout-v2 .editor-description,
#editorView.vmf-clean-editor-layout-v2 .editor-helper-text,
#editorView.vmf-clean-editor-layout-v2 .editor-section-copy {
  display: none !important;
}

/* remove little title icon */
#editorView.vmf-clean-editor-layout-v2 #editorProjectTitleButton::before,
#editorView.vmf-clean-editor-layout-v2 .editor-project-title-button::before,
#editorView.vmf-clean-editor-layout-v2 .editor-main-header .editor-project-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-main-header .editor-project-sparkle,
#editorView.vmf-clean-editor-layout-v2 .editor-main-header .editor-project-dot,
#editorView.vmf-clean-editor-layout-v2 .editor-main-header .project-title-icon {
  display: none !important;
  content: none !important;
}

/* main layout: preview top, timeline bottom */
#editorView.vmf-clean-editor-layout-v2 .editor-main {
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 52px minmax(350px, 40vh) auto !important;
  align-content: start !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-main-header {
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-stage-card {
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  background: #f7f8fb !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-stage-head {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell {
  width: 100% !important;
  height: 100% !important;
  padding: 10px 16px 4px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
  background: #f7f8fb !important;
}

/* real 9:16 player, fully visible */
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage {
  aspect-ratio: 9 / 16 !important;
  height: clamp(255px, 34vh, 360px) !important;
  width: auto !important;
  max-width: 220px !important;
  max-height: calc(40vh - 48px) !important;
  margin: 0 auto !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background: #000 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-video-stage video,
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage img,
#editorView.vmf-clean-editor-layout-v2 #editorVideo,
#editorView.vmf-clean-editor-layout-v2 #editorImagePreview {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-hud {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 !important;
}

/* timeline gets the bottom half */
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  overflow: hidden !important;
  border-top: 1px solid #e5e7eb !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-head {
  min-height: 46px !important;
  height: 46px !important;
  padding: 6px 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-body {
  height: calc(100% - 80px) !important;
  min-height: 260px !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-waveform {
  height: 100% !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-bottom {
  height: 34px !important;
  min-height: 34px !important;
  border-top: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

/* unified toolbar buttons */
#editorView.vmf-clean-editor-layout-v2 .vmf-clean-toolbar-button,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-head button,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-toolbar button {
  background: #ffffff !important;
  color: #334155 !important;
  border: 1px solid #d8dee8 !important;
  box-shadow: none !important;
}

/* selected Effects layer can be wider, but never covers preview/timeline */
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
  grid-template-columns: 60px 500px minmax(0, 1fr) !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-sidebar {
  width: 500px !important;
  min-width: 500px !important;
  max-width: 500px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .vmf-prem-effects.vmf-prem-grid-effects {
  max-height: calc(40vh - 50px) !important;
  width: 100% !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .vmf-prem-grid-scroll {
  max-height: calc(40vh - 50px) !important;
  overflow: auto !important;
}

/* no layer selected = no keyframe grid */
#editorView.vmf-clean-editor-layout-v2:not(.vmf-premiere-effects-mode) .vmf-premiere-effects-mount,
#editorView.vmf-clean-editor-layout-v2:not(.vmf-premiere-effects-mode) .vmf-keyframe-panel-mount,
#editorEffectsVideoSection:not(.vmf-premiere-mounted) .vmf-premiere-effects-mount {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 1360px) {
  #editorView.vmf-clean-editor-layout-v2 .editor-shell {
    grid-template-columns: 60px 290px minmax(0, 1fr) !important;
  }

  #editorView.vmf-clean-editor-layout-v2 .editor-sidebar {
    width: 290px !important;
    min-width: 290px !important;
    max-width: 290px !important;
  }

  #editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
    grid-template-columns: 60px 460px minmax(0, 1fr) !important;
  }

  #editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-sidebar {
    width: 460px !important;
    min-width: 460px !important;
    max-width: 460px !important;
  }

  #editorView.vmf-clean-editor-layout-v2 .editor-video-stage {
    height: clamp(240px, 32vh, 330px) !important;
    max-width: 205px !important;
  }
}


/* VMF patch: preview breathing room and clean tool rail */
#editorView.vmf-clean-editor-layout-v2 .editor-shell {
  grid-template-columns: 76px 320px minmax(0, 1fr) !important;
}

/* clean left rail */
#editorView.vmf-clean-editor-layout-v2 .editor-tool-rail {
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  overflow: hidden !important;
  padding: 8px 6px !important;
  box-sizing: border-box !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button {
  width: 62px !important;
  max-width: 62px !important;
  min-width: 62px !important;
  min-height: 64px !important;
  margin: 0 auto !important;
  padding: 7px 4px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button span:last-child {
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-icon {
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto 5px !important;
  display: grid !important;
  place-items: center !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-icon svg {
  width: 18px !important;
  height: 18px !important;
}

/* keep bottom help/settings inside rail */
#editorView.vmf-clean-editor-layout-v2 .editor-tool-bottom {
  width: 100% !important;
  align-items: center !important;
  gap: 8px !important;
}

/* move preview down slightly */
#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell {
  padding-top: 30px !important;
  padding-bottom: 6px !important;
  align-items: start !important;
  justify-items: center !important;
}

/* keep full 9:16 player visible */
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage {
  aspect-ratio: 9 / 16 !important;
  height: clamp(250px, 32vh, 350px) !important;
  width: auto !important;
  max-width: 210px !important;
  max-height: calc(40vh - 62px) !important;
  margin-top: 0 !important;
  background: #000 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* selected Effects layout shifts with wider rail */
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
  grid-template-columns: 76px 500px minmax(0, 1fr) !important;
}

@media (max-width: 1360px) {
  #editorView.vmf-clean-editor-layout-v2 .editor-shell {
    grid-template-columns: 76px 290px minmax(0, 1fr) !important;
  }

  #editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
    grid-template-columns: 76px 460px minmax(0, 1fr) !important;
  }
}


/* VMF patch: rounded duplicate and play buttons */
#editorView .vmf-duplicate-layer-button,
#editorView [data-vmf-duplicate-layer],
#editorView #editorTransportPlay,
#editorView .editor-transport-play {
  border-radius: 12px !important;
  overflow: hidden !important;
}

#editorView .vmf-duplicate-layer-button,
#editorView [data-vmf-duplicate-layer] {
  width: 36px !important;
  height: 32px !important;
  min-width: 36px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: #ffffff !important;
  border: 1px solid #d8dee8 !important;
  box-shadow: none !important;
}

#editorView #editorTransportPlay,
#editorView .editor-transport-play {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  display: inline-grid !important;
  place-items: center !important;
  background: #ffffff !important;
  border: 1px solid #d8dee8 !important;
  box-shadow: none !important;
}


/* VMF patch: remove bottom gray track bar */
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-bottom,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-sidezoom,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-sidezoom-control,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-sidezoom-label,
#editorView.vmf-clean-editor-layout-v2 #editorTimelineZoomSide,
#editorView.vmf-clean-editor-layout-v2 #editorZoomFitSide {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-body {
  height: calc(100% - 46px) !important;
  min-height: 300px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-waveform {
  height: 100% !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-main {
  grid-template-rows: 52px minmax(330px, 38vh) minmax(360px, 1fr) !important;
}


/* VMF patch: remove editor spacer bars */
#editorView.vmf-clean-editor-layout-v2 .editor-stage-card {
  margin: 0 !important;
  padding: 0 !important;
  border-bottom: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  border-bottom: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-hud {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* remove the white/gray strip between preview and timeline controls */
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-head {
  margin-top: 0 !important;
  border-top: 0 !important;
  background: #ffffff !important;
}

/* remove bottom gray strip */
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-bottom,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-sidezoom,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-sidezoom-control,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-sidezoom-label,
#editorView.vmf-clean-editor-layout-v2 #editorTimelineZoomSide,
#editorView.vmf-clean-editor-layout-v2 #editorZoomFitSide {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-body {
  height: calc(100% - 46px) !important;
  min-height: 320px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-waveform,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-scroll,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* give the removed spacer space back to the timeline */
#editorView.vmf-clean-editor-layout-v2 .editor-main {
  grid-template-rows: 52px minmax(310px, 36vh) minmax(390px, 1fr) !important;
}

/* keep preview fully visible after shrinking spacer */
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage {
  max-height: calc(36vh - 48px) !important;
}


/* VMF patch: remove highlighted empty stage/timeline dead space */
#editorView.vmf-clean-editor-layout-v2 {
  height: calc(100vh - 82px) !important;
  overflow: hidden !important;
}

/* force the editor into: header / compact preview / big timeline */
#editorView.vmf-clean-editor-layout-v2 .editor-main {
  display: grid !important;
  grid-template-rows: 52px 315px minmax(390px, 1fr) !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* remove the big blank preview row */
#editorView.vmf-clean-editor-layout-v2 .editor-stage-card {
  height: 315px !important;
  min-height: 315px !important;
  max-height: 315px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #f7f8fb !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell {
  height: 315px !important;
  min-height: 315px !important;
  max-height: 315px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 18px 16px 0 !important;
  display: grid !important;
  grid-template-rows: 260px 34px !important;
  align-items: start !important;
  justify-items: center !important;
  background: #f7f8fb !important;
  border: 0 !important;
  overflow: hidden !important;
}

/* full visible 9:16 player */
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage {
  aspect-ratio: 9 / 16 !important;
  height: 260px !important;
  width: auto !important;
  max-height: 260px !important;
  max-width: 150px !important;
  margin: 0 auto !important;
  background: #000 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* transport bar should sit directly under preview, no extra strip */
#editorView.vmf-clean-editor-layout-v2 .editor-hud {
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* timeline starts immediately after transport bar */
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card {
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-head {
  height: 46px !important;
  min-height: 46px !important;
  max-height: 46px !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  border-top: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #fff !important;
}

/* remove bottom gray / useless Tracks area completely */
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-bottom,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-sidezoom,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-sidezoom-control,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-sidezoom-label,
#editorView.vmf-clean-editor-layout-v2 #editorTimelineZoomSide,
#editorView.vmf-clean-editor-layout-v2 #editorZoomFitSide {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* timeline uses all remaining space */
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-body {
  height: calc(100% - 46px) !important;
  min-height: 340px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-waveform,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-scroll,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas {
  height: 100% !important;
  min-height: 100% !important;
  margin: 0 !important;
  padding-bottom: 0 !important;
  background: #fff !important;
}

/* stop ghost borders/lines from pseudo elements */
#editorView.vmf-clean-editor-layout-v2 .editor-stage-card::before,
#editorView.vmf-clean-editor-layout-v2 .editor-stage-card::after,
#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell::before,
#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell::after,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card::before,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card::after {
  display: none !important;
  content: none !important;
}


/* VMF patch: wider media panel and no empty scrollbar */
#editorView.vmf-clean-editor-layout-v2 .editor-shell {
  grid-template-columns: 76px 380px minmax(0, 1fr) !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-sidebar {
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
}

/* keep Effects wider when selected */
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
  grid-template-columns: 76px 520px minmax(0, 1fr) !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-sidebar {
  width: 520px !important;
  min-width: 520px !important;
  max-width: 520px !important;
}

/* no scrollbar when media tab has no uploaded items */
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar:has(#editorMediaPanel:not([hidden]) #editorMediaList:empty),
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(#editorMediaList:empty) {
  overflow-y: hidden !important;
  overflow-x: hidden !important;
}

/* tighten empty media state so it fits without scrolling */
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(#editorMediaList:empty) #editorMediaDropzone {
  min-height: 0 !important;
  margin-top: 26px !important;
  padding: 24px 18px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(#editorMediaList:empty) .editor-media-dropzone-illustration {
  width: 68px !important;
  height: 68px !important;
  margin-bottom: 12px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(#editorMediaList:empty) h4 {
  margin: 0 0 8px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(#editorMediaList:empty) p {
  margin: 0 0 14px !important;
}

/* when media exists, scrolling is allowed again */
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar:has(#editorMediaPanel:not([hidden]) #editorMediaList:not(:empty)),
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(#editorMediaList:not(:empty)) {
  overflow-y: auto !important;
}

@media (max-width: 1360px) {
  #editorView.vmf-clean-editor-layout-v2 .editor-shell {
    grid-template-columns: 76px 350px minmax(0, 1fr) !important;
  }

  #editorView.vmf-clean-editor-layout-v2 .editor-sidebar {
    width: 350px !important;
    min-width: 350px !important;
    max-width: 350px !important;
  }

  #editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
    grid-template-columns: 76px 480px minmax(0, 1fr) !important;
  }

  #editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-sidebar {
    width: 480px !important;
    min-width: 480px !important;
    max-width: 480px !important;
  }
}


/* VMF patch: hide empty media scrollbar reliably */
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-shell {
  grid-template-columns: 76px 420px minmax(0, 1fr) !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-sidebar {
  width: 420px !important;
  min-width: 420px !important;
  max-width: 420px !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-sidebar::-webkit-scrollbar,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-sidebar *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-sidebar *,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-sidebar {
  scrollbar-width: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-sidebar-head {
  padding-bottom: 8px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-media-dropzone,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .media-dropzone,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel [data-media-dropzone] {
  margin-top: 24px !important;
  min-height: 0 !important;
  padding: 22px 18px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-media-dropzone h4,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .media-dropzone h4 {
  margin-top: 8px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-media-has-items .editor-sidebar {
  overflow-y: auto !important;
}

@media (max-width: 1360px) {
  #editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-shell {
    grid-template-columns: 76px 390px minmax(0, 1fr) !important;
  }

  #editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-sidebar {
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
  }
}


/* VMF patch: static empty media panel spacing */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-shell {
  grid-template-columns: 76px 430px minmax(0, 1fr) !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar {
  width: 430px !important;
  min-width: 430px !important;
  max-width: 430px !important;
  overflow: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar * {
  scrollbar-width: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar::-webkit-scrollbar,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* flatten empty media layout */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar-head {
  padding: 18px 24px 8px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar h1,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar h2 {
  margin: 0 0 10px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar hr,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-divider {
  margin: 8px 0 !important;
}

/* reduce top waste above tabs/dropzone */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar [role="tablist"],
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-tabs,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-tabs {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
}

/* keep upload card fully visible and not scrollable */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-panel,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-panel,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media #editorMediaPanel {
  overflow: hidden !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media [data-media-dropzone] {
  margin: 18px auto 0 !important;
  padding: 18px 18px 20px !important;
  min-height: 0 !important;
  max-height: none !important;
  width: min(280px, 100%) !important;
  overflow: visible !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone svg,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone svg,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone-icon,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone-icon {
  width: 64px !important;
  height: 64px !important;
  margin-bottom: 10px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone h3,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone h4,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone h3,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone h4 {
  margin: 0 0 8px !important;
  font-size: 18px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone p,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone p {
  margin: 0 0 12px !important;
  line-height: 1.25 !important;
}

/* when media exists, scrolling returns */
#editorView.vmf-clean-editor-layout-v2.vmf-static-has-media .editor-sidebar {
  overflow-y: auto !important;
}

@media (max-width: 1360px) {
  #editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-shell {
    grid-template-columns: 76px 400px minmax(0, 1fr) !important;
  }

  #editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar {
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
  }
}


/* VMF patch: compact empty media panel */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar {
  overflow: hidden !important;
}

/* remove the top helper text above the tabs */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar .editor-media-section-label,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar .editor-media-subhead,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar .editor-import-helper,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar .editor-media-helper {
  display: none !important;
}

/* tighten spacing above tabs */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar-head {
  padding-bottom: 4px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-tabs,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media [role="tablist"] {
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}

/* move upload area upward */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media [data-media-dropzone] {
  margin-top: 6px !important;
  padding-top: 10px !important;
  padding-bottom: 12px !important;
  min-height: 0 !important;
}

/* remove the drag-and-drop sentence under Upload Media Files */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone p,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone p {
  display: none !important;
}

/* tighten icon/title spacing */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone svg,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone-icon,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone svg,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone-icon {
  width: 62px !important;
  height: 62px !important;
  margin-bottom: 8px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone h3,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-dropzone h4,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone h3,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .media-dropzone h4 {
  margin: 0 0 10px !important;
}

/* make sure empty state fits without scrolling */
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar-content,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-media-panel,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media #editorMediaPanel {
  overflow: hidden !important;
  max-height: none !important;
}


/* VMF patch: remove media header block and shift content up */
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar-head {
  display: none !important;
}

/* pull the rest of the sidebar upward */
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar-content,
#editorView.vmf-clean-editor-layout-v2 .editor-media-panel,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel {
  padding-top: 10px !important;
  margin-top: 0 !important;
}

/* tighten first visible section spacing */
#editorView.vmf-clean-editor-layout-v2 .editor-media-tabs,
#editorView.vmf-clean-editor-layout-v2 [role="tablist"] {
  margin-top: 0 !important;
}

/* remove extra top divider/space if present */
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar hr:first-of-type,
#editorView.vmf-clean-editor-layout-v2 .editor-divider:first-of-type {
  display: none !important;
}

/* VMF patch: clearer timeline lanes */
#editorView .vmf-timeline-lanes-ready {
  --vmf-lane-bg: #f3f4f6;
  --vmf-lane-border: #e5e7eb;
  --vmf-lane-gap: 8px;
  --vmf-lane-radius: 10px;
}

/* make each row read as its own strip */
#editorView .vmf-timeline-lanes-ready .vmf-track-lane {
  background: var(--vmf-lane-bg) !important;
  border: 1px solid var(--vmf-lane-border) !important;
  border-radius: var(--vmf-lane-radius) !important;
  box-sizing: border-box !important;
  min-height: 48px !important;
  margin: 0 0 var(--vmf-lane-gap) 0 !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  overflow: visible !important;
}

/* remove harsh internal striping if present */
#editorView .vmf-timeline-lanes-ready .vmf-track-lane::before,
#editorView .vmf-timeline-lanes-ready .vmf-track-lane::after {
  box-shadow: none !important;
}

/* if clips sit inside lanes, keep them centered better */
#editorView .vmf-timeline-lanes-ready .vmf-track-lane > * {
  position: relative;
  z-index: 1;
}

/* clearer left labels */
#editorView .vmf-timeline-lanes-ready .vmf-track-label-pill {
  font-weight: 700 !important;
  color: #334155 !important;
}

/* visually separate the whole track stack from the background */
#editorView .vmf-timeline-lanes-ready .timeline-track-list,
#editorView .vmf-timeline-lanes-ready .editor-track-list,
#editorView .vmf-timeline-lanes-ready .timeline-layers,
#editorView .vmf-timeline-lanes-ready .editor-sequence-tracks {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* give empty lanes breathing room */
#editorView .vmf-timeline-lanes-ready .vmf-track-lane:empty {
  min-height: 52px !important;
}

/* keep playhead visible above the lanes */
#editorView .vmf-timeline-lanes-ready .timeline-playhead,
#editorView .vmf-timeline-lanes-ready .editor-playhead,
#editorView .vmf-timeline-lanes-ready .playhead {
  z-index: 20 !important;
}

/* reduce flat washed-out look inside timeline background */
#editorView .vmf-timeline-lanes-ready .timeline-scroll-content,
#editorView .vmf-timeline-lanes-ready .timeline-scroll-area,
#editorView .vmf-timeline-lanes-ready .editor-sequence-canvas,
#editorView .vmf-timeline-lanes-ready .editor-waveform {
  background: #ffffff !important;
}


/* VMF patch: add media import/url panel */
#editorView.vmf-clean-editor-layout-v2 .vmf-add-media-old-tabs-hidden {
  display: none !important;
}

#vmfAddMediaPanel {
  padding: 0 22px 12px !important;
}

#vmfAddMediaPanel .vmf-add-media-title {
  font-size: 22px !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  color: #111827 !important;
  margin: 0 0 12px !important;
}

#vmfAddMediaPanel .vmf-add-media-tabs {
  width: 100% !important;
  height: 40px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 3px !important;
  margin: 0 0 22px !important;
  background: #f3f4f6 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
}

#vmfAddMediaPanel .vmf-add-media-tab {
  flex: 1 1 0 !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}

#vmfAddMediaPanel .vmf-add-media-tab.active {
  background: #000000 !important;
  color: #ffffff !important;
}

#vmfAddMediaPanel .vmf-add-media-url-panel {
  width: 100% !important;
  padding: 0 !important;
}

#vmfAddMediaPanel .vmf-add-media-url-label {
  display: block !important;
  margin: 0 0 10px !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#vmfAddMediaPanel .vmf-add-media-url-field {
  position: relative !important;
  width: 100% !important;
  margin-bottom: 16px !important;
}

#vmfAddMediaPanel #vmfAddMediaUrlInput {
  width: 100% !important;
  height: 44px !important;
  padding: 0 42px 0 14px !important;
  border: 1px solid #d6dbe5 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  outline: none !important;
  box-shadow: none !important;
}

#vmfAddMediaPanel #vmfAddMediaUrlInput::placeholder {
  color: #9ca3af !important;
}

#vmfAddMediaPanel .vmf-add-media-url-icon {
  position: absolute !important;
  right: 13px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #6b7280 !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

#vmfAddMediaPanel .vmf-add-media-url-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  width: 100% !important;
}

#vmfAddMediaPanel .vmf-add-media-download,
#vmfAddMediaPanel .vmf-add-media-timeline {
  height: 44px !important;
  border-radius: 9px !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  box-shadow: none !important;
}

#vmfAddMediaPanel .vmf-add-media-download {
  background: #ffffff !important;
  color: #6b7280 !important;
  border: 1px solid #e5e7eb !important;
}

#vmfAddMediaPanel .vmf-add-media-timeline {
  background: #93c5fd !important;
  color: #ffffff !important;
  border: 1px solid #93c5fd !important;
}

#vmfAddMediaPanel .vmf-add-media-url-status {
  min-height: 18px !important;
  margin-top: 10px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* URL tab hides the normal upload card/list */
#editorView.vmf-add-media-url-mode .editor-media-dropzone,
#editorView.vmf-add-media-url-mode .media-dropzone,
#editorView.vmf-add-media-url-mode [data-media-dropzone],
#editorView.vmf-add-media-url-mode .editor-media-grid,
#editorView.vmf-add-media-url-mode .editor-media-list,
#editorView.vmf-add-media-url-mode .media-grid,
#editorView.vmf-add-media-url-mode .media-list {
  display: none !important;
}

/* Media tab keeps upload/import card visible */
#editorView.vmf-add-media-media-mode .editor-media-dropzone,
#editorView.vmf-add-media-media-mode .media-dropzone,
#editorView.vmf-add-media-media-mode [data-media-dropzone] {
  display: block !important;
  margin-top: 8px !important;
}


/* VMF patch: remove Add Media indentation */
#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel .vmf-add-media-title {
  margin-left: 0 !important;
  padding-left: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel .vmf-add-media-tabs {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-sidebar {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-sidebar hr,
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar .editor-divider {
  margin-left: 0 !important;
  margin-right: 0 !important;
}


/* VMF patch: remove stray line above Add Media */
#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel,
#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel::before,
#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel::after {
  border-top: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel hr,
#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel + hr,
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar hr,
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar .editor-divider,
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar [class*="divider"],
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar [class*="separator"] {
  display: none !important;
  border: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel .vmf-add-media-title {
  border-top: 0 !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
}


/* VMF patch: reset real media panel spacing */
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.editor-media-panel,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.editor-sidebar-panel,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel {
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

/* the Add Media component owns the spacing now */
#editorView.vmf-clean-editor-layout-v2 #vmfAddMediaPanel {
  padding: 18px 20px 12px !important;
  margin: 0 !important;
  width: 100% !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative !important;
  z-index: 10 !important;
}

/* remove old panel header/divider artifacts above Add Media */
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel > .editor-sidebar-head,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel > .editor-panel-head,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel > .editor-panel-header,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel > hr,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel > .editor-divider,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel > [class*="divider"],
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel > [class*="separator"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
}

/* prevent the old Media title area from reserving invisible space */
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel::before,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel::after {
  display: none !important;
  content: none !important;
}

/* upload area directly under Add Media tabs */
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .editor-media-dropzone,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .media-dropzone,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel [data-media-dropzone] {
  margin-top: 8px !important;
}


/* VMF patch: move empty media state up + disable zoom styling */
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .editor-media-dropzone,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .media-dropzone,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel [data-media-dropzone],
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .editor-empty-upload,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .media-empty-state {
  margin-top: 0 !important;
  padding-top: 6px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .editor-media-dropzone-empty,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .media-dropzone-empty,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .editor-empty-upload-card,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .media-empty-state-card,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .upload-empty-state {
  margin-top: -16px !important;
  transform: none !important;
  transition: none !important;
  zoom: 1 !important;
  touch-action: manipulation !important;
  user-select: none !important;
}


/* VMF patch: effects-only empty state */
#editorView.vmf-clean-editor-layout-v2.vmf-effects-only-empty .editor-sidebar {
  position: relative !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-effects-only-empty .editor-sidebar > *:not(#vmfEffectsOnlyEmpty) {
  visibility: hidden !important;
  pointer-events: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-effects-only-empty #vmfEffectsOnlyEmpty {
  visibility: visible !important;
  pointer-events: auto !important;
}

#vmfEffectsOnlyEmpty {
  position: absolute !important;
  inset: 0 !important;
  z-index: 100 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 360px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 36px 28px !important;
  background: #ffffff !important;
  color: #6b7280 !important;
}

#vmfEffectsOnlyEmpty .vmf-effects-only-empty-icon {
  width: 62px !important;
  height: 62px !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 18px !important;
}

#vmfEffectsOnlyEmpty .vmf-effects-only-empty-icon img {
  display: block !important;
  width: 62px !important;
  height: 62px !important;
  object-fit: contain !important;
}

#vmfEffectsOnlyEmpty h3 {
  margin: 0 0 8px !important;
  color: #4b5563 !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
}

#vmfEffectsOnlyEmpty p {
  max-width: 310px !important;
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.45 !important;
}

/* VMF patch: lock timeline scroll until extra tracks exist */
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-scroll-locked .editor-timeline-body,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-scroll-locked .editor-waveform,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-scroll-locked .editor-waveform-scroll,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-scroll-locked .editor-waveform-canvas {
  overflow-y: hidden !important;
  overscroll-behavior-y: none !important;
}

/* horizontal timeline still allowed */
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-scroll-locked .editor-waveform-scroll,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-scroll-locked .editor-waveform-canvas {
  overflow-x: auto !important;
}

/* when user creates extra tracks, vertical scrolling returns */
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-extra-tracks-scroll .editor-timeline-body,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-extra-tracks-scroll .editor-waveform,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-extra-tracks-scroll .editor-waveform-scroll,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-extra-tracks-scroll .editor-waveform-canvas {
  overflow-y: auto !important;
  overscroll-behavior-y: contain !important;
}

/* keep scrollbar visually hidden even when scrolling is enabled */
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-body,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-scroll,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-body::-webkit-scrollbar,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform::-webkit-scrollbar,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-scroll::-webkit-scrollbar,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}


/* VMF patch: timeline lane drag targeting */
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-scroll,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform {
  position: relative !important;
}

/* hide old huge drag/drop splash while dragging */
#editorView.vmf-media-dragging-to-timeline .editor-timeline-empty-panel,
#editorView.vmf-media-dragging-to-timeline [data-editor-empty-drop] .editor-timeline-empty-panel,
#editorView.vmf-media-dragging-to-timeline .editor-timeline-empty h3,
#editorView.vmf-media-dragging-to-timeline .editor-timeline-empty p,
#editorView.vmf-media-dragging-to-timeline .editor-timeline-empty button {
  display: none !important;
}

/* snap lane indicator */
#editorView .vmf-timeline-drop-guide {
  position: absolute !important;
  left: 52px !important;
  right: 16px !important;
  z-index: 80 !important;
  border: 2px solid rgba(37, 99, 235, .7) !important;
  background: rgba(37, 99, 235, .08) !important;
  border-radius: 9px !important;
  pointer-events: none !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65) !important;
}

#editorView .vmf-timeline-drop-guide[hidden] {
  display: none !important;
}

#editorView .vmf-timeline-drop-guide-label {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  height: 22px !important;
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 9px !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  box-shadow: 0 4px 14px rgba(37, 99, 235, .22) !important;
}

/* make lanes read as drop tiles instead of a single splash */
#editorView.vmf-timeline-lane-drag-active .editor-timeline-empty,
#editorView.vmf-timeline-lane-drag-active [data-editor-empty-drop] {
  background:
    repeating-linear-gradient(
      to bottom,
      #f4f5f7 0px,
      #f4f5f7 44px,
      #ffffff 44px,
      #ffffff 54px
    ) !important;
}

/* dim giant clip ghost/preview overlays if old code creates them */
#editorView.vmf-media-dragging-to-timeline .editor-media-card-drag-preview,
#editorView.vmf-media-dragging-to-timeline .media-drag-preview,
#editorView.vmf-media-dragging-to-timeline .editor-drag-preview,
#editorView.vmf-media-dragging-to-timeline [class*="drag-preview"],
#editorView.vmf-media-dragging-to-timeline [class*="drop-preview"] {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* VMF patch: reference-style track rail aligned with timeline lanes */
#editorView.vmf-clean-editor-layout-v2 .editor-ruler,
#editorView.vmf-clean-editor-layout-v2 .editor-track-row,
#editorView.vmf-clean-editor-layout-v2 .vmf-track-rail-row,
#editorView.vmf-clean-editor-layout-v2 .editor-track-row-overlay {
  grid-template-columns: var(--vmf-reference-rail-width, 176px) minmax(0, 1fr) !important;
  column-gap: 12px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-ruler-gutter,
#editorView.vmf-clean-editor-layout-v2 .editor-track-label,
#editorView.vmf-clean-editor-layout-v2 .vmf-track-rail-label {
  display: flex !important;
  visibility: visible !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-stack {
  position: relative !important;
  z-index: 1 !important;
  gap: 8px !important;
  padding: 10px 0 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-track-row {
  min-height: 56px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2 .editor-track-row-video .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2 .editor-track-row-captions .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2 .editor-track-row-audio .editor-timeline-lane {
  height: 48px !important;
  min-height: 48px !important;
  align-self: center !important;
  overflow: hidden !important;
  border: 1px solid #ececf1 !important;
  border-radius: 12px !important;
  background: #f8f8fa !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas::before,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-waveform-canvas::before,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-empty-real-rows .editor-waveform-canvas::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-timeline-empty,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows [data-editor-empty-drop] {
  display: none !important;
}

#editorView .vmf-timeline-drop-guide {
  left: 10px !important;
  right: 10px !important;
  height: 44px !important;
  border-color: rgba(37, 99, 235, .9) !important;
  background: rgba(37, 99, 235, .1) !important;
  border-radius: 4px !important;
}

#editorView .vmf-timeline-drop-guide-label {
  border-radius: 4px !important;
  background: #1d4ed8 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas .editor-selection-window,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas .editor-selection-window-overlay,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas [data-overlay-id],
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas [data-layer-id] {
  max-height: 38px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas .editor-track-filmstrip,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas .editor-track-filmstrip img,
#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas .editor-track-filmstrip video {
  max-height: 38px !important;
}


/* VMF patch: reference lane cards beside track labels */
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2 .editor-track-row-video .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2 .editor-track-row-captions .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2 .editor-track-row-audio .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2 .vmf-track-rail-lane,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-lane-overlay {
  position: relative !important;
  min-height: 48px !important;
  height: 48px !important;
  margin: 0 !important;
  background: #f8f8fa !important;
  border: 1px solid #ececf1 !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-empty,
#editorView.vmf-clean-editor-layout-v2 [data-editor-empty-drop] {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-empty::before,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-empty::after,
#editorView.vmf-clean-editor-layout-v2 [data-editor-empty-drop]::before,
#editorView.vmf-clean-editor-layout-v2 [data-editor-empty-drop]::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-waveform-canvas::before,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-waveform-canvas::before,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-empty-real-rows .editor-waveform-canvas::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-track-row,
#editorView.vmf-clean-editor-layout-v2 .editor-track-row-overlay {
  min-height: 48px !important;
  grid-template-columns: var(--vmf-reference-rail-width, 176px) minmax(0, 1fr) !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-selection-window,
#editorView.vmf-clean-editor-layout-v2 .editor-selection-window-overlay {
  top: 3px !important;
  bottom: auto !important;
  height: 38px !important;
}

#editorView .vmf-timeline-drop-guide {
  top: var(--vmf-guide-top, auto);
  height: 44px !important;
  left: var(--vmf-reference-rail-width, 150px) !important;
  right: 0 !important;
  border-radius: 0 !important;
}


/* VMF patch: real timelines use real lane boxes only */
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-waveform-canvas::before {
  display: none !important;
  content: none !important;
  background: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-track-row-video .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-track-row-captions .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-track-row-audio .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-timeline-lane-overlay {
  background: #f1f3f6 !important;
  border: 1px solid #e4e8ef !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-timeline-stack {
  padding: 8px 10px 0 !important;
  gap: 10px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-track-row,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-track-row-overlay {
  min-height: 44px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-selection-window,
#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .editor-selection-window-overlay {
  top: 3px !important;
  height: 36px !important;
  bottom: auto !important;
  border-radius: 7px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .vmf-placeholder-track-row {
  min-height: 44px !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-timeline-has-real-rows .vmf-placeholder-track-lane {
  cursor: copy !important;
}

/* VMF patch: freeze timeline visuals during media drag to prevent white flicker */
#editorView.vmf-stable-media-dragging .editor-waveform,
#editorView.vmf-stable-media-dragging .editor-waveform-scroll,
#editorView.vmf-stable-media-dragging .editor-waveform-canvas,
#editorView.vmf-stable-media-dragging .editor-timeline-body,
#editorView.vmf-stable-media-dragging .editor-timeline-stack {
  background:
    repeating-linear-gradient(
      to bottom,
      #f3f4f6 0px,
      #f3f4f6 44px,
      #ffffff 44px,
      #ffffff 56px
    ) !important;
}

#editorView.vmf-stable-media-dragging.vmf-timeline-empty-real-rows .editor-waveform-canvas::before {
  display: block !important;
  opacity: 1 !important;
}

#editorView.vmf-stable-media-dragging.vmf-timeline-has-real-rows .editor-waveform-canvas::before {
  display: none !important;
}


/* VMF patch: clean Media/Text rail and pro layer inspector */
#editorView .vmf-rail-tool-hidden,
#editorView [data-editor-tool="text"]:not(.vmf-clean-text-tool),
#editorView [data-editor-tool="subtitles"]:not(.vmf-clean-text-tool),
#editorView [data-editor-tool="subtitle"]:not(.vmf-clean-text-tool),
#editorView [data-editor-tool="transcript"]:not(.vmf-clean-text-tool),
#editorView [data-editor-tool="captions"]:not(.vmf-clean-text-tool) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#editorView .editor-tool-rail .vmf-clean-text-tool {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#editorView .vmf-clean-text-tool {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  min-height: 64px !important;
  padding: 7px 4px !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
}

#editorView .vmf-clean-text-tool .editor-tool-icon,
#editorView .vmf-clean-text-tool .tool-icon {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  margin: 0 auto 5px !important;
  display: grid !important;
  place-items: center !important;
}

#editorView .vmf-clean-text-file-icon {
  width: 32px !important;
  height: 32px !important;
  display: grid !important;
  place-items: center !important;
}

#editorView .vmf-clean-text-file-icon svg {
  width: 30px !important;
  height: 30px !important;
  display: block !important;
  overflow: visible !important;
}

#editorView .vmf-clean-file-bg {
  fill: #fbfdff !important;
  stroke: #8fa6cc !important;
  stroke-width: 4.4 !important;
  stroke-linejoin: round !important;
}

#editorView .vmf-clean-file-fold {
  fill: #dbe7f8 !important;
  stroke: #8fa6cc !important;
  stroke-width: 4.4 !important;
  stroke-linejoin: round !important;
}

#editorView .vmf-clean-file-t {
  fill: #3b82f6 !important;
}

#editorView.vmf-pro-layer-inspector-open .editor-sidebar {
  position: relative !important;
  overflow: hidden !important;
}

#editorView.vmf-pro-layer-inspector-open .editor-sidebar > *:not(#vmfProLayerInspector) {
  visibility: hidden !important;
  pointer-events: none !important;
}

#vmfProLayerInspector {
  position: absolute !important;
  inset: 0 !important;
  z-index: 220 !important;
  background: #ffffff !important;
  overflow-y: auto !important;
  padding: 18px 18px 28px !important;
  box-sizing: border-box !important;
  color: #111827 !important;
  scrollbar-width: none !important;
}

#vmfProLayerInspector::-webkit-scrollbar {
  display: none !important;
}

#vmfProLayerInspector .vmf-pro-top {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding-bottom: 12px !important;
}

#vmfProLayerInspector .vmf-pro-top small {
  display: block !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .14em !important;
  margin-bottom: 4px !important;
}

#vmfProLayerInspector .vmf-pro-top h2 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 22px !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
}

#vmfProLayerInspector .vmf-pro-top button {
  width: 30px !important;
  height: 30px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #64748b !important;
  font-size: 18px !important;
  font-weight: 800 !important;
}

#vmfProLayerInspector .vmf-pro-section {
  border-top: 1px solid #e5e7eb !important;
  padding: 0 !important;
}

#vmfProLayerInspector .vmf-pro-section summary {
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  list-style: none !important;
  cursor: pointer !important;
  color: #111827 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
}

#vmfProLayerInspector .vmf-pro-section summary::-webkit-details-marker {
  display: none !important;
}

#vmfProLayerInspector .vmf-pro-section summary span {
  color: #6b7280 !important;
}

#vmfProLayerInspector .vmf-pro-section:not([open]) summary span {
  transform: rotate(-90deg) !important;
}

#vmfProLayerInspector .vmf-pro-section-body {
  padding-bottom: 14px !important;
}

#vmfProLayerInspector .vmf-pro-grid {
  display: grid !important;
  gap: 12px !important;
}

#vmfProLayerInspector .vmf-pro-grid.two {
  grid-template-columns: 1fr 1fr !important;
}

#vmfProLayerInspector .vmf-pro-grid.one {
  grid-template-columns: 1fr !important;
}

#vmfProLayerInspector .vmf-pro-field {
  display: grid !important;
  gap: 6px !important;
}

#vmfProLayerInspector .vmf-pro-field.full {
  grid-column: 1 / -1 !important;
}

#vmfProLayerInspector .vmf-pro-field > span {
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
}

#vmfProLayerInspector .vmf-pro-input {
  position: relative !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  background: #f3f4f6 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

#vmfProLayerInspector input,
#vmfProLayerInspector select,
#vmfProLayerInspector textarea {
  width: 100% !important;
  border: 0 !important;
  outline: 0 !important;
  background: #f3f4f6 !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

#vmfProLayerInspector input {
  height: 38px !important;
  padding: 0 34px 0 10px !important;
}

#vmfProLayerInspector select {
  height: 38px !important;
  border-radius: 8px !important;
  padding: 0 10px !important;
}

#vmfProLayerInspector textarea {
  min-height: 88px !important;
  border-radius: 8px !important;
  padding: 10px !important;
  resize: vertical !important;
}

#vmfProLayerInspector .vmf-pro-input b {
  position: absolute !important;
  right: 31px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
}

#vmfProLayerInspector .vmf-pro-input button {
  position: absolute !important;
  right: 6px !important;
  width: 22px !important;
  height: 22px !important;
  border: 0 !important;
  background: transparent !important;
  color: #94a3b8 !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

#vmfProLayerInspector .vmf-pro-toggles {
  display: grid !important;
}

#vmfProLayerInspector .vmf-pro-toggle {
  min-height: 50px !important;
  border-bottom: 1px solid #f1f5f9 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  color: #4b5563 !important;
  font-size: 14px !important;
  font-weight: 800 !important;
}

#vmfProLayerInspector .vmf-pro-toggle input {
  display: none !important;
}

#vmfProLayerInspector .vmf-pro-toggle i {
  width: 38px !important;
  height: 22px !important;
  border-radius: 999px !important;
  background: #e5e7eb !important;
  position: relative !important;
}

#vmfProLayerInspector .vmf-pro-toggle i::after {
  content: "" !important;
  position: absolute !important;
  width: 18px !important;
  height: 18px !important;
  left: 2px !important;
  top: 2px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15,23,42,.18) !important;
  transition: transform .15s ease !important;
}

#vmfProLayerInspector .vmf-pro-toggle input:checked + i {
  background: #2563eb !important;
}

#vmfProLayerInspector .vmf-pro-toggle input:checked + i::after {
  transform: translateX(16px) !important;
}

#vmfProLayerInspector .vmf-pro-generate {
  width: 100% !important;
  height: 44px !important;
  margin-top: 12px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #2f7cf6 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

#vmfProLayerInspector .vmf-pro-cues {
  min-height: 74px !important;
  margin-top: 12px !important;
  border-radius: 10px !important;
  background: #f7f8fb !important;
  color: #64748b !important;
  display: grid !important;
  place-items: center !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}


/* VMF patch: compact media cards 4-up */
#editorMediaPanel,
#editorMediaPanel.editor-sidebar-panel,
#editorMediaPanel.editor-media-panel {
  overflow-y: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding-bottom: 10px !important;
}

#editorMediaPanel::-webkit-scrollbar,
#editorMediaPanel *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* tighten top section */
#editorMediaPanel .editor-sidebar-head,
#editorMediaPanel .editor-panel-head,
#editorMediaPanel .editor-panel-header {
  margin-bottom: 6px !important;
  padding-bottom: 6px !important;
}

#editorMediaPanel h1,
#editorMediaPanel h2,
#editorMediaPanel .vmf-add-media-title {
  font-size: 21px !important;
  line-height: 1.05 !important;
  margin: 0 0 8px !important;
}

/* make Add Media controls smaller */
#vmfAddMediaPanel,
#editorMediaPanel .vmf-add-media-panel {
  padding-top: 4px !important;
  margin-top: 0 !important;
}

#editorMediaPanel .vmf-add-media-tabs,
#editorMediaPanel [class*="add-media-tabs"],
#editorMediaPanel [class*="import-tabs"] {
  height: 36px !important;
  margin-bottom: 10px !important;
}

#editorMediaPanel .vmf-add-media-tabs button,
#editorMediaPanel [class*="add-media-tabs"] button,
#editorMediaPanel [class*="import-tabs"] button {
  height: 30px !important;
  min-height: 30px !important;
  font-size: 11px !important;
  border-radius: 7px !important;
  padding: 0 8px !important;
}

/* upload row should not eat vertical space */
#editorMediaPanel .editor-media-dropzone,
#editorMediaPanel .media-dropzone,
#editorMediaPanel [data-media-dropzone],
#editorMediaPanel .upload-empty-state,
#editorMediaPanel .editor-empty-upload {
  min-height: 0 !important;
  max-height: none !important;
  padding: 5px 0 8px !important;
  margin: 0 !important;
}

#editorMediaPanel .upload-empty-state h3,
#editorMediaPanel .editor-empty-upload h3,
#editorMediaPanel .upload-empty-state p,
#editorMediaPanel .editor-empty-upload p {
  display: none !important;
}

#editorMediaPanel button,
#editorMediaPanel .button {
  min-height: 30px !important;
}

/* force a compact 2-column media grid */
#editorMediaPanel .editor-media-grid,
#editorMediaPanel .media-grid,
#editorMediaPanel [class*="media-grid"],
#editorMediaPanel [class*="asset-grid"] {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: start !important;
}

/* compact cards so 4 fit */
#editorMediaPanel .editor-media-card,
#editorMediaPanel .media-card,
#editorMediaPanel [data-editor-media-id],
#editorMediaPanel [data-media-id],
#editorMediaPanel [data-vmf-media-id] {
  width: 100% !important;
  max-width: none !important;
  min-height: 142px !important;
  max-height: 156px !important;
  padding: 6px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* smaller thumbnails */
#editorMediaPanel .editor-media-card img,
#editorMediaPanel .media-card img,
#editorMediaPanel [data-editor-media-id] img,
#editorMediaPanel [data-media-id] img,
#editorMediaPanel [data-vmf-media-id] img,
#editorMediaPanel .editor-media-card video,
#editorMediaPanel .media-card video {
  width: 100% !important;
  height: 76px !important;
  max-height: 76px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
}

/* show title instead of cutting it off */
#editorMediaPanel .editor-media-card strong,
#editorMediaPanel .editor-media-card b,
#editorMediaPanel .editor-media-card .title,
#editorMediaPanel .editor-media-card [class*="title"],
#editorMediaPanel .media-card strong,
#editorMediaPanel .media-card b,
#editorMediaPanel .media-card .title,
#editorMediaPanel .media-card [class*="title"],
#editorMediaPanel [data-editor-media-id] strong,
#editorMediaPanel [data-media-id] strong,
#editorMediaPanel [data-vmf-media-id] strong {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  white-space: normal !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  min-height: 25px !important;
  max-height: 27px !important;
}

/* reduce timestamp/metadata text */
#editorMediaPanel .editor-media-card small,
#editorMediaPanel .media-card small,
#editorMediaPanel [data-editor-media-id] small,
#editorMediaPanel [data-media-id] small,
#editorMediaPanel [data-vmf-media-id] small,
#editorMediaPanel .editor-media-card .meta,
#editorMediaPanel .media-card .meta,
#editorMediaPanel [class*="media-meta"] {
  font-size: 10px !important;
  line-height: 1.1 !important;
  margin-top: 2px !important;
}

/* small blue asset type badge */
#editorMediaPanel .editor-media-card [class*="badge"],
#editorMediaPanel .media-card [class*="badge"],
#editorMediaPanel [data-editor-media-id] [class*="badge"],
#editorMediaPanel [data-media-id] [class*="badge"] {
  font-size: 9px !important;
  line-height: 1 !important;
  padding: 2px 5px !important;
  border-radius: 5px !important;
}

/* keep panel from feeling oversized */
#editorMediaPanel {
  max-height: calc(100vh - 8px) !important;
}


/* VMF patch: unselect layer on blank editor click */
#editorView .editor-waveform-canvas,
#editorView .editor-waveform-scroll,
#editorView .editor-timeline-card,
#editorView .editor-preview-region,
#editorView .editor-main {
  cursor: default;
}


/* VMF patch: stable timeline media drag */

/* Keep the timeline visually stable while dragging. */
#editorView.vmf-stable-media-dragging .editor-timeline-card,
#editorView.vmf-stable-media-dragging .editor-timeline-region,
#editorView.vmf-stable-media-dragging .editor-timeline-shell,
#editorView.vmf-stable-media-dragging .editor-waveform,
#editorView.vmf-stable-media-dragging .editor-waveform-scroll,
#editorView.vmf-stable-media-dragging .editor-waveform-canvas {
  background-color: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: none !important;
  animation: none !important;
}

/* Hide floating drag ghost/popups with CSS only. Do not delete DOM during drag. */
#editorView.vmf-stable-media-dragging .editor-drag-preview,
#editorView.vmf-stable-media-dragging .media-drag-preview,
#editorView.vmf-stable-media-dragging .editor-media-card-drag-preview,
#editorView.vmf-stable-media-dragging .editor-drop-preview,
#editorView.vmf-stable-media-dragging .timeline-drop-preview,
#editorView.vmf-stable-media-dragging [class*="drag-preview"],
#editorView.vmf-stable-media-dragging [class*="drop-preview"],
#editorView.vmf-stable-media-dragging [class*="dragPreview"],
#editorView.vmf-stable-media-dragging [class*="dropPreview"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Do not hide the actual media card in the left Media panel. */
#editorMediaPanel .editor-media-card,
#editorMediaPanel .media-card,
#editorMediaPanel [data-editor-media-id],
#editorMediaPanel [data-media-id],
#editorMediaPanel [data-vmf-media-id] {
  visibility: visible !important;
  opacity: 1 !important;
}


/* VMF patch: empty timeline uses real track rows */
#editorView .editor-empty-timeline-stack {
  max-height: 238px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#editorView .editor-empty-timeline-stack .editor-track-row {
  flex-shrink: 0 !important;
}

#editorView .editor-empty-timeline-stack .editor-timeline-lane.drop-active {
  outline: 2px solid rgba(37, 99, 235, .45) !important;
  background: rgba(37, 99, 235, .08) !important;
}


/* VMF patch: fixed timeline row sizing */
#editorView .editor-timeline-region,
#editorView .editor-timeline-shell,
#editorView .editor-timeline-card,
#editorView .editor-waveform,
#editorView .editor-waveform-scroll,
#editorView .editor-waveform-canvas,
#editorView .editor-timeline-body {
  height: 330px !important;
  min-height: 330px !important;
  max-height: 330px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* Keep ruler normal */
#editorView .editor-ruler {
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  background: #ffffff !important;
}

/* Fixed rows, not stretched/crunched */
#editorView .editor-timeline-stack,
#editorView .editor-empty-timeline-stack {
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  display: block !important;
  padding: 8px 12px 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

/* Track row size */
#editorView .editor-timeline-stack .editor-track-row,
#editorView .editor-empty-timeline-stack .editor-track-row,
#editorView .editor-timeline-stack .vmf-track-rail-row,
#editorView .editor-empty-timeline-stack .vmf-track-rail-row {
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  margin: 0 0 10px 0 !important;
  display: grid !important;
  grid-template-columns: var(--vmf-reference-rail-width, 176px) minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: stretch !important;
}

/* Lane fills fixed row */
#editorView .editor-timeline-stack .editor-timeline-lane,
#editorView .editor-empty-timeline-stack .editor-timeline-lane,
#editorView .editor-timeline-stack .vmf-track-rail-lane,
#editorView .editor-empty-timeline-stack .vmf-track-rail-lane {
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  min-width: 0 !important;
  margin: 0 !important;
  border-radius: 9px !important;
  z-index: 1 !important;
}

/* Labels align cleanly */
#editorView .editor-timeline-stack .editor-track-label,
#editorView .editor-empty-timeline-stack .editor-track-label,
#editorView .editor-timeline-stack .vmf-track-rail-label,
#editorView .editor-empty-timeline-stack .vmf-track-rail-label {
  grid-column: 1 !important;
  grid-row: 1 !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  min-width: var(--vmf-reference-rail-width, 176px) !important;
  max-width: var(--vmf-reference-rail-width, 176px) !important;
  align-items: center !important;
  position: relative !important;
  z-index: 3 !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
}

/* Hide ugly bottom page filler without stretching rows */
html,
body,
#app,
#appShell,
#editorView {
  background: #ffffff !important;
  overflow: hidden !important;
}

#editorView [class*="bottom-spacer"],
#editorView [class*="page-spacer"],
#editorView [class*="timeline-filler"],
#editorView [class*="track-filler"],
#editorView [class*="footer"] {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
}

/* VMF patch: clean explicit timeline label text */
#editorView .editor-track-label,
#editorView .editor-timeline-category-label {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 52px !important;
  min-width: var(--vmf-reference-rail-width, 176px) !important;
  max-width: var(--vmf-reference-rail-width, 176px) !important;
  padding: 0 12px 0 16px !important;
  background: #ffffff !important;
  color: #2a2a2a !important;
  visibility: visible !important;
  opacity: 1 !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 3 !important;
  flex-shrink: 0 !important;
}

#editorView .editor-track-title {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2a2a2a !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* hide only old V1/A1 action junk */
#editorView .editor-track-label > span:not(.editor-track-category-icon):not(.editor-track-title),
#editorView .editor-track-label .editor-track-label-actions {
  display: none !important;
}

#editorView .editor-track-category-icon {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  display: grid !important;
  place-items: center !important;
  color: #2a2a2a !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}


/* VMF patch: normalized timeline labels */
#editorView .editor-timeline-stack,
#editorView .editor-empty-timeline-stack,
#editorView .vmf-real-empty-renderer-tracks {
  --vmf-track-rail-width: var(--vmf-reference-rail-width, 176px) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 10px 0 0 !important;
  background: #ffffff !important;
  overflow: visible !important;
}

#editorView .vmf-track-rail-row {
  display: grid !important;
  grid-template-columns: var(--vmf-reference-rail-width, 176px) minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: stretch !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  flex: 0 0 52px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

#editorView .vmf-track-rail-label {
  grid-column: 1 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  height: 52px !important;
  min-width: var(--vmf-reference-rail-width, 176px) !important;
  max-width: var(--vmf-reference-rail-width, 176px) !important;
  padding: 0 12px 0 16px !important;
  background: #ffffff !important;
  color: #2a2a2a !important;
  overflow: visible !important;
  flex-shrink: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

#editorView .vmf-track-rail-title {
  display: block !important;
  color: #2a2a2a !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

#editorView .vmf-track-rail-icon {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  color: #2a2a2a !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 18px 18px !important;
}

#editorView .vmf-track-rail-icon-text {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
}

#editorView .vmf-track-rail-icon-film {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4' y='4' width='12' height='12' rx='2' stroke='%232a2a2a' stroke-width='1.5'/%3E%3Cpath d='M7 4v12M13 4v12M4 8h3M4 12h3M13 8h3M13 12h3' stroke='%232a2a2a' stroke-width='1.2'/%3E%3C/svg%3E") !important;
}

#editorView .vmf-track-rail-icon-mic {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='3' width='6' height='10' rx='3' stroke='%232a2a2a' stroke-width='1.5'/%3E%3Cpath d='M5 9c0 3 2 5 5 5s5-2 5-5M10 14v3M7 17h6' stroke='%232a2a2a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

#editorView .vmf-track-rail-icon-music {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 4v9.5a2.5 2.5 0 1 1-1.5-2.3V6l5-1.2v2L13 7.6' stroke='%232a2a2a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

#editorView .vmf-track-rail-icon-speaker {
  background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8v4h3l4 3V5L7 8H4Z' stroke='%232a2a2a' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M14 8c.8 1 .8 3 0 4M16 6c1.7 2.2 1.7 5.8 0 8' stroke='%232a2a2a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

#editorView .vmf-track-rail-lane,
#editorView .vmf-track-rail-row > .editor-timeline-lane {
  grid-column: 2 !important;
  display: block !important;
  height: 52px !important;
  min-height: 52px !important;
  max-height: 52px !important;
  width: 100% !important;
  background: #f3f3f3 !important;
  border: 0 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#editorView .editor-ruler {
  display: grid !important;
  grid-template-columns: var(--vmf-reference-rail-width, 176px) minmax(0, 1fr) !important;
  column-gap: 12px !important;
}

#editorView .editor-ruler-gutter {
  grid-column: 1 !important;
}

#editorView .editor-ruler-scale {
  grid-column: 2 !important;
  position: relative !important;
}

#editorView .editor-waveform,
#editorView .editor-timeline-body {
  height: 340px !important;
  min-height: 340px !important;
  max-height: 340px !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#editorView .editor-waveform-scroll {
  height: 340px !important;
  min-height: 340px !important;
  max-height: 340px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: #ffffff !important;
}

#editorView .editor-waveform-canvas {
  height: auto !important;
  min-height: 340px !important;
  max-height: none !important;
  overflow: visible !important;
  background: #ffffff !important;
}

/* VMF patch: black editor preview empty state */

/* Only the small 9:16 preview box */
#editorView .editor-video-stage.is-blank {
  position: relative !important;
  background: #000000 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
}

/* Hide old empty-state text/graphics completely */
#editorView .editor-video-stage.is-blank #editorEmptyState {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;

  display: block !important;
  padding: 0 !important;
  margin: 0 !important;

  background: #000000 !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  color: transparent !important;
}

/* Remove all placeholder content */
#editorView .editor-video-stage.is-blank #editorEmptyState *,
#editorView .editor-video-stage.is-blank #editorEmptyState::before,
#editorView .editor-video-stage.is-blank #editorEmptyState::after {
  display: none !important;
  content: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Make canvas/video/image surface black when empty */
#editorView .editor-video-stage.is-blank canvas,
#editorView .editor-video-stage.is-blank video,
#editorView .editor-video-stage.is-blank img {
  background: #000000 !important;
  object-fit: contain !important;
  object-position: center center !important;
}


/* VMF patch: add track menu */
#editorView .vmf-add-track-host {
  position: relative !important;
}

#editorView .vmf-add-track-button {
  position: absolute !important;
  left: 14px !important;
  top: 8px !important;
  z-index: 80 !important;

  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;

  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111827 !important;

  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;

  cursor: pointer !important;
}

#editorView .vmf-add-track-button:hover {
  background: #f8fafc !important;
}

#editorView .vmf-add-track-plus {
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 300 !important;
  transform: translateY(-1px) !important;
}

.vmf-add-track-menu {
  position: fixed !important;
  z-index: 99999 !important;

  width: 180px !important;
  padding: 8px !important;

  display: none !important;
  flex-direction: column !important;
  gap: 4px !important;

  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, .16) !important;
}

.vmf-add-track-menu.is-open {
  display: flex !important;
}

.vmf-add-track-option {
  width: 100% !important;
  height: 42px !important;

  display: flex !important;
  align-items: center !important;
  gap: 12px !important;

  padding: 0 9px !important;
  border: 0 !important;
  border-radius: 9px !important;

  background: transparent !important;
  color: #374151 !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  text-align: left !important;
  cursor: pointer !important;
}

.vmf-add-track-option:hover {
  background: #f3f4f6 !important;
}

.vmf-add-track-option-icon {
  width: 28px !important;
  min-width: 28px !important;
  height: 28px !important;

  display: grid !important;
  place-items: center !important;

  border-radius: 7px !important;
  color: #ffffff !important;

  font-size: 14px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.vmf-add-track-option-icon.is-text {
  background: #2563eb !important;
}

.vmf-add-track-option-icon.is-image {
  background: #22c55e !important;
}

.vmf-add-track-option-icon.is-video {
  background: #7c3aed !important;
}

.vmf-add-track-option-icon.is-audio {
  background: #ef4444 !important;
}

.vmf-add-track-option-icon.is-empty {
  background: #6b7280 !important;
}

.vmf-hidden-track-file-input {
  display: none !important;
}

#editorView .editor-ruler,
#editorView .editor-ruler-scale,
#editorView .editor-waveform-canvas {
  overflow: visible !important;
}

#editorView .editor-ruler-scale {
  position: relative !important;
}

#editorView .editor-ruler-scale > .editor-playhead-marker,
#editorView .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker {
  position: absolute !important;
  left: var(--vmf-playhead-left, var(--editor-playhead-left, 0%)) !important;
  right: auto !important;
  top: 16px !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  min-height: 14px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: #111827 !important;
  border: 0 !important;
  border-radius: 3px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  transform: none !important;
  z-index: 999 !important;
}

#editorView .editor-ruler-scale > .editor-playhead-marker::after,
#editorView .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  transform: translateX(-50%) !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 6px solid #111827 !important;
}

#editorView .editor-timeline-lane > .editor-playhead,
#editorView .vmf-track-rail-lane > .editor-playhead,
#editorView .vmf-real-empty-track-lane > .editor-playhead {
  position: absolute !important;
  left: var(--vmf-playhead-left, var(--editor-playhead-left, 0%)) !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 1px !important;
  height: 100% !important;
  background: #111827 !important;
  transform: translateX(-50%) !important;
  z-index: 40 !important;
}


/* VMF patch: reference-style clean timeline */
#editorView .editor-waveform {
  --vmf-reference-rail-width: 176px;
  padding: 0 !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#editorView .editor-waveform-scroll {
  min-height: 0 !important;
  padding: 0 10px 12px 0 !important;
  background: #ffffff !important;
}

#editorView .editor-waveform-canvas {
  background: #ffffff !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

#editorView .editor-ruler {
  height: 42px !important;
  grid-template-columns: var(--vmf-reference-rail-width, 176px) minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: stretch !important;
  border-bottom: 1px solid #ededf0 !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-ruler {
  grid-template-columns: var(--vmf-reference-rail-width, 176px) minmax(0, 1fr) !important;
  gap: 12px !important;
}

#editorView .editor-ruler-gutter {
  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  min-width: var(--vmf-reference-rail-width) !important;
  border-right: 1px solid #d4d4d8 !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-ruler-gutter {
  display: flex !important;
  flex: 0 0 var(--vmf-reference-rail-width) !important;
  min-width: var(--vmf-reference-rail-width) !important;
}

#editorView .editor-ruler-gutter .vmf-add-track-button {
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  justify-content: flex-start !important;
  gap: 12px !important;
  padding: 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #18181b !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

#editorView .editor-ruler-gutter .vmf-add-track-button:hover {
  background: #fafafa !important;
}

#editorView .editor-ruler-gutter .vmf-add-track-plus {
  font-size: 20px !important;
  font-weight: 300 !important;
  transform: translateY(-1px) !important;
}

#editorView .editor-ruler-scale {
  height: 42px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-ruler-scale {
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
}

#editorView .editor-ruler-tick[style*="left:0%"],
#editorView .editor-ruler-tick[style*="left: 0%"] {
  transform: translateX(0) !important;
}

#editorView .editor-ruler-tick {
  top: 9px !important;
  color: #a1a1aa !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

#editorView .editor-ruler-tick::before {
  top: 16px !important;
  height: 18px !important;
  background: #e4e4e7 !important;
}

#editorView .editor-timeline-stack,
#editorView .editor-empty-timeline-stack,
#editorView .vmf-real-empty-renderer-tracks {
  --vmf-track-rail-width: var(--vmf-reference-rail-width) !important;
  gap: 8px !important;
  padding: 10px 0 0 !important;
  background: #ffffff !important;
}

#editorView .editor-track-row,
#editorView .vmf-track-rail-row,
#editorView .editor-empty-track-row {
  grid-template-columns: var(--vmf-reference-rail-width, 176px) minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: center !important;
  min-height: 48px !important;
  height: auto !important;
}

#editorView .editor-track-label,
#editorView .editor-timeline-category-label,
#editorView .vmf-track-rail-label {
  height: 48px !important;
  min-height: 48px !important;
  min-width: var(--vmf-reference-rail-width, 176px) !important;
  max-width: var(--vmf-reference-rail-width, 176px) !important;
  padding: 0 12px 0 16px !important;
  gap: 12px !important;
  border-right: 0 !important;
  background: #ffffff !important;
  color: #27272a !important;
  overflow: visible !important;
  position: relative !important;
  z-index: 3 !important;
  flex-shrink: 0 !important;
}

#editorView .editor-track-title,
#editorView .vmf-track-rail-title {
  color: #3f3f46 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#editorView .editor-track-label-actions {
  display: none !important;
}

#editorView .editor-track-category-icon,
#editorView .vmf-track-rail-icon {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  color: #27272a !important;
  background-size: 16px 16px !important;
}

#editorView .editor-timeline-lane,
#editorView .vmf-track-rail-lane,
#editorView .vmf-real-empty-track-lane {
  position: relative !important;
  grid-column: 2 !important;
  min-height: 48px !important;
  margin: 0 !important;
  border: 1px solid #ececf1 !important;
  border-radius: 12px !important;
  background: #f8f8fa !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

#editorView .editor-track-row-video .editor-timeline-lane,
#editorView .editor-track-row-audio .editor-timeline-lane,
#editorView .editor-track-row-music .editor-timeline-lane,
#editorView .editor-track-row-sfx .editor-timeline-lane,
#editorView .editor-track-row-captions .editor-timeline-lane {
  min-height: 48px !important;
}

/* VMF patch: single native timeline playhead styles */
#editorWaveform .editor-ruler-scale,
#editorWaveform .editor-timeline-lane,
#editorWaveform .vmf-real-empty-track-lane,
#editorWaveform .editor-track-lane {
  position: relative !important;
}

#editorWaveform .editor-playhead-marker[data-editor-playhead] {
  position: absolute !important;
  left: var(--editor-playhead-left, 0%) !important;
  right: auto !important;
  top: 50% !important;
  width: 14px !important;
  height: 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #111827 !important;
  box-shadow: 0 0 0 2px #ffffff, 0 3px 10px rgba(15, 23, 42, .24) !important;
  transform: translate(-50%, -50%) !important;
  z-index: 40 !important;
  display: block !important;
  opacity: 1 !important;
  cursor: ew-resize !important;
}

#editorWaveform .editor-playhead[data-editor-playhead],
#editorWaveform .editor-playhead {
  position: absolute !important;
  left: var(--editor-playhead-left, 0%) !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 2px !important;
  height: auto !important;
  background: #111827 !important;
  transform: translateX(-50%) !important;
  z-index: 30 !important;
  display: block !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

/* VMF patch: clean blank timeline rows */
#editorWaveform {
  background: #f8fafc !important;
}

#editorWaveform .editor-waveform-scroll {
  background: #f8fafc !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#editorWaveform .editor-waveform-canvas {
  min-width: 900px !important;
  background: #f8fafc !important;
}

#editorWaveform .editor-ruler {
  display: grid !important;
  grid-template-columns: 104px 1fr !important;
  height: 34px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

#editorWaveform .editor-ruler-gutter {
  width: 104px !important;
  min-width: 104px !important;
  border-right: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

#editorWaveform .editor-ruler-scale {
  height: 34px !important;
  background: #ffffff !important;
}

#editorWaveform .editor-ruler-tick {
  top: 9px !important;
  color: #9ca3af !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#editorWaveform .editor-empty-timeline-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  background: #f8fafc !important;
}

#editorWaveform .editor-empty-track-row {
  display: grid !important;
  grid-template-columns: 104px 1fr !important;
  min-height: 48px !important;
  height: 48px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #f8fafc !important;
}

#editorWaveform .editor-timeline-category-label {
  width: 104px !important;
  min-width: 104px !important;
  height: 48px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  border-right: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  color: #111827 !important;
}

#editorWaveform .editor-track-category-icon {
  width: 18px !important;
  min-width: 18px !important;
  height: 18px !important;
  display: grid !important;
  place-items: center !important;
  color: #111827 !important;
  opacity: .75 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#editorWaveform .editor-track-title {
  display: inline !important;
  overflow: visible !important;
  text-overflow: clip !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

#editorWaveform .editor-empty-track-row .editor-timeline-lane {
  min-height: 48px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  box-shadow: none !important;
}

#editorWaveform .editor-empty-track-row:nth-child(even) .editor-timeline-lane {
  background: #f3f4f6 !important;
}

#editorWaveform .editor-empty-track-row .editor-timeline-lane:hover {
  background: #eef2ff !important;
}

#editorWaveform .editor-playhead-marker[data-editor-playhead] {
  top: 17px !important;
}

/* VMF patch: cleaner timeline label rail */
#editorWaveform .editor-ruler,
#editorWaveform .editor-empty-track-row {
  grid-template-columns: 142px 1fr !important;
}

#editorWaveform .editor-ruler-gutter,
#editorWaveform .editor-timeline-category-label {
  width: 142px !important;
  min-width: 142px !important;
  max-width: 142px !important;
}

#editorWaveform .editor-empty-track-row {
  min-height: 44px !important;
  height: 44px !important;
}

#editorWaveform .editor-timeline-category-label {
  height: 44px !important;
  padding: 0 14px !important;
  gap: 10px !important;
}

#editorWaveform .editor-empty-track-row .editor-timeline-lane {
  min-height: 44px !important;
  height: 44px !important;
}

#editorWaveform .editor-track-title {
  display: block !important;
  width: auto !important;
  max-width: 96px !important;
  min-width: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  opacity: 1 !important;
}

#editorWaveform .editor-track-category-icon {
  width: 18px !important;
  min-width: 18px !important;
  flex: 0 0 18px !important;
}

#editorWaveform .editor-empty-track-row .editor-timeline-lane {
  margin-left: 0 !important;
}

#editorWaveform .editor-waveform-canvas {
  min-width: 1080px !important;
}

/* VMF patch: remove first-clip visual start gap */
#editorWaveform .editor-timeline-lane,
#editorWaveform .vmf-real-empty-track-lane,
#editorWaveform .editor-track-lane {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#editorWaveform .editor-selection-window {
  margin-left: 0 !important;
}

/* VMF patch: hide image-only audio waveform visuals */
#editorWaveform.vmf-image-only-no-audio .vmf-force-empty-audio-row .editor-timeline-lane > *:not([data-editor-playhead]):not(.editor-playhead),
#editorView.vmf-image-only-no-audio #editorWaveform .vmf-force-empty-audio-row .editor-timeline-lane > *:not([data-editor-playhead]):not(.editor-playhead) {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* VMF patch: restored text panel UI */
#vmfRestoredTextPanel {
  padding: 14px 16px 24px !important;
  color: #111827 !important;
  font-family: "SF Pro Display", Arial, sans-serif !important;
}

#vmfRestoredTextPanel .vmf-text-section {
  border-bottom: 1px solid #e5e7eb !important;
  padding: 14px 0 !important;
}

#vmfRestoredTextPanel .vmf-text-section:first-child {
  padding-top: 0 !important;
}

#vmfRestoredTextPanel .vmf-text-section:last-child {
  border-bottom: 0 !important;
}

#vmfRestoredTextPanel .vmf-text-box-label,
#vmfRestoredTextPanel .vmf-text-heading,
#vmfRestoredTextPanel .vmf-text-control > span {
  display: block !important;
  margin-bottom: 8px !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#vmfRestoredTextPanel .vmf-textarea {
  width: 100% !important;
  min-height: 74px !important;
  resize: vertical !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #111827 !important;
  padding: 12px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  outline: none !important;
}

#vmfRestoredTextPanel .vmf-text-grid.two {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 12px !important;
}

#vmfRestoredTextPanel select,
#vmfRestoredTextPanel input[type="number"],
#vmfRestoredTextPanel input[type="color"] {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  color: #111827 !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#vmfRestoredTextPanel input[type="range"] {
  width: 100% !important;
  accent-color: #111827 !important;
}

#vmfRestoredTextPanel .vmf-template-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#vmfRestoredTextPanel .vmf-template-card {
  min-height: 44px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 10px !important;
  background: #2d3137 !important;
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  line-height: .9 !important;
  text-align: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .14) !important;
}

#vmfRestoredTextPanel .vmf-template-card:hover {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 2px rgba(249, 115, 22, .35) !important;
}

#vmfRestoredTextPanel .vmf-template-orange {
  border-color: #fb923c !important;
}

#vmfRestoredTextPanel .vmf-template-yellow {
  color: #fde047 !important;
  text-shadow: 2px 2px 0 #111827, 0 4px 10px rgba(0,0,0,.4) !important;
}

#vmfRestoredTextPanel .vmf-template-italic {
  font-style: italic !important;
  transform: skew(-8deg) !important;
}

#vmfRestoredTextPanel .vmf-template-blue {
  text-shadow: 2px 2px 0 #2563eb, 0 6px 14px rgba(0,0,0,.4) !important;
}

#vmfRestoredTextPanel .vmf-template-white {
  background: #ffffff !important;
  color: #111827 !important;
}

#vmfRestoredTextPanel .vmf-segmented {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f9fafb !important;
}

#vmfRestoredTextPanel .vmf-segmented button {
  height: 38px !important;
  border: 0 !important;
  background: transparent !important;
  color: #374151 !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#vmfRestoredTextPanel .vmf-segmented button.active {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px #e5e7eb !important;
}

#vmfRestoredTextPanel .vmf-shadow-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* VMF patch: continuous playhead stem */
#editorWaveform .editor-waveform-canvas,
#editorWaveform .editor-waveform-scroll,
#editorWaveform {
  position: relative !important;
}

#editorWaveform .vmf-playhead-track-overlay {
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  pointer-events: none !important;
  z-index: 45 !important;
}

#editorView .editor-track-label,
#editorView .editor-timeline-category-label {
  overflow: visible !important;
  min-width: var(--vmf-reference-rail-width, 176px) !important;
  max-width: var(--vmf-reference-rail-width, 176px) !important;
  flex-shrink: 0 !important;
}

#editorView .editor-track-title {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

#editorWaveform .vmf-continuous-playhead-stem {
  position: absolute !important;
  top: 17px !important;
  bottom: 0 !important;
  width: 2px !important;
  height: auto !important;
  background: #111827 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 45 !important;
  display: block !important;
  opacity: 1 !important;
}

#editorWaveform .editor-playhead-marker[data-editor-playhead],
#editorWaveform .editor-playhead-marker {
  transform: none !important;
  z-index: 70 !important;
  top: 17px !important;
}

#editorView .editor-ruler-scale > .editor-playhead-marker,
#editorView .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker {
  transform: none !important;
}

/* Hide broken per-row playhead segments so only the single stem shows. */
#editorWaveform .editor-timeline-lane > .editor-playhead,
#editorWaveform .vmf-real-empty-track-lane > .editor-playhead,
#editorWaveform .editor-track-lane > .editor-playhead {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#editorWaveform .editor-playhead-marker[data-editor-playhead],
#editorWaveform .editor-playhead-marker {
  z-index: 60 !important;
}

/* VMF patch: connect playhead marker to stem */
#editorWaveform .vmf-continuous-playhead-stem {
  top: 17px !important;
  z-index: 45 !important;
}

/* Keep the stem visually tucked under the marker head */
#editorWaveform .editor-ruler-scale {
  overflow: visible !important;
}

/* VMF patch: audio layer upgrade UI */
#editorWaveform .vmf-audio-layer-clip,
#editorWaveform [data-vmf-audio-layer="true"] {
  min-height: 34px !important;
  border: 2px solid #4f8cff !important;
  border-radius: 9px !important;
  background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 1px 3px rgba(15,23,42,.14) !important;
  overflow: hidden !important;
  position: relative !important;
}

#editorWaveform .vmf-audio-layer-name {
  position: absolute !important;
  left: 10px !important;
  top: 5px !important;
  z-index: 6 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  pointer-events: none !important;
}

#editorWaveform .vmf-audio-layer-clip canvas,
#editorWaveform .vmf-audio-layer-clip svg {
  opacity: .88 !important;
}

#vmfAudioEffectsPanel {
  padding: 14px 16px 18px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

#vmfAudioEffectsPanel .vmf-audio-effects-head {
  margin-bottom: 14px !important;
}

#vmfAudioEffectsPanel .vmf-audio-kicker {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .1em !important;
}

#vmfAudioEffectsPanel h3 {
  margin: 3px 0 4px !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.05 !important;
}

#vmfAudioEffectsPanel p {
  margin: 0 !important;
  color: #6b7280 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

#vmfAudioEffectsPanel .vmf-audio-control {
  margin: 14px 0 !important;
}

#vmfAudioEffectsPanel .vmf-audio-control label {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 8px !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
}

#vmfAudioEffectsPanel input[type="range"] {
  width: 100% !important;
  accent-color: #111827 !important;
}

#vmfAudioEffectsPanel .vmf-audio-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin: 14px 0 !important;
}

#vmfAudioEffectsPanel .vmf-audio-grid label span {
  display: block !important;
  margin-bottom: 6px !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#vmfAudioEffectsPanel input[type="number"] {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  padding: 0 10px !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

#vmfAudioEffectsPanel .vmf-audio-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 14px !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* VMF patch: selectable audio layer boxes */
#editorWaveform .vmf-audio-layer-hitbox {
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  min-width: 40px !important;
  border: 2px solid #4f8cff !important;
  border-radius: 9px !important;
  background: rgba(254, 202, 202, .78) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.58), 0 1px 3px rgba(15,23,42,.14) !important;
  z-index: 38 !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-align: left !important;
  padding: 0 10px !important;
}

#editorWaveform .vmf-audio-layer-hitbox:hover,
#editorWaveform .vmf-audio-layer-hitbox.is-selected {
  border-color: #2563eb !important;
  background: rgba(254, 202, 202, .9) !important;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .18), inset 0 0 0 1px rgba(255,255,255,.7) !important;
}

#editorWaveform .vmf-audio-layer-hitbox-name {
  position: absolute !important;
  left: 10px !important;
  top: 4px !important;
  max-width: calc(100% - 20px) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  pointer-events: none !important;
}

/* VMF patch: stable audio effects panel */
#editorView.vmf-audio-effects-stable-mode #vmfAudioEffectsPanel {
  display: block !important;
  position: relative !important;
  z-index: 20 !important;
}

/* Hide the default visual/video effect body while audio panel is active. */
#editorView.vmf-audio-effects-stable-mode #vmfAudioEffectsPanel ~ .editor-effects-panel,
#editorView.vmf-audio-effects-stable-mode #vmfAudioEffectsPanel ~ [data-editor-effects-panel],
#editorView.vmf-audio-effects-stable-mode #vmfAudioEffectsPanel ~ .editor-video-effects,
#editorView.vmf-audio-effects-stable-mode #vmfAudioEffectsPanel ~ .editor-layer-effects {
  display: none !important;
}

/* VMF patch: audio sidebar takeover */
#vmfAudioSidebarTakeover {
  display: block !important;
  padding: 18px 18px 24px !important;
  color: #111827 !important;
  background: #ffffff !important;
  min-height: 100% !important;
}

#vmfAudioSidebarTakeover .vmf-audio-panel-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 10px !important;
  align-items: start !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#vmfAudioSidebarTakeover .vmf-audio-kicker {
  grid-column: 1 / -1 !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

#vmfAudioSidebarTakeover h2 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

#vmfCloseAudioPanel {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  color: #111827 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#vmfAudioSidebarTakeover .vmf-audio-panel-section {
  padding: 16px 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#vmfAudioSidebarTakeover .vmf-audio-panel-section label {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
}

#vmfAudioSidebarTakeover input[type="range"] {
  width: 100% !important;
  accent-color: #111827 !important;
}

#vmfAudioSidebarTakeover .vmf-audio-panel-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#vmfAudioSidebarTakeover .vmf-audio-panel-grid span {
  display: block !important;
  margin-bottom: 7px !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#vmfAudioSidebarTakeover input[type="number"] {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  color: #111827 !important;
  padding: 0 10px !important;
  font-weight: 800 !important;
}

#vmfAudioSidebarTakeover .vmf-audio-panel-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding-top: 16px !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
}

/* VMF patch: stable audio mini layer UI */
#editorWaveform .vmf-audio-mini-box {
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  min-width: 44px !important;
  border: 2px solid #2563eb !important;
  border-radius: 9px !important;
  background: rgba(254, 202, 202, .82) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.65), 0 1px 3px rgba(15,23,42,.16) !important;
  z-index: 42 !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-align: left !important;
  padding: 0 10px !important;
}

#editorWaveform .vmf-audio-mini-box.is-selected {
  background: rgba(254, 202, 202, .95) !important;
  box-shadow: 0 0 0 2px rgba(37,99,235,.2), inset 0 0 0 1px rgba(255,255,255,.75) !important;
}

#editorWaveform .vmf-audio-mini-box span {
  position: absolute !important;
  left: 10px !important;
  top: 5px !important;
  max-width: calc(100% - 20px) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  pointer-events: none !important;
}

#vmfAudioMiniPanel {
  padding: 18px !important;
  background: #fff !important;
  color: #111827 !important;
  min-height: 100% !important;
}

#vmfAudioMiniPanel .vmf-audio-mini-head {
  display: grid !important;
  grid-template-columns: 1fr auto !important;
  gap: 8px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#vmfAudioMiniPanel .vmf-audio-mini-head div {
  grid-column: 1 / -1 !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
}

#vmfAudioMiniPanel h2 {
  margin: 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

#vmfAudioMiniClose {
  width: 30px !important;
  height: 30px !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

#vmfAudioMiniPanel .vmf-audio-mini-control {
  display: block !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#vmfAudioMiniPanel .vmf-audio-mini-control span {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#vmfAudioMiniPanel input[type="range"] {
  width: 100% !important;
  accent-color: #111827 !important;
}

#vmfAudioMiniPanel .vmf-audio-mini-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#vmfAudioMiniPanel .vmf-audio-mini-grid span {
  display: block !important;
  margin-bottom: 7px !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#vmfAudioMiniPanel input[type="number"] {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  color: #111827 !important;
  padding: 0 10px !important;
  font-weight: 800 !important;
}

#vmfAudioMiniPanel .vmf-audio-mini-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding-top: 16px !important;
  font-weight: 800 !important;
}

/* VMF patch: clean audio-aware sidebar */
#editorWaveform .vmf-audio-panel-layer-box {
  position: absolute !important;
  top: 6px !important;
  bottom: 6px !important;
  min-width: 44px !important;
  border: 2px solid #2563eb !important;
  border-radius: 9px !important;
  background: rgba(254, 202, 202, .9) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.72), 0 1px 3px rgba(15,23,42,.16) !important;
  z-index: 44 !important;
  cursor: pointer !important;
  overflow: hidden !important;
  text-align: left !important;
  padding: 0 10px !important;
}

#editorWaveform .vmf-audio-panel-layer-box.is-selected {
  box-shadow: 0 0 0 2px rgba(37,99,235,.22), inset 0 0 0 1px rgba(255,255,255,.85) !important;
}

#editorWaveform .vmf-audio-panel-layer-box span {
  position: absolute !important;
  left: 10px !important;
  top: 5px !important;
  max-width: calc(100% - 20px) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  pointer-events: none !important;
}

#vmfAudioPanel {
  padding: 18px !important;
  background: #ffffff !important;
  color: #111827 !important;
  min-height: 100% !important;
}

#vmfAudioPanel .vmf-audio-panel-head {
  padding-bottom: 16px !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#vmfAudioPanel .vmf-audio-panel-kicker {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

#vmfAudioPanel h2 {
  margin: 4px 0 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

#vmfAudioPanel .vmf-audio-panel-control {
  display: block !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#vmfAudioPanel .vmf-audio-panel-control span {
  display: flex !important;
  justify-content: space-between !important;
  margin-bottom: 10px !important;
  color: #374151 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#vmfAudioPanel input[type="range"] {
  width: 100% !important;
  accent-color: #111827 !important;
}

#vmfAudioPanel .vmf-audio-panel-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
}

#vmfAudioPanel .vmf-audio-panel-grid span {
  display: block !important;
  margin-bottom: 7px !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

#vmfAudioPanel input[type="number"] {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #f9fafb !important;
  color: #111827 !important;
  padding: 0 10px !important;
  font-weight: 800 !important;
}

#vmfAudioPanel .vmf-audio-panel-toggle {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  padding-top: 16px !important;
  font-weight: 800 !important;
}

/* VMF patch: audio caption button */
#vmfAudioPanel .vmf-audio-caption-action,
#vmfAudioMiniPanel .vmf-audio-caption-action {
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e5e7eb !important;
}

#vmfAudioPanel #vmfAudioGenerateCaptionsButton,
#vmfAudioMiniPanel #vmfAudioGenerateCaptionsButton {
  width: 100% !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #2f7df6 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

#vmfAudioPanel #vmfAudioGenerateCaptionsButton:hover,
#vmfAudioMiniPanel #vmfAudioGenerateCaptionsButton:hover {
  filter: brightness(.96) !important;
}

#vmfAudioPanel .vmf-audio-caption-status,
#vmfAudioMiniPanel .vmf-audio-caption-status {
  min-height: 18px !important;
  margin-top: 8px !important;
  color: #6b7280 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

/* VMF patch: nuke text tab */
[data-editor-tool="text"],
[data-editor-tab="text"],
[data-sidebar-tab="text"],
.editor-tool-button[data-editor-tool="text"],
.editor-sidebar-tab[data-editor-tab="text"],
button[aria-controls*="text" i],
button[title="Text"],

/* VMF patch: row and caption fixes */
.editor-timeline-stack,
.editor-timeline-tracks,
[data-editor-real-empty-tracks] {
  display: flex !important;
  flex-direction: column !important;
}

.editor-track-row-captions,
.editor-empty-track-row[data-editor-empty-track-kind="captions"] {
  order: -1000 !important;
  z-index: 30 !important;
}

.editor-track-row-video {
  order: 0 !important;
}

.editor-track-row-overlay {
  order: 10 !important;
}

.editor-track-row-audio {
  order: 50 !important;
}

.editor-track-row-music {
  order: 60 !important;
}

.editor-track-row-sfx {
  order: 70 !important;
}

/* VMF patch: caption default style */
.editor-text-overlay,
.editor-caption-overlay,
.editor-preview-caption,
[data-editor-caption],
[data-caption-preview],
.vmf-caption-preview {
  font-family: "Bebas Neue", Impact, Arial Black, sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  line-height: .92;
  color: #ffffff;
  -webkit-text-stroke: var(--editor-text-stroke, 2px) var(--editor-text-stroke-color, #111827);
  text-shadow:
    0 2px 0 #111827,
    0 4px 8px rgba(0,0,0,.65);
  text-align: center;
  max-width: 86%;
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}

.editor-caption-label,
.editor-selection-window-caption,
.editor-caption-window {
  font-family: "Bebas Neue", Impact, Arial Black, sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}

/* VMF patch: auto track router */
.editor-timeline-stack,
.editor-timeline-tracks,
[data-editor-real-empty-tracks] {
  display: flex !important;
  flex-direction: column !important;
}

.editor-track-row-captions,
.editor-empty-track-row[data-editor-empty-track-kind="captions"] {
  order: 0 !important;
}

.editor-track-row-video,
.editor-empty-track-row[data-editor-empty-track-kind="video"] {
  order: 10 !important;
}

.editor-track-row-audio,
.editor-empty-track-row[data-editor-empty-track-kind="audio"],
.editor-empty-track-row[data-editor-empty-track-kind="voice"] {
  order: 20 !important;
}

.vmf-placeholder-lane-row {
  order: 30 !important;
}

.editor-track-row-music,
.editor-track-row-sfx,
.editor-empty-track-row[data-editor-empty-track-kind="music"],
.editor-empty-track-row[data-editor-empty-track-kind="sfx"] {
  order: 40 !important;
}

/* VMF patch: stable text tab */

#vmfStableTextTabPanel {
  height: 100% !important;
  overflow: auto !important;
  padding: 14px 16px 18px !important;
  background: #ffffff !important;
  color: #111827 !important;
}

#vmfStableTextTabPanel .vmf-text-head {
  padding-bottom: 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
  margin-bottom: 12px !important;
}

#vmfStableTextTabPanel .vmf-text-head div,
#vmfStableTextTabPanel .vmf-text-section-title,
#vmfStableTextTabPanel label span {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#vmfStableTextTabPanel h2 {
  margin: 3px 0 0 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #111827 !important;
}

#vmfStableTextTabPanel .vmf-text-empty {
  border: 1px dashed #d1d5db !important;
  border-radius: 14px !important;
  padding: 18px !important;
  color: #6b7280 !important;
  font-weight: 800 !important;
  background: #f9fafb !important;
}

#vmfStableTextTabPanel textarea {
  width: 100% !important;
  min-height: 88px !important;
  resize: vertical !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #111827 !important;
  padding: 12px !important;
  font-weight: 800 !important;
}

#vmfStableTextTabPanel select,
#vmfStableTextTabPanel input[type="color"],
#vmfStableTextTabPanel input[type="number"] {
  width: 100% !important;
  height: 38px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #111827 !important;
  padding: 0 10px !important;
  font-weight: 800 !important;
}

#vmfStableTextTabPanel input[type="range"] {
  width: 100% !important;
  accent-color: #111827 !important;
}

#vmfStableTextTabPanel .vmf-text-field,
#vmfStableTextTabPanel .vmf-text-section {
  display: block !important;
  margin: 12px 0 !important;
}

#vmfStableTextTabPanel .vmf-text-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 10px 0 !important;
}

#vmfStableTextTabPanel .vmf-text-template-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin: 8px 0 14px !important;
}

#vmfStableTextTabPanel .vmf-text-template {
  min-height: 48px !important;
  border: 1px solid #374151 !important;
  border-radius: 9px !important;
  background: #20242c !important;
  color: #ffffff !important;
  font-family: "Bebas Neue", Impact, Arial Black, sans-serif !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.16) !important;
}

#vmfStableTextTabPanel .vmf-text-template span {
  display: block !important;
  line-height: .88 !important;
  text-transform: uppercase !important;
  text-align: center !important;
  text-shadow: 0 2px 0 #111827, 0 4px 6px rgba(0,0,0,.45) !important;
  -webkit-text-stroke: 1px #111827 !important;
}

#vmfStableTextTabPanel .vmf-tpl-yellow span {
  color: #ffe600 !important;
}

#vmfStableTextTabPanel .vmf-tpl-white span,
#vmfStableTextTabPanel .vmf-tpl-small span,
#vmfStableTextTabPanel .vmf-tpl-blue span {
  color: #ffffff !important;
}

#vmfStableTextTabPanel .vmf-tpl-light {
  background: #ffffff !important;
}

#vmfStableTextTabPanel .vmf-tpl-light span {
  color: #111827 !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}

#vmfStableTextTabPanel .vmf-tpl-blue span {
  -webkit-text-stroke: 1px #2563eb !important;
}

#vmfStableTextTabPanel .vmf-text-align-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  margin: 8px 0 14px !important;
}

#vmfStableTextTabPanel .vmf-text-align-row button {
  height: 40px !important;
  border: 0 !important;
  background: #ffffff !important;
  font-weight: 900 !important;
  cursor: pointer !important;
}

#vmfStableTextTabPanel .vmf-text-align-row button.active {
  background: #f3f4f6 !important;
}

#vmfStableTextTabPanel .vmf-text-check {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 8px 0 !important;
}

#vmfApplyTextToAll {
  width: 100% !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fb5b20 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  margin-top: 14px !important;
}

/* Sidebarless editor layout */
#editorView.vmf-sidebarless .editor-shell {
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) minmax(360px, 43vh) !important;
  grid-template-areas:
    "inspector main"
    "inspector timeline" !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

#editorView.vmf-sidebarless .editor-tool-rail,
#editorView.vmf-sidebarless .editor-sidebar {
  display: none !important;
}

#editorView.vmf-sidebarless .editor-shell > .editor-main {
  grid-area: main !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

#editorView.vmf-sidebarless .editor-shell > .editor-timeline-card {
  grid-area: timeline !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
}

#editorView.vmf-sidebarless .editor-shell > .editor-right-inspector,
#editorView.vmf-sidebarless #editorInspector.editor-right-inspector {
  grid-area: inspector !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  min-width: 0 !important;
  width: 360px !important;
  max-width: 360px !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-left: 0 !important;
  border-right: 1px solid #e5e7eb !important;
  justify-self: start !important;
  align-self: stretch !important;
  order: 3 !important;
}

#editorView.vmf-sidebarless .editor-right-inspector-head {
  padding: 18px 18px 14px !important;
  border-bottom: 1px solid #eef2f7 !important;
}

#editorView.vmf-sidebarless .editor-right-inspector-head h3 {
  margin: 4px 0 0 !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
}

#editorView.vmf-sidebarless .editor-right-inspector-body {
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 14px 12px 24px !important;
}

#editorView.vmf-sidebarless .editor-right-inspector-body::-webkit-scrollbar {
  width: 10px !important;
}

#editorView.vmf-sidebarless .editor-right-inspector-body::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.45) !important;
  border-radius: 999px !important;
}

#editorView.vmf-sidebarless .editor-inspector-empty-state {
  display: grid !important;
  place-items: center !important;
  min-height: 220px !important;
  padding: 24px !important;
  border: 1px dashed #d6deeb !important;
  border-radius: 18px !important;
  color: #64748b !important;
  text-align: center !important;
  font-weight: 700 !important;
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

#editorView.vmf-sidebarless .editor-inspector-empty-state strong {
  display: block !important;
  margin-bottom: 8px !important;
  color: #274472 !important;
  font-size: 18px !important;
  line-height: 1.15 !important;
}

#editorView.vmf-sidebarless .editor-inspector-empty-state p {
  margin: 0 !important;
  max-width: 240px !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
}

#editorView.vmf-sidebarless .editor-inspector-accordion {
  display: grid !important;
  gap: 10px !important;
}

#editorView.vmf-sidebarless .editor-inspector-section {
  border: 1px solid #e6ebf2 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

#editorView.vmf-sidebarless .editor-inspector-section > summary {
  list-style: none !important;
  cursor: pointer !important;
  padding: 10px 14px !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  color: #64748b !important;
  border-bottom: 1px solid #eef2f7 !important;
}

#editorView.vmf-sidebarless .editor-inspector-section > summary::-webkit-details-marker {
  display: none !important;
}

#editorView.vmf-sidebarless .editor-inspector-section-body {
  padding: 10px 14px 14px !important;
  display: grid !important;
  gap: 12px !important;
}

#editorView.vmf-sidebarless .editor-inspector-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#editorView.vmf-sidebarless .editor-inspector-grid.one {
  grid-template-columns: minmax(0, 1fr) !important;
}

#editorView.vmf-sidebarless .editor-inspector-field {
  display: grid !important;
  gap: 6px !important;
}

#editorView.vmf-sidebarless .editor-inspector-field span {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#editorView.vmf-sidebarless .editor-inspector-field input,
#editorView.vmf-sidebarless .editor-inspector-field select,
#editorView.vmf-sidebarless .editor-inspector-field textarea {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid #d6deeb !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
  color: #0f172a !important;
  padding: 9px 10px !important;
  font-size: 13px !important;
}

#editorView.vmf-sidebarless .editor-inspector-field textarea {
  min-height: 88px !important;
  resize: vertical !important;
}

#editorView.vmf-sidebarless .editor-inspector-field input[type="color"] {
  padding: 0 !important;
  height: 34px !important;
  width: 42px !important;
  border: 0 !important;
  background: transparent !important;
}

#editorView.vmf-sidebarless .editor-inspector-field input:disabled,
#editorView.vmf-sidebarless .editor-inspector-field select:disabled,
#editorView.vmf-sidebarless .editor-inspector-field textarea:disabled {
  opacity: 0.55 !important;
  cursor: not-allowed !important;
}

#editorView.vmf-sidebarless .editor-inspector-inline-note {
  margin: 0 !important;
  color: #64748b !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

#editorView.vmf-sidebarless .editor-inspector-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 30px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  background: #eef4ff !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#editorView.vmf-sidebarless .editor-inspector-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset {
  min-height: 66px !important;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: #1f2430 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.05 !important;
  text-align: center !important;
  padding: 10px 8px !important;
  cursor: pointer !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.12) !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset.is-active {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.16), 0 8px 22px rgba(15, 23, 42, 0.12) !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset.is-viral {
  color: #f5c518 !important;
  font-style: italic !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset.is-arial {
  font-size: 12px !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset.is-burbank {
  color: #fedf0b !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset.is-komika {
  font-size: 10px !important;
  letter-spacing: 0.06em !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset.is-tiktok {
  font-weight: 900 !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset.is-whitebox {
  background: #ffffff !important;
  color: #111827 !important;
  border-color: #d1d5db !important;
}

#editorView.vmf-sidebarless .editor-inspector-preset.is-coolvetica {
  font-size: 10px !important;
}

#editorView.vmf-sidebarless .editor-inspector-align-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  overflow: hidden !important;
  border: 1px solid #d6deeb !important;
  border-radius: 11px !important;
  background: #f8fafc !important;
}

#editorView.vmf-sidebarless .editor-inspector-align-button {
  border: 0 !important;
  border-right: 1px solid #e5e7eb !important;
  background: transparent !important;
  color: #64748b !important;
  min-height: 38px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
}

#editorView.vmf-sidebarless .editor-inspector-align-button:last-child {
  border-right: 0 !important;
}

#editorView.vmf-sidebarless .editor-inspector-align-button.is-active {
  background: #ffffff !important;
  color: #2563eb !important;
}

#editorView.vmf-sidebarless .editor-inspector-field-slider {
  gap: 4px !important;
}

#editorView.vmf-sidebarless .editor-inspector-slider-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 64px auto !important;
  align-items: center !important;
  gap: 8px !important;
}

#editorView.vmf-sidebarless .editor-inspector-slider-row input[type="range"] {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  accent-color: #3b6dd6 !important;
}

#editorView.vmf-sidebarless .editor-inspector-slider-value {
  text-align: center !important;
  font-weight: 700 !important;
}

#editorView.vmf-sidebarless .editor-inspector-slider-suffix {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #64748b !important;
  min-width: 12px !important;
}

#editorView.vmf-sidebarless .editor-inspector-color-control {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border: 1px solid #d6deeb !important;
  border-radius: 10px !important;
  background: #f8fafc !important;
}

#editorView.vmf-sidebarless .editor-inspector-color-control code {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  background: transparent !important;
}

#editorView.vmf-sidebarless .editor-inspector-switch {
  position: relative !important;
  width: 38px !important;
  height: 22px !important;
}

#editorView.vmf-sidebarless .editor-inspector-switch input {
  position: absolute !important;
  inset: 0 !important;
  opacity: 0 !important;
  cursor: pointer !important;
}

#editorView.vmf-sidebarless .editor-inspector-switch-track {
  position: absolute !important;
  inset: 0 !important;
  background: #d1d5db !important;
  border-radius: 999px !important;
  transition: background 0.18s ease !important;
}

#editorView.vmf-sidebarless .editor-inspector-switch-track::before {
  content: "" !important;
  position: absolute !important;
  top: 2px !important;
  left: 2px !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  transition: transform 0.18s ease !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.18) !important;
}

#editorView.vmf-sidebarless .editor-inspector-switch input:checked + .editor-inspector-switch-track {
  background: #3b6dd6 !important;
}

#editorView.vmf-sidebarless .editor-inspector-switch input:checked + .editor-inspector-switch-track::before {
  transform: translateX(16px) !important;
}

#editorView.vmf-sidebarless .editor-inspector-apply-button {
  width: 100% !important;
  min-height: 48px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #ff7a2f 0%, #f55a1f 100%) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 12px 28px rgba(245, 90, 31, 0.22) !important;
}

.editor-track-text-fill {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(59, 109, 214, 0.18) 0%, rgba(59, 109, 214, 0.08) 100%);
}

.editor-track-text-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 16px);
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.9);
  color: #ffffff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-selection-window-text-clip .editor-selection-fill-overlay {
  background: linear-gradient(180deg, rgba(59, 109, 214, 0.18) 0%, rgba(59, 109, 214, 0.08) 100%);
}

.editor-timeline-lane-captions .editor-selection-window-overlay.editor-selection-window-text-clip {
  z-index: 5;
  top: 8px;
  bottom: 8px;
}

.editor-timeline-lane-captions .editor-selection-window-overlay.editor-selection-window-text-clip .editor-selection-fill-overlay {
  border: 1px solid rgba(59, 109, 214, 0.42);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(59, 109, 214, 0.26) 0%, rgba(59, 109, 214, 0.12) 100%);
  box-shadow: 0 4px 12px rgba(59, 109, 214, 0.18);
}

.editor-timeline-lane-captions .editor-selection-window-overlay.editor-selection-window-text-clip.active {
  z-index: 7;
}

#editorView.vmf-sidebarless .editor-main {
  min-width: 0 !important;
}

#editorView.vmf-sidebarless .editor-main-header {
  padding-left: 24px !important;
}

#editorView.vmf-sidebarless .editor-title-block {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

#editorView.vmf-sidebarless .editor-main-back-button {
  width: 52px !important;
  height: 52px !important;
  border: 1px solid #d6dce8 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  color: #1f3b6d !important;
  font-size: 24px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06) !important;
}

@media (max-width: 1280px) {
  #editorView.vmf-sidebarless .editor-shell {
    grid-template-columns: 332px minmax(0, 1fr) !important;
  }

  #editorView.vmf-sidebarless .editor-right-inspector {
    width: 332px !important;
    max-width: 332px !important;
  }
}

/* Force the right-inspector layout even when older editor layout classes are present */
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2 .editor-shell,
#editorView.vmf-sidebarless.vmf-premiere-effects-mode .editor-shell,
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
  display: grid !important;
  grid-template-columns: 360px minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) minmax(360px, 43vh) !important;
  grid-template-areas:
    "inspector main"
    "inspector timeline" !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2 .editor-shell > .editor-main,
#editorView.vmf-sidebarless.vmf-premiere-effects-mode .editor-shell > .editor-main,
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell > .editor-main {
  grid-area: main !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  width: auto !important;
  max-width: none !important;
}

#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2 .editor-shell > .editor-timeline-card,
#editorView.vmf-sidebarless.vmf-premiere-effects-mode .editor-shell > .editor-timeline-card,
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell > .editor-timeline-card {
  grid-area: timeline !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  width: auto !important;
  max-width: none !important;
}

#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2 .editor-shell > .editor-right-inspector,
#editorView.vmf-sidebarless.vmf-premiere-effects-mode .editor-shell > .editor-right-inspector,
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell > .editor-right-inspector,
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2 #editorInspector.editor-right-inspector,
#editorView.vmf-sidebarless.vmf-premiere-effects-mode #editorInspector.editor-right-inspector,
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode #editorInspector.editor-right-inspector {
  grid-area: inspector !important;
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  justify-self: start !important;
  align-self: stretch !important;
  order: 3 !important;
}

#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2 .editor-tool-rail,
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2 .editor-sidebar,
#editorView.vmf-sidebarless.vmf-premiere-effects-mode .editor-tool-rail,
#editorView.vmf-sidebarless.vmf-premiere-effects-mode .editor-sidebar,
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-tool-rail,
#editorView.vmf-sidebarless.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-sidebar {
  display: none !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* VMF patch: reference editor layout match */
body.editor-mode {
  background: #f6f7fb !important;
}

body.editor-mode #appHeader,
body.editor-mode .app-sidebar {
  display: none !important;
}

body.editor-mode #appShell,
body.editor-mode .app-content {
  width: 100vw !important;
  height: 100vh !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f6f7fb !important;
}

body.editor-mode #editorView,
#editorView.vmf-clean-editor-layout-v2 {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  background: #f6f7fb !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-shell {
  width: 100vw !important;
  height: 100vh !important;
  display: grid !important;
  grid-template-columns: 68px clamp(620px, 38vw, 705px) minmax(0, 1fr) !important;
  grid-template-rows: clamp(520px, 62vh, 565px) minmax(260px, 1fr) !important;
  grid-template-areas:
    "rail sidebar main"
    "timeline timeline timeline" !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #f6f7fb !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-rail {
  grid-area: rail !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 100vh !important;
  padding: 10px 8px !important;
  background: #ffffff !important;
  border-right: 1px solid #dde3ec !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-back-button {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid #e1e7f0 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 22px !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .04) !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-divider {
  width: 100% !important;
  height: 1px !important;
  margin: 14px 0 !important;
  background: #e8edf4 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack {
  gap: 14px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button {
  width: 52px !important;
  min-height: 58px !important;
  margin: 0 auto !important;
  padding: 7px 2px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #111827 !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button.active,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[aria-selected="true"] {
  background: #eef5ff !important;
  color: #2563ff !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-icon {
  width: 24px !important;
  height: 24px !important;
  margin-bottom: 5px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button span:last-child {
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-sidebar {
  grid-area: sidebar !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 100% !important;
  padding: 0 24px 28px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background: #ffffff !important;
  border-right: 1px solid #dde3ec !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-sidebar-head {
  min-height: 30px !important;
  padding: 10px 0 8px !important;
  border: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-sidebar-head h3,
#editorView.vmf-clean-editor-layout-v2 .editor-text-panel-head h3 {
  margin: 0 !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

#editorView.vmf-clean-editor-layout-v2 .panel-kicker,
#editorView.vmf-clean-editor-layout-v2 .editor-effects-card-label {
  margin: 0 0 12px !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-sidebar-panel {
  padding: 0 !important;
  border: 0 !important;
  background: #ffffff !important;
}

/* The track rail is navigation, not timeline content. Keep it pinned while
   horizontal zoom/scroll moves the clips underneath it. */
#editorView .editor-track-label,
#editorView .vmf-track-rail-label,
#editorView .editor-ruler-gutter {
  position: sticky !important;
  left: 0 !important;
  z-index: 90 !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
  box-shadow: 1px 0 0 #e8edf5 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-effects-card {
  margin: 0 0 18px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorTextValue {
  min-height: 42px !important;
  padding: 8px 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #d9dee7 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 13px !important;
  resize: vertical !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-control-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-control {
  gap: 7px !important;
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-control > span:first-child,
#editorView.vmf-clean-editor-layout-v2 .editor-control label,
#editorView.vmf-clean-editor-layout-v2 .editor-color-control > span:first-child {
  color: #6b7280 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-control select,
#editorView.vmf-clean-editor-layout-v2 .editor-control input[type="number"],
#editorView.vmf-clean-editor-layout-v2 .editor-range-value-input {
  min-height: 28px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f3f4f6 !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
}

#editorView.vmf-clean-editor-layout-v2 input[type="range"] {
  height: 24px !important;
  accent-color: #111827 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-color-picker-chip {
  min-height: 28px !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f3f4f6 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-color-picker-swatch {
  width: 31px !important;
  height: 17px !important;
  border: 0 !important;
  border-radius: 5px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-color-picker-value {
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-control-toggle {
  grid-template-columns: minmax(0, 1fr) auto !important;
  min-height: 32px !important;
  margin: 8px 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-control-toggle input[type="checkbox"] {
  width: 80px !important;
  height: 80px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-text-preset-picker,
#editorView.vmf-clean-editor-layout-v2 .editor-inspector-preset-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-inspector-preset {
  min-height: 48px !important;
  border-radius: 5px !important;
  background: #30333b !important;
  color: #ffffff !important;
  font-size: 26px !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-main {
  grid-area: main !important;
  width: auto !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 46px minmax(0, 1fr) !important;
  overflow: hidden !important;
  background: #f6f7fb !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-main-header {
  height: 46px !important;
  min-height: 46px !important;
  padding: 0 28px 0 14px !important;
  background: #f6f7fb !important;
  border-bottom: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-project-title-button {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #030712 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-export-button {
  min-height: 33px !important;
  padding: 0 20px !important;
  border-radius: 999px !important;
  background: #3366f6 !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-stage-card {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f6f7fb !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-stage-head {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell {
  width: 100% !important;
  height: 100% !important;
  padding: 12px 24px 2px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 34px !important;
  place-items: center !important;
  background: #f6f7fb !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-video-stage {
  aspect-ratio: 9 / 16 !important;
  height: clamp(360px, 48vh, 450px) !important;
  width: auto !important;
  max-width: 254px !important;
  max-height: calc(100vh - 350px) !important;
  margin: 0 auto !important;
  border-radius: 10px !important;
  background: #000000 !important;
  overflow: hidden !important;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .12) !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-video-stage video,
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage img,
#editorView.vmf-clean-editor-layout-v2 #editorVideo,
#editorView.vmf-clean-editor-layout-v2 #editorImagePreview {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-empty-state {
  background: #000000 !important;
  color: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-hud {
  align-self: end !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  background: transparent !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card {
  grid-area: timeline !important;
  width: 100vw !important;
  height: auto !important;
  min-height: 260px !important;
  max-height: none !important;
  display: grid !important;
  grid-template-rows: 34px minmax(0, 1fr) 0 !important;
  border: 0 !important;
  border-top: 1px solid #dce3ec !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-head {
  height: 34px !important;
  min-height: 34px !important;
  padding: 3px 14px !important;
  border-bottom: 1px solid #dce3ec !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-body {
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-bottom {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-waveform {
  height: 100% !important;
  min-height: 226px !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-track-row,
#editorView.vmf-clean-editor-layout-v2 .vmf-real-empty-track-row {
  min-height: 42px !important;
  height: 42px !important;
  border-bottom: 1px solid #e5eaf2 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-track-label,
#editorView.vmf-clean-editor-layout-v2 .vmf-track-rail-label,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-category-label {
  width: 150px !important;
  min-width: 150px !important;
  padding: 0 16px !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-lane,
#editorView.vmf-clean-editor-layout-v2 .vmf-track-rail-lane {
  min-height: 42px !important;
  height: 42px !important;
  background: #f8fafc !important;
  border-left: 1px solid #e2e8f0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-ruler-scale,
#editorView.vmf-clean-editor-layout-v2 .vmf-ruler-scale {
  height: 26px !important;
  background: #ffffff !important;
  border-bottom: 1px solid #e5eaf2 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-icon-button,
#editorView.vmf-clean-editor-layout-v2 .editor-fit-button {
  min-width: 28px !important;
  height: 26px !important;
  border: 1px solid #dce3ec !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  color: #111827 !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-icon-button-label {
  min-width: 58px !important;
}

@media (max-width: 1360px) {
  #editorView.vmf-clean-editor-layout-v2 .editor-shell {
    grid-template-columns: 64px clamp(520px, 42vw, 620px) minmax(0, 1fr) !important;
  }

  #editorView.vmf-clean-editor-layout-v2 .editor-video-stage {
    height: clamp(315px, calc(100vh - 300px), 430px) !important;
    max-width: 242px !important;
  }
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media.vmf-media-empty-panel .editor-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-add-media-media-mode .editor-shell {
  grid-template-columns: 68px clamp(620px, 38vw, 705px) minmax(0, 1fr) !important;
  grid-template-rows: clamp(520px, 62vh, 565px) minmax(260px, 1fr) !important;
  grid-template-areas:
    "rail sidebar main"
    "timeline timeline timeline" !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-sidebar,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-sidebar,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media.vmf-media-empty-panel .editor-sidebar,
#editorView.vmf-clean-editor-layout-v2.vmf-add-media-media-mode .editor-sidebar {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-main,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-main,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media.vmf-media-empty-panel .editor-main,
#editorView.vmf-clean-editor-layout-v2.vmf-add-media-media-mode .editor-main {
  grid-template-rows: 46px minmax(0, 1fr) !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-stage-card,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-stage-card,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media.vmf-media-empty-panel .editor-stage-card,
#editorView.vmf-clean-editor-layout-v2.vmf-add-media-media-mode .editor-stage-card,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-preview-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-preview-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media.vmf-media-empty-panel .editor-preview-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-add-media-media-mode .editor-preview-shell {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

@media (max-width: 1360px) {
  #editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media .editor-shell,
  #editorView.vmf-clean-editor-layout-v2.vmf-media-empty-panel .editor-shell,
  #editorView.vmf-clean-editor-layout-v2.vmf-static-empty-media.vmf-media-empty-panel .editor-shell,
  #editorView.vmf-clean-editor-layout-v2.vmf-add-media-media-mode .editor-shell {
    grid-template-columns: 64px clamp(520px, 42vw, 620px) minmax(0, 1fr) !important;
  }
}

/* VMF patch: reference rail icons and timeline ownership */
#editorView.vmf-clean-editor-layout-v2 .editor-tool-icon svg,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button svg {
  width: 20px !important;
  height: 20px !important;
  overflow: visible !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-icon svg *,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button.vmf-rail-tool-hidden {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card {
  grid-column: 1 / -1 !important;
  width: 100vw !important;
}

/* VMF patch: keep editor rail/sidebar out of the timeline row */
#editorView.vmf-clean-editor-layout-v2 .editor-tool-rail {
  height: 100% !important;
  min-height: 0 !important;
  align-self: stretch !important;
  grid-row: 1 !important;
  z-index: 3 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-sidebar {
  grid-row: 1 !important;
  z-index: 2 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card {
  position: relative !important;
  z-index: 5 !important;
}

/* VMF patch: compact upload card for the Media tab */
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .editor-media-tabs:has(+ .editor-media-library-grid .vmf-media-upload-card) {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-empty-panel .editor-media-tabs {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-empty-panel #vmfAddMediaPanel {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-only-panel #vmfAddMediaPanel,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-only-panel .editor-media-tabs,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-only-panel .vmf-upload-file-button,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-only-panel .editor-media-toolbar,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-only-panel .editor-media-item,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-only-panel .editor-media-card,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-only-panel [data-editor-media-id],
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-only-panel [data-editor-project-clip-id] {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel.vmf-media-upload-empty-panel #editorMediaList {
  display: block !important;
  max-height: none !important;
  overflow: visible !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(.vmf-media-upload-card) {
  padding: 0 12px !important;
  overflow: visible !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(.vmf-media-upload-card) #editorMediaDropzone,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(.vmf-media-upload-card) .editor-media-dropzone {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel #editorMediaDropzone[hidden],
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .editor-media-dropzone[hidden] {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .editor-media-library-grid-imported:has(.vmf-media-upload-card) {
  display: block !important;
  padding: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-card {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-height: 174px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 26px 18px 14px !important;
  border: 1px dashed #d9dee8 !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  text-align: center !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-art {
  position: relative !important;
  width: 74px !important;
  height: 52px !important;
  margin: 0 auto 8px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-note {
  position: absolute !important;
  left: 4px !important;
  top: 3px !important;
  width: 30px !important;
  height: 30px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #edf5ff !important;
  color: #3b82f6 !important;
  transform: rotate(-10deg) !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-file {
  position: absolute !important;
  left: 25px !important;
  top: 1px !important;
  width: 42px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%) !important;
  color: #60a5fa !important;
  box-shadow: 0 8px 18px rgba(37, 99, 235, .12), inset 0 0 0 1px rgba(96, 165, 250, .18) !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-note svg {
  width: 18px !important;
  height: 18px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-file svg {
  width: 28px !important;
  height: 28px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-card svg * {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-card h4 {
  margin: 0 0 6px !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-card p {
  display: block !important;
  max-width: none !important;
  margin: 0 0 14px !important;
  color: #8a94a6 !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-button {
  width: 100% !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #2585f5 !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-button svg {
  width: 14px !important;
  height: 14px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-button:hover,
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-button:focus-visible {
  background: #1d76dc !important;
  outline: none !important;
}

/* VMF patch: reference rail active state */
#editorView.vmf-clean-editor-layout-v2 .editor-tool-bottom,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-round {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack {
  gap: 9px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button {
  width: 62px !important;
  min-width: 62px !important;
  max-width: 62px !important;
  min-height: 62px !important;
  padding: 6px 3px !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: #313946 !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button:hover,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button:focus-visible {
  background: #f8fafc !important;
  color: #111827 !important;
  outline: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button.active,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[aria-selected="true"] {
  background: #f7f9fc !important;
  color: #1f70ff !important;
  border-radius: 3px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-icon {
  width: 24px !important;
  height: 24px !important;
  margin: 0 auto 5px !important;
  display: grid !important;
  place-items: center !important;
  border: 1px solid transparent !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: currentColor !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button.active .editor-tool-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[aria-selected="true"] .editor-tool-icon {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid #2386f6 !important;
  border-radius: 6px !important;
  background: #ffffff !important;
  color: #2386f6 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button span:last-child {
  color: currentColor !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button.active,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[aria-selected="true"],
#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[data-editor-tool="media"].active,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[data-editor-tool="media"][aria-selected="true"],
#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[data-editor-tool="effects"].active,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack > .editor-tool-button[data-editor-tool="effects"][aria-selected="true"] {
  background: #fafafa !important;
  color: #1976f3 !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}

/* VMF patch: keep rail tools top-aligned and unboxed */
#editorView.vmf-clean-editor-layout-v2 .editor-tool-rail {
  justify-content: flex-start !important;
  gap: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-top {
  flex: 0 0 auto !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-divider {
  flex: 0 0 auto !important;
  margin: 10px 0 10px !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-stack {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

#editorView.vmf-clean-editor-layout-v2 .editor-tool-button.active .editor-tool-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[aria-selected="true"] .editor-tool-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="media"].active .editor-tool-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="media"][aria-selected="true"] .editor-tool-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="effects"].active .editor-tool-icon,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-button[data-editor-tool="effects"][aria-selected="true"] .editor-tool-icon {
  width: 24px !important;
  height: 24px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #1976f3 !important;
}

/* VMF patch: Effects tab reference text inspector */
#editorView.vmf-clean-editor-layout-v2 #editorTextPanel {
  padding: 10px 20px 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorTextPanel .editor-text-panel-head,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsEmpty,
#editorView.vmf-clean-editor-layout-v2 #editorCaptionWarning {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection:not([hidden]) {
  height: 100% !important;
  max-height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 0 2px 16px !important;
  background: #ffffff !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-effects-card {
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-text-card::before {
  content: "Text";
  display: block;
  margin: 0 0 7px;
  color: #111827;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection #editorTextValue {
  width: 100% !important;
  min-height: 64px !important;
  max-height: 112px !important;
  padding: 10px 11px !important;
  border: 1px solid #dce3ed !important;
  border-radius: 9px !important;
  background: #f4f6f8 !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  resize: vertical !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection #editorTextValue:hover {
  background: #f0f3f7 !important;
  border-color: #c7d1df !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection #editorTextValue:focus {
  background: #ffffff !important;
  border-color: #4f86e8 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(79, 134, 232, .14) !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-font-card > .editor-effects-card-label,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-font-card > .editor-control-grid,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-font-card > label.editor-control,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-font-card > .editor-control {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-font-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px 32px 32px 32px auto !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 16px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-font-row select,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-size-box,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-format-button,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-align-button {
  height: 28px !important;
  min-height: 28px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f2f3f5 !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-font-row select {
  width: 100% !important;
  padding: 0 9px !important;
}

/* Custom font picker: avoids Chrome's native select popup. */
#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker {
  position: relative;
  min-width: 220px;
  height: 28px;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-native-font-select {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-trigger {
    display: flex;
    width: 100%;
    height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    padding: 0 10px 0 12px;
  background: linear-gradient(135deg, #ffffff, #f5f7fb);
  color: #172033;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 1px rgba(15, 23, 42, .04);
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-trigger:hover {
  border-color: #aab9d0;
  background: #ffffff;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-trigger:focus-visible {
  outline: none;
  border-color: #4786ef;
  box-shadow: 0 0 0 3px rgba(71, 134, 239, .18);
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-trigger:disabled {
  cursor: not-allowed;
  opacity: .5;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 18px !important;
    font-weight: 400 !important;
    letter-spacing: 0.015em !important;
    line-height: 1 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-chevron {
  color: #4f6382;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  transform: translateY(-2px);
  transition: transform .14s ease;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker.is-open .vmf-font-picker-chevron {
  transform: translateY(1px) rotate(180deg);
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-menu {
  position: absolute;
  z-index: 80;
  top: calc(100% + 7px);
  left: 0;
  right: 0;
  display: grid;
  max-height: none;
  overflow: visible;
  padding: 5px;
  border: 1px solid #d6e0ef;
  border-radius: 11px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 16px 34px rgba(15, 23, 42, .18), 0 2px 5px rgba(15, 23, 42, .08);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.98);
  transform-origin: top center;
  transition: opacity .14s ease, transform .14s ease;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker.is-open .vmf-font-picker-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-option {
  width: 100%;
  min-height: 29px;
  border: 0;
  border-radius: 7px;
  padding: 0 9px;
  background: transparent;
  color: #1c2940;
  font-family: var(--vmf-font-preview);
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-option:hover,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-option:focus-visible {
  outline: none;
  background: #edf4ff;
  color: #1d63c8;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-font-picker-option.is-selected {
  background: linear-gradient(90deg, #e1efff, #f1f7ff);
  color: #1558ba;
  box-shadow: inset 3px 0 0 #2f7eea;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-size-box {
  width: 44px !important;
  padding: 0 !important;
  text-align: center !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-format-button {
  width: 32px !important;
  padding: 0 !important;
  cursor: pointer !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-format-button.active {
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px #dfe5ee !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-format-button[data-format="uppercase"] {
  font-size: 9px !important;
  letter-spacing: -0.08em !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-align-group {
  display: flex !important;
  gap: 4px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-align-button {
  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-align-icon-image {
  width: 26px !important;
  height: 26px !important;
  object-fit: contain !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-position-card {
  display: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-effects-card-label {
  margin: 0 0 11px !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-control-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-control {
  display: grid !important;
  gap: 6px !important;
  margin: 0 0 11px !important;
  color: #6b7280 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-control > span:first-child {
  color: #6b7280 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-color-picker-chip {
  width: 100% !important;
  min-height: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #f3f4f6 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-color-picker-swatch {
  width: 31px !important;
  height: 17px !important;
  border: 0 !important;
  border-radius: 5px !important;
  box-shadow: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-color-picker-value {
  color: #111827 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-color-picker-chip input[type="color"] {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-control-toggle {
  min-height: 28px !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  margin: 8px 0 8px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-control-toggle > span:first-child {
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Keep labels throughout Effects readable in title case, rather than shouting in all caps. */
#editorView.vmf-clean-editor-layout-v2 #editorEffectsVideoSection .editor-control > span:first-child,
#editorView.vmf-clean-editor-layout-v2 #editorEffectsAudioSection .editor-control > span:first-child {
  letter-spacing: 0 !important;
  text-transform: none !important;
}


#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection input[type="checkbox"] {
  width: 20px !important;
  height: 20px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-control > input[type="range"] {
  width: 100% !important;
  height: 24px !important;
  accent-color: #111827 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-control:has(> input[type="range"]) {
  grid-template-columns: minmax(0, 1fr) 52px !important;
  align-items: end !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-control:has(> input[type="range"]) > span:first-child {
  grid-column: 1 / -1 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-range-pill {
  min-width: 52px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 8px !important;
  background: #f3f4f6 !important;
  color: #111827 !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .vmf-effects-presets-card {
  margin-top: 4px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-text-preset-picker {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorEffectsTextSection .editor-text-preset-chip {
  height: 58px !important;
  min-height: 58px !important;
  border-width: 1.5px !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 16px rgba(17, 24, 39, .16) !important;
  overflow: hidden !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorApplyTextToAll {
  display: none !important;
}

#editorView .editor-tool-rail .editor-tool-top,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-top {
  min-height: 62px !important;
  padding-bottom: 6px !important;
  display: grid !important;
  place-items: center !important;
  position: relative !important;
  z-index: 100002 !important;
  pointer-events: auto !important;
}

#editorView .editor-tool-rail .editor-back-button,
#editorView.vmf-clean-editor-layout-v2 .editor-back-button {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  min-height: 62px !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 3px !important;
  background: transparent !important;
  color: #111827 !important;
  cursor: pointer !important;
  font-size: 0 !important;
  line-height: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: 1 !important;
  box-shadow: none !important;
}

#editorView .editor-tool-rail .editor-back-button:hover,
#editorView .editor-tool-rail .editor-back-button:focus-visible,
#editorView.vmf-clean-editor-layout-v2 .editor-back-button:hover,
#editorView.vmf-clean-editor-layout-v2 .editor-back-button:focus-visible {
  background: #f8fafc !important;
  outline: none !important;
}

#editorView .editor-tool-rail .editor-back-button::before,
#editorView.vmf-clean-editor-layout-v2 .editor-back-button::before {
  content: "\2039" !important;
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: -1px 0 0 !important;
  border: 0 !important;
  color: currentColor !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: .9 !important;
  transform: none !important;
}

/* The rail's logo remains the same clickable Back to clips control. */
#editorView .editor-tool-rail .editor-back-button,
#editorView.vmf-clean-editor-layout-v2 .editor-back-button {
  padding: 0 !important;
}

#editorView .editor-tool-rail .editor-back-button::before,
#editorView.vmf-clean-editor-layout-v2 .editor-back-button::before {
  content: none !important;
  display: none !important;
}

#editorView .editor-tool-rail .editor-back-button .editor-back-logo,
#editorView.vmf-clean-editor-layout-v2 .editor-back-button .editor-back-logo {
  display: block !important;
  width: 28px !important;
  height: 28px !important;
  object-fit: contain !important;
}

#editorView.vmf-premiere-effects-mode .editor-preview-shell {
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 34px !important;
  align-items: center !important;
  justify-items: center !important;
  overflow: hidden !important;
  background: #f6f7fb !important;
}

#editorView.vmf-premiere-effects-mode .editor-video-stage {
  position: relative !important;
  aspect-ratio: 9 / 16 !important;
  height: clamp(320px, 48vh, 450px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: min(254px, 100%) !important;
  max-height: calc(100vh - 350px) !important;
  flex: 0 0 auto !important;
  margin: 0 auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 10px) !important;
  contain: paint !important;
  isolation: isolate !important;
  background: #000000 !important;
  box-sizing: border-box !important;
}

#editorView.vmf-premiere-effects-mode .editor-video-stage > video,
#editorView.vmf-premiere-effects-mode .editor-video-stage > img,
#editorView.vmf-premiere-effects-mode .editor-video-stage > .editor-image-preview {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

#editorView.vmf-premiere-effects-mode .editor-text-overlay-layer {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

#editorView .editor-preview-shell {
  justify-items: center !important;
  align-items: center !important;
  overflow: hidden !important;
  overscroll-behavior: contain !important;
}

#editorView .editor-video-stage,
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage,
#editorView.vmf-premiere-effects-mode .editor-video-stage {
  position: relative !important;
  aspect-ratio: 9 / 16 !important;
  inline-size: clamp(180px, 27vh, 254px) !important;
  block-size: clamp(320px, 48vh, 450px) !important;
  width: clamp(180px, 27vh, 254px) !important;
  height: clamp(320px, 48vh, 450px) !important;
  min-width: clamp(180px, 27vh, 254px) !important;
  min-height: clamp(320px, 48vh, 450px) !important;
  max-width: clamp(180px, 27vh, 254px) !important;
  max-height: clamp(320px, 48vh, 450px) !important;
  justify-self: center !important;
  align-self: center !important;
  flex: 0 0 auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 10px) !important;
  contain: paint !important;
  isolation: isolate !important;
  background: #000000 !important;
  box-sizing: border-box !important;
  overscroll-behavior: contain !important;
}

#editorView .editor-video-stage > video,
#editorView .editor-video-stage > img,
#editorView .editor-video-stage > .editor-image-preview,
#editorView #editorVideo,
#editorView #editorImagePreview {
  display: block !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  object-fit: cover !important;
}

/* Imported still images should preserve their whole frame inside the 9:16 monitor. */
#editorView .editor-video-stage > img.editor-image-preview,
#editorView .editor-video-stage > .editor-image-preview,
#editorView #editorImagePreview,
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage #editorImagePreview {
  object-fit: contain !important;
  background: #000 !important;
}

#editorView .editor-text-overlay-layer {
  inset: 0 !important;
  inline-size: 100% !important;
  block-size: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

#editorView .editor-shell,
#editorView.vmf-clean-editor-layout-v2 .editor-shell,
#editorView.vmf-premiere-effects-mode .editor-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
  width: 100vw !important;
  height: 100vh !important;
  display: grid !important;
  grid-template-columns: 68px clamp(620px, 38vw, 705px) minmax(0, 1fr) !important;
  grid-template-rows: clamp(520px, 62vh, 565px) minmax(260px, 1fr) !important;
  grid-template-areas:
    "rail sidebar main"
    "timeline timeline timeline" !important;
  gap: 0 !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  overflow: hidden !important;
  background: #f6f7fb !important;
}

#editorView .editor-tool-rail,
#editorView.vmf-clean-editor-layout-v2 .editor-tool-rail,
#editorView.vmf-premiere-effects-mode .editor-tool-rail,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-tool-rail {
  grid-area: rail !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
}

#editorView .editor-sidebar,
#editorView.vmf-clean-editor-layout-v2 .editor-sidebar,
#editorView.vmf-premiere-effects-mode .editor-sidebar,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-sidebar {
  grid-area: sidebar !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

#editorView .editor-main,
#editorView.vmf-clean-editor-layout-v2 .editor-main,
#editorView.vmf-premiere-effects-mode .editor-main,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-main {
  grid-area: main !important;
  width: auto !important;
  min-width: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 46px minmax(0, 1fr) !important;
  overflow: hidden !important;
}

#editorView .editor-timeline-card,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card,
#editorView.vmf-premiere-effects-mode .editor-timeline-card,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-timeline-card {
  grid-area: timeline !important;
  width: 100vw !important;
  min-width: 0 !important;
}

#editorView .editor-stage-card,
#editorView.vmf-clean-editor-layout-v2 .editor-stage-card,
#editorView.vmf-premiere-effects-mode .editor-stage-card,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-stage-card {
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #f6f7fb !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

#editorView .editor-preview-shell,
#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell,
#editorView.vmf-premiere-effects-mode .editor-preview-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-preview-shell {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 12px 24px 2px !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) 34px !important;
  place-items: center !important;
  gap: 0 !important;
  overflow: hidden !important;
  background: #f6f7fb !important;
}

#editorView .editor-timeline-card,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card {
  position: relative !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-rows: 36px minmax(0, 1fr) 0 !important;
  overflow: hidden !important;
  border-top: 1px solid #dbe2ec !important;
  background: #ffffff !important;
}

#editorView .editor-timeline-head,
#editorView .editor-timeline-head-compact,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-head,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-head-compact {
  grid-row: 1 !important;
  grid-column: 1 !important;
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  padding: 0 12px !important;
  display: grid !important;
  grid-template-columns: minmax(150px, 1fr) auto minmax(210px, 1fr) !important;
  align-items: center !important;
  gap: 12px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

#editorView .editor-timeline-toolbar,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-toolbar {
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

#editorView .editor-timeline-actions,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-actions {
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  min-width: 0 !important;
}

#editorView .editor-icon-button,
#editorView .editor-transport-button,
#editorView .editor-fit-button,
#editorView.vmf-clean-editor-layout-v2 .editor-icon-button,
#editorView.vmf-clean-editor-layout-v2 .editor-transport-button,
#editorView.vmf-clean-editor-layout-v2 .editor-fit-button {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  padding: 0 !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 9px !important;
  background: #ffffff !important;
  color: #475569 !important;
  display: inline-grid !important;
  place-items: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

#editorView .editor-icon-button-label,
#editorView.vmf-clean-editor-layout-v2 .editor-icon-button-label {
  width: 34px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  color: transparent !important;
  font-size: 0 !important;
}

#editorView #editorCutButton::before,
#editorView.vmf-clean-editor-layout-v2 #editorCutButton::before {
  content: "\2702" !important;
  color: #64748b !important;
  font-size: 13px !important;
  line-height: 1 !important;
}

/* Cut is an icon-only control.  Keeping its hidden label in the grid created
   an extra row, which pulled the scissors above the toolbar's visual center. */
#editorView #editorCutButton,
#editorView.vmf-clean-editor-layout-v2 #editorCutButton {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}

#editorView #editorCutButton::before,
#editorView.vmf-clean-editor-layout-v2 #editorCutButton::before,
#editorView #editorCutButton span,
#editorView.vmf-clean-editor-layout-v2 #editorCutButton span {
  display: none !important;
}

#editorView #editorCutButton svg,
#editorView.vmf-clean-editor-layout-v2 #editorCutButton svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  flex: 0 0 16px !important;
}

#editorView .editor-transport-row,
#editorView .editor-hud,
#editorView.vmf-clean-editor-layout-v2 .editor-transport-row,
#editorView.vmf-clean-editor-layout-v2 .editor-hud {
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

#editorView .editor-transport-play,
#editorView.vmf-clean-editor-layout-v2 .editor-transport-play {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  min-height: 26px !important;
  border: 0 !important;
  background: transparent !important;
  color: #111827 !important;
  box-shadow: none !important;
  font-size: 12px !important;
}

#editorView .editor-timecode,
#editorView.vmf-clean-editor-layout-v2 .editor-timecode {
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  font-variant-numeric: tabular-nums !important;
}

#editorView .editor-timeline-body,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-body {
  grid-row: 2 !important;
  grid-column: 1 !important;
  height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  background: #ffffff !important;
}

#editorView .editor-timeline-bottom,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-bottom {
  grid-row: 3 !important;
  grid-column: 1 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

#editorWaveform {
  --vmf-reference-rail-width: 96px !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

#editorWaveform .editor-waveform-scroll {
  height: 100% !important;
  padding: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  background: #ffffff !important;
}

#editorWaveform .editor-waveform-canvas {
  min-width: 1120px !important;
  height: 100% !important;
  background: #ffffff !important;
  overflow: visible !important;
}

#editorWaveform .editor-ruler {
  height: 30px !important;
  min-height: 30px !important;
  display: grid !important;
  grid-template-columns: var(--vmf-reference-rail-width) minmax(0, 1fr) !important;
  gap: 0 !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  overflow: visible !important;
}

#editorWaveform .editor-ruler-gutter {
  width: var(--vmf-reference-rail-width) !important;
  min-width: var(--vmf-reference-rail-width) !important;
  border-right: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

#editorWaveform .editor-ruler-gutter .vmf-add-track-button {
  height: 30px !important;
  min-height: 30px !important;
  padding: 0 12px !important;
  gap: 8px !important;
  border: 0 !important;
  background: #ffffff !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#editorWaveform .editor-ruler-scale {
  height: 30px !important;
  min-height: 30px !important;
  background: #ffffff !important;
  overflow: visible !important;
}

#editorWaveform .editor-ruler-tick {
  top: 11px !important;
  color: #8b95a5 !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

#editorWaveform .editor-ruler-tick::before {
  display: none !important;
}

#editorWaveform .vmf-continuous-playhead-stem {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#editorWaveform .editor-ruler-scale > .editor-playhead-marker,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker {
  top: 15px !important;
  left: var(--editor-playhead-left, 0%) !important;
  width: 12px !important;
  height: 14px !important;
  min-width: 12px !important;
  min-height: 14px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 3px 3px 6px 6px !important;
  background: #111827 !important;
  box-shadow: 0 0 0 1px #ffffff !important;
  transform: translate(-50%, -50%) !important;
  z-index: 80 !important;
}

#editorWaveform .editor-ruler-scale > .editor-playhead-marker::after,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 100% !important;
  width: 2px !important;
  height: 240px !important;
  margin-left: -1px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #111827 !important;
  transform: none !important;
  box-shadow: none !important;
}

#editorWaveform .editor-timeline-lane > .editor-playhead,
#editorWaveform .vmf-real-empty-track-lane > .editor-playhead,
#editorWaveform .editor-track-lane > .editor-playhead {
  display: none !important;
}

#editorWaveform .editor-timeline-stack,
#editorWaveform .editor-empty-timeline-stack {
  display: grid !important;
  gap: 0 !important;
  background: #ffffff !important;
}

#editorWaveform .editor-track-row,
#editorWaveform .editor-empty-track-row {
  display: grid !important;
  grid-template-columns: var(--vmf-reference-rail-width) minmax(0, 1fr) !important;
  min-height: 48px !important;
  height: 48px !important;
  border-bottom: 1px solid #e5e7eb !important;
  background: #ffffff !important;
}

#editorWaveform .editor-track-label,
#editorWaveform .editor-timeline-category-label {
  width: var(--vmf-reference-rail-width) !important;
  min-width: var(--vmf-reference-rail-width) !important;
  max-width: var(--vmf-reference-rail-width) !important;
  height: 48px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  border-right: 1px solid #e5e7eb !important;
  background: #ffffff !important;
  overflow: hidden !important;
}

#editorWaveform .editor-track-title {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #111827 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

#editorWaveform .editor-timeline-lane {
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f8fafc !important;
  overflow: hidden !important;
}

/* VMF patch: compact professional timeline track panel */
#editorWaveform {
  --vmf-reference-rail-width: 130px !important;
  --vmf-track-row-height: 44px !important;
  background: #f6f7f9 !important;
  color: #20242d !important;
  font-family: "SF Pro Display", Arial, sans-serif !important;
}

#editorWaveform .editor-waveform-scroll {
  background: #f6f7f9 !important;
}

#editorWaveform .editor-waveform-canvas {
  background: #f6f7f9 !important;
}

#editorWaveform .editor-ruler {
  height: 32px !important;
  min-height: 32px !important;
  grid-template-columns: var(--vmf-reference-rail-width) minmax(0, 1fr) !important;
  border-bottom: 1px solid #e3e7ee !important;
  background: #fbfcfe !important;
}

#editorWaveform .editor-ruler-gutter {
  width: var(--vmf-reference-rail-width) !important;
  min-width: var(--vmf-reference-rail-width) !important;
  max-width: var(--vmf-reference-rail-width) !important;
  border-right: 1px solid #e2e7ef !important;
  background: #ffffff !important;
  position: relative !important;
  overflow: visible !important;
  z-index: 90 !important;
}

#editorView .vmf-add-track-button {
  position: absolute !important;
  left: 0 !important;
  top: 36px !important;
  z-index: 120 !important;
  width: var(--vmf-reference-rail-width, 130px) !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 0 14px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #1f2937 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  box-shadow: none !important;
}

#editorWaveform .editor-ruler-gutter .vmf-add-track-button {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  z-index: 120 !important;
  width: 100% !important;
}

#editorWaveform .editor-ruler-gutter .vmf-add-track-button:hover,
#editorView .vmf-add-track-button:hover,
#editorWaveform .editor-ruler-gutter .vmf-add-track-button:focus-visible,
#editorView .vmf-add-track-button:focus-visible {
  background: #f3f5f8 !important;
  outline: none !important;
}

#editorWaveform .editor-ruler-gutter .vmf-add-track-plus,
#editorView .vmf-add-track-plus {
  width: 14px !important;
  min-width: 14px !important;
  height: 14px !important;
  display: grid !important;
  place-items: center !important;
  color: #111827 !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  transform: none !important;
}

#editorWaveform .editor-ruler-scale {
  height: 32px !important;
  min-height: 32px !important;
  background: #fbfcfe !important;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(10% - 1px),
    #edf1f6 calc(10% - 1px),
    #edf1f6 10%
  ) !important;
}

#editorWaveform .editor-ruler-tick {
  top: 12px !important;
  color: #8792a2 !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

#editorWaveform .editor-ruler-tick::before {
  display: block !important;
  top: -8px !important;
  height: 5px !important;
  width: 1px !important;
  background: #d9dee7 !important;
}

#editorWaveform .editor-timeline-stack,
#editorWaveform .editor-empty-timeline-stack {
  gap: 3px !important;
  padding-top: 3px !important;
  background: #ffffff !important;
}

#editorWaveform .editor-track-row,
#editorWaveform .editor-empty-track-row,
#editorWaveform .vmf-track-rail-row,
#editorWaveform .vmf-user-empty-track {
  position: relative !important;
  grid-template-columns: var(--vmf-reference-rail-width) minmax(0, 1fr) !important;
  height: var(--vmf-track-row-height) !important;
  min-height: var(--vmf-track-row-height) !important;
  max-height: var(--vmf-track-row-height) !important;
  border-bottom: 0 !important;
  background: #f6f7f9 !important;
  overflow: hidden !important;
}

#editorWaveform .editor-track-label,
#editorWaveform .editor-timeline-category-label,
#editorWaveform .vmf-track-rail-label,
#editorWaveform .vmf-real-empty-track-label {
  width: var(--vmf-reference-rail-width) !important;
  min-width: var(--vmf-reference-rail-width) !important;
  max-width: var(--vmf-reference-rail-width) !important;
  height: var(--vmf-track-row-height) !important;
  min-height: var(--vmf-track-row-height) !important;
  max-height: var(--vmf-track-row-height) !important;
  padding: 0 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  border-right: 1px solid #e2e7ef !important;
  border-radius: 0 !important;
  background: #ffffff !important;
  color: #2f3744 !important;
  overflow: hidden !important;
  position: relative !important;
  z-index: 5 !important;
  box-shadow: 1px 0 0 #e2e7ef !important;
}

#editorWaveform .editor-track-title,
#editorWaveform .vmf-track-rail-title {
  min-width: 0 !important;
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #2f3744 !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

#editorWaveform .editor-track-label-actions {
  display: none !important;
}

#editorWaveform .editor-track-category-icon,
#editorWaveform .vmf-track-rail-icon {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #5b6472 !important;
  opacity: 1 !important;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  position: relative !important;
  box-shadow: none !important;
}

#editorWaveform .editor-track-category-icon-T,
#editorWaveform .vmf-track-rail-icon-text {
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  color: #111827 !important;
}

#editorWaveform .editor-track-category-icon-film,
#editorWaveform .vmf-track-rail-icon-film,
#editorWaveform .vmf-track-rail-icon-video {
  font-size: 0 !important;
}

#editorWaveform .editor-track-category-icon-film::before,
#editorWaveform .vmf-track-rail-icon-film::before,
#editorWaveform .vmf-track-rail-icon-video::before {
  content: "" !important;
  width: 11px !important;
  height: 11px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 2px !important;
  box-shadow: -3px 0 0 -1px currentColor, 3px 0 0 -1px currentColor !important;
}

#editorWaveform .editor-track-category-icon-mic,
#editorWaveform .vmf-track-rail-icon-mic,
#editorWaveform .vmf-track-rail-icon-audio {
  font-size: 0 !important;
}

#editorWaveform .editor-track-category-icon-mic::before,
#editorWaveform .vmf-track-rail-icon-mic::before,
#editorWaveform .vmf-track-rail-icon-audio::before {
  content: "" !important;
  width: 7px !important;
  height: 11px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 999px !important;
}

#editorWaveform .editor-track-category-icon-mic::after,
#editorWaveform .vmf-track-rail-icon-mic::after,
#editorWaveform .vmf-track-rail-icon-audio::after {
  content: "" !important;
  position: absolute !important;
  width: 11px !important;
  height: 7px !important;
  border-bottom: 1.4px solid currentColor !important;
  border-left: 1.4px solid transparent !important;
  border-right: 1.4px solid transparent !important;
  border-radius: 0 0 999px 999px !important;
  top: 6px !important;
  left: 2px !important;
}

#editorWaveform .editor-track-category-icon-music,
#editorWaveform .vmf-track-rail-icon-music {
  font-size: 0 !important;
}

#editorWaveform .editor-track-category-icon-music::before,
#editorWaveform .vmf-track-rail-icon-music::before {
  content: "\266B" !important;
  color: currentColor !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#editorWaveform .editor-track-category-icon-speaker,
#editorWaveform .vmf-track-rail-icon-speaker {
  font-size: 0 !important;
}

#editorWaveform .editor-track-category-icon-speaker::before,
#editorWaveform .vmf-track-rail-icon-speaker::before {
  content: "" !important;
  width: 6px !important;
  height: 9px !important;
  border: 1.4px solid currentColor !important;
  border-right: 0 !important;
  transform: skewY(-18deg) !important;
}

#editorWaveform .editor-track-category-icon-speaker::after,
#editorWaveform .vmf-track-rail-icon-speaker::after {
  content: ")" !important;
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  color: currentColor !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

#editorWaveform .editor-timeline-lane,
#editorWaveform .vmf-track-rail-lane,
#editorWaveform .vmf-real-empty-track-lane {
  position: relative !important;
  z-index: 1 !important;
  height: var(--vmf-track-row-height) !important;
  min-height: var(--vmf-track-row-height) !important;
  max-height: var(--vmf-track-row-height) !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: #f6f7f9 !important;
  box-shadow: none !important;
  overflow: hidden !important;
  clip-path: inset(0) !important;
}

#editorWaveform .editor-caption-bed,
#editorWaveform .editor-audio-bed {
  inset: 8px 10px !important;
  border-radius: 6px !important;
}

#editorWaveform .editor-selection-window,
#editorWaveform .editor-selection-window-overlay {
  top: 6px !important;
  bottom: 6px !important;
  border-radius: 7px !important;
}

#editorWaveform .vmf-placeholder-track-row,
#editorWaveform .vmf-placeholder-lane-row,
#editorWaveform .vmf-user-empty-track,
#editorWaveform .editor-track-row:has([data-editor-lane="empty"]),
#editorWaveform .vmf-track-rail-row:has([data-editor-lane="empty"]),
#editorWaveform [data-editor-lane="empty"],
#editorWaveform [data-editor-lane="placeholder"],
#editorWaveform [data-editor-empty-track-kind="placeholder"] {
  display: none !important;
}

.vmf-add-track-menu {
  width: 130px !important;
  padding: 4px !important;
  gap: 0 !important;
  border: 1px solid #e3e7ee !important;
  border-radius: 7px !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, .10) !important;
  overflow: hidden !important;
  z-index: 100000 !important;
}

.vmf-add-track-option {
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 10px !important;
  gap: 9px !important;
  border: 0 !important;
  border-radius: 5px !important;
  background: transparent !important;
  color: #374151 !important;
  font-size: 0 !important;
  font-weight: 550 !important;
  line-height: 1 !important;
}

.vmf-add-track-option:hover,
.vmf-add-track-option:focus-visible {
  background: #f3f5f8 !important;
  outline: none !important;
}

.vmf-add-track-option > span:not(.vmf-add-track-option-icon) {
  display: none !important;
}

.vmf-add-track-option::after {
  color: #374151 !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  line-height: 1 !important;
}

.vmf-add-track-option:nth-child(1)::after { content: "Text" !important; }
.vmf-add-track-option:nth-child(2)::after { content: "Image" !important; }
.vmf-add-track-option:nth-child(3)::after { content: "Video" !important; }
.vmf-add-track-option:nth-child(4)::after { content: "Audio" !important; }

.vmf-add-track-option-icon {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #5b6472 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  position: relative !important;
}

.vmf-add-track-option-icon.is-text {
  font-family: Georgia, "Times New Roman", serif !important;
  background: transparent !important;
  color: #111827 !important;
}

.vmf-add-track-option-icon.is-image,
.vmf-add-track-option-icon.is-video,
.vmf-add-track-option-icon.is-audio,
.vmf-add-track-option-icon.is-empty {
  font-size: 0 !important;
  background: transparent !important;
}

.vmf-add-track-option:nth-child(2) .vmf-add-track-option-icon::before {
  content: "" !important;
  width: 11px !important;
  height: 11px !important;
  border: 1.4px solid currentColor !important;
  border-radius: 2px !important;
  box-shadow: -3px 0 0 -1px currentColor, 3px 0 0 -1px currentColor !important;
}

.vmf-add-track-option:nth-child(2) .vmf-add-track-option-icon.is-image::before,
.vmf-add-track-option:nth-child(2) .vmf-add-track-option-icon.is-image::after {
  content: none !important;
}

.vmf-add-track-option-icon.is-image svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  overflow: visible !important;
}

.vmf-add-track-option:nth-child(3) .vmf-add-track-option-icon::before {
  content: "" !important;
  width: 0 !important;
  height: 0 !important;
  border-top: 5px solid transparent !important;
  border-bottom: 5px solid transparent !important;
  border-left: 8px solid currentColor !important;
  border-radius: 0 !important;
}

.vmf-add-track-option:nth-child(3) .vmf-add-track-option-icon::after {
  content: none !important;
}

.vmf-add-track-option:nth-child(4) .vmf-add-track-option-icon::before {
  content: "\266B" !important;
  color: currentColor !important;
  font-size: 14px !important;
}

.vmf-add-track-option:nth-child(5) .vmf-add-track-option-icon::before {
  content: "" !important;
  width: 6px !important;
  height: 9px !important;
  border: 1.4px solid currentColor !important;
  border-right: 0 !important;
  transform: skewY(-18deg) !important;
}

.vmf-add-track-option:nth-child(5) .vmf-add-track-option-icon::after {
  content: ")" !important;
  position: absolute !important;
  right: 1px !important;
  top: 1px !important;
  color: currentColor !important;
  font-size: 13px !important;
}

/* VMF patch: keep the lowest timeline lane fully visible at 100% zoom. */
#editorView .editor-shell,
#editorView.vmf-clean-editor-layout-v2 .editor-shell,
#editorView.vmf-premiere-effects-mode .editor-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
  grid-template-rows: clamp(420px, 53vh, 500px) minmax(350px, 1fr) !important;
}

#editorView .editor-timeline-card,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card,
#editorView.vmf-premiere-effects-mode .editor-timeline-card,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-timeline-card {
  min-height: 350px !important;
}

#editorView .editor-preview-shell,
#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell,
#editorView.vmf-premiere-effects-mode .editor-preview-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-preview-shell {
  padding-bottom: 0 !important;
}

#editorWaveform .editor-waveform-scroll {
  overflow-y: auto !important;
  scrollbar-gutter: stable !important;
}

#editorWaveform .editor-waveform-canvas {
  min-height: 100% !important;
  height: auto !important;
  padding-bottom: 10px !important;
  box-sizing: border-box !important;
}

/* VMF patch: keep the playhead stem just inside the gray lane area. */
#editorWaveform .editor-ruler-scale > .editor-playhead-marker::after,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker::after {
  display: block !important;
  content: "" !important;
  left: calc(50% + 1px) !important;
  margin-left: 0 !important;
  width: 2px !important;
}

#editorView .editor-ruler-scale > .editor-playhead-marker,
#editorWaveform .editor-ruler-scale > .editor-playhead-marker,
#editorView .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker {
  clip-path: inset(-2px -9999px -9999px 1px) !important;
}

/* VMF patch: screenshot-matched track icons. */
#editorWaveform .editor-track-category-icon,
#editorWaveform .vmf-track-rail-icon {
  width: 16px !important;
  min-width: 16px !important;
  height: 16px !important;
  color: #111827 !important;
}

#editorWaveform .editor-track-category-icon-T,
#editorWaveform .vmf-track-rail-icon-text {
  color: #111827 !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  transform: translateY(-1px) !important;
}

#editorWaveform .editor-track-category-icon-film,
#editorWaveform .vmf-track-rail-icon-film,
#editorWaveform .vmf-track-rail-icon-video {
  font-size: 0 !important;
}

#editorWaveform .editor-track-category-icon-film::before,
#editorWaveform .vmf-track-rail-icon-film::before,
#editorWaveform .vmf-track-rail-icon-video::before {
  content: "" !important;
  width: 12px !important;
  height: 13px !important;
  border: 1.25px solid currentColor !important;
  border-radius: 1.5px !important;
  background:
    linear-gradient(currentColor, currentColor) 3px 0 / 1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) calc(100% - 3px) 0 / 1px 100% no-repeat,
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 3px) 1px 2px / 1.5px 9px no-repeat,
    repeating-linear-gradient(0deg, currentColor 0 1px, transparent 1px 3px) calc(100% - 2.5px) 2px / 1.5px 9px no-repeat !important;
  box-shadow: none !important;
}

#editorWaveform .editor-track-category-icon-film::after,
#editorWaveform .vmf-track-rail-icon-film::after,
#editorWaveform .vmf-track-rail-icon-video::after {
  content: "" !important;
  position: absolute !important;
  width: 3px !important;
  height: 3px !important;
  left: 50% !important;
  top: 50% !important;
  border: 1px solid currentColor !important;
  border-radius: .5px !important;
  transform: translate(-50%, -50%) !important;
}

#editorWaveform .editor-track-category-icon-mic,
#editorWaveform .vmf-track-rail-icon-mic,
#editorWaveform .vmf-track-rail-icon-audio {
  font-size: 0 !important;
}

#editorWaveform .editor-track-category-icon-mic::before,
#editorWaveform .vmf-track-rail-icon-mic::before,
#editorWaveform .vmf-track-rail-icon-audio::before {
  content: "" !important;
  position: absolute !important;
  width: 6px !important;
  height: 8px !important;
  left: 50% !important;
  top: 2px !important;
  border: 1.6px solid currentColor !important;
  border-radius: 999px !important;
  transform: translateX(-50%) !important;
  background: transparent !important;
}

#editorWaveform .editor-track-category-icon-mic::after,
#editorWaveform .vmf-track-rail-icon-mic::after,
#editorWaveform .vmf-track-rail-icon-audio::after {
  content: "" !important;
  position: absolute !important;
  width: 12px !important;
  height: 11px !important;
  left: 50% !important;
  top: 5px !important;
  border-left: 1.6px solid currentColor !important;
  border-right: 1.6px solid currentColor !important;
  border-bottom: 1.6px solid currentColor !important;
  border-top: 0 !important;
  border-radius: 0 0 999px 999px !important;
  background:
    linear-gradient(currentColor, currentColor) center 9px / 1.6px 5px no-repeat,
    linear-gradient(currentColor, currentColor) center bottom / 8px 1.6px no-repeat !important;
  transform: translateX(-50%) !important;
}

/* VMF patch: replace B-roll icon with a screenshot-style film glyph. */
#editorWaveform .editor-track-category-icon-film::before,
#editorWaveform .vmf-track-rail-icon-film::before,
#editorWaveform .vmf-track-rail-icon-video::before {
  content: "" !important;
  width: 15px !important;
  height: 15px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: currentColor !important;
  box-shadow: none !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.6'/%3E%3Cpath d='M7 5v14M17 5v14M3 10h4M3 14h4M17 10h4M17 14h4M7 12h10'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
  mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1.6'/%3E%3Cpath d='M7 5v14M17 5v14M3 10h4M3 14h4M17 10h4M17 14h4M7 12h10'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
}

#editorWaveform .editor-track-category-icon-film::after,
#editorWaveform .vmf-track-rail-icon-film::after,
#editorWaveform .vmf-track-rail-icon-video::after {
  display: none !important;
  content: none !important;
}

/* VMF patch: preserve a rounded 9:16 preview stage under all editor modes. */
#editorView .editor-video-stage,
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage,
#editorView.vmf-premiere-effects-mode .editor-video-stage,
body.editor-empty-program #editorView .editor-video-stage {
  --vmf-preview-stage-height: max(280px, min(450px, 48vh, calc(100vh - 350px))) !important;
  aspect-ratio: 9 / 16 !important;
  inline-size: calc(var(--vmf-preview-stage-height) * 9 / 16) !important;
  block-size: var(--vmf-preview-stage-height) !important;
  width: calc(var(--vmf-preview-stage-height) * 9 / 16) !important;
  height: var(--vmf-preview-stage-height) !important;
  min-width: calc(var(--vmf-preview-stage-height) * 9 / 16) !important;
  min-height: var(--vmf-preview-stage-height) !important;
  max-width: calc(var(--vmf-preview-stage-height) * 9 / 16) !important;
  max-height: var(--vmf-preview-stage-height) !important;
  box-sizing: border-box !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  clip-path: inset(0 round 16px) !important;
  background: #000000 !important;
  contain: paint !important;
  isolation: isolate !important;
}

#editorView .editor-video-stage > video,
#editorView .editor-video-stage > img,
#editorView .editor-video-stage > .editor-image-preview,
#editorView #editorVideo,
body.editor-empty-program #editorView #editorVideo {
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* VMF patch: make blank preview internals fill the rounded 9:16 shell exactly. */
#editorView .editor-video-stage.is-blank > #editorVideo,
#editorView .editor-video-stage.is-blank > video,
#editorView .editor-video-stage.is-blank > img,
#editorView .editor-video-stage.is-blank > .editor-image-preview,
#editorView .editor-video-stage.is-blank > .editor-empty-state,
body.editor-empty-program #editorView .editor-video-stage > #editorVideo,
body.editor-empty-program #editorView .editor-video-stage > .editor-empty-state {
  position: absolute !important;
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  transform: none !important;
  border-radius: inherit !important;
  clip-path: inset(0 round 16px) !important;
  border: 0 !important;
  outline: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#editorView .editor-video-stage.is-blank > #editorVideo,
#editorView .editor-video-stage.is-blank > video,
#editorView .editor-video-stage.is-blank > img,
#editorView .editor-video-stage.is-blank > .editor-image-preview,
body.editor-empty-program #editorView .editor-video-stage > #editorVideo {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#editorView .editor-video-stage.is-blank > .editor-empty-state,
body.editor-empty-program #editorView .editor-video-stage > .editor-empty-state {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  background: #000000 !important;
}

/* VMF patch: stretch the empty Media upload panel closer to the reference. */
#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel:has(.vmf-media-upload-card) {
  padding-left: 6px !important;
  padding-right: 6px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-card {
  width: 100% !important;
  max-width: none !important;
  min-height: 270px !important;
  padding: 48px 18px 22px !important;
}

#editorView.vmf-clean-editor-layout-v2 #editorMediaPanel .vmf-media-upload-button {
  width: 100% !important;
  max-width: none !important;
  min-height: 38px !important;
}

#editorView #editorMediaPanel .vmf-media-upload-card {
  min-height: 300px !important;
  height: 300px !important;
  padding: 48px 18px 22px !important;
}

#editorView #editorMediaPanel .vmf-media-upload-button {
  width: 100% !important;
  max-width: none !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 8px 12px !important;
}

/* VMF patch: keep audio waveforms visible above the gray audio lane shell. */
#editorWaveform .editor-timeline-lane-audio .editor-audio-bed,
#editorWaveform .vmf-track-rail-lane[data-overlay-drop-kind="audio"] .editor-audio-bed,
#editorWaveform .vmf-track-rail-lane[data-editor-lane*="audio"] .editor-audio-bed {
  z-index: 5 !important;
  pointer-events: none !important;
  background: transparent !important;
}

#editorWaveform .editor-timeline-lane-audio .editor-audio-bed::before,
#editorWaveform .vmf-track-rail-lane[data-overlay-drop-kind="audio"] .editor-audio-bed::before,
#editorWaveform .vmf-track-rail-lane[data-editor-lane*="audio"] .editor-audio-bed::before {
  z-index: 0 !important;
  opacity: .55 !important;
}

#editorWaveform .editor-timeline-lane-audio .editor-wave-bar,
#editorWaveform .vmf-track-rail-lane[data-overlay-drop-kind="audio"] .editor-wave-bar,
#editorWaveform .vmf-track-rail-lane[data-editor-lane*="audio"] .editor-wave-bar {
  position: relative !important;
  z-index: 1 !important;
}

#editorWaveform .editor-timeline-lane-audio .editor-audio-bed.editor-audio-bed-selectable,
#editorWaveform .vmf-track-rail-lane[data-overlay-drop-kind="audio"] .editor-audio-bed.editor-audio-bed-selectable,
#editorWaveform .vmf-track-rail-lane[data-editor-lane*="audio"] .editor-audio-bed.editor-audio-bed-selectable {
  pointer-events: auto !important;
}

#editorWaveform .editor-timeline-lane-audio .editor-audio-bed.editor-audio-bed-selectable .editor-wave-bar,
#editorWaveform .vmf-track-rail-lane[data-overlay-drop-kind="audio"] .editor-audio-bed.editor-audio-bed-selectable .editor-wave-bar,
#editorWaveform .vmf-track-rail-lane[data-editor-lane*="audio"] .editor-audio-bed.editor-audio-bed-selectable .editor-wave-bar,
#editorWaveform .editor-selection-window-audio-clip .editor-overlay-wave,
#editorWaveform .editor-selection-window-audio-clip .editor-overlay-wave span {
  pointer-events: auto !important;
  cursor: grab !important;
}

#editorWaveform .editor-timeline-lane-audio .editor-audio-bed.editor-audio-bed-selectable:active .editor-wave-bar,
#editorWaveform .vmf-track-rail-lane[data-overlay-drop-kind="audio"] .editor-audio-bed.editor-audio-bed-selectable:active .editor-wave-bar,
#editorWaveform .vmf-track-rail-lane[data-editor-lane*="audio"] .editor-audio-bed.editor-audio-bed-selectable:active .editor-wave-bar,
#editorWaveform .editor-selection-window-audio-clip:active .editor-overlay-wave,
#editorWaveform .editor-selection-window-audio-clip:active .editor-overlay-wave span {
  cursor: grabbing !important;
}

#editorWaveform .editor-timeline-lane-audio .editor-selection-window[data-editor-window="audio"],
#editorWaveform .vmf-track-rail-lane[data-overlay-drop-kind="audio"] .editor-selection-window[data-editor-window="audio"],
#editorWaveform .vmf-track-rail-lane[data-editor-lane*="audio"] .editor-selection-window[data-editor-window="audio"] {
  background: rgba(249, 115, 22, .06) !important;
}

#editorWaveform .editor-timeline-lane-audio .editor-selection-window[data-editor-window="audio"] .editor-selection-fill,
#editorWaveform .vmf-track-rail-lane[data-overlay-drop-kind="audio"] .editor-selection-window[data-editor-window="audio"] .editor-selection-fill,
#editorWaveform .vmf-track-rail-lane[data-editor-lane*="audio"] .editor-selection-window[data-editor-window="audio"] .editor-selection-fill {
  background: transparent !important;
}

/* VMF patch: make the base Voiceover layer look/select like a timeline clip. */
#editorWaveform .editor-selection-window-audio-base {
  top: 7px !important;
  bottom: 7px !important;
  min-width: 72px !important;
  border: 2px solid rgba(96, 135, 255, .76) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(143, 158, 221, .48), rgba(126, 139, 204, .34)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .48), 0 1px 2px rgba(15, 23, 42, .08) !important;
  cursor: grab !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  z-index: 6 !important;
}

#editorWaveform .editor-selection-window-audio-base.active {
  border-color: #6d8cff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62), 0 0 0 2px rgba(96, 135, 255, .26) !important;
  z-index: 8 !important;
}

#editorWaveform .editor-selection-window-audio-base .editor-selection-fill {
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 28px !important;
  background: transparent !important;
  pointer-events: auto !important;
  cursor: grab !important;
}

#editorWaveform .editor-selection-window-audio-base .editor-selection-fill:active,
#editorWaveform .editor-selection-window-audio-base:active {
  cursor: grabbing !important;
}

#editorWaveform .editor-selection-window-audio-base .editor-audio-inline-label {
  position: static !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 42px !important;
  height: 24px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #111827 !important;
  color: #ffffff !important;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

#editorWaveform .editor-selection-window-audio-base .vmf-audio-clip-handle {
  position: absolute !important;
  top: 5px !important;
  bottom: 5px !important;
  width: 9px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 2px solid #5b82ff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) !important;
  appearance: none !important;
  cursor: ew-resize !important;
  pointer-events: auto !important;
  z-index: 2 !important;
}

#editorWaveform .editor-selection-window-audio-base .vmf-audio-clip-handle-start {
  left: -5px !important;
}

#editorWaveform .editor-selection-window-audio-base .vmf-audio-clip-handle-end {
  right: -5px !important;
}

/* VMF patch: selectable fallback for projects that render Voiceover as only a waveform bed. */
#editorWaveform .editor-audio-bed-selectable {
  top: 6px !important;
  bottom: auto !important;
  left: var(--vmf-audio-left, 0%) !important;
  right: auto !important;
  width: var(--vmf-audio-width, 100%) !important;
  height: calc(100% - 12px) !important;
  min-height: 34px !important;
  z-index: 9 !important;
  display: grid !important;
  align-items: center !important;
  gap: 1px !important;
  border: 2px solid rgba(96, 135, 255, .76) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(143, 158, 221, .48), rgba(126, 139, 204, .34)) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .48), 0 1px 2px rgba(15, 23, 42, .08) !important;
  cursor: grab !important;
  pointer-events: auto !important;
  overflow: hidden !important;
}

#editorWaveform .editor-audio-bed-selectable.active {
  border-color: #6d8cff !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .62), 0 0 0 2px rgba(96, 135, 255, .26) !important;
  z-index: 10 !important;
}

#editorWaveform .editor-audio-bed-selectable .editor-wave-bar {
  opacity: .62 !important;
}

#editorWaveform .editor-audio-bed-selectable .vmf-audio-bed-label {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 24px !important;
  padding: 0 12px !important;
  border-radius: 999px !important;
  background: #111827 !important;
  color: #ffffff !important;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  z-index: 3 !important;
  pointer-events: auto !important;
  cursor: grab !important;
}

#editorWaveform .editor-audio-bed-selectable:active .vmf-audio-bed-label {
  cursor: grabbing !important;
}

#editorWaveform .editor-audio-bed-selectable .vmf-audio-bed-handle {
  position: absolute !important;
  top: 4px !important;
  bottom: 4px !important;
  width: 14px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 2px solid #5b82ff !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9) !important;
  appearance: none !important;
  cursor: ew-resize !important;
  pointer-events: auto !important;
  z-index: 3 !important;
}

#editorWaveform .editor-audio-bed-selectable .vmf-audio-bed-handle-start {
  left: 3px !important;
}

#editorWaveform .editor-audio-bed-selectable .vmf-audio-bed-handle-end {
  right: 3px !important;
}

/* VMF patch: selected audio/Voiceover must read as selected immediately. */
#editorWaveform .editor-selection-window-audio-base.active,
#editorWaveform .editor-audio-bed-selectable.active,
#editorWaveform .editor-selection-window-audio-clip.active {
  border-color: #2563eb !important;
  background: linear-gradient(180deg, rgba(37, 99, 235, .28), rgba(96, 165, 250, .18)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .86),
    0 0 0 2px rgba(37, 99, 235, .36),
    0 0 0 5px rgba(37, 99, 235, .16) !important;
  z-index: 30 !important;
}

#editorWaveform .editor-selection-window-audio-base.active .editor-audio-inline-label,
#editorWaveform .editor-audio-bed-selectable.active .vmf-audio-bed-label,
#editorWaveform .editor-selection-window-audio-clip.active .editor-overlay-name-audio {
  background: #2563eb !important;
  color: #ffffff !important;
}

#editorWaveform .editor-audio-bed-selectable.active .editor-wave-bar,
#editorWaveform .editor-selection-window-audio-clip.active .editor-wave-bar {
  background: #2563eb !important;
  opacity: .86 !important;
}

#editorWaveform .editor-track-row-audio:has(.editor-audio-bed-selectable.active),
#editorWaveform .editor-track-row-audio:has(.editor-selection-window-audio-base.active),
#editorWaveform .editor-track-row:has(.editor-selection-window-audio-clip.active) {
  background: #eef4ff !important;
}

#editorWaveform .editor-track-row-audio:has(.editor-audio-bed-selectable.active) > .editor-track-label,
#editorWaveform .editor-track-row-audio:has(.editor-selection-window-audio-base.active) > .editor-track-label,
#editorWaveform .editor-track-row:has(.editor-selection-window-audio-clip.active) > .editor-track-label {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  box-shadow: inset 3px 0 0 #2563eb, 1px 0 0 #bfdbfe !important;
}

/* VMF patch: undo/redo history disabled state. */
#editorView #editorUndoButton:disabled,
#editorView #editorRedoButton:disabled,
#editorView.vmf-clean-editor-layout-v2 #editorUndoButton:disabled,
#editorView.vmf-clean-editor-layout-v2 #editorRedoButton:disabled {
  opacity: .38 !important;
  color: #94a3b8 !important;
  background: #f8fafc !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* VMF patch: keep the playhead marker above every timeline layer. */
#editorWaveform .editor-ruler-scale > .editor-playhead-marker::after,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker::after {
  height: max(420px, 70vh) !important;
  top: 100% !important;
  bottom: auto !important;
  z-index: 100001 !important;
}

#editorWaveform .editor-timeline-lane > .editor-playhead,
#editorWaveform .vmf-real-empty-track-lane > .editor-playhead,
#editorWaveform .editor-track-lane > .editor-playhead {
  display: block !important;
  top: 0 !important;
  bottom: 0 !important;
  left: var(--editor-playhead-left, var(--vmf-playhead-left, 0%)) !important;
  width: 2px !important;
  border-radius: 0 !important;
  background: #111827 !important;
  box-shadow: none !important;
  transform: translateX(-1px) !important;
  pointer-events: none !important;
  z-index: 100000 !important;
}

#editorWaveform .editor-timeline-lane-audio > .editor-playhead,
#editorWaveform [data-overlay-drop-kind="audio"] > .editor-playhead,
#editorWaveform [data-editor-lane*="audio"] > .editor-playhead {
  display: block !important;
  z-index: 100000 !important;
}

/* VMF patch: force the program monitor to stay true 9:16 on short viewports. */
#editorView .editor-video-stage,
#editorView.vmf-clean-editor-layout-v2 .editor-video-stage,
#editorView.vmf-premiere-effects-mode .editor-video-stage,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-video-stage,
body.editor-empty-program #editorView .editor-video-stage {
  --vmf-program-monitor-height: clamp(280px, min(48vh, calc(100vh - 350px)), 450px) !important;
  aspect-ratio: 9 / 16 !important;
  /* Let aspect-ratio derive the width. CSS multiplication in calc() is not
     consistently supported, and its fallback was a near-square monitor. */
  inline-size: auto !important;
  block-size: var(--vmf-program-monitor-height) !important;
  width: auto !important;
  height: var(--vmf-program-monitor-height) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: var(--vmf-program-monitor-height) !important;
}

#editorView .editor-video-stage > video,
#editorView .editor-video-stage > img,
#editorView .editor-video-stage > .editor-image-preview,
#editorView .editor-video-stage > .editor-empty-state,
#editorView #editorVideo,
#editorView #editorImagePreview,
#editorView #editorEmptyState {
  inline-size: 100% !important;
  block-size: 100% !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
}

/* VMF patch: make the inspected empty canvas paint black across every highlighted pixel. */
#editorView .editor-video-stage.is-blank,
body.editor-empty-program #editorView .editor-video-stage,
#editorView .editor-video-stage.is-blank > #editorEmptyState,
body.editor-empty-program #editorView .editor-video-stage > #editorEmptyState {
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: linear-gradient(#000000, #000000) !important;
  background-clip: border-box !important;
  isolation: isolate !important;
}

#editorView .editor-video-stage.is-blank > #editorEmptyState,
body.editor-empty-program #editorView .editor-video-stage > #editorEmptyState {
  z-index: 1 !important;
}

#editorView .editor-video-stage.is-blank > #editorEmptyState::before,
body.editor-empty-program #editorView .editor-video-stage > #editorEmptyState::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  background: #000000 !important;
  z-index: -1 !important;
}

/* VMF patch: the blank program monitor is the stage itself, not the helper empty-state layer. */
#editorView .editor-video-stage.is-blank,
body.editor-empty-program #editorView .editor-video-stage {
  position: relative !important;
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

#editorView .editor-video-stage.is-blank::before,
body.editor-empty-program #editorView .editor-video-stage::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: #000000 !important;
  background-color: #000000 !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

#editorView .editor-video-stage.is-blank > #editorEmptyState,
body.editor-empty-program #editorView .editor-video-stage > #editorEmptyState {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* A blank caption canvas must be just the black stage plus its text.  Older
   preview helpers can otherwise remain in this stack and obscure the monitor. */
#editorView .editor-video-stage.is-blank > #editorVideo,
#editorView .editor-video-stage.is-blank > #editorImagePreview,
#editorView .editor-video-stage.is-blank > #editorLoadingState,
#editorView .editor-video-stage.is-blank > #editorEmptyState {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#editorView .editor-video-stage.is-blank > #editorTextOverlayLayer {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  background: transparent !important;
}

/* Effects' empty-selection state only changes the sidebar. It must not revive
   the old 315px program-monitor row, which clips a 9:16 stage. */
#editorView.vmf-clean-editor-layout-v2.vmf-effects-only-empty .editor-main {
  grid-template-rows: 46px minmax(0, 1fr) !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-effects-only-empty .editor-stage-card,
#editorView.vmf-clean-editor-layout-v2.vmf-effects-only-empty .editor-preview-shell {
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
}

#editorView.vmf-clean-editor-layout-v2.vmf-effects-only-empty .editor-preview-shell {
  padding: 12px 24px 2px !important;
  grid-template-rows: minmax(0, 1fr) 34px !important;
}

/* Selected layers do not carry the empty-media classes above. Clear the old
   315px max-height there as well, otherwise it clips the same 9:16 monitor. */
#editorView.vmf-clean-editor-layout-v2 .editor-stage-card,
#editorView.vmf-clean-editor-layout-v2 .editor-preview-shell {
  max-height: none !important;
}

/* VMF patch: keep all five timeline rows, including Voiceover, fully visible. */
#editorView .editor-shell,
#editorView.vmf-clean-editor-layout-v2 .editor-shell,
#editorView.vmf-premiere-effects-mode .editor-shell,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-shell {
  grid-template-rows: minmax(360px, 1fr) minmax(300px, 38vh) !important;
}

#editorView .editor-timeline-card,
#editorView.vmf-clean-editor-layout-v2 .editor-timeline-card,
#editorView.vmf-premiere-effects-mode .editor-timeline-card,
#editorView.vmf-clean-editor-layout-v2.vmf-premiere-effects-mode .editor-timeline-card {
  min-height: 300px !important;
  padding-bottom: 14px !important;
  overflow: visible !important;
}

#editorWaveform {
  --vmf-track-row-height: 44px !important;
  margin-bottom: 0 !important;
  padding-bottom: 10px !important;
  overflow: visible !important;
}

#editorWaveform .editor-waveform-scroll {
  max-height: none !important;
  overflow-y: auto !important;
  padding-bottom: 6px !important;
}

#editorWaveform .editor-waveform-canvas {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  padding-bottom: 8px !important;
}

#editorWaveform .editor-timeline-stack,
#editorWaveform .editor-empty-timeline-stack {
  gap: 3px !important;
  row-gap: 3px !important;
  padding-top: 3px !important;
  padding-bottom: 8px !important;
  align-content: start !important;
}

#editorWaveform .editor-track-row,
#editorWaveform .editor-empty-track-row,
#editorWaveform .vmf-track-rail-row,
#editorWaveform .vmf-user-empty-track {
  min-height: var(--vmf-track-row-height) !important;
  height: var(--vmf-track-row-height) !important;
  max-height: var(--vmf-track-row-height) !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

#editorWaveform .editor-track-row-audio,
#editorWaveform .vmf-track-rail-row-audio,
#editorWaveform .editor-track-row:has([data-editor-lane="audio"]) {
  min-height: var(--vmf-track-row-height) !important;
  height: var(--vmf-track-row-height) !important;
  max-height: var(--vmf-track-row-height) !important;
}

#editorWaveform .editor-track-row-audio > .editor-track-label,
#editorWaveform .vmf-track-rail-row-audio > .vmf-track-rail-label,
#editorWaveform .editor-track-row:has([data-editor-lane="audio"]) > .editor-track-label,
#editorWaveform .editor-track-row:has([data-editor-lane="audio"]) > .vmf-track-rail-label,
#editorWaveform .editor-track-row-audio > .editor-timeline-lane,
#editorWaveform .vmf-track-rail-row-audio > .editor-timeline-lane,
#editorWaveform .editor-track-row:has([data-editor-lane="audio"]) > .editor-timeline-lane {
  min-height: var(--vmf-track-row-height) !important;
  height: var(--vmf-track-row-height) !important;
  max-height: var(--vmf-track-row-height) !important;
}

#editorWaveform .editor-audio-bed-selectable {
  top: 6px !important;
  bottom: auto !important;
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
}

/* VMF patch: high-specificity reset for older fixed-height timeline stack rules. */
#editorView #editorWaveform .editor-timeline-stack,
#editorView #editorWaveform .editor-empty-timeline-stack,
#editorView #editorWaveform .vmf-real-empty-renderer-tracks {
  display: flex !important;
  flex-direction: column !important;
  gap: 3px !important;
  row-gap: 3px !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 3px 0 8px !important;
  overflow: visible !important;
  align-content: start !important;
}

#editorView #editorWaveform .editor-timeline-stack > .editor-track-row,
#editorView #editorWaveform .editor-empty-timeline-stack > .editor-track-row,
#editorView #editorWaveform .editor-timeline-stack > .editor-empty-track-row,
#editorView #editorWaveform .editor-empty-timeline-stack > .editor-empty-track-row,
#editorView #editorWaveform .editor-timeline-stack > .vmf-track-rail-row,
#editorView #editorWaveform .editor-empty-timeline-stack > .vmf-track-rail-row {
  min-height: var(--vmf-track-row-height) !important;
  height: var(--vmf-track-row-height) !important;
  max-height: var(--vmf-track-row-height) !important;
  margin: 0 !important;
}

#editorView #editorWaveform .editor-timeline-stack > .editor-track-row > .editor-track-label,
#editorView #editorWaveform .editor-empty-timeline-stack > .editor-track-row > .editor-track-label,
#editorView #editorWaveform .editor-timeline-stack > .editor-track-row > .editor-timeline-lane,
#editorView #editorWaveform .editor-empty-timeline-stack > .editor-track-row > .editor-timeline-lane,
#editorView #editorWaveform .editor-timeline-stack > .vmf-track-rail-row > .vmf-track-rail-label,
#editorView #editorWaveform .editor-empty-timeline-stack > .vmf-track-rail-row > .vmf-track-rail-label,
#editorView #editorWaveform .editor-timeline-stack > .vmf-track-rail-row > .editor-timeline-lane,
#editorView #editorWaveform .editor-empty-timeline-stack > .vmf-track-rail-row > .editor-timeline-lane {
  min-height: var(--vmf-track-row-height) !important;
  height: var(--vmf-track-row-height) !important;
  max-height: var(--vmf-track-row-height) !important;
}

#editorView #editorWaveform .vmf-track-rail-row-captions,
#editorView #editorWaveform .editor-track-row-captions {
  order: 1 !important;
}

#editorView #editorWaveform .vmf-track-rail-row-video,
#editorView #editorWaveform .editor-track-row-video {
  order: 2 !important;
}

#editorView #editorWaveform .vmf-track-rail-row-video-overlay,
#editorView #editorWaveform .editor-track-row-video-overlay {
  order: 3 !important;
}

#editorView #editorWaveform .vmf-track-rail-row-audio-overlay,
#editorView #editorWaveform .editor-track-row-audio-overlay {
  order: 4 !important;
}

#editorView #editorWaveform .vmf-track-rail-row-audio,
#editorView #editorWaveform .editor-track-row-audio {
  order: 5 !important;
}

/* Shortly patch: legacy vmf-effects-tab-blank must never hide the inspector. */
#editorView.vmf-effects-tab-blank #editorTextPanel {
  display: block !important;
}

/* Timeline transport is icon-only: no chip outlines, and solid skip glyphs. */
#editorView .editor-transport-row .editor-transport-button,
#editorView .editor-transport-row .editor-transport-play,
#editorView.vmf-clean-editor-layout-v2 .editor-transport-row .editor-transport-button,
#editorView.vmf-clean-editor-layout-v2 .editor-transport-row .editor-transport-play {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

#editorView .editor-transport-row .editor-transport-button svg,
#editorView.vmf-clean-editor-layout-v2 .editor-transport-row .editor-transport-button svg {
  fill: currentColor !important;
  stroke: none !important;
}

#editorView #editorTransportPlay,
#editorView.vmf-clean-editor-layout-v2 #editorTransportPlay {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  padding: 0 !important;
  border: 1px solid #dbe3ef !important;
  border-radius: 50% !important;
  outline: 0 !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#editorView #editorTransportPlay svg,
#editorView.vmf-clean-editor-layout-v2 #editorTransportPlay svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  stroke: none !important;
}

/* Final program-monitor visibility contract. Several editor layout rules use
   display:block!important for sizing; hidden media must still leave the paint
   stack completely so it cannot cover the active preview. */
#editorView .editor-video-stage > video[hidden],
#editorView .editor-video-stage > img.editor-image-preview[hidden],
#editorView #editorVideo[hidden],
#editorView .editor-image-preview[hidden] {
  display: none !important;
  visibility: hidden !important;
}

/* A poster is a real decoded frame generated at import time.  Keep it painted
   while the browser is buffering the matching video instead of exposing the
   monitor's black loading layer. */
#editorView .editor-video-stage > .editor-image-preview.editor-video-poster-fallback:not([hidden]) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: 2 !important;
  object-fit: cover !important;
  /* If a generated poster has not arrived yet, keep the monitor neutral.
     The old cream fallback looked like a second empty preview card. */
  background: #000 !important;
}

#editorView .editor-video-stage.is-loading > .editor-image-preview.editor-video-poster-fallback:not([hidden]) {
  visibility: visible !important;
}

/* The importer has already extracted this exact source frame.  Keep it above
   the video while the browser decodes the MP4; an indeterminate loader should
   never obscure a usable preview frame. */
#editorView .editor-video-stage.has-poster-fallback > .editor-image-preview.editor-video-poster-fallback:not([hidden]) {
  z-index: 6 !important;
}

#editorView .editor-video-stage.has-poster-fallback .editor-loading-state {
  display: none !important;
}

#editorView .editor-video-stage:has(> .editor-image-preview.editor-video-poster-fallback:not([hidden])) .editor-loading-state {
  background: transparent !important;
  color: rgba(255,255,255,.84) !important;
}

/* Text entered with Enter is a deliberate line break, not whitespace to
   collapse.  This final rule wins over legacy caption-preview defaults. */
#editorView .editor-video-stage .editor-text-overlay {
  white-space: pre-wrap !important;
}

/* Automatic vertical composition: one decoded source, one canvas, one audio clock. */
#editorView .editor-vertical-layout-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #000;
  object-fit: cover;
  pointer-events: auto;
  cursor: pointer;
}

#editorView .editor-vertical-layout-canvas[hidden] {
  display: none !important;
}

#editorView .editor-video-stage.is-vertical-layout-preview > #editorVideo {
  opacity: 0 !important;
  pointer-events: none !important;
}

#editorView .editor-video-stage.is-loading > .editor-vertical-layout-canvas {
  visibility: hidden;
}

.editor-layout-panel {
  padding: 16px;
  overflow-y: auto;
  color: #eef2f7;
}

.editor-layout-empty {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px dashed rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}

.editor-layout-empty p,
.editor-layout-notice {
  margin: 0;
  color: #98a2b3;
  font-size: 12px;
  line-height: 1.45;
}

.editor-layout-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  color: #aeb7c5;
  font-size: 11px;
}

.editor-layout-badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 4px 8px;
  border: 1px solid rgba(244, 114, 182, .32);
  border-radius: 999px;
  background: rgba(190, 24, 93, .13);
  color: #f9a8d4;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.editor-layout-badge[data-tier="automatic"] {
  border-color: rgba(52, 211, 153, .32);
  background: rgba(16, 185, 129, .12);
  color: #6ee7b7;
}

.editor-layout-badge[data-tier="review"] {
  border-color: rgba(251, 191, 36, .34);
  background: rgba(245, 158, 11, .12);
  color: #fcd34d;
}

.editor-layout-notice {
  min-height: 34px;
  margin-bottom: 14px;
  padding: 9px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.editor-layout-field,
.editor-layout-toggle {
  display: grid;
  gap: 7px;
  color: #cbd2dd;
  font-size: 11px;
  font-weight: 650;
}

.editor-layout-field select,
.editor-layout-crop-grid input {
  width: 100%;
  min-height: 34px;
  box-sizing: border-box;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 7px;
  background: #171a20;
  color: #f8fafc;
  padding: 6px 8px;
}

.editor-layout-field input[type="range"] {
  width: 100%;
  accent-color: #ff2f87;
}

.editor-layout-control-group {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.editor-layout-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #f5f7fa;
  font-size: 11px;
}

.editor-layout-group-head span,
.editor-layout-group-head output {
  color: #8f99a8;
  font-size: 10px;
}

.editor-layout-crop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.editor-layout-crop-grid label {
  display: grid;
  gap: 5px;
  color: #8f99a8;
  font-size: 10px;
}

.editor-layout-wide-button {
  width: 100%;
  min-height: 34px;
}

.editor-layout-toggle {
  grid-template-columns: auto 1fr;
  align-items: center;
  margin-top: 15px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(255,255,255,.035);
}

.editor-layout-toggle input {
  accent-color: #ff2f87;
}

.editor-layout-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 15px;
}

.editor-layout-actions button {
  min-width: 220px;
  min-height: 36px;
  padding-inline: 8px;
  font-size: 10px;
}

/* Rename projects in the same warm Shortly visual language as the rest of
   the product: restrained orange surface accents with the signature CTA. */
#renameProjectModal {
  background: rgba(35, 25, 20, .46) !important;
  backdrop-filter: blur(5px);
}

#renameProjectModal .rename-project-dialog {
  border-color: rgba(249, 115, 22, .22) !important;
  background: linear-gradient(145deg, #ffffff 0%, #fffaf6 100%) !important;
  box-shadow: 0 24px 56px rgba(116, 50, 15, .24), 0 1px 0 rgba(255, 255, 255, .92) inset !important;
}

#renameProjectModal .feedback-head h2 {
  color: #1f2937 !important;
}

#renameProjectModal .rename-project-field input {
  border-color: #f1d8c6 !important;
  background: #fffdfb !important;
}

#renameProjectModal .rename-project-field input:focus {
  border-color: #f97316 !important;
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .16) !important;
}

#renameProjectModal .rename-project-actions .quiet-button {
  border-color: #f3d5bf !important;
  background: #fffaf6 !important;
  color: #9a3412 !important;
}

#renameProjectModal .rename-project-actions .quiet-button:hover {
  background: #fff0e6 !important;
}

#renameProjectModal .rename-project-actions .feedback-submit {
  border: 0 !important;
  background: linear-gradient(180deg, #ff7a2f 0%, #f55a1f 100%) !important;
  box-shadow: 0 10px 22px rgba(245, 90, 31, .24) !important;
}

#renameProjectModal .rename-project-actions .feedback-submit:hover {
  filter: brightness(1.035);
  transform: translateY(-1px);
}

#renameProjectModal .icon-close:hover {
  color: #ea580c !important;
  background: #fff0e6 !important;
  border-radius: 8px;
}

/* One playhead belongs above the full timeline, not hidden independently in
   every lane.  The ruler owns the continuous stem so it stays aligned at all
   zoom levels and never drops behind the track rows. */
#editorWaveform .editor-ruler-scale {
  z-index: 70 !important;
  overflow: visible !important;
}

#editorWaveform .editor-ruler-scale::after {
  content: "" !important;
  position: absolute !important;
  top: 14px !important;
  left: var(--vmf-playhead-left, var(--editor-playhead-left, 0%)) !important;
  width: 2px !important;
  height: 100vh !important;
  transform: translateX(-50%) !important;
  background: #111827 !important;
  border-radius: 999px !important;
  pointer-events: none !important;
  z-index: 60 !important;
}

#editorWaveform .editor-ruler-scale > .editor-playhead-marker,
#editorWaveform .editor-ruler-scale > [data-editor-playhead].editor-playhead-marker {
  top: 0 !important;
  z-index: 80 !important;
}

#editorWaveform .editor-ruler-scale > .editor-ruler-tick {
  top: 20px !important;
}

/* Timeline lanes read top-to-bottom: Media 1–6, then Audio 1–6. */
#editorView #editorWaveform .vmf-track-rail-row-audio,
#editorView #editorWaveform .editor-track-row-audio {
  order: 4 !important;
}

#editorView #editorWaveform .vmf-track-rail-row-audio-overlay,
#editorView #editorWaveform .editor-track-row-audio-overlay {
  order: 5 !important;
}

/* Do not blank the sidebar while the video effects replacement mounts.  The
   previous controls remain visible for that brief hand-off, then the modern
   panel replaces them once its markup is ready. */
#editorView.vmf-premiere-effects-mode #editorEffectsVideoSection.vmf-premiere-loading > .editor-effects-card,
#editorView.vmf-premiere-effects-mode #editorEffectsVideoSection.vmf-premiere-loading > .vmf-keyframe-panel-mount {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

#editorView.vmf-premiere-effects-mode #editorEffectsVideoSection.vmf-premiere-loading > .vmf-premiere-effects-mount:empty {
  display: none !important;
  min-height: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Each caption is an independently placed timeline clip.  Keep it out of
   normal document flow so adding another caption cannot push it below the
   44px lane and have it clipped by the row. */
#editorWaveform .editor-timeline-lane-captions > .editor-selection-window-overlay.editor-selection-window-text-clip {
  position: absolute !important;
  top: 3px !important;
  bottom: auto !important;
  height: 36px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Keep new tracks in the same fixed timeline container.  Once a sixth lane
   exists, use the same shared lane measurement everywhere rather than
   allowing the last audio row to fall below the visible edge. */
#editorView.vmf-timeline-compact #editorWaveform {
  --vmf-track-row-height: 36px !important;
}

#editorView.vmf-timeline-compact #editorWaveform .editor-audio-bed-selectable {
  top: 4px !important;
  height: 28px !important;
  min-height: 28px !important;
  max-height: 28px !important;
}

/* Nine total lanes (Captions + 4 Media + 4 Audio) remain visible together. */
#editorView.vmf-timeline-dense #editorWaveform {
  --vmf-track-row-height: 27px !important;
}

#editorView.vmf-timeline-dense #editorWaveform .editor-audio-bed-selectable {
  top: 3px !important;
  height: 21px !important;
  min-height: 21px !important;
  max-height: 21px !important;
}

/* Numeric audio order must win over DOM timing: Audio 1, 2, 3, 4, etc. */
#editorView #editorWaveform .editor-track-row-audio,
#editorView #editorWaveform .vmf-track-rail-row-audio {
  order: 40 !important;
}

#editorView #editorWaveform .editor-track-row-audio-overlay,
#editorView #editorWaveform .vmf-track-rail-row-audio-overlay {
  order: calc(40 + var(--vmf-track-index, 1)) !important;
}

/* Added tracks have a direct delete control as well as the right-click menu. */
#editorWaveform .editor-track-label-secondary .editor-track-label-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin-left: auto !important;
}

#editorWaveform .editor-track-label-secondary .editor-track-action-button {
  display: none !important;
}

#editorWaveform .editor-track-delete-button {
  display: grid !important;
  place-items: center !important;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: transparent !important;
  color: #9ca3af !important;
  cursor: pointer !important;
}

#editorWaveform .editor-track-delete-button svg {
  width: 14px !important;
  height: 14px !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
}

#editorWaveform .editor-track-delete-button:hover,
#editorWaveform .editor-track-delete-button:focus-visible {
  background: #fff1eb !important;
  color: #ea580c !important;
}

/* Keep preview startup simple, branded, and legible while the video decoder
   prepares its first frame. */
#editorView .editor-loading-state {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 12px !important;
  background: #000 !important;
  color: #fff !important;
}

/* The preview controller uses the native hidden attribute once a playable
   frame is ready. Keep this after the branded loader rules so the forced
   display declaration above cannot leave a completed, paused preview covered. */
#editorView .editor-loading-state[hidden] {
  display: none !important;
}

#editorView .editor-loading-logo {
  display: block !important;
  width: 78px !important;
  height: 78px !important;
  min-width: 78px !important;
  min-height: 78px !important;
  max-width: 78px !important;
  max-height: 78px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 8px 16px rgba(255, 101, 20, .22));
  animation: none !important;
}

#editorView .editor-loading-label {
  position: static !important;
  display: block !important;
  margin: 0 !important;
  color: rgba(255, 255, 255, .94) !important;
  font-family: "SF Pro Display", Arial, sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .01em !important;
  line-height: 1.2 !important;
  text-transform: none !important;
}

/* Shortly Clip Matcher */
.clip-matcher-view {
  min-height: calc(100vh - 72px);
  padding: clamp(28px, 5vw, 72px);
  background:
    radial-gradient(circle at 18% 8%, rgba(255, 145, 0, .16), transparent 32%),
    radial-gradient(circle at 84% 16%, rgba(255, 92, 0, .10), transparent 30%),
    linear-gradient(180deg, #fff, #fffaf5 58%, #fff);
}

.clip-matcher-shell {
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 22px;
}

.clip-matcher-hero {
  text-align: center;
  display: grid;
  gap: 10px;
  justify-items: center;
}

.clip-matcher-hero h1 {
  margin: 0;
  max-width: 760px;
  color: #111827;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(42px, 6vw, 72px);
  line-height: .92;
  letter-spacing: -.055em;
}

.clip-matcher-hero p:not(.panel-kicker) {
  max-width: 680px;
  margin: 0;
  color: #7a8494;
  font-size: 18px;
  line-height: 1.5;
  font-weight: 700;
}

.clip-matcher-card,
.clip-matcher-status,
.clip-matcher-results {
  border: 1px solid rgba(17, 24, 39, .08);
  border-radius: 28px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 28px 70px rgba(17, 24, 39, .08), 0 18px 46px rgba(255, 105, 0, .08);
  backdrop-filter: blur(16px);
}

.clip-matcher-card {
  display: grid;
  gap: 18px;
  padding: 20px;
}

.clip-matcher-upload {
  min-height: 190px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 26px;
  border: 1px dashed rgba(255, 105, 0, .36);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 145, 0, .17), transparent 45%),
    linear-gradient(180deg, #fffaf5, #fff);
  color: #111827;
  text-align: center;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.clip-matcher-upload:hover,
.clip-matcher-upload:focus-within {
  transform: translateY(-1px);
  border-color: rgba(255, 105, 0, .64);
  box-shadow: 0 18px 36px rgba(255, 105, 0, .12);
}

.clip-matcher-upload-icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #ff9d13, #ff5a00);
  color: #fff;
  box-shadow: 0 16px 30px rgba(255, 105, 0, .22);
}

.clip-matcher-upload-icon svg {
  width: 28px;
  height: 28px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clip-matcher-upload strong {
  font-size: 18px;
  font-weight: 900;
}

.clip-matcher-upload small {
  color: #7a8494;
  font-weight: 750;
}

.clip-matcher-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(190px, .65fr);
  gap: 14px;
}

.clip-matcher-fields label {
  display: grid;
  gap: 8px;
  color: #677386;
  font-size: 13px;
  font-weight: 850;
}

.clip-matcher-fields input,
.clip-matcher-fields select {
  min-height: 52px;
  border: 1px solid rgba(17, 24, 39, .10);
  border-radius: 16px;
  background: #fff;
  color: #111827;
  padding: 0 16px;
  font: inherit;
  font-weight: 800;
  outline: none;
}

.clip-matcher-fields input:focus,
.clip-matcher-fields select:focus {
  border-color: rgba(255, 105, 0, .62);
  box-shadow: 0 0 0 4px rgba(255, 105, 0, .12);
}

.clip-matcher-submit {
  min-height: 56px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(135deg, #ff9d13, #ff5a00);
  color: #fff;
  font-weight: 950;
  box-shadow: 0 18px 36px rgba(255, 105, 0, .22);
  cursor: pointer;
}

.clip-matcher-submit:disabled {
  opacity: .65;
  cursor: wait;
}

.clip-matcher-status {
  padding: 16px 18px;
  color: #6b7280;
  font-weight: 850;
}

.clip-matcher-results {
  padding: 18px;
  display: grid;
  gap: 14px;
}

.clip-matcher-results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.clip-matcher-results-head h2 {
  margin: 0;
  color: #111827;
  font-size: 22px;
}

.clip-matcher-engine-note {
  color: #8a94a6;
  font-size: 12px;
  font-weight: 800;
}

.clip-matcher-result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.clip-matcher-result {
  padding: 16px;
  border: 1px solid rgba(255, 105, 0, .16);
  border-radius: 20px;
  background: linear-gradient(180deg, #fff, #fff8f0);
  box-shadow: 0 12px 28px rgba(17, 24, 39, .06);
}

.clip-matcher-result strong {
  display: block;
  color: #111827;
  font-size: 24px;
  font-weight: 950;
}

.clip-matcher-result span {
  display: block;
  margin-top: 4px;
  color: #ff6900;
  font-size: 13px;
  font-weight: 900;
}

.clip-matcher-result p {
  margin: 10px 0 0;
  color: #7a8494;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.35;
}

@media (max-width: 860px) {
  .clip-matcher-fields,
  .clip-matcher-result-grid {
    grid-template-columns: 1fr;
  }
}
body.clip-matcher-mode #createView,
body.clip-matcher-mode #projectsView,
body.clip-matcher-mode #projectDetail {
  display: none !important;
}

.clip-matcher-mode-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.clip-matcher-mode-picker {
  position: relative;
  min-width: 220px;
}

.clip-matcher-mode-trigger {
  width: 100%;
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
  border: 1px solid rgba(255, 105, 0, .18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 145, 0, .12), transparent 44%),
    linear-gradient(180deg, #fff, #fffaf5);
  color: #111827;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-weight: 900;
  text-align: left;
  box-shadow: 0 10px 22px rgba(17, 24, 39, .05);
}

.clip-matcher-mode-trigger svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ff6900;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .16s ease;
}

.clip-matcher-mode-picker.is-open .clip-matcher-mode-trigger {
  border-color: rgba(255, 105, 0, .62);
  box-shadow: 0 0 0 4px rgba(255, 105, 0, .12), 0 18px 34px rgba(255, 105, 0, .12);
}

.clip-matcher-mode-picker.is-open .clip-matcher-mode-trigger svg {
  transform: rotate(180deg);
}

.clip-matcher-mode-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  display: grid;
  gap: 5px;
  padding: 7px;
  border: 1px solid rgba(255, 105, 0, .16);
  border-radius: 16px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 22px 48px rgba(17, 24, 39, .15), 0 14px 30px rgba(255, 105, 0, .12);
  backdrop-filter: blur(14px);
}

.clip-matcher-mode-menu[hidden] {
  display: none !important;
}

.clip-matcher-mode-menu button {
  min-height: 42px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: #111827;
  padding: 0 12px;
  font-family: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
  font-weight: 850;
  text-align: left;
}

.clip-matcher-mode-menu button:hover,
.clip-matcher-mode-menu button:focus-visible,
.clip-matcher-mode-menu button[aria-selected="true"] {
  color: #fff;
  background: linear-gradient(135deg, #ff9d13, #ff5a00);
  outline: none;
  box-shadow: 0 10px 20px rgba(255, 105, 0, .20);
}
.video-downloader-view {
  min-height: calc(100vh - 64px);
  padding: clamp(36px, 7vh, 80px) 32px 48px;
  overflow-y: auto;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 137, 22, 0.13), transparent 31rem),
    linear-gradient(180deg, #fffdfb 0%, #ffffff 58%, #fff8f2 100%);
}

.video-downloader-shell {
  width: min(780px, 100%);
  margin: 0 auto;
  text-align: center;
  color: #111827;
  font-family: "SF Pro Display", Arial, sans-serif;
}

.video-downloader-hero {
  display: grid;
  justify-items: center;
}

.video-downloader-brand {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  border: 1px solid rgba(255, 115, 0, 0.16);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 18px 48px rgba(255, 102, 0, 0.18);
}

.video-downloader-brand img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.video-downloader-eyebrow {
  margin-bottom: 10px;
  color: #f15a16;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.video-downloader-hero h1 {
  margin: 0;
  color: #101827;
  font-size: clamp(38px, 5vw, 58px);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}

.video-downloader-hero p {
  max-width: 570px;
  margin: 18px 0 30px;
  color: #6c7482;
  font-size: 16px;
  font-weight: 550;
  line-height: 1.55;
}

.video-downloader-card {
  padding: 14px;
  border: 1px solid #e7e9ee;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 70px rgba(17, 24, 39, 0.1), 0 10px 30px rgba(255, 111, 0, 0.08);
  text-align: left;
  backdrop-filter: blur(18px);
}

.video-downloader-url-wrap {
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 9px 8px 16px;
  border: 1.5px solid #dfe3e9;
  border-radius: 17px;
  background: #f8f9fb;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}

.video-downloader-url-wrap:focus-within {
  border-color: #ff7a00;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 122, 0, 0.11);
}

.video-downloader-platform-icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  color: #ff6b00;
}

.video-downloader-platform-icon svg,
.video-downloader-paste svg,
.video-downloader-mode svg,
.video-downloader-submit svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#videoDownloaderUrl {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  background: transparent;
  color: #111827;
  font: 650 15px/1.2 "SF Pro Display", Arial, sans-serif;
}

#videoDownloaderUrl::placeholder {
  color: #9299a5;
}

.video-downloader-clear {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e9ebef;
  color: #626b78;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.video-downloader-paste {
  height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 15px;
  border: 1px solid #e3e5e9;
  border-radius: 12px;
  background: #fff;
  color: #313846;
  font: 750 13px/1 "SF Pro Display", Arial, sans-serif;
  cursor: pointer;
}

.video-downloader-paste svg {
  width: 17px;
  height: 17px;
}

.video-downloader-controls {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 16px;
  margin-top: 14px;
}

.video-downloader-modes {
  display: flex;
  gap: 7px;
  padding: 5px;
  border-radius: 14px;
  background: #f2f3f6;
}

.video-downloader-mode {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  border-radius: 10px;
  color: #656d7a;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.video-downloader-mode input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.video-downloader-mode svg {
  width: 17px;
  height: 17px;
}

.video-downloader-mode.active {
  background: #fff;
  color: #f15a16;
  box-shadow: 0 3px 12px rgba(15, 23, 42, 0.09);
}

.video-downloader-quality {
  min-width: 170px;
  display: grid;
  gap: 6px;
  color: #737b88;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.video-downloader-quality select {
  height: 46px;
  padding: 0 36px 0 13px;
  border: 1px solid #e0e3e8;
  border-radius: 12px;
  outline: 0;
  background: #f8f9fb;
  color: #202735;
  font: 700 13px/1 "SF Pro Display", Arial, sans-serif;
}

.video-downloader-preview {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 13px;
  margin-top: 14px;
  padding: 10px;
  border: 1px solid #ece4dc;
  border-radius: 16px;
  background: #fffaf6;
}

.video-downloader-preview[hidden] {
  display: none;
}

.video-downloader-preview img {
  width: 88px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  background: #eceff3;
}

.video-downloader-preview-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.video-downloader-preview-copy strong {
  overflow: hidden;
  color: #171d29;
  font-size: 14px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-downloader-preview-copy small {
  color: #7b8492;
  font-size: 12px;
  font-weight: 600;
}

.video-downloader-platform {
  width: max-content;
  color: #f15a16;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.video-downloader-ready {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff0e3;
  color: #ff6b00;
  font-size: 14px;
  font-weight: 900;
}

.video-downloader-progress {
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(255, 111, 0, 0.2);
  border-radius: 16px;
  background: linear-gradient(180deg, #fff8f1 0%, #fff 100%);
  box-shadow: 0 14px 26px rgba(255, 115, 0, 0.11);
}

.video-downloader-progress[hidden] {
  display: none;
}

.video-downloader-progress-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #171d29;
  font-size: 13px;
  font-weight: 800;
}

.video-downloader-progress-top strong {
  color: #ff6500;
  font-size: 12px;
  font-weight: 900;
}

.video-downloader-progress-track {
  height: 11px;
  overflow: hidden;
  border-radius: 999px;
  background: #f1e6dc;
}

.video-downloader-progress-track span {
  width: 0%;
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(105deg, #ff9418 0%, #ff7100 45%, #ff4d16 100%);
  box-shadow: 0 0 18px rgba(255, 107, 0, 0.36);
  transition: width 240ms ease;
}

.video-downloader-status {
  min-height: 0;
  margin: 12px 0;
  padding: 10px 14px;
  border: 1px solid rgba(255, 111, 0, 0.13);
  border-radius: 13px;
  background: #fffaf6;
  color: #7a8290;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-align: center;
}

.video-downloader-status:empty {
  display: none;
}

.video-downloader-status.error {
  border-color: rgba(199, 55, 34, 0.18);
  background: #fff6f4;
  color: #c73722;
}

.video-downloader-submit {
  width: 100%;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 15px;
  background: linear-gradient(105deg, #ff9418 0%, #ff7100 45%, #ff4d16 100%);
  box-shadow: 0 15px 28px rgba(255, 100, 0, 0.24);
  color: #fff;
  font: 800 15px/1 "SF Pro Display", Arial, sans-serif;
  cursor: pointer;
  transition: transform 150ms ease, filter 150ms ease;
}

.video-downloader-submit:hover {
  filter: saturate(1.08) brightness(1.02);
  transform: translateY(-1px);
}

.video-downloader-submit:disabled {
  cursor: wait;
  filter: grayscale(0.2);
  opacity: 0.72;
  transform: none;
}

.video-downloader-submit svg {
  width: 19px;
  height: 19px;
}

.video-downloader-note {
  margin: 12px 0 2px;
  color: #9a9faa;
  font-size: 11px;
  font-weight: 550;
  text-align: center;
}

.video-downloader-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  margin-top: 22px;
  color: #8b929d;
  font-size: 12px;
  font-weight: 750;
}

.video-downloader-platforms i {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ff7a00;
}

body.video-downloader-page .app-content {
  overflow-y: auto;
}

/* Shortly caption preset font lock
   Keep every preset preview tied to its real render font/style. */
.preset-chip,
.editor-text-preset-chip,
.onboarding-template-chip {
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  user-select: none !important;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none !important;
  text-decoration: none !important;
  background: linear-gradient(145deg, #3b3e45, #25282e) !important;
}

.preset-chip::selection,
.preset-chip *::selection,
.editor-text-preset-chip::selection,
.editor-text-preset-chip *::selection,
.onboarding-template-chip::selection,
.onboarding-template-chip *::selection {
  background: transparent !important;
  color: inherit !important;
}

.preset-chip-viral {
  font-family: "Arial Uploaded", Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: .95 !important;
  color: #ffffff !important;
  -webkit-text-stroke: 2px #000000 !important;
  paint-order: stroke fill !important;
  text-shadow: none !important;
  text-transform: none !important;
}

.preset-chip-arial {
  font-family: "Arial Uploaded", "Arial Narrow", Arial, "SF Pro Display", sans-serif !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  line-height: .95 !important;
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  text-transform: none !important;
}

.preset-chip-burbank {
  font-family: "Burbank Big Black", "Bebas Neue", Impact, sans-serif !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  letter-spacing: .015em !important;
  line-height: .9 !important;
  color: #ffe600 !important;
  -webkit-text-stroke: 2px #050505 !important;
  paint-order: stroke fill !important;
  text-shadow: 0 2px 0 #050505, 0 4px 6px rgba(0,0,0,.62) !important;
  text-transform: uppercase !important;
}

.preset-chip-komika {
  font-family: "Komika Axis", "Bebas Neue", Impact, sans-serif !important;
  font-size: 21px !important;
  font-weight: 400 !important;
  letter-spacing: .005em !important;
  line-height: .9 !important;
  color: #ffffff !important;
  -webkit-text-stroke: 1.15px #111827 !important;
  paint-order: stroke fill !important;
  text-shadow: 2px 2px 0 #13233c, 0 4px 7px rgba(0,0,0,.42) !important;
  text-transform: none !important;
}

.preset-chip-tiktok {
  font-family: "TikTok Display", "SF Pro Display", sans-serif !important;
  font-size: 31px !important;
  font-weight: 800 !important;
  line-height: .9 !important;
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  text-transform: none !important;
}

.preset-chip-tommy {
  font-family: "Made Tommy", "SF Pro Display", sans-serif !important;
  font-size: 29px !important;
  font-weight: 800 !important;
  line-height: .92 !important;
  color: #ffffff !important;
  -webkit-text-stroke: 1px #101827 !important;
  paint-order: stroke fill !important;
  text-shadow: 2px 2px 0 #0d2449, 0 4px 6px rgba(0,0,0,.45) !important;
  text-transform: none !important;
}

.preset-chip-lemon {
  font-family: "Lemon Milk", "Bebas Neue", sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: .035em !important;
  line-height: .9 !important;
  color: #ffffff !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: 0 8px 14px rgba(0,0,0,.48) !important;
  text-transform: uppercase !important;
}

.preset-chip-tiktok-whitebox {
  font-family: "TikTok Display", "SF Pro Display", sans-serif !important;
  font-size: 27px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
}

.preset-chip-tiktok-whitebox span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 18px !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #111827 !important;
}

.preset-chip-coolvetica {
  font-family: "Coolvetica", "SF Pro Display", sans-serif !important;
  font-size: 31px !important;
  font-weight: 400 !important;
  line-height: .9 !important;
  color: #ffffff !important;
  -webkit-text-stroke: 1px #101827 !important;
  paint-order: stroke fill !important;
  text-shadow: 2px 2px 0 #0d2449, 0 4px 6px rgba(0,0,0,.42) !important;
  text-transform: none !important;
}

.editor-text-preset-chip.preset-chip-viral,
.onboarding-template-chip.preset-chip-viral { font-size: 31px !important; }
.editor-text-preset-chip.preset-chip-arial,
.onboarding-template-chip.preset-chip-arial { font-size: 25px !important; }
.editor-text-preset-chip.preset-chip-burbank,
.onboarding-template-chip.preset-chip-burbank { font-size: 23px !important; }
.editor-text-preset-chip.preset-chip-komika,
.onboarding-template-chip.preset-chip-komika { font-size: 19px !important; }
.editor-text-preset-chip.preset-chip-tiktok,
.onboarding-template-chip.preset-chip-tiktok { font-size: 27px !important; }
.editor-text-preset-chip.preset-chip-tommy,
.onboarding-template-chip.preset-chip-tommy { font-size: 25px !important; }
.editor-text-preset-chip.preset-chip-lemon,
.onboarding-template-chip.preset-chip-lemon { font-size: 19px !important; }
.editor-text-preset-chip.preset-chip-coolvetica,
.onboarding-template-chip.preset-chip-coolvetica { font-size: 27px !important; }

@media (max-width: 720px) {
  .video-downloader-view {
    padding: 28px 16px 36px;
  }

  .video-downloader-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .video-downloader-modes {
    justify-content: stretch;
  }

  .video-downloader-mode {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 8px;
  }

  .video-downloader-quality {
    width: 100%;
  }

  .video-downloader-paste {
    width: 44px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
}