/* Identidad visual XENA: grafito liso, violeta de marca y turquesa funcional. */
:root {
  --bg: #101116;
  --panel: #191a22;
  --line: rgba(210, 208, 230, .13);
  --muted: #a5a5b5;
  --text: #f4f3f8;
  --lime: #a99bff;
  --lime-soft: rgba(169, 155, 255, .13);
  --cyan: #3ed6c6;
  --orange: #ff8d75;
  --surface-1: #171820;
  --surface-2: #1d1e28;
}

:root[data-accent="teal"] { --lime: #3ed6c6; --lime-soft: rgba(62,214,198,.14); --cyan: #a99bff; }
:root[data-accent="amber"] { --lime: #ffcb66; --lime-soft: rgba(255,203,102,.14); --cyan: #7fd5ff; }
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e9eaf0;
  --panel: #fbfbfd;
  --line: rgba(34, 37, 52, .17);
  --muted: #555b6c;
  --text: #20212a;
  --surface-1: #f7f8fb;
  --surface-2: #e2e4eb;
  --cyan: #007d75;
}

html, body { background: var(--bg); }
[hidden] { display: none !important; }
body { background-color: var(--bg); background-image: none; }
.ambient { display: none; }
.topbar, main, footer { width: min(1440px, calc(100% - 64px)); }
.xena-topbar {
  position: relative;
  z-index: 20;
  min-height: 76px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(14px, 2.3vw, 32px);
  border-bottom-color: rgba(210, 208, 230, .12);
}
.brand { gap: 9px; letter-spacing: -.035em; }
.brand-mark { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 11px; box-shadow: 0 5px 20px rgba(169,155,255,.2); }
.brand-mark svg { width: 29px; height: 29px; }
.brand small { border-color: rgba(169,155,255,.27); color: #b9afff; background: rgba(169,155,255,.07); }
.app-tabs {
  justify-self: center;
  max-width: 100%;
  gap: 3px;
  padding: 4px;
  border-color: rgba(210,208,230,.12);
  border-radius: 13px;
  background: #171820;
}
.app-tabs button {
  min-width: 0;
  padding: 10px clamp(9px, 1.15vw, 16px);
  border-radius: 9px;
  color: #a8a8b7;
  font-size: 12px;
  white-space: nowrap;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.app-tabs button:hover { color: var(--text); background: rgba(255,255,255,.045); }
.app-tabs button.active {
  color: #17141f;
  background: var(--lime);
  box-shadow: 0 3px 12px rgba(169,155,255,.2);
}
.header-actions { min-width: 0; }
.admin-open, .account-open { border-color: rgba(210,208,230,.15); background: #191a22; }
.account-avatar { color: #17141f; background: var(--lime); }
.login-screen { position: fixed; inset: 0; z-index: 1000; display: grid; align-content: center; justify-items: center; min-height: 100dvh; padding: 24px; overflow-y: auto; box-sizing: border-box; background: var(--bg); }
.login-brand-lockup { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto 18px; color: var(--text); font: 800 23px/1 Manrope, sans-serif; letter-spacing: .1em; }
.login-brand-lockup .brand-mark { display: inline-grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(169,155,255,.25); border-radius: 15px; color: #17141f; background: var(--lime); }
.login-brand-lockup svg { width: 29px; height: 29px; }
.login-brand-lockup .brand-spark { fill: #3ed6c6; }
.login-panel { margin: auto; padding: 30px; border: 1px solid rgba(210,208,230,.13); border-radius: 20px; background: #171820; box-shadow: 0 24px 80px rgba(0,0,0,.32); }
.login-panel > h1 { margin: 0 0 20px; text-align: center; font-size: 27px; letter-spacing: -.04em; }
.login-panel { width: min(420px,100%); max-width: 100%; min-width: 0; box-sizing: border-box; }
.login-panel > * { min-width: 0; max-width: 100%; }
.login-panel label { min-width: 0; overflow-wrap: anywhere; }
.login-panel input { width: 100%; min-width: 0; box-sizing: border-box; }
.login-panel .primary-button, .login-panel .register-switch { min-width: 0; max-width: 100%; white-space: normal; }
.login-screen:has(#registerForm:not(.hidden)) { align-content: start; }

/* El recorrido de Crear se mantiene paso a paso, con superficies homogéneas. */
.hero.phase-two-hero { padding-top: 42px; }
.hero.phase-two-hero .eyebrow { color: #b9afff; }
.hero.phase-two-hero h1 { letter-spacing: -.06em; }
.hero.phase-two-hero h1 em { color: var(--lime); }
.workspace, .projects-page, .producer-card, .live-card, .reframe-source-card,
.reframe-editor-card, .standalone-caption-card, .studio-card {
  border-color: rgba(210,208,230,.13);
  background: #171820;
  box-shadow: 0 18px 50px rgba(0,0,0,.18);
}
.workspace.studio { max-width: 1180px; }
.studio-accordion[open] > .section-heading { background: rgba(169,155,255,.055); }
.section-number { border-color: rgba(169,155,255,.34); }
.section-heading > i { border-color: #9794a8; }
.section-toggle.active { border-color: rgba(169,155,255,.35); }
.section-toggle.active > i { background: rgba(169,155,255,.46); }
.section-toggle.active > i::after { background: var(--lime); }
.dropzone { background: #14151b; }
.dropzone:hover, .dropzone.dragging { background: rgba(169,155,255,.1); }
.primary-button { color: #17141f; }
.secondary-button:hover, button:not(:disabled):focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
.control-card, .production-preset-card, .color-grade-option,
.recent-project, .clip-card, .draft-card, .publication-card {
  border-color: rgba(210,208,230,.13);
}
.production-preset-card:hover, .color-grade-option:hover,
.recent-project:hover { border-color: rgba(169,155,255,.55); }

/* Crear como un recorrido de cuatro pasos con vista previa persistente. */
.guided-flow-form { --flow-accent: #a99bff; }
.guided-step-nav {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin: 0 0 10px;
  padding: 0 20px;
}
.guided-step-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 50px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: #9293a3;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: .18s ease;
}
.guided-step-nav button::after {
  position: absolute;
  right: -8px;
  width: 8px;
  height: 1px;
  background: rgba(210,208,230,.2);
  content: "";
}
.guided-step-nav button:last-child::after { display: none; }
.guided-step-nav button i {
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(210,208,230,.2);
  border-radius: 50%;
  color: #a3a4b3;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.guided-step-nav button span { overflow: hidden; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.guided-step-nav button:hover { color: var(--text); background: rgba(255,255,255,.035); }
.guided-step-nav button.active { border-color: rgba(169,155,255,.25); color: var(--text); background: rgba(169,155,255,.09); }
.guided-step-nav button.active i, .guided-step-nav button.done i { border-color: var(--lime); color: #17141f; background: var(--lime); }
.guided-step-nav button.done { color: #d8d5ea; }
.guided-progress { height: 3px; margin: 0 30px 22px; overflow: hidden; border-radius: 99px; background: rgba(210,208,230,.1); }
.guided-progress span { display: block; width: 25%; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--lime),var(--cyan)); transition: width .24s ease; }
.guided-step-intro { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding: 0 30px 20px; }
.guided-step-intro .eyebrow { margin-bottom: 6px; color: #b9afff; font-size: 9px; letter-spacing: .12em; }
.guided-step-intro .eyebrow b { color: var(--text); }
.guided-step-intro h2 { margin: 0 0 5px; font: 800 clamp(20px,2.7vw,27px)/1.15 "Manrope",sans-serif; letter-spacing: -.04em; }
.guided-step-intro p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.guided-stage-badge { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: #c4c2d5; background: var(--surface-2); font-size: 10px; }
.guided-workbench { display: grid; grid-template-columns: minmax(0,1.28fr) minmax(270px,.72fr); gap: 16px; align-items: start; padding: 0 18px; }
.guided-step-content { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #14151b; }
.guided-accordion-stack > [data-flow-stage]:not([hidden]) { display: none; }
.guided-flow-form[data-current-step="material"] .guided-accordion-stack > [data-flow-stage="material"]:not([hidden]),
.guided-flow-form[data-current-step="momentos"] .guided-accordion-stack > [data-flow-stage="momentos"]:not([hidden]),
.guided-flow-form[data-current-step="diseno"] .guided-accordion-stack > [data-flow-stage="diseno"]:not([hidden]) { display: block; }
.guided-step-content .studio-section { border-bottom: 1px solid rgba(210,208,230,.11); }
.guided-step-content .studio-section:last-child { border-bottom: 0; }
.guided-step-content .section-heading { padding: 18px 20px; }
.guided-step-content .section-content { padding: 0 20px 22px; }
.guided-preview { position: sticky; top: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #14151b; }
.guided-preview-heading, .guided-preview-heading > div:first-child { display: flex; align-items: center; }
.guided-preview-heading { justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.guided-preview-heading > div:first-child { min-width: 0; gap: 9px; }
.guided-preview-heading > div > div { display: grid; gap: 3px; min-width: 0; }
.guided-preview-heading strong { font-size: 12px; }
.guided-preview-heading small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.guided-live-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 12px rgba(62,214,198,.45); }
.guided-ratio { padding: 5px 7px; border: 1px solid rgba(169,155,255,.22); border-radius: 7px; color: #c9c0ff; background: rgba(169,155,255,.08); font-size: 10px; font-weight: 700; }
.guided-preview-stage { position: relative; width: min(100%,360px); aspect-ratio: 9 / 16; max-height: min(650px,68vh); margin: 0 auto; overflow: hidden; border: 1px solid rgba(210,208,230,.15); border-radius: 12px; background: radial-gradient(ellipse at 50% 35%,#373344 0,#1b1b24 48%,#0d0e12 100%); transition: aspect-ratio .2s ease; }
.guided-preview-stage video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; opacity: 0; transition: opacity .2s ease; }
.guided-preview-stage.has-video video { opacity: 1; }
.guided-preview-stage.has-video .guided-preview-placeholder { display: none; }
.guided-preview-placeholder { position: absolute; z-index: 1; top: 39%; left: 50%; display: grid; place-items: center; max-width: 80%; padding: 5px 9px; border: 1px solid rgba(210,208,230,.13); border-radius: 99px; color: #aaa9b8; background: rgba(20,21,27,.78); text-align: center; transform: translate(-50%,-50%); }
.guided-preview-placeholder strong { max-width: 200px; font: 600 9px "DM Sans",sans-serif; }
.guided-preview-placeholder small, .guided-play-icon { display: none; }
.guided-caption-sample { position: absolute; z-index: 3; left: 50%; top: 58%; width: 80%; padding: 5px 7px; border-radius: 6px; color: #fff; font: 900 20px/1.12 Impact,sans-serif; text-align: center; text-shadow: 0 2px 5px #000; transform: translate(-50%,-50%); transition: left .15s,top .15s,font-size .15s,width .15s; }
.guided-caption-sample b { color: var(--lime); }
.guided-hook-sample { position: absolute; z-index: 2; top: 16%; left: 50%; width: 88%; color: white; font: 900 14px/1.05 Impact,sans-serif; text-align: center; text-shadow: 0 2px 5px #000; transform: translateX(-50%); }
.guided-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; color: #b7b6c4; font-size: 9px; }
.guided-preview-footer { flex-wrap: wrap; justify-content: flex-start; }
.guided-preview-footer span { max-width: 100%; overflow: hidden; padding: 5px 7px; border: 1px solid rgba(210,208,230,.1); border-radius: 7px; background: rgba(255,255,255,.035); text-overflow: ellipsis; white-space: nowrap; }
.guided-preview-notice { margin-top: 8px; color: #818291; font-size: 9px; line-height: 1.4; }
.guided-export-hint { display: none; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 18px 0; padding: 14px 18px; border: 1px solid rgba(169,155,255,.19); border-radius: 13px; background: rgba(169,155,255,.06); }
.guided-flow-form[data-current-step="exportar"] .guided-export-hint { display: flex; }
.guided-export-hint > div { display: flex; align-items: center; gap: 11px; }
.export-hint-icon { width: 31px; height: 31px; display: grid; place-items: center; border: 1px solid rgba(169,155,255,.24); border-radius: 9px; color: var(--lime); background: rgba(169,155,255,.1); }
.guided-export-hint strong, .guided-export-hint small { display: block; }
.guided-export-hint strong { font-size: 11px; }
.guided-export-hint small { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.4; }
.export-hint-format { flex: 0 0 auto; color: #c9c0ff; font-size: 10px; font-weight: 700; }
.guided-flow-form .submit-dock { display: none; }
.guided-flow-form[data-current-step="exportar"] .submit-dock { display: grid; }
.guided-step-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 18px 0; padding-top: 12px; border-top: 1px solid var(--line); }
.guided-step-footer > span { color: #9696a5; font-size: 10px; }
.guided-step-footer .secondary-button, .guided-step-footer .primary-button { width: auto; min-height: 39px; justify-content: center; padding: 0 14px; font-size: 10px; }
.guided-flow-form[data-current-step="exportar"] #guidedNextBottom { display: none; }
.guided-flow-form[data-current-step="exportar"] #guidedPreviousBottom { margin-right: auto; }
.guided-flow-form[data-current-step="exportar"] .guided-step-footer { justify-content: flex-start; }
.guided-flow-form[data-current-step="exportar"] .guided-step-footer > span { margin-right: auto; }
.guided-step-footer button:disabled { opacity: .4; cursor: not-allowed; }

@media (max-width: 1120px) {
  .topbar, main, footer { width: min(100% - 48px, 1440px); }
  .xena-topbar { grid-template-columns: auto minmax(0,1fr) auto; gap: 12px; }
  .app-tabs button { padding-inline: 9px; font-size: 11px; }
}
@media (max-width: 940px) {
  .xena-topbar {
    grid-template-columns: minmax(0,1fr) auto;
    row-gap: 12px;
    padding: 12px 0;
  }
  .xena-topbar .brand { grid-column: 1; grid-row: 1; }
  .xena-topbar .header-actions { grid-column: 2; grid-row: 1; }
  .app-tabs {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: stretch;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .app-tabs::-webkit-scrollbar { display: none; }
  .app-tabs button { flex: 1 0 auto; padding-inline: 14px; }
  .hero.phase-two-hero { padding-top: 34px; }
}
@media (max-width: 820px) {
  .guided-workbench { grid-template-columns: minmax(0,1fr); gap: 12px; padding-inline: 12px; }
  .guided-preview { position: relative; top: auto; order: -1; }
  .guided-preview-stage { width: min(42vw,220px); max-height: 50vh; }
  .guided-preview { padding: 11px; }
  .guided-step-content .section-heading { grid-template-columns: 30px minmax(0,1fr) auto 12px; gap: 8px; padding: 15px 12px; }
  .guided-step-content .section-heading p { font-size: 10px; }
  .guided-step-content .section-content { padding: 0 12px 16px; }
  .guided-step-nav { padding-inline: 12px; }
}
@media (max-width: 700px) {
  .topbar, main, footer { width: calc(100% - 28px); }
  .xena-topbar { min-height: 0; gap: 10px; padding: 10px 0; }
  .brand { font-size: 18px; }
  .brand-mark { width: 31px; height: 31px; }
  .header-actions { gap: 5px; }
  .header-actions .admin-open { padding: 8px; font-size: 10px; }
  .account-open { max-width: 150px; gap: 6px; padding-right: 8px; font-size: 10px; }
  .account-avatar { width: 26px; height: 26px; }
  .app-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin-inline: -1px; padding: 4px; overflow: visible; }
  .app-tabs button { width: 100%; min-width: 0; min-height: 38px; padding: 8px 4px; font-size: 10px; }
  .hero.phase-two-hero { padding: 20px 0 17px; }
  .hero.phase-two-hero h1 { font-size: clamp(30px, 8.2vw, 42px); }
  .workspace.studio { border-radius: 18px; }
  .projects-page { margin-top: 22px; }
  .section-heading { grid-template-columns: 32px minmax(0,1fr) auto 14px; padding: 17px 13px; gap: 9px; }
  .section-heading h2 { font-size: 15px; }
  .section-heading p { font-size: 11px; line-height: 1.4; }
  .section-toggle { min-height: 34px; }
  .section-content { padding: 0 13px 19px; }
  .control-card { min-width: 0; }
  .guided-step-nav { gap: 4px; padding-inline: 8px; }
  .guided-step-nav button { min-height: 49px; flex-direction: column; justify-content: center; gap: 3px; padding: 4px 2px; }
  .guided-step-nav button i { flex-basis: 24px; width: 24px; height: 24px; font-size: 10px; }
  .guided-step-nav button span { font-size: 10px; }
  .guided-step-nav button::after { right: -4px; width: 4px; }
  .guided-progress { margin: 0 18px 17px; }
  .guided-step-intro { align-items: flex-start; padding: 0 17px 14px; }
  .guided-step-intro h2 { font-size: 21px; }
  .guided-step-intro p:last-child { max-width: 280px; font-size: 11px; }
  .guided-stage-badge { margin-top: 20px; font-size: 9px; }
  .guided-workbench { grid-template-columns: minmax(0,1fr); gap: 11px; padding-inline: 9px; }
  .guided-preview { position: relative; top: auto; order: -1; padding: 10px; }
  .guided-preview-heading { margin-bottom: 8px; }
  .guided-preview-stage { width: min(42vw,170px); max-height: 37vh; border-radius: 10px; }
  .guided-caption-sample { font-size: 16px; }
  .guided-hook-sample { font-size: 11px; }
  .guided-preview-footer { margin-top: 7px; }
  .guided-preview-notice { display: none; }
  .guided-step-footer { margin-inline: 9px; }
  .guided-export-hint { align-items: flex-start; margin-inline: 9px; padding: 12px; }
  .guided-export-hint small { max-width: 230px; }
  .submit-dock { margin-inline: 9px; padding: 16px 12px; }
}
@media (max-width: 380px) {
  .topbar, main, footer { width: calc(100% - 20px); }
  .brand { gap: 6px; font-size: 17px; }
  .brand small { padding: 2px 5px; }
  .account-open { max-width: 118px; }
  .header-actions .admin-open { max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tabs button { padding-inline: 11px; }
  .section-heading { grid-template-columns: 29px minmax(0,1fr) auto 12px; gap: 7px; padding-inline: 10px; }
  .section-number { width: 28px; height: 28px; }
  .guided-step-nav button { flex-direction: column; gap: 3px; min-height: 49px; }
  .guided-step-nav button span { font-size: 9px; }
  .guided-stage-badge { display: none; }
  .guided-step-intro { padding-inline: 12px; }
  .guided-workbench { padding-inline: 7px; }
  .guided-step-content .section-heading { grid-template-columns: 27px minmax(0,1fr) auto 10px; gap: 6px; padding-inline: 9px; }
  .guided-step-content .section-heading h2 { font-size: 13px; }
  .guided-step-content .section-heading p { display: none; }
  .guided-step-content .section-content { padding-inline: 9px; }
  .guided-step-footer { margin-inline: 7px; }
  .login-screen { padding: 10px; }
  .login-panel { padding: 20px; border-radius: 16px; }
  .login-panel h1 { font-size: 24px; }
  .login-screen { padding-top: max(10px, env(safe-area-inset-top)); }
}

/* Guided flows for the standalone tools */
.tool-step-nav {
  display: grid; grid-template-columns: repeat(var(--tool-step-count, 4), minmax(0, 1fr));
  gap: 8px; margin: 22px 0 14px; padding: 8px; border: 1px solid var(--line);
  border-radius: 16px; background: #14151b;
}
.tool-step-nav button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 9px;
  min-width: 0; min-height: 48px; padding: 8px 12px; border: 1px solid transparent;
  border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer;
}
.tool-step-nav button:not(:last-child)::after { content: ""; position: absolute; right: -8px; width: 8px; border-top: 1px solid #393a48; }
.tool-step-nav button i { display: grid; place-items: center; flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid #414250; border-radius: 50%; font-size: 11px; font-style: normal; }
.tool-step-nav button span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }
.tool-step-nav button.active { border-color: rgba(169,155,255,.28); color: var(--text); background: rgba(169,155,255,.1); }
.tool-step-nav button.active i, .tool-step-nav button.done i { border-color: var(--lime); color: #17141f; background: var(--lime); }
.tool-step-nav button:disabled { opacity: .48; cursor: not-allowed; }
.tool-step-intro { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin: 0 0 16px; }
.tool-step-intro .eyebrow { margin: 0 0 6px; color: #b9afff; font-size: 10px; letter-spacing: .12em; }
.tool-step-intro h2 { margin: 0 0 5px; font-size: clamp(20px, 2.5vw, 26px); }
.tool-step-intro p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.tool-step-badge { flex: 0 0 auto; padding: 7px 10px; border: 1px solid var(--line); border-radius: 99px; color: #c9c2ff; font-size: 10px; }
.tool-step-footer { display: flex; align-items: center; gap: 12px; margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.tool-step-footer > span { margin: 0 auto; color: var(--muted); font-size: 11px; }
.tool-step-footer button { min-height: 40px; padding: 0 16px; }
.tool-step-footer button:disabled { opacity: .4; cursor: not-allowed; }
.tool-flow-hidden { display: none !important; }
#producerPage[data-guided-step="0"] .producer-grid,
#producerPage[data-guided-step="1"] .producer-grid { grid-template-columns: minmax(0, 1fr); }
.recent-projects > #recentProjectsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.recent-project-row { display: flex; min-width: 0; flex-direction: column; gap: 7px; }
.recent-project { display: flex; min-width: 0; height: 100%; flex-direction: column; gap: 0; overflow: hidden; padding: 0; border-radius: 14px; }
.recent-project-media { position: relative; display: grid; width: 100%; aspect-ratio: 16 / 9; max-height: 220px; place-items: center; overflow: hidden; background: linear-gradient(140deg, #242331, #13141a 65%, #18302e); }
.recent-project-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.project-preview-placeholder { display: grid; gap: 8px; place-items: center; padding: 15px; color: #b9afff; text-align: center; }
.project-preview-placeholder b { font-size: 28px; font-weight: 400; }
.project-preview-placeholder small { color: var(--muted); font-size: 10px; }
.recent-project-content { display: grid; min-width: 0; gap: 9px; padding: 14px 15px 15px; }
.recent-project-title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 9px; }
.recent-project-title strong { min-width: 0; font-size: 13px; }
.recent-project-title small { flex: 0 0 auto; }
.recent-project-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.recent-project-meta span, .recent-project-meta i { padding: 4px 7px; border-radius: 6px; color: var(--muted); background: rgba(255,255,255,.045); font-size: 9px; font-style: normal; }
.recent-project-meta i { margin-left: auto; color: #c0b4ff; }
.recent-project-content > p { overflow: hidden; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.recent-project-row .support-grant-button { align-self: flex-end; }
.library-tools { display: grid; grid-template-columns: minmax(220px,1.5fr) repeat(3,minmax(125px,1fr)); gap: 9px; margin: 16px 0 10px; }
.library-tools input, .library-tools select { min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid rgba(210,208,230,.13); border-radius: 10px; color: var(--text); background: #111218; }
.library-tools input::placeholder { color: #858595; }
.library-count { margin: 0 1px 13px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.projects-empty-state { grid-column: 1/-1; display: grid; justify-items: center; gap: 12px; min-height: 250px; padding: clamp(24px,5vw,48px); border: 1px dashed rgba(210,208,230,.18); border-radius: 17px; background: #14151b; text-align: center; }
.projects-empty-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(169,155,255,.25); border-radius: 15px; color: var(--lime); background: var(--lime-soft); font-size: 24px; }
.projects-empty-state h3 { margin: 0; font: 700 18px/1.3 Manrope,sans-serif; }
.projects-empty-state p { max-width: 430px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.projects-empty-state > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; width: min(100%,420px); }
.projects-empty-state button { min-height: 42px; width: auto; flex: 1 1 160px; padding: 0 16px; }
.projects-loading { min-height: 140px; display: grid; place-items: center; border: 1px solid rgba(210,208,230,.1); border-radius: 14px; color: var(--muted); background: linear-gradient(100deg,#15161d 25%,#1d1e28 40%,#15161d 60%); background-size: 220% 100%; animation: xena-skeleton 1.6s ease-in-out infinite; }
@keyframes xena-skeleton { to { background-position-x: -220%; } }
#queueStatus { padding: 6px 9px; border: 1px solid rgba(62,214,198,.17); border-radius: 999px; color: #a5e6df; background: rgba(62,214,198,.06); font-size: 10px; white-space: nowrap; }
.progress-shell { position: relative; overflow: hidden; }
.progress-shell span { min-width: 0; }
.progress-meta { align-items: center; gap: 12px; line-height: 1.45; }
.progress-meta span:last-child { text-align: right; }
.view[hidden] { display: none !important; }
.account-tabs button { min-height: 42px; }
.appearance-settings { display: grid; gap: 16px; }
.appearance-settings label { display: grid; gap: 7px; color: #c0c0ce; font-size: 12px; }
.appearance-settings select { min-height: 43px; padding: 0 11px; border: 1px solid rgba(210,208,230,.15); border-radius: 10px; color: var(--text); background: #101116; }
.appearance-settings small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.appearance-settings button { justify-self: start; min-height: 40px; padding: 0 14px; }
.appearance-settings .account-status { margin: 0; }
.toast { max-width: min(420px,calc(100vw - 32px)); border-color: var(--lime); background: #171820; line-height: 1.5; }
html[data-ui-density="compact"] { font-size: 15px; }
html[data-ui-density="spacious"] { font-size: 17px; }
html[data-ui-density="compact"] .guided-preview, html[data-ui-density="compact"] .projects-page,
html[data-ui-density="compact"] .producer-card, html[data-ui-density="compact"] .live-card,
html[data-ui-density="compact"] .reframe-source-card, html[data-ui-density="compact"] .reframe-editor-card,
html[data-ui-density="compact"] .standalone-caption-card { padding: 14px; }
html[data-ui-density="spacious"] .guided-preview, html[data-ui-density="spacious"] .projects-page,
html[data-ui-density="spacious"] .producer-card, html[data-ui-density="spacious"] .live-card,
html[data-ui-density="spacious"] .reframe-source-card, html[data-ui-density="spacious"] .reframe-editor-card,
html[data-ui-density="spacious"] .standalone-caption-card { padding: 24px; }
html[data-ui-density="compact"] .studio-accordion > .section-heading { padding-block: 13px; }
html[data-ui-density="compact"] .studio-accordion > .section-content { padding-bottom: 14px; }
html[data-ui-density="compact"] .control-grid, html[data-ui-density="compact"] .producer-recipe,
html[data-ui-density="compact"] .editor-field-grid { gap: 9px; }
html[data-ui-density="spacious"] .studio-accordion > .section-heading { padding-block: 23px; }
html[data-ui-density="spacious"] .studio-accordion > .section-content { padding-bottom: 28px; }
html[data-ui-density="spacious"] .control-grid, html[data-ui-density="spacious"] .producer-recipe,
html[data-ui-density="spacious"] .editor-field-grid { gap: 16px; }

/* Light mode recolors the application surfaces while keeping video previews true to their media. */
:root[data-theme="light"] body { color: var(--text); background: var(--bg); }
:root[data-theme="light"] .xena-topbar { border-bottom-color: var(--line); }
:root[data-theme="light"] .app-tabs, :root[data-theme="light"] .account-tabs,
:root[data-theme="light"] .admin-dialog > nav { border-color: var(--line); background: #e9ebf2; }
:root[data-theme="light"] .app-tabs button { color: #5c6070; }
:root[data-theme="light"] .app-tabs button:hover { color: var(--text); background: rgba(20,24,38,.06); }
:root[data-theme="light"] .admin-open, :root[data-theme="light"] .account-open { border-color: var(--line); color: var(--text); background: #fff; }
:root[data-theme="light"] .workspace, :root[data-theme="light"] .projects-page,
:root[data-theme="light"] .producer-card, :root[data-theme="light"] .live-card,
:root[data-theme="light"] .reframe-source-card, :root[data-theme="light"] .reframe-editor-card,
:root[data-theme="light"] .standalone-caption-card, :root[data-theme="light"] .studio-card {
  border-color: var(--line); color: var(--text); background: #fff !important; box-shadow: 0 12px 34px rgba(34,37,52,.07);
}
:root[data-theme="light"] .studio-section, :root[data-theme="light"] .guided-preview,
:root[data-theme="light"] .control-card, :root[data-theme="light"] .production-preset-card,
:root[data-theme="light"] .color-grade-option, :root[data-theme="light"] .recent-project,
:root[data-theme="light"] .library-project, :root[data-theme="light"] .publication-card,
:root[data-theme="light"] .clip-card, :root[data-theme="light"] .draft-card {
  border-color: var(--line); color: var(--text); background: #fff;
}
:root[data-theme="light"] .section-heading, :root[data-theme="light"] .studio-accordion[open] > .section-heading { background: #f6f7fa; }
:root[data-theme="light"] .section-content, :root[data-theme="light"] .guided-step-content { color: var(--text); }
:root[data-theme="light"] .library-tools input, :root[data-theme="light"] .library-tools select,
:root[data-theme="light"] .appearance-settings select,
:root[data-theme="light"] #accountProfileForm input, :root[data-theme="light"] #accountProfileForm select,
:root[data-theme="light"] #accountPasswordForm input, :root[data-theme="light"] .account-mfa input,
:root[data-theme="light"] #inviteForm input, :root[data-theme="light"] #inviteForm select,
:root[data-theme="light"] .admin-user-edit select, :root[data-theme="light"] .analytics-toolbar select,
:root[data-theme="light"] .analytics-users-heading input {
  border-color: var(--line); color: var(--text); background: #fff;
}
:root[data-theme="light"] .library-tools input::placeholder { color: #777d8d; }
:root[data-theme="light"] .projects-empty-state { border-color: rgba(50,55,75,.2); background: #fff; }
:root[data-theme="light"] .projects-loading { border-color: var(--line); color: var(--muted); background: linear-gradient(100deg,#eef0f5 25%,#e3e6ef 40%,#eef0f5 60%); background-size: 220% 100%; }
:root[data-theme="light"] .guided-preview-heading small,
:root[data-theme="light"] .guided-preview-notice,
:root[data-theme="light"] .guided-preview-footer { color: var(--muted); }
:root[data-theme="light"] .guided-preview-footer span { border-color: var(--line); background: #f0f1f5; }
:root[data-theme="light"] .production-preset-card:hover, :root[data-theme="light"] .color-grade-option:hover,
:root[data-theme="light"] .recent-project:hover { border-color: var(--lime); }
:root[data-theme="light"] .production-preset-card.selected, :root[data-theme="light"] .custom-preset-card.selected,
:root[data-theme="light"] .color-grade-option.selected { background: var(--lime-soft); }
:root[data-theme="light"] .account-dialog, :root[data-theme="light"] .admin-dialog {
  border-color: rgba(34,37,52,.16); color: var(--text); background: #fff; box-shadow: 0 28px 90px rgba(25,30,45,.22);
}
:root[data-theme="light"] .account-tabs button, :root[data-theme="light"] .admin-dialog > nav button { color: #5f6473; }
:root[data-theme="light"] .appearance-settings label { color: #414554; }
:root[data-theme="light"] .appearance-settings small { color: #626779; }
:root[data-theme="light"] .account-dialog-heading > button, :root[data-theme="light"] .admin-dialog > header button,
:root[data-theme="light"] .admin-note, :root[data-theme="light"] .account-mfa,
:root[data-theme="light"] .account-session-revoke, :root[data-theme="light"] .admin-user,
:root[data-theme="light"] .admin-invite, :root[data-theme="light"] .analytics-panel,
:root[data-theme="light"] .analytics-toolbar, :root[data-theme="light"] .analytics-kpis article {
  border-color: var(--line); color: var(--text); background: #f6f7fa;
}
:root[data-theme="light"] .admin-note { color: #365653; background: #eef8f7; }
:root[data-theme="light"] .analytics-toolbar small, :root[data-theme="light"] .analytics-status,
:root[data-theme="light"] .analytics-panel > header p, :root[data-theme="light"] .analytics-retention-note,
:root[data-theme="light"] .analytics-kpis article > span, :root[data-theme="light"] .analytics-kpis article > small,
:root[data-theme="light"] .account-dialog-heading p:last-child, :root[data-theme="light"] .admin-dialog .dialog-subtitle { color: var(--muted); }
:root[data-theme="light"] .analytics-top-actions > div, :root[data-theme="light"] .analytics-account-summary span,
:root[data-theme="light"] .analytics-status-table td { color: var(--text); }
:root[data-theme="light"] .project-meta, :root[data-theme="light"] .recent-project-content > p,
:root[data-theme="light"] .recent-project-meta span, :root[data-theme="light"] .analytics-retention-note { color: var(--muted); }
:root[data-theme="light"] .secondary-button { border-color: var(--line); color: var(--text); background: #fff; }
:root[data-theme="light"] .section-heading h2, :root[data-theme="light"] .section-heading p,
:root[data-theme="light"] .control-card, :root[data-theme="light"] .producer-card-heading,
:root[data-theme="light"] .tool-step-intro h2 { color: var(--text); }
:root[data-theme="light"] .primary-button { color: #17141f; }
:root[data-theme="light"] #queueStatus { border-color: rgba(0,143,134,.22); color: #12635e; background: rgba(0,143,134,.08); }
:root[data-theme="light"] .login-screen { background: var(--bg); }
:root[data-theme="light"] .login-panel { border-color: var(--line); color: var(--text); background: #fff; box-shadow: 0 24px 80px rgba(25,30,45,.16); }
:root[data-theme="light"] .toast { border-color: var(--lime); color: var(--text); background: #fff; box-shadow: 0 10px 35px rgba(25,30,45,.18); }
:root[data-theme="light"] .app-tabs,
:root[data-theme="light"] .account-tabs,
:root[data-theme="light"] .admin-dialog > nav { background: #e1e3eb; }
:root[data-theme="light"] .app-tabs button { color: #454a59; }
:root[data-theme="light"] .app-tabs button[aria-selected="true"],
:root[data-theme="light"] .app-tabs button.active { color: #17141f; }
:root[data-theme="light"] .tool-step-nav { border-color: var(--line); background: #e0e2e9; }
:root[data-theme="light"] .tool-step-nav button { color: #454a59; }
:root[data-theme="light"] .tool-step-nav button.active,
:root[data-theme="light"] .tool-step-nav button.done { color: #222431; }
:root[data-theme="light"] .tool-step-nav button.active { border-color: rgba(87,69,178,.34); background: rgba(169,155,255,.35); }
:root[data-theme="light"] .tool-step-nav button.active i,
:root[data-theme="light"] .tool-step-nav button.done i { color: #fff; background: #6252b6; }
:root[data-theme="light"] .tool-step-nav button:disabled { opacity: .82; }
:root[data-theme="light"] select,
:root[data-theme="light"] input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root[data-theme="light"] textarea { border-color: #c4c7d2; color: #20212a; background-color: #fff; }
:root[data-theme="light"] select:disabled,
:root[data-theme="light"] input:disabled,
:root[data-theme="light"] textarea:disabled { color: #666b79; background-color: #e9eaf0; }
:root[data-theme="light"] input::placeholder,
:root[data-theme="light"] textarea::placeholder { color: #656b79; opacity: 1; }
:root[data-theme="light"] :is(select,input,textarea,button):focus-visible { outline-color: #5544ad; }
:root[data-theme="light"] .producer-page { color: var(--text); }
:root[data-theme="light"] .producer-heading p:not(.eyebrow),
:root[data-theme="light"] .producer-recipe label,
:root[data-theme="light"] .producer-caption-fields label,
:root[data-theme="light"] .producer-caption-palette label { color: #4f5564; }
:root[data-theme="light"] .producer-pill { border-color: var(--line); color: #424757; background: #f7f8fb; }
:root[data-theme="light"] .producer-file { border-color: #b9bdca; color: var(--text); background: #f2f3f7; }
:root[data-theme="light"] .producer-file strong small,
:root[data-theme="light"] .producer-file span,
:root[data-theme="light"] .producer-note,
:root[data-theme="light"] .producer-create-row span,
:root[data-theme="light"] .producer-status,
:root[data-theme="light"] .producer-history > p { color: #555b6c; }
:root[data-theme="light"] .producer-engine-status,
:root[data-theme="light"] .engine-banner { border-color: #a9d6bb; color: #1e5937; background: #e6f4eb; }
:root[data-theme="light"] .engine-banner .engine-chip,
:root[data-theme="light"] .engine-chip.engine-ok { color: #1e5937; }
:root[data-theme="light"] .engine-banner.engine-unavailable .engine-chip,
:root[data-theme="light"] .engine-chip.engine-unavailable { color: #704a12; }
:root[data-theme="light"] .engine-banner.engine-unavailable,
:root[data-theme="light"] .producer-note.engine-unavailable { border-color: #e3c389; color: #704a12; background: #fbf2df; }
:root[data-theme="light"] input[type="file"] { color: #383d4b; }
:root[data-theme="light"] input[type="file"]:disabled { opacity: 1; color: #5c6170; }
:root[data-theme="light"] input[type="file"]::file-selector-button { border: 1px solid #bdc1cd; border-radius: 6px; color: #242633; background: #e6e8ee; }
:root[data-theme="light"] .producer-chat { color: var(--text); }
:root[data-theme="light"] .producer-message.assistant { color: #292c38; background: #eef0f5; }
:root[data-theme="light"] .producer-conversation textarea { border-color: #c4c7d2; color: var(--text); background: #fff; }
:root[data-theme="light"] .producer-history button,
:root[data-theme="light"] .producer-results .producer-card-heading button { border-color: var(--line); color: var(--text); background: #f3f4f8; }
:root[data-theme="light"] .producer-history button span,
:root[data-theme="light"] .producer-output-heading span,
:root[data-theme="light"] .producer-clips span { color: #555b6c; }
:root[data-theme="light"] .producer-caption-recipe { border-color: var(--line); background: #f4f5f8; }
:root[data-theme="light"] .producer-caption-preview { border-color: #393b45; background: #111217; }
:root[data-theme="light"] .producer-caption-fonts button,
:root[data-theme="light"] .producer-caption-motions button { border-color: #c8cbd5; color: #292c38; background: #fff; }
:root[data-theme="light"] .producer-caption-fonts button small { color: #555b6c; }
:root[data-theme="light"] .producer-caption-fields select { border-color: #c4c7d2; color: var(--text); background: #fff; }
:root[data-theme="light"] .producer-caption-motions .selected,
:root[data-theme="light"] .producer-caption-fonts button.selected { border-color: #6252b6; background: #eeebff; }
:root[data-theme="light"] .producer-caption-font-heading,
:root[data-theme="light"] .producer-caption-fields output { color: #292c38; }
:root[data-theme="light"] .reframe-input-tabs,
:root[data-theme="light"] .live-mode-switch { border-color: #c4c7d2; background: #e2e4eb; }
:root[data-theme="light"] .reframe-input-tabs button,
:root[data-theme="light"] .live-mode-switch button { color: #454a59; }
:root[data-theme="light"] .reframe-input-tabs button.active,
:root[data-theme="light"] .live-mode-switch button.active { color: #211d35; background: #bcb0ff; }
:root[data-theme="light"] .reframe-drop { border-color: #adb2c0; color: #4e5463; background: #f1f2f6; }
:root[data-theme="light"] .reframe-drop strong { color: #252735; }
:root[data-theme="light"] .reframe-ready-pill,
:root[data-theme="light"] .reframe-job-badge { border-color: var(--line); color: #424757; background: #f7f8fb; }
:root[data-theme="light"] .live-platforms span { color: #414757; background: #f7f8fb; }
:root[data-theme="light"] .live-source-card,
:root[data-theme="light"] .live-session-panel,
:root[data-theme="light"] .live-sidebar { background: #fbfbfd; }
:root[data-theme="light"] .live-quick-options label,
:root[data-theme="light"] .live-interval label { color: #4f5564; }
:root[data-theme="light"] .live-interval,
:root[data-theme="light"] .live-settings,
:root[data-theme="light"] .live-engine,
:root[data-theme="light"] .live-blocks { border-color: var(--line); background: #f5f6f9; }
:root[data-theme="light"] .live-interval summary,
:root[data-theme="light"] .live-settings summary,
:root[data-theme="light"] .live-engine summary,
:root[data-theme="light"] .live-blocks summary { color: #343847; }
:root[data-theme="light"] .live-recent-session { border-color: var(--line); background: #fff; }
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .guided-step-intro .eyebrow,
:root[data-theme="light"] .tool-step-intro .eyebrow,
:root[data-theme="light"] .section-heading .eyebrow,
:root[data-theme="light"] .reframe-card-heading .eyebrow { color: #5c4baf; }
:root[data-theme="light"] .guided-step-nav button { color: #4b5060; }
:root[data-theme="light"] .guided-step-nav button:disabled { opacity: .88; }
:root[data-theme="light"] .guided-step-nav button.done { color: #3d4150; }
:root[data-theme="light"] .guided-step-nav button.active { border-color: #c2b8fa; color: #242236; background: #eeebff; }
:root[data-theme="light"] .guided-step-nav button i { border-color: #aeb2c0; color: #4a4f5e; }
:root[data-theme="light"] .guided-step-nav button.active i,
:root[data-theme="light"] .guided-step-nav button.done i { border-color: #6252b6; color: #fff; background: #6252b6; }
:root[data-theme="light"] .guided-step-nav button::after { background: #b8bbc7; }
:root[data-theme="light"] .guided-progress { background: #d3d5de; }
:root[data-theme="light"] .guided-step-content { border-color: var(--line); background: #fbfbfd; }
:root[data-theme="light"] .dropzone,
:root[data-theme="light"] .standalone-caption-drop { border-color: #b5bac7; color: #343847; background: #f0f1f5; }
:root[data-theme="light"] .dropzone > span:not(.upload-icon),
:root[data-theme="light"] .dropzone small,
:root[data-theme="light"] .dropzone .formats,
:root[data-theme="light"] .standalone-caption-drop small { color: #555b6c !important; }
:root[data-theme="light"] .standalone-caption-preset,
:root[data-theme="light"] .standalone-caption-motion,
:root[data-theme="light"] .standalone-caption-font-gallery button { border-color: #c5c8d2; color: #292c38; background: #fff; }
:root[data-theme="light"] .standalone-caption-preset.selected,
:root[data-theme="light"] .standalone-caption-motion.selected,
:root[data-theme="light"] .standalone-caption-font-gallery button.selected { border-color: #6252b6; background: #eeebff; }
:root[data-theme="light"] .standalone-caption-font-gallery button small,
:root[data-theme="light"] .standalone-caption-motion small { color: #555b6c; }
:root[data-theme="light"] .reframe-history-heading button,
:root[data-theme="light"] #refreshReframes { border-color: var(--line); color: #3d4150; background: #f2f3f7; }
:root[data-theme="light"] .reframe-empty { background: #f4f5f8; }

/* Shared visual tokens and finishing details across the editing tools. */
:root {
  --field-surface: #0d0f14;
  --field-border: rgba(210,208,230,.2);
  --upload-surface: #111218;
  --upload-border: rgba(210,208,230,.28);
}
:root[data-theme="light"] {
  --field-surface: #fff;
  --field-border: #c4c7d2;
  --upload-surface: #f0f1f5;
  --upload-border: #b5bac7;
}
:root:not([data-theme="light"]) :is(select,input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea) {
  border-color: var(--field-border);
  color: var(--text);
  background-color: var(--field-surface);
}
:root:not([data-theme="light"]) :is(.dropzone,.reframe-drop,.standalone-caption-drop,.producer-file) {
  border-color: var(--upload-border);
  border-radius: 14px;
  color: var(--text);
  background: var(--upload-surface);
}
:root[data-theme="light"] :is(.dropzone,.reframe-drop,.standalone-caption-drop,.producer-file) {
  border-color: var(--upload-border);
  border-radius: 14px;
  color: var(--text);
  background: var(--upload-surface);
}
:root[data-theme="light"] :is(.dropzone > span:not(.upload-icon),.dropzone small,.dropzone .formats,.standalone-caption-drop small) { color: var(--muted) !important; }
#standaloneCaptionForm textarea { min-height: 76px; border: 1px solid var(--field-border); border-radius: 9px; color: var(--text); background: var(--field-surface); }
:root[data-theme="light"] .guided-preview-stage { max-height: min(520px,58vh); }
:root:not([data-theme="light"]) .guided-preview-stage { max-height: min(520px,58vh); }
.reframe-empty { min-height: clamp(290px,38vh,410px); gap: 10px; padding: 24px; }
.reframe-empty > span { width: 50px; height: 50px; margin-bottom: 4px; }
.reframe-empty-formats { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin-top: 5px; }
.reframe-empty-formats span { padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); background: var(--surface-2); font-size: 10px; font-weight: 700; }
.reframe-empty > small { color: var(--muted); font-size: 10px; line-height: 1.5; }
.analytics-toolbar { display: grid; grid-template-columns: minmax(210px,1fr) minmax(145px,180px) minmax(140px,170px) minmax(100px,max-content) minmax(90px,max-content); align-items: end; gap: 10px; }
.analytics-toolbar > button { min-width: 0; min-height: 40px; padding-inline: 13px; white-space: nowrap; }
.analytics-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.analytics-kpis article { padding: 14px; }
.analytics-kpis article > span { color: var(--text); font-size: 10px; font-weight: 650; }
.analytics-kpis article > small { font-size: 10px; }
.analytics-kpis article > strong { font-size: 24px; }
.analytics-panel > header h3 { font-size: 14px; }
.analytics-toolbar small,.analytics-status,.analytics-panel > header p,.analytics-retention-note { font-size: 11px; }
.projects-empty-state { min-height: 230px; }
.projects-empty-state p { font-size: 13px; }
.guided-preview-heading small,.guided-preview-notice,.guided-preview-footer { font-size: 10px; }
.guided-preview-footer span { padding: 6px 8px; }
.dropzone .formats,.producer-file span,.reframe-drop span,.standalone-caption-drop small { font-size: 10px; }
.guided-step-intro .eyebrow,.tool-step-intro .eyebrow,.tool-step-badge { font-size: 10px; }

@media (max-width: 1040px) {
  .analytics-toolbar { grid-template-columns: minmax(190px,1fr) repeat(2,minmax(135px,170px)) auto auto; }
  .analytics-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .analytics-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-toolbar > div { grid-column: 1/-1; }
  .analytics-toolbar > button { width: 100%; }
  .analytics-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .guided-preview-stage { max-height: min(460px,52vh); }
  .reframe-empty { min-height: 300px; }
}
@media (max-width: 480px) {
  .analytics-toolbar { grid-template-columns: minmax(0,1fr); }
  .analytics-toolbar > div,.analytics-toolbar > label,.analytics-toolbar > button { grid-column: 1; }
  .analytics-kpis { gap: 7px; }
  .analytics-kpis article { padding: 10px; }
  .analytics-kpis article > strong { font-size: 21px; }
  .analytics-user-detail { grid-template-columns: minmax(0,1fr); }
  .guided-preview-stage { width: min(48vw,190px); max-height: 36vh; }
  .guided-preview-footer span { font-size: 9px; }
  .reframe-empty { min-height: 260px; padding: 16px; }
}
.account-dialog, .admin-dialog {
  box-sizing: border-box; max-height: min(88dvh, 900px); padding: 26px;
  border: 1px solid rgba(210,208,230,.16); border-radius: 22px; color: var(--text);
  background: #171820; box-shadow: 0 28px 100px rgba(0,0,0,.62);
}
.account-dialog { width: min(620px, calc(100vw - 32px)); }
.admin-dialog { width: min(1040px, calc(100vw - 32px)); }
.account-dialog::backdrop, .admin-dialog::backdrop { background: rgba(5,6,10,.78); backdrop-filter: blur(8px); }
.account-dialog-heading, .admin-dialog > header { align-items: center; gap: 13px; margin-bottom: 20px; }
.account-dialog-heading > div, .admin-dialog > header > div { flex: 1; min-width: 0; }
.account-dialog-heading h2, .admin-dialog > header h2 { margin: 0 0 5px; font: 800 26px/1.15 "Manrope", sans-serif; letter-spacing: -.04em; }
.account-dialog-heading p:last-child, .admin-dialog .dialog-subtitle { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.xena-dialog-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(169,155,255,.3); border-radius: 13px; color: #c3b9ff; background: rgba(169,155,255,.11); font-size: 20px; }
.account-dialog-heading > button, .admin-dialog > header button { flex: 0 0 36px; width: 36px; height: 36px; border-color: rgba(210,208,230,.15); border-radius: 11px; background: #20212a; }
.account-tabs, .admin-dialog > nav { display: flex; gap: 5px; margin: 0 0 18px; padding: 4px; border: 1px solid rgba(210,208,230,.12); border-radius: 12px; background: #111218; }
.account-tabs button, .admin-dialog > nav button { flex: 1; min-width: 0; padding: 10px 12px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; }
.account-tabs button.active, .admin-dialog > nav button.active { border: 0; color: #17141f; background: var(--lime); box-shadow: 0 3px 12px rgba(169,155,255,.17); }
.admin-note { padding: 13px 15px; border-color: rgba(62,214,198,.18); border-radius: 12px; color: #b7c7c6; background: rgba(62,214,198,.055); line-height: 1.55; }
#accountProfileForm, #accountPasswordForm { gap: 14px; }
#accountProfileForm { grid-template-columns: repeat(2,minmax(0,1fr)); }
#accountProfileForm label, #accountPasswordForm label, .account-mfa label { min-width: 0; color: #c0c0ce; font-size: 12px; }
#accountProfileForm [name="full_name"], #accountProfileForm small, #accountProfileForm [name="timezone"], #accountProfileForm button, #accountProfileForm .account-status { grid-column: 1/-1; }
#accountProfileForm input, #accountProfileForm select, #accountPasswordForm input, .account-mfa input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 43px; border-color: rgba(210,208,230,.15); border-radius: 10px; background: #101116; }
#accountPasswordForm { grid-template-columns: repeat(2,minmax(0,1fr)); }
#accountPasswordForm h3, #accountPasswordForm button, #accountPasswordForm .account-status { grid-column: 1/-1; }
.account-mfa { margin-top: 17px; padding: 17px; border: 1px solid rgba(210,208,230,.12); border-radius: 14px; background: #13141b; }
.account-mfa h3 { font-size: 15px; }
.account-mfa p { line-height: 1.55; }
.account-session-revoke { margin-top: 16px; padding: 16px; border: 1px solid rgba(210,208,230,.12); border-radius: 14px; background: #13141b; }
#accountAdminSlot { margin-top: 16px; padding-top: 15px; }
#accountAdminSlot .admin-open { width: 100%; min-height: 42px; border-color: rgba(169,155,255,.2); border-radius: 10px; text-align: center; }
.account-logout { margin-top: 8px; }
.admin-dialog > section { min-width: 0; }
.admin-user, .admin-invite { padding: 15px; border-color: rgba(210,208,230,.13); border-radius: 13px; background: #13141b; }
.admin-user[open] { border-color: rgba(169,155,255,.25); }
.admin-user summary span, .admin-invite span { line-height: 1.5; }
.admin-user-edit { gap: 12px; padding: 18px 0 4px; }
.admin-user-edit select, #inviteForm input, #inviteForm select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 42px; border-color: rgba(210,208,230,.15); border-radius: 9px; background: #101116; }
#inviteForm { gap: 15px; }
#inviteForm fieldset { border-color: rgba(210,208,230,.16); border-radius: 13px; }
#inviteForm input:not([type="checkbox"]) { width: 100%; min-height: 42px; padding: 8px; border: 1px solid rgba(210,208,230,.15); border-radius: 9px; color: var(--text); background: #101116; }
#inviteForm .permission-group input[type="checkbox"] { appearance: auto; flex: 0 0 17px; width: 17px; min-width: 17px; height: 17px; min-height: 17px; margin: 1px 0 0; padding: 0; border: 0; border-radius: 3px; background: transparent; accent-color: var(--lime); }
#inviteForm .permission-group label { display: flex; align-items: flex-start; gap: 9px; }
#inviteForm .permission-group label span { flex: 1; min-width: 0; }
.permission-group { border-color: rgba(210,208,230,.12); border-radius: 11px; background: #111218; }
.permission-group > strong { color: #c1b7ff; font-size: 11px; }
.permission-group label { font-size: 11px; }
.admin-invite { align-items: center; }
.admin-invite > div { min-width: 0; display: grid; gap: 4px; }
.admin-invite strong { font-size: 12px; }
.admin-invite button { flex: 0 0 auto; border-color: rgba(210,208,230,.17); border-radius: 8px; background: #20212a; }
.admin-list { gap: 10px; margin-top: 16px; }
.admin-subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 10px; }
.admin-subsection-heading > div { display: grid; gap: 4px; }
.admin-subsection-heading strong { font-size: 14px; }
.admin-subsection-heading small { color: var(--muted); font-size: 10px; }
.admin-subsection-heading > span { display: grid; min-width: 28px; height: 28px; place-items: center; border: 1px solid rgba(169,155,255,.2); border-radius: 9px; color: #c1b7ff; background: rgba(169,155,255,.08); font-size: 11px; }
#inviteStatus { grid-column: 1/-1; margin: 0; padding: 10px 12px; border-radius: 9px; color: #c2b8ff; background: rgba(169,155,255,.07); font-size: 11px; line-height: 1.5; }
.admin-invite { display: block; padding: 0; overflow: hidden; }
.admin-invite > summary { display: grid; grid-template-columns: minmax(0,1fr) auto 18px; align-items: center; gap: 12px; padding: 15px 16px; list-style: none; }
.admin-invite > summary::-webkit-details-marker { display: none; }
.admin-invite > summary:hover { background: rgba(169,155,255,.045); }
.invite-summary-copy { display: grid; min-width: 0; gap: 5px; }
.invite-summary-copy strong { overflow: hidden; color: var(--text); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.invite-summary-copy small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.invite-status { padding: 5px 8px; border: 1px solid transparent; border-radius: 999px; font-size: 10px !important; font-weight: 700; white-space: nowrap; }
.invite-active { border-color: rgba(62,214,198,.2); color: #8ce5d9 !important; background: rgba(62,214,198,.08); }
.invite-inactive { border-color: rgba(255,141,117,.18); color: #ffb2a0 !important; background: rgba(255,141,117,.07); }
.invite-chevron { color: #aaa7bd; font-size: 15px; font-style: normal; transition: transform .18s ease; }
.admin-invite[open] > summary { border-bottom: 1px solid var(--line); background: rgba(169,155,255,.045); }
.admin-invite[open] .invite-chevron { transform: rotate(180deg); }
.admin-invite-details { display: grid !important; gap: 14px !important; padding: 15px 16px 16px; }
.admin-invite-details dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 0; }
.admin-invite-details dl > div { min-width: 0; padding: 10px; border: 1px solid rgba(210,208,230,.09); border-radius: 9px; background: #111218; }
.admin-invite-details dt { margin-bottom: 5px; color: var(--muted); font-size: 9px; }
.admin-invite-details dd { margin: 0; overflow-wrap: anywhere; color: #e7e5f0; font-size: 11px; line-height: 1.45; }
.admin-invite-details .invite-permission-row { grid-column: 1/-1; }
.invite-code-note { margin: 0; padding: 10px 12px; border-radius: 9px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 10px; line-height: 1.5; }
.admin-invite-details .invite-revoke { justify-self: end; min-height: 36px; padding: 0 12px; border-color: rgba(255,141,117,.22); color: #ffb2a0; background: rgba(255,141,117,.07); }
.admin-empty-state { padding: 17px; border: 1px dashed rgba(210,208,230,.17); border-radius: 12px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.admin-audit-entry { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 11px; padding: 14px; border: 1px solid rgba(210,208,230,.1); border-radius: 12px; background: #13141b; }
.admin-audit-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(169,155,255,.2); border-radius: 10px; color: #c1b7ff; background: rgba(169,155,255,.09); font-size: 16px; font-weight: 700; }
.admin-audit-entry > div { display: grid; min-width: 0; gap: 5px; }
.admin-audit-entry strong { color: var(--text); font-size: 13px; }
.admin-audit-entry span,.admin-audit-entry time { color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
:root[data-theme="light"] .admin-audit-entry { border-color: var(--line); background: var(--surface); }
:root[data-theme="light"] .admin-audit-entry strong { color: var(--text); }
.admin-analytics-panel { display: grid; gap: 14px; }
.admin-analytics-panel[hidden] { display: none; }
.analytics-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid rgba(210,208,230,.1); border-radius: 13px; background: #13141b; }
.analytics-toolbar > div { display: grid; gap: 5px; min-width: 0; }
.analytics-toolbar strong { font-size: 14px; }
.analytics-toolbar small, .analytics-status, .analytics-panel > header p, .analytics-retention-note { color: var(--muted); font-size: 10px; line-height: 1.5; }
.analytics-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.analytics-toolbar select { min-height: 36px; padding: 0 10px; border: 1px solid rgba(210,208,230,.15); border-radius: 9px; color: var(--text); background: #101116; }
.analytics-toolbar > button { min-height: 36px; padding: 0 12px; border: 1px solid rgba(169,155,255,.2); border-radius: 9px; color: #d5ceff; background: rgba(169,155,255,.08); }
.analytics-status { margin: -6px 2px 0; }
.analytics-kpis { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; }
.analytics-kpis article { display: grid; min-width: 0; gap: 6px; padding: 13px; border: 1px solid rgba(210,208,230,.1); border-radius: 12px; background: #13141b; }
.analytics-kpis article > span, .analytics-kpis article > small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.analytics-kpis article > strong { overflow: hidden; color: #eae7f7; font-size: 22px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; }
.analytics-panels { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.analytics-panel { min-width: 0; padding: 15px; border: 1px solid rgba(210,208,230,.1); border-radius: 13px; background: #13141b; }
.analytics-panel > header { margin-bottom: 13px; }
.analytics-panel > header h3 { margin: 0 0 4px; font-size: 13px; }
.analytics-panel > header p { margin: 0; }
.analytics-timeline { display: grid; grid-auto-columns: minmax(20px,1fr); grid-auto-flow: column; align-items: end; gap: 5px; min-height: 128px; overflow-x: auto; padding-top: 8px; }
.analytics-timeline > div { display: grid; grid-template-rows: 92px auto; align-items: end; gap: 6px; min-width: 20px; text-align: center; }
.analytics-timeline > div > span { align-self: end; min-height: 3px; border-radius: 5px 5px 2px 2px; background: linear-gradient(180deg,#a99bff,#62c9bc); }
.analytics-timeline small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: clip; white-space: nowrap; }
.analytics-category-list { display: grid; gap: 11px; }
.analytics-category-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 10px; align-items: center; color: #d8d6e2; font-size: 10px; }
.analytics-category-list b { font-variant-numeric: tabular-nums; }
.analytics-category-list i { grid-column: 1/-1; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.06); }
.analytics-category-list em { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#9d8cff,#55c8ba); }
.analytics-users { padding-bottom: 8px; }
.analytics-user-list { display: grid; gap: 7px; }
.analytics-user { overflow: hidden; border: 1px solid rgba(210,208,230,.09); border-radius: 10px; background: #111218; }
.analytics-user summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) 14px; align-items: center; gap: 10px; padding: 11px 12px; cursor: pointer; list-style: none; }
.analytics-user summary::-webkit-details-marker { display: none; }
.analytics-user summary > span { display: grid; gap: 4px; min-width: 0; }
.analytics-user summary > span:last-of-type { text-align: right; }
.analytics-user summary strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; }
.analytics-user summary small { color: var(--muted); font-size: 9px; }
.analytics-user summary > span:last-of-type b { font-size: 14px; }
.analytics-user summary > i { color: var(--muted); font-style: normal; }
.analytics-user-detail { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; padding: 11px; border-top: 1px solid rgba(210,208,230,.08); }
.analytics-user-detail > div:not(.analytics-action-breakdown) { display: grid; gap: 4px; padding: 8px; border-radius: 7px; background: rgba(255,255,255,.03); }
.analytics-user-detail > div span { color: var(--muted); font-size: 8px; }
.analytics-user-detail > div b { font-size: 12px; }
.analytics-user-detail .analytics-action-breakdown { grid-column: 1/-1; display: flex; flex-wrap: wrap; gap: 6px; color: var(--muted); font-size: 9px; }
.analytics-action-breakdown span { padding: 5px 7px; border-radius: 6px; background: rgba(169,155,255,.08); }
.analytics-retention-note { margin: 0; padding: 10px 12px; border-radius: 9px; background: rgba(255,255,255,.03); }
.analytics-table-wrap { overflow-x: auto; }
.analytics-status-table { width: 100%; border-collapse: collapse; font-size: 10px; white-space: nowrap; }
.analytics-status-table th, .analytics-status-table td { padding: 10px 9px; border-bottom: 1px solid rgba(210,208,230,.07); text-align: right; }
.analytics-status-table th { color: var(--muted); font-size: 9px; font-weight: 600; }
.analytics-status-table th:first-child, .analytics-status-table td:first-child { text-align: left; }
.analytics-status-table tbody tr:last-child td { border-bottom: 0; }
.analytics-top-actions { display: grid; gap: 8px; }
.analytics-top-actions > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(210,208,230,.06); color: #d8d6e2; font-size: 10px; }
.analytics-top-actions b { font-variant-numeric: tabular-nums; }
.analytics-account-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.analytics-account-summary span { display: flex; justify-content: space-between; gap: 8px; padding: 11px; border-radius: 8px; color: var(--muted); background: rgba(255,255,255,.03); font-size: 10px; }
.analytics-account-summary b { color: var(--text); }
.analytics-users-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.analytics-users-heading > div { min-width: 0; }
.analytics-users-heading input { width: min(220px,45%); min-height: 36px; padding: 0 10px; border: 1px solid rgba(210,208,230,.13); border-radius: 9px; color: var(--text); background: #101116; }
.standalone-captions-page .tool-step-nav { --tool-step-count: 4; }
.live-page .tool-step-nav, .reframe-page .tool-step-nav, .producer-page .tool-step-nav { --tool-step-count: 3; }
@media (max-width: 700px) {
  .library-tools { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .library-tools input { grid-column: 1/-1; }
  .projects-empty-state { min-height: 210px; }
  .projects-empty-state > div { width: 100%; }
  .progress-meta { align-items: flex-start; flex-direction: column; }
  .progress-meta span:last-child { text-align: left; }
  .app-tabs button, .account-tabs button, .admin-dialog > nav button,
  .guided-step-nav button, .tool-step-nav button, .project-actions button,
  .library-tools input, .library-tools select { min-height: 44px; }
  .analytics-toolbar { align-items: stretch; flex-wrap: wrap; }
  .analytics-toolbar > div { flex-basis: 100%; }
  .analytics-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-kpis article:last-child { grid-column: 1/-1; }
  .analytics-panels { grid-template-columns: minmax(0,1fr); }
  .analytics-user-detail { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-user summary { grid-template-columns: minmax(0,1fr) auto 12px; }
  .analytics-user summary > span:last-of-type { max-width: 130px; }
  .analytics-users-heading { align-items: stretch; flex-direction: column; }
  .analytics-users-heading input { width: 100%; }
  .tool-step-nav { gap: 4px; padding: 5px; }
  .tool-step-nav button { flex-direction: column; gap: 3px; min-height: 54px; padding: 5px 2px; }
  .tool-step-nav button i { flex-basis: 23px; width: 23px; height: 23px; font-size: 10px; }
  .tool-step-nav button span { max-width: 100%; font-size: 9px; }
  .tool-step-intro { align-items: flex-start; }
  .tool-step-badge { padding: 6px 8px; }
  .tool-step-footer { gap: 7px; }
  .tool-step-footer button { min-height: 38px; padding-inline: 10px; font-size: 11px; }
  .tool-step-footer > span { font-size: 9px; }
  .recent-projects > #recentProjectsGrid { grid-template-columns: minmax(0, 1fr); gap: 11px; }
  .recent-project-media { max-height: none; }
  .account-dialog, .admin-dialog { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 18px; border-radius: 18px; }
  .account-dialog-heading h2, .admin-dialog > header h2 { font-size: 22px; }
  #accountProfileForm, #accountPasswordForm { grid-template-columns: minmax(0,1fr); }
  #accountProfileForm > *, #accountPasswordForm > * { grid-column: 1; }
  .permission-checklist, .user-permissions { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .account-tabs button, .admin-dialog > nav button { padding-inline: 7px; font-size: 11px; }
  .admin-invite > summary { grid-template-columns: minmax(0,1fr) auto 14px; gap: 7px; padding: 13px 11px; }
  .admin-invite-details { padding: 12px; }
  .admin-invite-details dl { grid-template-columns: minmax(0,1fr); }
  .admin-invite-details .invite-permission-row { grid-column: auto; }
}
@media (max-width: 380px) {
  .tool-step-nav button span { font-size: 8px; }
  .tool-step-footer button { padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* File picker buttons use the same control language as the rest of XENA. */
main input[type="file"] {
  max-width: 100%;
  color: var(--muted);
  font: 500 12px/1.45 var(--font-body);
}
main input[type="file"]::file-selector-button {
  min-height: 36px;
  margin: 0 9px 0 0;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  background: var(--surface-2);
  font: 650 12px/1.2 var(--font-body);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease;
}
main input[type="file"]:not(:disabled):hover::file-selector-button {
  border-color: var(--lime);
  background: var(--lime-soft);
}
main input[type="file"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
main input[type="file"]:disabled { opacity: .62; cursor: not-allowed; }
:root[data-theme="light"] main input[type="file"] { color: #454a59; }
:root[data-theme="light"] main input[type="file"]::file-selector-button {
  border-color: #bdc1cd;
  color: #242633;
  background: #e6e8ee;
}
:root[data-theme="light"] main input[type="file"]:not(:disabled):hover::file-selector-button {
  border-color: #6252b6;
  color: #30275d;
  background: #eeebff;
}

/* A small shared marker makes async status chips easier to scan. */
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge)::before {
  content: "";
  flex: 0 0 6px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-queued::before,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-processing::before,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-rendering::before,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-downloading::before,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-tracking::before,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).processing::before,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).rendering::before,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).connecting::before,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).reconnecting::before {
  animation: xena-status-pulse 1.25s ease-in-out infinite;
}
@keyframes xena-status-pulse { 50% { opacity: .35; transform: scale(.72); } }

/* Estadísticas: controles alineados, texto legible y menos columnas comprimidas. */
.analytics-toolbar { display: grid; grid-template-columns: minmax(210px,1fr) minmax(145px,auto) minmax(125px,auto) auto auto; align-items: end; }
.analytics-toolbar > button { white-space: nowrap; }
.analytics-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); }
.analytics-kpis article > span, .analytics-kpis article > small { font-size: 10px; }
.analytics-toolbar small, .analytics-status, .analytics-panel > header p, .analytics-retention-note { font-size: 11px; }
.analytics-user-detail > div span, .analytics-user summary small { font-size: 10px; }
@media (max-width: 1100px) {
  .analytics-kpis { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .analytics-toolbar { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .analytics-toolbar > div { grid-column: 1/-1; }
  .analytics-toolbar label { min-width: 0; }
  .analytics-toolbar label:has(#analyticsUser) { grid-column: 1/-1; }
  .analytics-toolbar select { width: 100%; min-width: 0; }
  .analytics-toolbar > button { width: 100%; }
  .analytics-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  .admin-analytics-panel, #analyticsContent, .analytics-toolbar, .analytics-status,
  .analytics-kpis, .analytics-panels, .analytics-panel { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
  .analytics-toolbar > div { overflow-wrap: anywhere; }
  .analytics-status { overflow-wrap: anywhere; }
  .analytics-kpis article { min-width: 0; }
}

/* XENA visual system: type, controls, feedback, responsive targets and brand details. */
:root {
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-display: "Manrope", "DM Sans", system-ui, sans-serif;
  --font-label: 12px;
  --control-height: 42px;
  --control-radius: 10px;
  --success: #53c9a2;
  --success-soft: rgba(83,201,162,.12);
  --info: #69bdf1;
  --info-soft: rgba(105,189,241,.12);
  --warning: #f0bd65;
  --warning-soft: rgba(240,189,101,.13);
  --danger: #f17e79;
  --danger-soft: rgba(241,126,121,.12);
}
:root[data-theme="light"] {
  --success: #16805e;
  --success-soft: #e6f5ef;
  --info: #1769a2;
  --info-soft: #e7f2fa;
  --warning: #855500;
  --warning-soft: #fff5df;
  --danger: #a53636;
  --danger-soft: #fff0ee;
}
body { font-family: var(--font-body); }
h1, h2, h3, .brand, .login-brand-lockup { font-family: var(--font-display); }
main .eyebrow, .account-dialog .eyebrow, .admin-dialog .eyebrow { font-size: 10px; line-height: 1.4; letter-spacing: .14em; }
main :is(label,.live-hint,.producer-note,.reframe-status,.caption-hint,.guided-preview-notice),
.account-dialog label, .admin-dialog label { font-size: var(--font-label); line-height: 1.5; }
.brand-mark { transition: transform .2s ease, box-shadow .2s ease; }
.brand:hover .brand-mark { transform: translateY(-1px) rotate(-3deg); box-shadow: 0 8px 24px rgba(169,155,255,.28); }
.brand small { font-size: 10px; }

/* Shared form controls. Media previews and color controls retain their own surfaces. */
main :is(select,input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea),
.account-dialog :is(select,input:not([type="checkbox"]):not([type="radio"]),textarea),
.admin-dialog :is(select,input:not([type="checkbox"]):not([type="radio"]),textarea) {
  min-width: 0;
  min-height: var(--control-height);
  border-radius: var(--control-radius);
  font: 500 13px/1.45 var(--font-body);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
main :is(select,input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea) { padding: 10px 12px; }
main textarea, .account-dialog textarea, .admin-dialog textarea { min-height: 88px; resize: vertical; }
main :is(select,input:not([type="file"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),textarea):focus-visible,
.account-dialog :is(select,input:not([type="checkbox"]):not([type="radio"]),textarea):focus-visible,
.admin-dialog :is(select,input:not([type="checkbox"]):not([type="radio"]),textarea):focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 16%, transparent); }
button:disabled, .primary-button:disabled { opacity: .58; }
button[aria-busy="true"] { cursor: progress; }
button[aria-busy="true"]::after { width: 13px; height: 13px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; content: ""; animation: xena-control-spin .7s linear infinite; }
@keyframes xena-control-spin { to { transform: rotate(360deg); } }

/* Statuses share the same meaning wherever a project or tool reports them. */
.project-status, .status-pill, .reframe-job-badge, .live-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.25;
}
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-queued,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-processing,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-rendering,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-downloading,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-tracking,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).queued,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).processing,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).rendering,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).connecting,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).importing,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).reconnecting,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).capturing,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).downloading,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).tracking { border-color: color-mix(in srgb, var(--info) 28%, transparent); color: var(--info); background: var(--info-soft); }
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-completed,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).completed,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).ready,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).imported,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).stopped { border-color: color-mix(in srgb, var(--success) 28%, transparent); color: var(--success); background: var(--success-soft); }
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-failed,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).failed,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).error { border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger); background: var(--danger-soft); }
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-paused,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).paused,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).cancelled,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).interrupted,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).stopping { border-color: color-mix(in srgb, var(--warning) 28%, transparent); color: var(--warning); background: var(--warning-soft); }
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-review,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).review,
:is(.project-status,.status-pill,.reframe-job-badge,.live-status-badge).status-ready { border-color: color-mix(in srgb, var(--lime) 35%, transparent); color: var(--lime); background: var(--lime-soft); }

/* Errors and loading feedback remain visible on both themes. */
.error-message, [role="alert"]:not([hidden]), .reframe-status.error,
.producer-status.error, .standalone-caption-error.visible, .live-error-status {
  border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
  border-radius: 10px;
  color: var(--danger) !important;
  background: var(--danger-soft);
}
.error-message, [role="alert"]:not([hidden]) { padding: 10px 12px; text-align: left; line-height: 1.5; }
.projects-loading { color: var(--muted); }
.processing-view, .processing-orbit, [aria-busy="true"] { color: var(--info); }
.engine-banner, .engine-chip, .producer-status, .reframe-status,
.standalone-caption-message, .editor-footer, .toast { line-height: 1.5; }
.live-empty, .projects-empty-state, .reframe-empty, .admin-empty-state { color: var(--muted); line-height: 1.6; }

/* Stronger contrast and touch sizes in the responsive navigation. */
.app-tabs button[aria-selected="true"], .app-tabs button.active { font-weight: 750; }
.tool-step-nav button { min-width: 0; }
.account-tabs button, .admin-dialog > nav button { min-height: 42px; }
@media (max-width: 700px) {
  .app-tabs button, .account-tabs button, .admin-dialog > nav button,
  .guided-step-nav button, .tool-step-nav button,
  .library-tools input, .library-tools select { min-height: 44px; }
  .app-tabs button { font-size: 11px; }
  .topbar, main, footer { width: calc(100% - 24px); }
  .hero.phase-two-hero h1 { line-height: 1.08; }
  .live-page, .reframe-page, .producer-page, .standalone-captions-page { padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark { transition: none; }
  .brand:hover .brand-mark { transform: none; }
}