/* O atributo HTML `hidden` deve sempre esconder. Qualquer regra com
   display:flex/grid/etc. sobrescreve a folha do user agent — esta linha
   garante que `hidden` continue funcionando. */
[hidden] { display: none !important; }

/* ============================================================================
   ROTO-MASTER · PROTÓTIPO NAVEGÁVEL v2
   ----------------------------------------------------------------------------
   Metáfora: GALERIA (projetos+assets) · ATELIÊ (workbench do usuário).
   Os dois espaços têm assinaturas visuais distintas — paleta, densidade,
   "cheiro" — para que a troca entre eles seja sentida, não apenas lida.

   Type system:
     · Fraunces (serif itálica) → títulos, nomes de espaços
     · JetBrains Mono → labels, números, body, código

   Color system:
     · Ink-black canvas com paper-warm graphite
     · Galeria: tom frio, ink puro, hairlines retas
     · Ateliê: tom quente, faixa cobre como assinatura, gradiente sutil
   ============================================================================ */

:root {
  /* ink scale */
  --ink-0:  #050506;
  --ink-1:  #0a0a0c;
  --ink-2:  #111114;
  --ink-3:  #16171a;
  --ink-4:  #1d1e23;
  --line:   #1a1b1e;
  --line-2: #232428;

  /* paper scale */
  --paper:    #e8e3d8;
  --paper-2:  #b8b1a0;
  --paper-3:  #807a6c;
  --paper-4:  #56524a;
  --paper-5:  #3a3833;

  /* accents */
  --copper:      #d97a3a;
  --copper-2:    #b8651e;
  --copper-soft: rgba(217, 122, 58, 0.12);
  --copper-glow: rgba(217, 122, 58, 0.35);
  --amber:       #e9c25c;
  --moss:        #6b8e5a;
  --rust:        #b54848;

  --font-display: 'Fraunces', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'IBM Plex Mono', Consolas, monospace;

  --header-h: 60px;
  --max-w:    1480px;

  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ----------------------------------------------------------------------------
   reset & base
   ---------------------------------------------------------------------------- */

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

html, body {
  height: 100%;
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'tnum', 'cv02', 'cv03', 'cv04';
  letter-spacing: -0.005em;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-x: hidden;
  transition: background 600ms var(--ease);
}
body[data-screen="home"], body[data-screen="project"] {
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
}

/* assinatura visual — galeria: ink puro com leve calor distante */
body[data-space="galeria"] {
  background:
    radial-gradient(1400px 900px at 85% -200px, rgba(184, 177, 160, 0.04), transparent 60%),
    radial-gradient(1000px 700px at 5% 110%, rgba(217, 122, 58, 0.025), transparent 60%),
    var(--ink-0);
}

/* assinatura visual — ateliê: ink quente, cobre laterais, sensação de bancada */
body[data-space="atelie"] {
  background:
    radial-gradient(1200px 600px at 0% 0%, rgba(217, 122, 58, 0.08), transparent 55%),
    radial-gradient(900px 500px at 100% 100%, rgba(217, 122, 58, 0.05), transparent 55%),
    radial-gradient(600px 400px at 50% 50%, rgba(233, 194, 92, 0.025), transparent 60%),
    var(--ink-0);
}

::selection { background: var(--copper); color: var(--ink-0); }

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

a { color: inherit; text-decoration: none; }

input, textarea, select {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

input[type="text"], input[type="number"], textarea {
  background: var(--ink-1);
  border: 1px solid var(--line);
  padding: 10px 12px;
  width: 100%;
  transition: border-color 160ms var(--ease);
}
input[type="text"]:focus, input[type="number"]:focus, textarea:focus {
  border-color: var(--copper);
}

code {
  font-family: var(--font-mono);
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 1px 5px;
  color: var(--copper);
  font-size: 0.92em;
}

/* scrollbar custom (regra UI global) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--ink-3);
  border: 2px solid var(--ink-0);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); }
::-webkit-scrollbar-corner { background: transparent; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ----------------------------------------------------------------------------
   chrome global · header
   ----------------------------------------------------------------------------
   O header MUDA visualmente entre Galeria e Ateliê — é um dos sinais que
   ancoram o usuário no espaço atual.
   ---------------------------------------------------------------------------- */

.chrome {
  height: var(--header-h);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 24px;
  position: sticky;
  top: 0;
  z-index: 90;
  border-bottom: 1px solid var(--line);
  background: var(--ink-0);
  transition: background 400ms var(--ease), border-color 400ms var(--ease);
}

body[data-space="galeria"] .chrome {
  background: linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 100%);
  border-bottom-color: var(--line);
}

body[data-space="atelie"] .chrome {
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink-0) 100%);
  border-bottom: 1px solid var(--copper-soft);
  box-shadow: inset 0 -1px 0 0 rgba(217, 122, 58, 0.08);
}

/* chrome left — brand + indicador de espaço */
.chrome-left { display: flex; align-items: center; gap: 24px; }

.brand {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
}
.brand-mark {
  color: var(--copper);
  font-size: 10px;
  transform: translateY(-2px);
}
.brand-name { color: var(--paper); letter-spacing: -0.01em; }
.brand-sep { color: var(--paper-4); margin: 0 1px; }
.brand-version {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 2px 6px;
  margin-left: 2px;
  border-radius: 3px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 400;
  color: var(--paper);
  opacity: 0.35;
  letter-spacing: 0;
  cursor: pointer;
  transition: opacity 150ms var(--ease), background-color 150ms var(--ease);
}
.brand-version:hover {
  opacity: 0.85;
  background: var(--paper-1, rgba(255,255,255,0.05));
}
.brand-version:focus-visible {
  outline: 1px solid var(--copper);
  outline-offset: 1px;
  opacity: 0.85;
}

/* indicador "você está em" — evolução da metáfora dos dois espaços */
.space-label {
  display: flex; flex-direction: column;
  border-left: 1px solid var(--line);
  padding-left: 16px;
  line-height: 1.1;
}
.space-label-here {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-4);
}
.space-label-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  font-weight: 500;
  margin-top: 2px;
  transition: color 300ms var(--ease);
}
body[data-space="galeria"] .space-label-name { color: var(--paper); }
body[data-space="atelie"] .space-label-name { color: var(--copper); }

/* chrome center — breadcrumb */
.chrome-center { display: flex; justify-content: center; }
.breadcrumb {
  list-style: none;
  display: flex; align-items: center; gap: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--paper-3);
}
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li:not(:last-child)::after {
  content: '›';
  color: var(--paper-5);
  margin-left: 4px;
}
.breadcrumb li:last-child {
  color: var(--paper);
  font-weight: 500;
}

/* chrome right — alternador binário Galeria/Ateliê */
.chrome-right {
  display: flex; align-items: center; gap: 16px;
  justify-content: flex-end;
}

.token-copy-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper-3);
  cursor: pointer;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.token-copy-btn:hover {
  color: var(--paper);
  border-color: var(--paper-4);
}
.token-copy-icon { font-size: 13px; line-height: 1; }

/* === bandeja de notificações global === */
.notif-tray { position: relative; }
.notif-bell {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper-3);
  cursor: pointer;
  position: relative;
  transition: color 150ms var(--ease), border-color 150ms var(--ease);
}
.notif-bell:hover { color: var(--paper); border-color: var(--paper-4); }
.notif-bell.is-active { color: var(--paper); border-color: var(--paper); }
.notif-bell-icon { font-size: 14px; line-height: 1; }
.notif-bell-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--rust, #d2693c);
  color: var(--ink-0);
  font-size: 10px; font-weight: 600;
  border: 1px solid var(--ink-0);
}
.notif-bell-badge.is-quiet {
  background: var(--paper-4); color: var(--ink-0);
}
.notif-bell.is-active .notif-bell-icon {
  animation: notif-pulse 1.6s var(--ease) infinite;
}
@keyframes notif-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.notif-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: 360px;
  max-height: 480px;
  background: var(--ink-1, #14171c);
  border: 1px solid var(--line);
  display: flex; flex-direction: column;
  z-index: 700;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.notif-tray.is-open .notif-bell { color: var(--paper); border-color: var(--paper); }

.notif-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
.notif-panel-title {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--paper-3);
}
.notif-panel-clear {
  background: none; border: 0; color: var(--paper-3);
  font-size: 10px; letter-spacing: 0.06em; cursor: pointer;
  padding: 4px 6px;
}
.notif-panel-clear:hover { color: var(--paper); }
.notif-panel-head-actions {
  display: flex; align-items: center; gap: 6px;
}
.notif-panel-close {
  background: none; border: 0; color: var(--paper-4);
  font-size: 18px; line-height: 1; cursor: pointer;
  padding: 2px 6px;
}
.notif-panel-close:hover { color: var(--paper); }

.notif-list { overflow-y: auto; flex: 1 1 auto; }
.notif-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--paper-4);
  font-size: 11px;
  line-height: 1.6;
}

.notif-item {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  cursor: default;
}
.notif-item:last-child { border-bottom: 0; }
.notif-item-completed { cursor: pointer; }
.notif-item-completed:hover { background: rgba(255,255,255,0.02); }

.notif-item-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}
.notif-item-chip {
  font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid var(--line);
}
.notif-item-chip.is-queued { color: var(--paper-3); }
.notif-item-chip.is-running {
  color: var(--rust, #d2693c); border-color: var(--rust, #d2693c);
  animation: notif-pulse 1.4s var(--ease) infinite;
}
.notif-item-chip.is-done { color: #8acf8a; border-color: #4a7a4a; }
.notif-item-chip.is-failed { color: #d27575; border-color: #7a4848; }

.notif-item-model { font-size: 10px; color: var(--paper-3); }
.notif-item-elapsed {
  font-size: 10px; color: var(--paper-4); margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.notif-item-x {
  margin-left: auto;
  background: none; border: 0; color: var(--paper-4);
  font-size: 16px; line-height: 1; cursor: pointer;
  padding: 0 4px;
}
.notif-item-running .notif-item-x,
.notif-item-queued .notif-item-x { display: none; }
.notif-item-x:hover { color: var(--paper); }

.notif-item-prompt {
  font-size: 11px; color: var(--paper-2);
  line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.notif-item-err {
  margin-top: 4px;
  font-size: 10px; color: #d27575;
  line-height: 1.4;
}
.notif-item-actions { display: flex; gap: 6px; margin-top: 6px; }
.notif-item-action {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper-3);
  font-size: 10px; letter-spacing: 0.04em;
  padding: 4px 8px;
  cursor: pointer;
}
.notif-item-action:hover { color: var(--paper); border-color: var(--paper-4); }
.notif-item-open { color: var(--paper); border-color: var(--paper-4); }

/* modal de preview de vídeo (abre da bandeja) */
.job-preview-card { max-width: 720px; }
.job-preview-player {
  background: #000;
  margin-bottom: 14px;
  aspect-ratio: 16/9;
  display: flex; align-items: center; justify-content: center;
}
.job-preview-player video {
  max-width: 100%; max-height: 100%;
  display: block;
}
.job-preview-meta { display: flex; flex-direction: column; gap: 8px; }
.job-preview-row { display: flex; gap: 12px; font-size: 11px; }
.job-preview-key {
  flex: 0 0 80px;
  color: var(--paper-4);
  letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 10px;
}
.job-preview-val {
  flex: 1 1 auto; color: var(--paper);
  white-space: pre-wrap; word-break: break-word;
}
.btn.btn-danger { color: #d27575; border-color: #7a4848; }
.btn.btn-danger:hover { color: #fff; background: #7a4848; }

.space-switch {
  position: relative;
  display: inline-flex;
  background: var(--ink-1);
  border: 1px solid var(--line);
  padding: 3px;
}
.space-switch-btn {
  position: relative;
  z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 7px 16px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper-3);
  transition: color 200ms var(--ease);
  white-space: nowrap;
}
.space-switch-btn .space-switch-icon {
  font-size: 11px;
  opacity: 0.7;
  margin-right: 2px;
}
.space-switch-btn.is-active {
  color: var(--paper);
}
.space-switch-btn.is-active .space-switch-icon {
  opacity: 1;
}
body[data-space="atelie"] .space-switch-btn[data-space="atelie"].is-active {
  color: var(--copper);
}
.space-switch-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: calc(50% - 3px);
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  z-index: 1;
  transition: transform 280ms var(--ease-out), background 280ms var(--ease-out);
  left: 3px;
}
body[data-space="atelie"] .space-switch-thumb {
  transform: translateX(calc(100% + 0px));
  background: linear-gradient(180deg, rgba(217, 122, 58, 0.18), rgba(217, 122, 58, 0.06));
  border-color: var(--copper-soft);
}

.user-pill {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--line);
  background: var(--ink-1);
}
.user-pill-avatar {
  width: 22px; height: 22px;
  background: var(--copper);
  color: var(--ink-0);
  font-weight: 600;
  display: grid; place-items: center;
  font-size: 11px;
}
.user-pill-email {
  font-size: 11px;
  color: var(--paper-2);
}

/* ----------------------------------------------------------------------------
   transição entre espaços (overlay animado)
   ----------------------------------------------------------------------------
   Quando o usuário aciona o alternador, esse overlay sobe rapidamente,
   anuncia o destino, e desce. Não é loading — é o equivalente visual a
   "abrir uma porta entre dois lugares".
   ---------------------------------------------------------------------------- */

.space-transition {
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 280ms var(--ease);
  display: grid;
  place-items: center;
  background: var(--ink-0);
}
.space-transition.is-on {
  opacity: 1;
  pointer-events: auto;
}
.space-transition-inner {
  text-align: center;
  transform: translateY(8px);
  opacity: 0;
  transition: opacity 280ms var(--ease) 80ms, transform 280ms var(--ease-out) 80ms;
}
.space-transition.is-on .space-transition-inner {
  opacity: 1;
  transform: translateY(0);
}
.space-transition-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: -0.02em;
}
body[data-space="atelie"] .space-transition-label,
.space-transition[data-target="atelie"] .space-transition-label {
  color: var(--copper);
}
.space-transition-sub {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-4);
  margin-top: 8px;
}

/* ----------------------------------------------------------------------------
   stage / screens
   ---------------------------------------------------------------------------- */

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.stage-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 32px 64px;
  width: 100%;
}

.screen { display: none; }
body[data-screen="home"]    .screen-gal-home    { display: block; }
body[data-screen="project"] .screen-gal-project { display: block; }
body[data-screen="atelie"]  .screen-atelie {
  display: flex;
  flex: 1;
  min-height: 0;
}
body[data-screen="editor"]  .screen-editor {
  display: flex;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

/* esconde galeria-elements ao entrar em outros espaços */
body[data-space="atelie"] .screen-gal-home,
body[data-space="atelie"] .screen-gal-project { display: none; }

/* ----------------------------------------------------------------------------
   page-head (compartilhado entre telas)
   ---------------------------------------------------------------------------- */

.page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.page-head-meta { max-width: 720px; }
.page-head-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-4);
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.page-head-eyebrow .sep { color: var(--paper-5); }
.page-head-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--paper);
}
.page-head-title em {
  font-style: italic;
  color: var(--copper);
}
.page-head-sub {
  margin-top: 10px;
  color: var(--paper-3);
  font-size: 13px;
  max-width: 600px;
}
.page-head-actions {
  display: flex; align-items: center; gap: 12px;
}

.link-back {
  color: var(--paper-3);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: color 160ms var(--ease);
}
.link-back:hover { color: var(--copper); }

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

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  font-size: 12px;
  letter-spacing: 0.04em;
  border: 1px solid var(--line-2);
  background: var(--ink-1);
  color: var(--paper);
  transition: all 160ms var(--ease);
  white-space: nowrap;
}
.btn:hover {
  border-color: var(--paper-4);
  background: var(--ink-2);
}
.btn .btn-icon {
  color: var(--copper);
  font-weight: 500;
}
.btn-lg { padding: 12px 20px; font-size: 13px; }
.btn-primary {
  border-color: var(--copper-2);
  background: linear-gradient(180deg, rgba(217, 122, 58, 0.18), rgba(217, 122, 58, 0.06));
  color: var(--copper);
}
.btn-primary:hover {
  border-color: var(--copper);
  background: linear-gradient(180deg, rgba(217, 122, 58, 0.28), rgba(217, 122, 58, 0.12));
}
.btn-primary .btn-icon { color: var(--copper); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--paper-2); }
.btn-ghost:hover { color: var(--paper); border-color: var(--paper-4); }

.btn-publish {
  border-color: var(--copper);
  background: var(--copper);
  color: var(--ink-0);
  font-weight: 600;
}
.btn-publish:hover {
  background: var(--copper-2);
  border-color: var(--copper-2);
}
.btn-publish .btn-icon { color: var(--ink-0); }

/* filter chips */
.filter-chips {
  display: inline-flex;
  background: var(--ink-1);
  border: 1px solid var(--line);
}
.chip {
  padding: 8px 14px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--paper-3);
  border-right: 1px solid var(--line);
  transition: all 160ms var(--ease);
}
.chip:last-child { border-right: none; }
.chip:hover { color: var(--paper); }
.chip.is-active {
  background: var(--ink-3);
  color: var(--copper);
}

/* ----------------------------------------------------------------------------
   GALERIA · grid de projetos
   ---------------------------------------------------------------------------- */

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}

.project-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  padding: 20px;
  cursor: pointer;
  transition: all 200ms var(--ease);
  position: relative;
  overflow: hidden;
}
.project-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(217, 122, 58, 0.06), transparent 40%);
  opacity: 0;
  transition: opacity 200ms var(--ease);
  pointer-events: none;
}
.project-card:hover {
  border-color: var(--paper-5);
  transform: translateY(-2px);
}
.project-card:hover::before { opacity: 1; }

.project-card-thumbs {
  display: flex;
  height: 140px;
  margin-bottom: 16px;
  background: var(--ink-0);
  border: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}
.project-card-thumbs .thumb {
  flex: 1;
  border-right: 1px solid var(--ink-0);
  background-size: cover;
  background-position: center;
  position: relative;
}
.project-card-thumbs .thumb:last-child { border-right: none; }
.project-card-thumbs .thumb.empty {
  background: repeating-linear-gradient(
    45deg, var(--ink-1), var(--ink-1) 6px, var(--ink-2) 6px, var(--ink-2) 12px
  );
}

.project-card-name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 8px;
  color: var(--paper);
}
.project-card-meta {
  display: flex; gap: 16px;
  font-size: 11px;
  color: var(--paper-3);
  letter-spacing: 0.04em;
}
.project-card-meta .meta-num { color: var(--copper); font-weight: 500; }

/* ----------------------------------------------------------------------------
   GALERIA · grid de assets
   ---------------------------------------------------------------------------- */

.asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 40px;
}

/* asset-card: ver bloco "asset card · atalhos no hover" no fim do arquivo
   (vira <button>; estilo consolidado lá pra evitar overrides). */

.asset-card-preview {
  height: 180px;
  background: var(--ink-0);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.asset-card-preview .preview-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 64px;
  color: var(--paper-5);
}
.asset-card-status {
  position: absolute;
  top: 10px; right: 10px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid var(--line);
  background: var(--ink-1);
  color: var(--paper-3);
}
.asset-card-status.is-feito {
  color: var(--moss);
  border-color: rgba(107, 142, 90, 0.3);
}
.asset-card-status.is-pendente {
  color: var(--amber);
  border-color: rgba(233, 194, 92, 0.3);
}

.asset-card-body { padding: 14px 16px; }
.asset-card-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin-bottom: 6px;
}
.asset-card-meta {
  display: flex; justify-content: space-between;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--paper-4);
}
.asset-card-source {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px;
  color: var(--paper-3);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}
.asset-card-source-icon { color: var(--copper); }

/* empty call (no detalhe do projeto) — não é botão de "criar asset" */
.empty-call {
  border: 1px dashed var(--line-2);
  padding: 32px;
  text-align: center;
  color: var(--paper-3);
  font-size: 13px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}
.empty-call-mark {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--copper);
  margin-bottom: 10px;
}
.empty-call p { margin-bottom: 16px; }
.empty-call strong { color: var(--paper); font-weight: 500; }
.empty-call em { color: var(--copper); font-style: italic; }

/* ----------------------------------------------------------------------------
   ATELIÊ · sidebar + stage
   ----------------------------------------------------------------------------
   A sidebar lista as 4 subseções DIRETAMENTE, em paralelo. Não há
   "Workbench" como item-pai. A sidebar É a workbench.
   ---------------------------------------------------------------------------- */

.screen-atelie {
  min-height: calc(100vh - var(--header-h));
}

.atelie-side {
  width: 260px;
  flex-shrink: 0;
  border-right: 1px solid var(--copper-soft);
  background: linear-gradient(180deg, rgba(217, 122, 58, 0.04), transparent 60%), var(--ink-0);
  padding: 32px 0;
  display: flex;
  flex-direction: column;
}

.atelie-side-head {
  padding: 0 24px 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.atelie-side-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
}
.atelie-side-tagline {
  font-family: var(--font-display);
  font-size: 18px;
  margin-top: 6px;
  color: var(--paper-2);
}
.atelie-side-tagline em { font-style: italic; color: var(--paper); }

.atelie-nav {
  display: flex; flex-direction: column;
  padding: 0 12px;
  gap: 2px;
}
.atelie-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1px solid transparent;
  text-align: left;
  font-size: 13px;
  color: var(--paper-2);
  transition: all 160ms var(--ease);
  position: relative;
}
.atelie-nav-icon {
  width: 18px;
  color: var(--paper-4);
  font-size: 12px;
  text-align: center;
  flex-shrink: 0;
}
.atelie-nav-label { flex: 1; }
.atelie-nav-count {
  font-size: 10px;
  color: var(--paper-4);
  font-variant-numeric: tabular-nums;
}
.atelie-nav-item:hover {
  background: var(--ink-2);
  color: var(--paper);
}
.atelie-nav-item:hover .atelie-nav-icon { color: var(--paper-2); }
.atelie-nav-item.is-active {
  background: var(--ink-2);
  border-color: var(--copper-soft);
  color: var(--copper);
}
.atelie-nav-item.is-active .atelie-nav-icon { color: var(--copper); }
.atelie-nav-item.is-active .atelie-nav-count { color: var(--copper); }
.atelie-nav-item.is-active::before {
  content: '';
  position: absolute;
  left: -12px; top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 22px;
  background: var(--copper);
}

.atelie-side-foot {
  margin-top: auto;
  padding: 24px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--paper-4);
  line-height: 1.6;
}
.atelie-side-foot em { color: var(--copper); font-style: italic; }

.atelie-stage {
  flex: 1;
  padding: 48px 48px 64px;
  overflow-y: auto;
}

.atelie-sub > .page-head { margin-bottom: 28px; }

/* ----------------------------------------------------------------------------
   ATELIÊ · grid de vídeos
   ---------------------------------------------------------------------------- */

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

.video-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 200ms var(--ease);
  position: relative;
}

/* multi-select */
.multi-select-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--ink-1);
  border: 1px solid var(--copper, var(--rust, #d2693c));
  margin-bottom: 14px;
  /* sticky no topo do .atelie-stage (que tem overflow-y:auto). Sem isso,
     com muitos vídeos selecionados o user precisava rolar de volta pro
     topo só pra clicar em "jogar na lixeira". */
  position: sticky;
  top: 0;
  z-index: 50;
  /* escudo opaco pros cards passarem por baixo sem aparecer atravessando
     a borda translúcida do container. */
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.6);
}
.multi-select-count {
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--paper);
}
.btn-sm { padding: 6px 12px; font-size: 11px; }
.video-grid.is-multi-select .video-card { cursor: pointer; }
.video-grid.is-multi-select .video-card:hover {
  border-color: var(--paper-4);
}
.video-grid.is-multi-select .video-card-hover-actions {
  display: none;
}
.video-card.is-selected {
  border-color: var(--copper, #d2693c);
  box-shadow: inset 0 0 0 2px var(--copper, #d2693c);
}
.video-card-check {
  position: absolute;
  top: 8px; left: 8px;
  width: 22px; height: 22px;
  background: var(--ink-0);
  border: 1px solid var(--paper-4);
  display: flex; align-items: center; justify-content: center;
  z-index: 3;
}
.video-card-check-mark {
  font-size: 13px; line-height: 1;
  color: var(--copper, #d2693c);
  opacity: 0;
}
.video-card.is-selected .video-card-check {
  background: var(--copper, #d2693c);
  border-color: var(--copper, #d2693c);
}
.video-card.is-selected .video-card-check-mark {
  opacity: 1;
  color: var(--ink-0);
}
.btn.is-active {
  color: var(--paper);
  border-color: var(--paper);
}
.video-card-hover-actions {
  position: absolute;
  top: 8px; right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
}
.video-card:hover .video-card-hover-actions,
.video-card:focus-within .video-card-hover-actions {
  opacity: 1;
  transform: translateY(0);
}
.video-card-hover-btn {
  width: 24px; height: 24px;
  background: rgba(5, 5, 6, 0.85);
  border: 1px solid var(--line-2);
  color: var(--paper-3);
  font-size: 13px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: all 140ms var(--ease);
}
.video-card-hover-btn:hover {
  color: var(--copper);
  border-color: var(--copper);
  background: rgba(217, 122, 58, 0.08);
}
.video-card-hover-btn-danger:hover {
  color: var(--rust);
  border-color: var(--rust);
  background: rgba(181, 72, 72, 0.08);
}
.video-card:hover {
  border-color: var(--paper-5);
  transform: translateY(-2px);
}

.video-card-thumb {
  height: 150px;
  background: var(--ink-0);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.video-card-thumb .play-mark {
  font-size: 28px;
  color: var(--paper-4);
  z-index: 2;
}
.video-card-thumb .thumb-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.5;
}
.video-card-duration {
  position: absolute;
  bottom: 8px; right: 8px;
  font-size: 10px;
  letter-spacing: 0.04em;
  background: rgba(5, 5, 6, 0.85);
  color: var(--paper-2);
  padding: 2px 6px;
  border: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums;
}

.video-card-body { padding: 12px 14px; }
.video-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.2;
}

/* selos: origem + publicação */
.video-card-tags {
  display: flex; gap: 6px;
  flex-wrap: wrap;
}
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  color: var(--paper-3);
}
.tag-icon { font-size: 9px; }
.tag-origin-upload    .tag-icon { color: var(--paper-2); }
.tag-origin-url       .tag-icon { color: var(--moss); }
.tag-origin-generic   .tag-icon { color: var(--amber); }
.tag-origin-character .tag-icon { color: var(--copper); }

.tag-published {
  background: var(--copper-soft);
  border-color: var(--copper-soft);
  color: var(--copper);
}
.tag-published em {
  font-style: italic;
  font-family: var(--font-display);
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--paper);
  margin-left: 4px;
}
button.tag {
  font-family: inherit;
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.video-card-published-link:hover {
  background: rgba(217, 122, 58, 0.18);
  border-color: var(--copper);
}
.tag-draft {
  color: var(--paper-4);
}
.tag-cost {
  color: var(--paper-3);
  background: rgba(233, 194, 92, 0.06);
  border: 1px solid rgba(233, 194, 92, 0.18);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------------------
   ATELIÊ · personagens, enquadramentos, cameras
   ---------------------------------------------------------------------------- */

.personagem-grid, .enquadramento-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}

.entity-card {
  background: var(--ink-1);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 200ms var(--ease);
}
.entity-card:hover { border-color: var(--paper-5); transform: translateY(-2px); }
.entity-card-portrait {
  height: 200px;
  background: var(--ink-0);
  border-bottom: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 56px;
  color: var(--paper-5);
  position: relative;
  overflow: hidden;
}
.entity-card-body { padding: 12px 14px; }
.entity-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
}
.entity-card-meta {
  font-size: 10px;
  color: var(--paper-4);
  letter-spacing: 0.04em;
  margin-top: 4px;
}
.entity-card-spec {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--copper);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.camera-list {
  display: flex; flex-direction: column;
  gap: 6px;
  max-width: 720px;
}
.camera-row {
  display: grid;
  grid-template-columns: 40px 1fr 100px 100px;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  font-size: 12px;
}
.camera-row-icon { color: var(--copper); font-size: 14px; }
.camera-row-name { font-family: var(--font-display); font-size: 15px; }
.camera-row-meta {
  font-size: 10px;
  color: var(--paper-3);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------------------
   EDITOR
   ---------------------------------------------------------------------------- */

.screen-editor { /* dimensões aplicadas quando data-screen="editor" */ }

.editor-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 320px;
  min-height: 0;
}

.editor-canvas {
  background: var(--ink-0);
  display: grid;
  grid-template-rows: 1fr auto;
  border-right: 1px solid var(--line);
  min-height: 0;
}
.editor-frame {
  display: grid; place-items: center;
  min-height: 0;
  background: repeating-linear-gradient(
    45deg, var(--ink-1), var(--ink-1) 10px, var(--ink-0) 10px, var(--ink-0) 20px
  );
}
.editor-frame-stub {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--paper-4);
  font-size: 24px;
  border: 1px dashed var(--paper-5);
  padding: 32px 64px;
}
.editor-transport {
  border-top: 1px solid var(--line);
  background: var(--ink-1);
  padding: 16px 24px;
}
.transport-row {
  display: flex; align-items: center; gap: 12px;
}
.t-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-size: 14px;
  color: var(--paper-2);
  transition: all 160ms var(--ease);
}
.t-btn:hover { border-color: var(--paper-4); color: var(--paper); }
.t-btn-play {
  background: var(--copper-soft);
  border-color: var(--copper-soft);
  color: var(--copper);
}
.t-bar { flex: 1; padding: 0 8px; }
.t-track {
  position: relative;
  height: 8px;
  background: var(--ink-0);
  border: 1px solid var(--line);
}
.t-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: var(--copper-soft);
}
.t-thumb {
  position: absolute;
  top: -4px; bottom: -4px;
  width: 4px;
  background: var(--copper);
}
.t-time {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--paper-3);
  font-variant-numeric: tabular-nums;
  min-width: 100px;
  text-align: right;
}

.editor-side {
  background: var(--ink-1);
  display: flex; flex-direction: column;
  overflow-y: auto;
}
.editor-side-head {
  padding: 24px 20px 20px;
  border-bottom: 1px solid var(--line);
}
.editor-side-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-4);
  margin-bottom: 8px;
}
.editor-side-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 6px;
}
.editor-side-meta {
  font-size: 11px;
  color: var(--paper-3);
}
.editor-section {
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.editor-section-title {
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-4);
  margin-bottom: 12px;
}
.editor-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
}
.editor-row label {
  font-size: 11px;
  color: var(--paper-3);
}
.editor-row input { padding: 6px 10px; }
.preset-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px;
}
.preset-chip {
  padding: 8px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  font-size: 10px;
  color: var(--paper-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.preset-chip:hover { color: var(--paper); border-color: var(--paper-5); }
.preset-chip.is-active {
  border-color: var(--copper-soft);
  background: var(--copper-soft);
  color: var(--copper);
}

.editor-publish {
  margin-top: auto;
  padding: 20px;
  border-top: 1px solid var(--copper-soft);
  background: linear-gradient(180deg, transparent, rgba(217, 122, 58, 0.04));
}
.editor-publish-state {
  display: flex; align-items: center; gap: 8px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 12px;
}
.editor-publish-state .dot {
  width: 6px; height: 6px;
  background: var(--paper-4);
  border-radius: 50%;
}
.editor-publish-state.is-published {
  color: var(--moss);
}
.editor-publish-state.is-published .dot { background: var(--moss); }
.editor-publish-state .dot-warn { background: var(--amber); }

.btn-publish { width: 100%; justify-content: center; padding: 12px; }
.editor-publish-hint {
  font-size: 11px;
  color: var(--paper-4);
  margin-top: 12px;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   modal
   ---------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: grid; place-items: center;
}
.modal[hidden] { display: none; }
/* confirmModal sobrepõe modal principal — z-index maior pra empilhar visualmente */
.modal.modal-stacked { z-index: 700; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 5, 6, 0.78);
  backdrop-filter: blur(4px);
  animation: fadeIn 200ms var(--ease);
}
.modal-card {
  position: relative;
  width: 480px;
  max-width: calc(100vw - 32px);
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
  animation: lift 240ms var(--ease-out);
}
.modal-wide .modal-card { width: 760px; }

/* Modal de prompt cresceu (style-ref + bg-remove + ratio info). Em telas
 * baixas estoura — vira coluna scrollavel no body, mantendo head/foot fixos.
 * .has-scroll-body permite reusar em outros modais grandes. */
.has-scroll-body .modal-card,
[data-modal="fe-prompt"] .modal-card {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}
.has-scroll-body .modal-head,
[data-modal="fe-prompt"] .modal-head,
.has-scroll-body .modal-foot,
[data-modal="fe-prompt"] .modal-foot { flex: 0 0 auto; }
.has-scroll-body .modal-body,
[data-modal="fe-prompt"] .modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  /* scrollbar fina/minimalista — regra global proibe scrollbar nativa. */
  scrollbar-width: thin;
  scrollbar-color: var(--paper-5) transparent;
}
.has-scroll-body .modal-body::-webkit-scrollbar,
[data-modal="fe-prompt"] .modal-body::-webkit-scrollbar { width: 8px; }
.has-scroll-body .modal-body::-webkit-scrollbar-thumb,
[data-modal="fe-prompt"] .modal-body::-webkit-scrollbar-thumb {
  background: var(--paper-5);
  border: 2px solid transparent;
  background-clip: padding-box;
}
.has-scroll-body .modal-body::-webkit-scrollbar-track,
[data-modal="fe-prompt"] .modal-body::-webkit-scrollbar-track { background: transparent; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lift {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.modal-head {
  padding: 24px 24px 16px;
  border-bottom: 1px solid var(--line);
}
.modal-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 8px;
}
.modal-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
}
.modal-sub {
  margin-top: 8px;
  color: var(--paper-3);
  font-size: 12px;
  line-height: 1.5;
}
.modal-sub em { color: var(--copper); font-style: italic; }

.modal-body { padding: 20px 24px; }
.modal-foot {
  padding: 16px 24px;
  border-top: 1px solid var(--line);
  display: flex; justify-content: flex-end; gap: 10px;
}
.modal-foot-wrap {
  flex-wrap: wrap;
  row-gap: 8px;
}
.modal-foot-wrap .btn { flex: 0 1 auto; }

.version-info-list {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 10px 16px;
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
}
.version-info-list dt {
  color: var(--paper-4);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  align-self: center;
}
.version-info-list dd {
  margin: 0;
  color: var(--paper);
}
.version-info-list dd code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--paper-3);
  background: var(--paper-1, rgba(255,255,255,0.04));
  padding: 1px 6px;
  border-radius: 3px;
}

.field {
  display: block;
  margin-bottom: 16px;
}
.field span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 8px;
}
.field-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px;
  background: rgba(233, 194, 92, 0.06);
  border: 1px solid rgba(233, 194, 92, 0.2);
  font-size: 11px;
  color: var(--paper-2);
  line-height: 1.5;
}
.field-row .dot { margin-top: 4px; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; }
.field-row .dot-warn { background: var(--amber); }
.field-row .dot-ok { background: var(--moss); }
.field-row strong { color: var(--paper); font-weight: 500; }
.field-row em { color: var(--paper); font-style: italic; }

/* custom select (regra UI: nunca <select> nativo) */
.custom-select { position: relative; }
.custom-select-btn {
  width: 100%;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
  color: var(--paper);
  transition: border-color 160ms var(--ease);
}
.custom-select-btn:hover { border-color: var(--paper-5); }
.custom-select.is-open .custom-select-btn { border-color: var(--copper); }
.custom-select-btn .caret { color: var(--paper-4); font-size: 10px; transition: transform 160ms var(--ease); }
.custom-select.is-open .custom-select-btn .caret { transform: rotate(180deg); }
.custom-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  list-style: none;
  z-index: 10;
  max-height: 240px;
  overflow-y: auto;
  display: none;
}
.custom-select.is-open .custom-select-menu { display: block; }

/* spinner inline pra botões em estado de loading (publicar, etc.) */
.btn-spin {
  display: inline-block;
  animation: enhance-spin 1.2s linear infinite;
  margin-right: 6px;
}
.btn.is-loading,
.btn-publish.is-loading {
  cursor: progress;
  opacity: 0.85;
}
.btn:disabled, .btn-publish:disabled { cursor: not-allowed; }
.custom-select-menu li {
  padding: 10px 12px;
  font-size: 13px;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  transition: background 120ms var(--ease);
}
.custom-select-menu li:last-child { border-bottom: none; }
.custom-select-menu li:hover {
  background: var(--ink-3);
  color: var(--copper);
}
.custom-select-menu li.is-create {
  color: var(--copper);
  font-style: italic;
  border-top: 1px solid var(--copper-soft);
}

/* flow grid (seletor de fluxo A/B/C/D) */
.flow-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.flow-card {
  text-align: left;
  padding: 20px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  transition: all 200ms var(--ease);
  position: relative;
}
.flow-card:not(:disabled):hover {
  border-color: var(--copper-soft);
  background: var(--ink-3);
  transform: translateY(-2px);
}
.flow-card.is-soon {
  opacity: 0.55;
  cursor: not-allowed;
}
.flow-card-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  color: var(--copper);
  font-weight: 500;
  line-height: 1;
}
.flow-card-name {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--paper);
}
.flow-card p {
  margin-top: 6px;
  font-size: 11px;
  color: var(--paper-3);
  line-height: 1.5;
}
.flow-card .soon {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
}
.flow-card-D {
  background: linear-gradient(135deg, rgba(217, 122, 58, 0.08), transparent 60%), var(--ink-2);
  border-color: var(--copper-soft);
}

/* ----------------------------------------------------------------------------
   toast
   ---------------------------------------------------------------------------- */

.toast[hidden] { display: none; }
.toast {
  position: fixed;
  bottom: 24px; right: 24px;
  background: var(--ink-2);
  border: 1px solid var(--copper-soft);
  border-left: 3px solid var(--copper);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 10px;
  font-size: 12px;
  z-index: 600;
  animation: lift 200ms var(--ease-out);
}
.toast-mark { color: var(--copper); }
.toast-msg { color: var(--paper); }

/* ============================================================================
   EDITOR · WebGL canvas + transport + sliders + export
   ============================================================================ */

.editor-real {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-h));
  flex: 1;
}
.editor-real-shell {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 360px;
  min-height: 0;
}
.editor-canvas-wrap {
  background: var(--ink-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  padding: 24px;
  gap: 16px;
}
.editor-canvas-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 0;
  width: 100%;
}
body.no-video #gl { display: none; }
body:not(.no-video) #empty-hint { display: none; }
body.no-video .editor-transport-real { display: none; }
body.no-video #btn-export { opacity: 0.4; pointer-events: none; }
body.no-video #btn-publish-asset { opacity: 0.4; pointer-events: none; }

#gl {
  max-width: 100%;
  max-height: 100%;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.empty-hint {
  color: var(--paper-3);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  line-height: 2;
}
.empty-hint strong { color: var(--copper); font-weight: 500; }
.empty-hint em { color: var(--amber); font-style: normal; }

/* Empty state visível só em modo rotoscope antes do primeiro build. */
.rotoscope-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  pointer-events: none;
  text-align: center;
  padding: 0 40px;
  background: rgba(5, 5, 6, 0.75);
}
.rotoscope-empty[hidden] { display: none; }
.rotoscope-empty strong {
  color: var(--copper);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.rotoscope-empty p {
  color: var(--paper-3);
  font-size: 12px;
  letter-spacing: 0.06em;
  line-height: 1.6;
  max-width: 420px;
  margin: 0;
}
.rotoscope-empty em {
  color: var(--amber);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 11px;
}

.drop-overlay {
  position: absolute;
  inset: 0;
  background: var(--copper-soft);
  border: 2px dashed var(--copper);
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 10;
}
.drop-overlay.active { display: flex; }
.drop-overlay span {
  color: var(--copper);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
}

.editor-transport-real {
  width: 100%;
  max-width: 800px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.transport-row-real {
  display: flex;
  align-items: center;
  gap: 12px;
}
.mode-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.mode-tab {
  background: transparent;
  color: var(--paper-3);
  padding: 7px 14px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-right: 1px solid var(--line);
  transition: all 160ms var(--ease);
}
.mode-tab:last-child { border-right: 0; }
.mode-tab.active {
  color: var(--copper);
  background: var(--copper-soft);
}
.mode-tab:hover:not(.active) { color: var(--paper); }

.btn-play {
  background: transparent;
  color: var(--moss);
  border: 1px solid var(--moss);
  padding: 8px 18px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  min-width: 90px;
  transition: all 160ms var(--ease);
}
.btn-play:hover:not(:disabled) { background: rgba(107, 142, 90, 0.1); }
.btn-play.playing { color: var(--copper); border-color: var(--copper); }
.btn-play:disabled { opacity: 0.4; cursor: not-allowed; }

.frame-info {
  flex: 1;
  font-size: 11px;
  color: var(--paper-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.frame-info b { color: var(--amber); font-weight: 500; }

.range-wrap {
  position: relative;
  height: 24px;
  padding: 0 6px;
}
.range-wrap .track {
  position: absolute;
  top: 11px; left: 6px; right: 6px;
  height: 2px;
  background: var(--line-2);
}
.range-wrap .track-active {
  position: absolute;
  top: 11px;
  height: 2px;
  background: var(--copper);
}
.range-wrap input[type=range] {
  position: absolute;
  top: 0; left: 6px; right: 6px;
  width: calc(100% - 12px);
  height: 24px;
  margin: 0;
  background: transparent;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.range-wrap input[type=range]::-webkit-slider-runnable-track {
  height: 2px;
  background: transparent;
}
.range-wrap input[type=range]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 12px;
  height: 16px;
  background: var(--copper);
  margin-top: -7px;
  cursor: pointer;
  pointer-events: auto;
  border: 0;
}
.range-wrap input.in-range::-webkit-slider-thumb { background: var(--moss); }
.range-wrap input.out-range::-webkit-slider-thumb { background: var(--amber); }

.markers-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--paper-4);
  font-variant-numeric: tabular-nums;
  padding: 0 6px;
  letter-spacing: 0.06em;
}
.markers-row b { font-weight: normal; }
.markers-row .in-val { color: var(--moss); }
.markers-row .out-val { color: var(--amber); }
.markers-row .ph { color: var(--copper); }

.editor-controls {
  border-left: 1px solid var(--line);
  padding: 18px 20px;
  overflow-y: auto;
  background: var(--ink-1);
}
.editor-controls .ctrl-section {
  margin-bottom: 22px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.editor-controls .ctrl-section:last-child { border-bottom: 0; }

.editor-controls h3 {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--paper-3);
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 500;
}

.ctrl { margin-bottom: 12px; }
.ctrl label {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--paper-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.ctrl label .val {
  color: var(--copper);
  font-variant-numeric: tabular-nums;
}
.editor-controls input[type=range] {
  width: 100%;
  appearance: none;
  background: transparent;
  height: 18px;
}
.editor-controls input[type=range]::-webkit-slider-runnable-track { height: 2px; background: var(--line-2); }
.editor-controls input[type=range]::-webkit-slider-thumb {
  appearance: none;
  width: 10px;
  height: 14px;
  background: var(--copper);
  margin-top: -6px;
  cursor: pointer;
}

.timing-row {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.timing-row label {
  font-size: 11px;
  color: var(--paper-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.timing-row input {
  background: var(--ink-2);
  color: var(--copper);
  border: 1px solid var(--line);
  padding: 6px 8px;
  font-size: 12px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.timing-row input:focus { outline: none; border-color: var(--copper); }

.ctrl-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.ctrl-row input[type=checkbox] {
  accent-color: var(--copper);
  cursor: pointer;
}
.ctrl-row label {
  font-size: 11px;
  color: var(--paper-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  user-select: none;
}

.preset-grid-real {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.preset-grid-real button {
  background: transparent;
  color: var(--paper-3);
  border: 1px solid var(--line);
  padding: 7px 8px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 160ms var(--ease);
}
.preset-grid-real button:hover { color: var(--paper); border-color: var(--paper-4); }
.preset-grid-real button.active {
  color: var(--copper);
  border-color: var(--copper);
  background: var(--copper-soft);
}

#btn-export {
  width: 100%;
  background: transparent;
  color: var(--paper-2);
  border: 1px solid var(--paper-4);
  padding: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: 10px;
  transition: all 160ms var(--ease);
}
#btn-export:hover:not(:disabled) {
  color: var(--paper);
  border-color: var(--paper-2);
  background: rgba(232, 227, 216, 0.04);
}

.editor-publish-real {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--copper-soft);
}
.editor-publish-state-real {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-3);
  margin-bottom: 8px;
}
.editor-publish-state-real .dot-warn {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--amber);
}
.editor-publish-state-real .dot-ok {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--moss);
}

/* indicador de autosave — embaixo do estado de publicação */
.autosave-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-4);
  font-feature-settings: 'tnum';
  margin-top: 2px;
}
.autosave-indicator .autosave-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--paper-5);
  transition: background 200ms var(--ease);
}
.autosave-indicator[data-status="saving"] .autosave-dot { background: var(--amber); animation: autosave-pulse 1.2s ease-in-out infinite; }
.autosave-indicator[data-status="saved"] .autosave-dot { background: var(--moss); }
.autosave-indicator[data-status="error"] .autosave-dot { background: var(--rust); }
.autosave-indicator[data-status="idle"] { opacity: 0.5; }
@keyframes autosave-pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

#btn-publish-asset {
  width: 100%;
  background: var(--copper);
  color: var(--ink-0);
  border: none;
  padding: 11px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 160ms var(--ease);
}
#btn-publish-asset:hover:not(:disabled) { background: var(--copper-2); }
#btn-publish-asset:disabled { opacity: 0.4; cursor: not-allowed; }

#btn-open-as-tirinha {
  width: 100%;
  margin-top: 8px;
  background: transparent;
  color: var(--paper-2);
  border: 1px solid var(--paper-5);
  padding: 10px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 160ms var(--ease);
  cursor: pointer;
}
#btn-open-as-tirinha:hover:not(:disabled) {
  color: var(--paper);
  border-color: var(--paper);
  background: rgba(255,255,255,0.03);
}
#btn-open-as-tirinha:disabled { opacity: 0.4; cursor: not-allowed; }
body.no-video #btn-open-as-tirinha { opacity: 0.4; pointer-events: none; }

.editor-publish-hint-real {
  margin-top: 8px;
  font-size: 10px;
  color: var(--paper-4);
  letter-spacing: 0.04em;
  line-height: 1.6;
}

.progress {
  margin-top: 10px;
  font-size: 10px;
  color: var(--paper-3);
  line-height: 1.6;
  min-height: 28px;
  letter-spacing: 0.04em;
}
.progress .ok { color: var(--moss); }
.progress .err { color: var(--rust); }
.progress .stage { color: var(--copper); }

.progress-bar {
  height: 2px;
  background: var(--line-2);
  margin-top: 6px;
  position: relative;
  overflow: hidden;
}
.progress-bar::after {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: var(--p, 0%);
  background: var(--copper);
  transition: width 0.1s linear;
}

/* ============================================================================
   LOGIN
   ============================================================================ */

#login-screen {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--ink-0);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  z-index: 500;
}
body.app-loading #login-screen,
body.app-unauth #login-screen { display: flex; }

body.app-loading > .chrome,
body.app-loading > .stage,
body.app-unauth > .chrome,
body.app-unauth > .stage { display: none; }

#login-screen .login-brand {
  font-family: var(--font-display);
  font-size: 32px;
  font-style: italic;
  font-weight: 500;
  color: var(--paper);
}
#login-screen .login-brand .mark { color: var(--copper); margin-right: 8px; font-size: 18px; vertical-align: middle; }
#login-screen .login-tagline {
  font-size: 12px;
  color: var(--paper-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  max-width: 480px;
  text-align: center;
  line-height: 1.8;
}
#login-screen .btn-google {
  background: var(--copper);
  color: var(--ink-0);
  padding: 13px 32px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 600;
  transition: all 160ms var(--ease);
}
#login-screen .btn-google:hover { background: var(--copper-2); }
#login-screen .loading-msg {
  font-size: 11px;
  color: var(--paper-4);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
body.app-loading #login-actions { display: none; }
body:not(.app-loading) #login-loading { display: none; }
#login-screen .err {
  color: var(--rust);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-align: center;
  max-width: 420px;
}

/* btn-danger no modal de confirmação */
.btn-danger {
  background: transparent;
  color: var(--rust);
  border: 1px solid var(--rust);
  padding: 9px 16px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: all 160ms var(--ease);
}
.btn-danger:hover { background: rgba(181, 72, 72, 0.08); }

.empty-state {
  padding: 60px 0;
  text-align: center;
  color: var(--paper-3);
  font-size: 12px;
  letter-spacing: 0.08em;
  line-height: 1.8;
}

.user-pill .btn-logout {
  background: transparent;
  border: 0;
  cursor: pointer;
}
.user-pill .btn-logout:hover { color: var(--copper) !important; }

/* ----------------------------------------------------------------------------
   asset card · atalhos no hover (visão 6.7)
   ---------------------------------------------------------------------------- */

.asset-card {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
  background: var(--ink-1);
  border: 1px solid var(--line);
  padding: 0;
  cursor: pointer;
  transition: all 200ms var(--ease);
  position: relative;
}
.asset-card:hover {
  border-color: var(--paper-5);
  transform: translateY(-2px);
}
.asset-card:focus-visible {
  outline: 1px solid var(--copper);
  outline-offset: 2px;
}

.preview-mark-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 96px;
  line-height: 1;
  color: var(--paper-5);
  letter-spacing: -0.02em;
}

/* preview com thumb real (foto/frame do vídeo) — legado */
.asset-card-preview.has-thumb {
  background-size: cover;
  background-position: center;
}
.asset-card-preview.has-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,6,0) 60%, rgba(5,5,6,0.5));
  pointer-events: none;
}

/* preview com vídeo de origem — toca no hover do card */
.asset-card-preview.has-video { background: var(--ink-0); }
.asset-card-preview-video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: var(--ink-0);
  pointer-events: none;
}
.asset-card-preview.has-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,5,6,0) 60%, rgba(5,5,6,0.5));
  pointer-events: none;
  z-index: 1;
}

/* preview com rotoscopia animada (asset feito) */
.asset-card-preview.has-rotoscopy { background: var(--ink-0); }
.asset-card-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: pixelated;
  background: var(--ink-0);
  pointer-events: none;
}

.asset-card-preview .asset-card-status,
.asset-card-preview .asset-card-hover-actions { z-index: 2; }
.video-card-thumb.has-thumb {
  background-size: cover;
  background-position: center;
}
.video-card-thumb.has-thumb .play-mark {
  background: rgba(5,5,6,0.6);
  border-radius: 50%;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

.asset-card-hover-actions {
  position: absolute;
  bottom: 10px; right: 10px;
  display: flex; gap: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms var(--ease), transform 160ms var(--ease);
  pointer-events: none;
}
.asset-card:hover .asset-card-hover-actions,
.asset-card:focus-within .asset-card-hover-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.asset-card-hover-btn {
  width: 28px; height: 28px;
  background: rgba(5, 5, 6, 0.85);
  border: 1px solid var(--line-2);
  color: var(--paper-2);
  font-size: 14px;
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.asset-card-hover-btn:hover {
  color: var(--copper);
  border-color: var(--copper);
  background: rgba(217, 122, 58, 0.08);
}

.asset-card-meta { align-items: center; }
.asset-card-origin {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-3);
}
.asset-card-origin-icon { color: var(--copper); font-size: 10px; }

/* ----------------------------------------------------------------------------
   asset · modal de detalhe (visão seção 6.7)
   ---------------------------------------------------------------------------- */

.asset-detail-card {
  width: 540px;
  max-width: calc(100vw - 32px);
  display: flex;
  flex-direction: column;
}
.asset-detail-head {
  padding: 24px 28px 14px;
}
.asset-detail-eyebrow {
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--copper);
  margin-bottom: 12px;
}
.asset-detail-name-wrap {
  position: relative;
}
.asset-detail-name {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--paper);
  cursor: text;
  outline: none;
  letter-spacing: -0.01em;
}
.asset-detail-name:hover {
  color: var(--copper);
}
.asset-detail-name-input {
  width: 100%;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--paper);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--copper);
  outline: none;
  padding: 0 0 4px;
}

.asset-detail-preview {
  position: relative;
  margin: 4px 28px 16px;
  height: 220px;
  background:
    radial-gradient(420px 220px at 50% 50%, rgba(217, 122, 58, 0.06), transparent 60%),
    var(--ink-0);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  overflow: hidden;
  cursor: default;
}
/* slider de duração + pill de modelo (fluxos C e D de geração) */
.duration-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  background: var(--ink-2);
  outline: none;
  margin: 6px 0 4px;
  cursor: pointer;
}
.duration-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--copper);
  cursor: pointer;
  border: 2px solid var(--ink-1);
}
.duration-slider::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--copper);
  cursor: pointer;
  border: 2px solid var(--ink-1);
}
.duration-model-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--paper-3);
}
.duration-model-prefix { color: var(--paper-4); }
.duration-model-pill {
  font-family: inherit;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  color: var(--paper-2);
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.duration-model-pill:hover {
  border-color: var(--copper);
  color: var(--copper);
}
.duration-model-pill.is-pixverse {
  border-color: rgba(107, 142, 90, 0.5);
  color: var(--moss, #6b8e5a);
}
.duration-model-pill.is-kling {
  border-color: rgba(217, 122, 58, 0.5);
  color: var(--copper);
}
.duration-model-hint {
  font-size: 10px;
  color: var(--paper-4);
  font-style: italic;
}

.asset-detail-preview-video,
.asset-detail-preview-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--ink-0);
}
.asset-detail-preview-canvas { image-rendering: pixelated; }
.asset-detail-preview .asset-detail-status-chip { z-index: 2; }
.asset-detail-preview-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 144px;
  line-height: 1;
  color: var(--paper-5);
  letter-spacing: -0.04em;
  user-select: none;
}
.asset-detail-status-chip {
  position: absolute;
  top: 14px; right: 14px;
  background: var(--ink-1);
  border: 1px solid var(--line-2);
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 160ms var(--ease);
}
.asset-detail-status-chip:hover {
  border-color: var(--paper-3);
}
.asset-detail-status-chip.is-feito {
  color: var(--moss);
  border-color: rgba(107, 142, 90, 0.4);
  background: rgba(107, 142, 90, 0.08);
}
.asset-detail-status-chip.is-pendente {
  color: var(--amber);
  border-color: rgba(233, 194, 92, 0.35);
  background: rgba(233, 194, 92, 0.06);
}

.asset-detail-source {
  margin: 0 28px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  color: var(--paper-3);
}
.asset-detail-source[hidden] { display: none; }
.asset-detail-source-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--paper-4);
}
.asset-detail-source-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line-2);
  color: var(--paper-2);
  cursor: pointer;
  padding: 4px 0;
  font-size: 12px;
  font-family: var(--font-mono);
  transition: color 140ms var(--ease), border-color 140ms var(--ease);
}
.asset-detail-source-link:hover {
  color: var(--copper);
  border-bottom-color: var(--copper);
}
.asset-detail-source-arrow { font-size: 11px; }

.asset-detail-actions {
  margin: 0 28px 18px;
  display: flex;
  gap: 10px;
}
.asset-detail-actions .btn-publish { flex: 1; justify-content: center; }
.asset-detail-actions .btn-ghost { flex: 0 0 auto; padding: 10px 16px; }

.asset-detail-foot {
  border-top: 1px solid var(--line);
  padding: 14px 28px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.asset-detail-meta {
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--paper-4);
}
.asset-detail-unpublish {
  background: transparent;
  border: 0;
  color: var(--paper-4);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 4px 0;
  transition: color 140ms var(--ease);
}
.asset-detail-unpublish:hover { color: var(--rust); }

/* ----------------------------------------------------------------------------
   membros do projeto — barra compacta logo abaixo do título
   ---------------------------------------------------------------------------- */

.members-bar {
  margin-top: 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
  color: var(--paper-3);
}
.members-bar-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--paper-4);
  margin-right: 4px;
}
.members-bar-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 4px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  font-size: 11px;
  color: var(--paper-2);
}
.member-chip.is-owner {
  border-color: var(--copper-soft);
  background: var(--copper-soft);
}
.member-chip.is-pending {
  background: rgba(233, 194, 92, 0.05);
  border-color: rgba(233, 194, 92, 0.25);
}
.member-chip-avatar {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 1px solid var(--line-2);
  display: grid; place-items: center;
  font-size: 9px;
  color: var(--paper-3);
}
.member-chip.is-owner .member-chip-avatar { color: var(--copper); border-color: var(--copper); }
.member-chip-email { letter-spacing: 0; }
.member-chip-tag {
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-3);
  padding-left: 4px;
  border-left: 1px solid var(--line-2);
  margin-left: 2px;
}
.member-chip.is-owner .member-chip-tag { color: var(--copper); border-left-color: rgba(217, 122, 58, 0.3); }
.member-chip-tag.is-pending-tag { color: var(--amber); border-left-color: rgba(233, 194, 92, 0.3); }
.member-chip-remove {
  background: transparent;
  border: 0;
  color: var(--paper-4);
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 0 2px;
  transition: color 140ms var(--ease);
}
.member-chip-remove:hover { color: var(--rust); }

.members-bar-add {
  background: transparent;
  border: 1px dashed var(--line-2);
  color: var(--paper-3);
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.1em;
  cursor: pointer;
  border-radius: 14px;
  transition: all 140ms var(--ease);
}
.members-bar-add:hover { color: var(--copper); border-color: var(--copper); }

.members-add {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  max-width: 560px;
}
.members-add[hidden] { display: none; }
.members-add-input {
  flex: 1;
  min-width: 200px;
  padding: 8px 12px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
  transition: border-color 140ms var(--ease);
}
.members-add-input:focus { border-color: var(--copper); }
.members-add-btn,
.members-add-cancel { white-space: nowrap; padding: 8px 14px; font-size: 10px; }
.members-err {
  flex-basis: 100%;
  color: var(--rust);
  font-size: 11px;
  min-height: 14px;
}

/* ----------------------------------------------------------------------------
   atelie / gerar — fluxo C
   ---------------------------------------------------------------------------- */

.screen-atelie-generate { display: none; }
body[data-screen="atelie-generate"] .screen-atelie-generate { display: block; }

.generate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 24px;
  align-items: start;
}
@media (max-width: 980px) {
  .generate-grid { grid-template-columns: 1fr; }
}

.generate-pane {
  background: var(--ink-1);
  border: 1px solid var(--line);
  padding: 22px 24px 24px;
  position: relative;
  transition: opacity 200ms var(--ease);
}

.generate-drop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(217, 122, 58, 0.12);
  border: 2px dashed var(--copper);
  display: none;
  z-index: 10;
  pointer-events: none;
  align-items: center;
  justify-content: center;
}
.generate-drop-overlay.is-active { display: flex; }
.generate-drop-overlay-msg {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--copper);
  letter-spacing: -0.01em;
}

.generate-or-upload {
  margin-top: 10px;
  font-size: 11px;
  color: var(--paper-4);
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.generate-upload-link {
  cursor: pointer;
  color: var(--paper-2);
  border-bottom: 1px dashed var(--paper-4);
  transition: all 140ms var(--ease);
  padding: 1px 0;
}
.generate-upload-link:hover {
  color: var(--copper);
  border-bottom-color: var(--copper);
}
.generate-or-upload-hint {
  font-size: 10px;
  color: var(--paper-5);
}
.generate-pane.is-locked {
  opacity: 0.55;
}
.generate-pane-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 18px;
}
.generate-step-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  color: var(--copper);
  line-height: 1;
}
.generate-pane-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.01em;
  flex: 1;
}
.generate-pane-cost {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--paper-4);
  font-feature-settings: 'tnum';
}

.generate-pane .field {
  margin-bottom: 14px;
}
.generate-pane textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  min-height: 80px;
  transition: border-color 140ms var(--ease);
}
.generate-pane textarea:focus { border-color: var(--copper); }
.field-label-row em { font-style: italic; color: var(--paper-4); text-transform: none; letter-spacing: 0; font-size: 10px; margin-left: 4px; }
.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.enhance-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  padding: 4px 9px;
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.enhance-btn:hover:not(:disabled) {
  color: var(--copper);
  border-color: var(--copper);
}
.enhance-btn:disabled { opacity: 0.7; cursor: progress; }
.enhance-btn .enhance-icon { font-size: 11px; color: var(--copper); }
.enhance-btn.is-loading .enhance-icon {
  animation: enhance-spin 1.4s linear infinite;
}
@keyframes enhance-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.enhance-undo {
  display: inline-block;
  margin-top: 4px;
  background: transparent;
  border: 0;
  color: var(--paper-4);
  font-size: 10px;
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: 2px 0;
  transition: color 140ms var(--ease);
}
.enhance-undo:hover { color: var(--copper); }
.enhance-undo[hidden] { display: none; }

/* Cabecalho de field com label + bot~oes inline (ex: melhorar prompt) */
.field-row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}

/* Hint debaixo do dropdown de modelo no modal de prompt do Frames Editor. */
.fe-prompt-model-hint {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--paper-5);
  font-style: italic;
}
.fe-prompt-model-sub {
  margin-left: 10px;
  font-size: 10px;
  color: var(--paper-5);
  font-style: italic;
}
.custom-select-menu li:hover .fe-prompt-model-sub { color: inherit; }

.generate-refs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.generate-ref-item {
  position: relative;
  width: 64px; height: 64px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  overflow: hidden;
}
.generate-ref-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.generate-ref-item.is-uploading { opacity: 0.5; }
.generate-ref-item.is-failed { border-color: var(--rust); }
.generate-ref-status {
  position: absolute;
  inset: 0;
  display: grid; place-items: center;
  font-size: 9px;
  color: var(--paper-3);
  background: rgba(5,5,6,0.7);
}
.generate-ref-remove {
  position: absolute;
  top: 2px; right: 2px;
  width: 18px; height: 18px;
  background: rgba(5,5,6,0.85);
  border: 0;
  color: var(--paper-2);
  font-size: 13px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms var(--ease);
}
.generate-ref-item:hover .generate-ref-remove { opacity: 1; }
.generate-ref-remove:hover { color: var(--rust); }
.generate-refs-add {
  display: inline-block;
  padding: 6px 12px;
  border: 1px dashed var(--line-2);
  cursor: pointer;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--paper-3);
  transition: all 140ms var(--ease);
}
.generate-refs-add:hover { color: var(--copper); border-color: var(--copper); }

.generate-pane-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.generate-status {
  margin-top: 10px;
  padding: 10px 14px;
  background: var(--copper-soft);
  border: 1px solid rgba(217, 122, 58, 0.3);
  font-size: 11px;
  color: var(--copper);
  letter-spacing: 0.04em;
}
.generate-err {
  margin-top: 8px;
  color: var(--rust);
  font-size: 11px;
  min-height: 14px;
  word-break: break-word;
}

.generate-preview {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.generate-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.generate-preview-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-4);
}
.generate-preview-img {
  width: 100%;
  display: block;
  border: 1px solid var(--line);
  background: var(--ink-0);
}

.generate-locked-msg {
  font-size: 11px;
  color: var(--paper-4);
  letter-spacing: 0.06em;
  padding: 18px 0;
}

.generate-base-image {
  margin-bottom: 14px;
}
.generate-base-image img {
  width: 100%;
  display: block;
  border: 1px solid var(--line);
  background: var(--ink-0);
  margin-bottom: 6px;
}
.generate-base-image-meta {
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-4);
}

.generate-duration {
  display: flex;
  gap: 0;
}
.generate-duration .chip { padding: 8px 16px; }

.generate-attempts {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.generate-attempts-label {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-4);
  margin-bottom: 10px;
}
.generate-attempts-label span {
  color: var(--copper);
  margin-left: 4px;
}
.generate-attempts-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.generate-attempt {
  display: flex;
  gap: 12px;
  padding: 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  align-items: center;
  position: relative;
}
.generate-attempt.is-active {
  border-color: var(--copper);
  background: var(--copper-soft);
}
.generate-attempt-thumb {
  width: 96px; height: 56px;
  background: var(--ink-0);
  flex-shrink: 0;
  object-fit: cover;
  border: 1px solid var(--line);
}
.generate-attempt-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.generate-attempt-title {
  font-size: 11px;
  color: var(--paper);
  letter-spacing: 0.04em;
}
.generate-attempt.is-active .generate-attempt-title { color: var(--copper); }
.generate-attempt-prompt {
  font-size: 10px;
  color: var(--paper-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.generate-attempt-foot {
  font-size: 9px;
  color: var(--paper-4);
  letter-spacing: 0.04em;
}
.generate-attempt-pick {
  background: transparent;
  border: 1px solid var(--line-2);
  color: var(--paper-2);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 10px;
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.generate-attempt-pick:hover { color: var(--copper); border-color: var(--copper); }

.generate-finalize {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.generate-finalize .btn-publish { width: 100%; justify-content: center; }
.generate-finalize-hint {
  margin-top: 10px;
  font-size: 10px;
  color: var(--paper-4);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------------
   editor — botão voltar + loading do vídeo + nome inline editável
   ---------------------------------------------------------------------------- */

.editor-back-btn {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 10px;
  background: rgba(5, 5, 6, 0.7);
  border: 1px solid var(--line-2);
  color: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 140ms var(--ease);
}
.editor-back-btn:hover {
  color: var(--copper);
  border-color: var(--copper);
  background: rgba(217, 122, 58, 0.1);
}
.editor-back-icon { font-size: 16px; line-height: 1; }

.video-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--ink-0);
  z-index: 20;
  pointer-events: none;
}
.video-loading[hidden] { display: none; }
.video-loading-spinner {
  width: 28px; height: 28px;
  border: 2px solid var(--line-2);
  border-top-color: var(--copper);
  border-radius: 50%;
  animation: video-loading-spin 1s linear infinite;
  margin-bottom: 14px;
}
.video-loading-msg {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--paper-3);
  text-align: center;
}
.video-loading.is-error .video-loading-spinner { border-top-color: var(--rust); animation: none; }
.video-loading.is-error .video-loading-msg { color: var(--rust); }
@keyframes video-loading-spin {
  to { transform: rotate(360deg); }
}

/* nome do vídeo na sidebar editável inline */
.video-name-display {
  cursor: text;
  padding: 2px 4px;
  border: 1px solid transparent;
  border-radius: 2px;
  transition: all 140ms var(--ease);
  outline: none;
}
.video-name-display:hover {
  border-color: var(--line-2);
  color: var(--copper);
}
.video-name-display.is-editing {
  border-color: var(--copper);
  color: var(--paper);
  cursor: text;
  background: var(--ink-2);
}

/* ----------------------------------------------------------------------------
   modal: preview de URL (Fluxo B)
   ---------------------------------------------------------------------------- */

.url-preview {
  display: flex;
  gap: 12px;
  padding: 12px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  margin-bottom: 12px;
}
.url-preview[hidden] { display: none; }
.url-preview-thumb-wrap {
  width: 120px;
  flex-shrink: 0;
  background: var(--ink-0);
  aspect-ratio: 16/9;
  overflow: hidden;
}
.url-preview-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.url-preview-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.url-preview-title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  color: var(--paper);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.url-preview-foot {
  font-size: 10px;
  color: var(--paper-4);
  letter-spacing: 0.06em;
}
.url-preview-status {
  font-size: 11px;
  color: var(--copper);
  letter-spacing: 0.06em;
  padding: 8px 0;
}
.url-preview-status[hidden] { display: none; }

/* ----------------------------------------------------------------------------
   modal: imagem colada/arrastada
   ---------------------------------------------------------------------------- */

.paste-preview-wrap {
  display: grid;
  place-items: center;
  background: var(--ink-0);
  border: 1px solid var(--line);
  padding: 14px;
  margin-bottom: 10px;
  max-height: 280px;
  overflow: hidden;
}
.paste-preview-img {
  max-width: 100%;
  max-height: 250px;
  display: block;
  object-fit: contain;
}
.paste-status {
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--copper);
  padding: 6px 0;
}
.paste-err {
  font-size: 11px;
  color: var(--rust);
  min-height: 14px;
}

/* ----------------------------------------------------------------------------
   context menu
   ---------------------------------------------------------------------------- */

.ctx-menu {
  position: fixed;
  z-index: 600;
  min-width: 220px;
  background: var(--ink-2);
  border: 1px solid var(--line-2);
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
  padding: 4px 0;
  font-family: var(--font-mono);
  animation: ctxMenuLift 120ms var(--ease-out);
}
@keyframes ctxMenuLift {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ctx-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--paper-2);
  font-family: inherit;
  font-size: 12px;
  padding: 8px 14px;
  cursor: pointer;
  text-align: left;
  transition: background 100ms var(--ease);
}
.ctx-menu-item:hover:not(:disabled) {
  background: var(--ink-3);
  color: var(--paper);
}
.ctx-menu-item:disabled,
.ctx-menu-item.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.ctx-menu-icon {
  width: 14px;
  font-size: 13px;
  color: var(--paper-4);
  text-align: center;
  flex-shrink: 0;
}
.ctx-menu-label { flex: 1; }
.ctx-menu-hint {
  font-size: 9px;
  color: var(--paper-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ctx-menu-item.is-danger { color: var(--rust); }
.ctx-menu-item.is-danger:hover:not(:disabled) {
  background: rgba(181, 72, 72, 0.08);
  color: var(--rust);
}
.ctx-menu-item.is-danger .ctx-menu-icon { color: var(--rust); }
.ctx-menu-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

/* mostra apenas a screen ativa */
.screen { display: none; }
body[data-screen="home"] .screen-gal-home { display: block; }
body[data-screen="project"] .screen-gal-project { display: block; }
body[data-screen="atelie"] .screen-atelie { display: flex; }
body[data-screen="atelie-generate"] .screen-atelie-generate { display: block; }
body[data-screen="atelie-text2video"] .screen-atelie-text2video { display: block; }
body[data-screen="editor"] .screen-editor { display: flex; flex-direction: column; flex: 1; }
body[data-screen="editor"] .stage { display: flex; flex-direction: column; }
body[data-screen="trash"] .screen-trash { display: block; }

/* lixeira ----------------------------------------------------------------- */
.trash-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.trash-card {
  background: var(--card-bg, rgba(255,255,255,0.02));
  border: 1px solid var(--card-border, rgba(255,255,255,0.08));
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.trash-card-mark {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  line-height: 1;
  color: var(--ink-muted, rgba(255,255,255,0.45));
  text-align: center;
  padding: 16px 0;
  background: rgba(255,255,255,0.02);
  border-radius: 6px;
}
.trash-card-name {
  font-weight: 600;
  font-size: 15px;
  word-break: break-word;
}
.trash-card-meta {
  font-size: 12px;
  color: var(--ink-muted, rgba(255,255,255,0.55));
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.trash-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.trash-card-actions .btn {
  flex: 1;
  font-size: 12px;
  padding: 6px 10px;
}

/* ----------------------------------------------------------------------------
   atelie / texto → vídeo — fluxo D
   ---------------------------------------------------------------------------- */

.screen-atelie-text2video { display: none; }

.t2v-wrap {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.t2v-tabs {
  display: inline-flex;
  background: var(--ink-1);
  border: 1px solid var(--line);
  align-self: flex-start;
}
.t2v-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--line);
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  cursor: pointer;
  transition: all 160ms var(--ease);
}
.t2v-tab:last-child { border-right: 0; }
.t2v-tab:hover { color: var(--paper); }
.t2v-tab.is-active {
  background: var(--ink-3);
  color: var(--copper);
}
.t2v-tab-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--copper);
  line-height: 1;
}

.t2v-pane {
  background: var(--ink-1);
  border: 1px solid var(--line);
  padding: 22px 24px 24px;
}
.t2v-pane[hidden] { display: none; }

.t2v-pane textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  outline: none;
  resize: vertical;
  min-height: 60px;
  transition: border-color 140ms var(--ease);
}
.t2v-pane textarea:focus { border-color: var(--copper); }

.t2v-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 22px;
}
@media (max-width: 980px) {
  .t2v-grid { grid-template-columns: 1fr; }
}
.t2v-field-wide { grid-column: 1 / -1; }

.t2v-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0 6px;
}
.t2v-chip {
  padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 140ms var(--ease);
  text-transform: lowercase;
}
.t2v-chip:hover { color: var(--paper); border-color: var(--paper-4); }
.t2v-chip.is-active {
  background: rgba(217, 122, 58, 0.12);
  border-color: var(--copper);
  color: var(--copper);
}

.t2v-chip-custom {
  width: 100%;
  margin-top: 4px;
  padding: 6px 10px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11px;
  outline: none;
  transition: border-color 140ms var(--ease);
}
.t2v-chip-custom:focus { border-color: var(--copper); }
.t2v-chip-custom::placeholder { color: var(--paper-5); font-style: italic; }

.t2v-controls {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--ink-1);
  border: 1px solid var(--line);
}
.t2v-duration-field {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.t2v-duration-field span {
  font-size: 10px;
  color: var(--paper-4);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.t2v-cost {
  font-size: 11px;
  color: var(--paper-4);
  letter-spacing: 0.04em;
  font-feature-settings: 'tnum';
  margin-left: auto;
}
.t2v-actions {
  display: flex;
  gap: 10px;
}

/* ============================================================================
   FRAMES EDITOR — terceira área macro
   ----------------------------------------------------------------------------
   Identidade visual própria (ui.md §1, visao.md §9):
   - Paleta ciano/grafite frio (vs. cobre quente do Ateliê) → área "íntima
     com pixel", sensação de bancada técnica e tela CRT, distinta do trabalho
     com vídeo do Ateliê.
   - Densidade visual maior — matriz de células ocupa muito do canto inferior,
     ritmo mais denso que Galeria.
   - Tipografia mantém Fraunces/JetBrains Mono pra coesão da plataforma; só a
     paleta e a densidade mudam.
   ============================================================================ */

:root {
  /* paleta exclusiva Frames Editor */
  --fe-cyan:       #4dd9d6;       /* highlights, focos */
  --fe-cyan-2:     #2ea7a4;
  --fe-cyan-soft:  rgba(77, 217, 214, 0.12);
  --fe-cyan-glow:  rgba(77, 217, 214, 0.35);
  --fe-violet:     #9070f0;       /* segunda cor (estados de processamento) */
  --fe-violet-soft: rgba(144, 112, 240, 0.16);
  --fe-graphite-0: #07080b;
  --fe-graphite-1: #0c0e13;
  --fe-graphite-2: #11141b;
  --fe-graphite-3: #1a1f2a;
  --fe-graphite-4: #232a3a;
  --fe-line:       #1c2230;
  --fe-line-2:     #2a3142;
}

/* assinatura visual da área */
body[data-space="frame-editor"] {
  background:
    radial-gradient(1100px 700px at 0% 0%, rgba(77, 217, 214, 0.06), transparent 55%),
    radial-gradient(900px 500px at 100% 100%, rgba(144, 112, 240, 0.04), transparent 55%),
    radial-gradient(600px 400px at 50% 100%, rgba(77, 217, 214, 0.03), transparent 60%),
    var(--fe-graphite-0);
}

body[data-space="frame-editor"] .chrome {
  background: linear-gradient(180deg, var(--fe-graphite-2) 0%, var(--fe-graphite-0) 100%);
  border-bottom: 1px solid var(--fe-cyan-soft);
  box-shadow: inset 0 -1px 0 0 rgba(77, 217, 214, 0.08);
}

body[data-space="frame-editor"] .brand-mark { color: var(--fe-cyan); }

body[data-space="frame-editor"] .space-switch-btn[data-space="frame-editor"].is-active {
  color: var(--fe-cyan);
}
body[data-space="frame-editor"] .space-switch-thumb {
  /* mais sutil que copper/galeria pra ciano não destoar — contorno + leve glow */
  background: linear-gradient(180deg, rgba(77, 217, 214, 0.10), rgba(77, 217, 214, 0.03));
  border-color: rgba(77, 217, 214, 0.45);
}

/* alternador ternário — thumb com 3 posições + larguras iguais */
.space-switch-3 .space-switch-btn {
  /* iguala largura dos 3 botões pra "FRAMES EDITOR" não inflar a faixa do meio */
  flex: 1 1 0;
  min-width: 132px;
}
.space-switch-3 .space-switch-thumb {
  width: calc(33.333% - 2px);
}
body[data-space="atelie"] .space-switch-3 .space-switch-thumb {
  transform: translateX(calc(100% + 0px));
}
body[data-space="frame-editor"] .space-switch-3 .space-switch-thumb {
  transform: translateX(calc(200% + 0px));
}

/* exibição das telas FE */
body[data-screen="fe-home"]   .screen-fe-home   { display: block; }
body[data-screen="fe-editor"] .screen-fe-editor { display: flex; flex: 1; min-height: 0; }
body[data-screen="fe-editor"] .stage { display: flex; flex-direction: column; min-height: calc(100vh - var(--header-h)); }
body[data-space="frame-editor"] .screen-gal-home,
body[data-space="frame-editor"] .screen-gal-project,
body[data-space="frame-editor"] .screen-atelie,
body[data-space="frame-editor"] .screen-atelie-generate,
body[data-space="frame-editor"] .screen-atelie-text2video { display: none; }

/* ----------------------------------------------------------------------------
   FE · Home — lista de tirinhas
   ---------------------------------------------------------------------------- */

body[data-space="frame-editor"] .page-head { border-bottom-color: var(--fe-line); }
body[data-space="frame-editor"] .page-head-eyebrow { color: var(--fe-cyan-2); }
body[data-space="frame-editor"] .page-head-title em { color: var(--fe-cyan); font-style: italic; }
body[data-space="frame-editor"] .page-head-sub { color: var(--paper-3); }

.fe-btn-primary {
  background: var(--fe-cyan-soft);
  border: 1px solid var(--fe-cyan);
  color: var(--fe-cyan);
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 160ms var(--ease);
}
.fe-btn-primary:hover { background: rgba(77, 217, 214, 0.18); }
.fe-btn-primary:disabled { opacity: 0.4; cursor: not-allowed; }

body[data-space="frame-editor"] .btn-primary {
  background: var(--fe-cyan-soft);
  border: 1px solid var(--fe-cyan);
  color: var(--fe-cyan);
}
body[data-space="frame-editor"] .btn-primary:hover {
  background: rgba(77, 217, 214, 0.20);
}

.fe-tirinha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.fe-tirinha-card {
  background: var(--fe-graphite-1);
  border: 1px solid var(--fe-line);
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color 160ms var(--ease), transform 160ms var(--ease);
}
.fe-tirinha-card:hover {
  border-color: var(--fe-cyan-2);
}
.fe-tirinha-card-thumb {
  height: 160px;
  background-color: var(--fe-graphite-2);
  border-bottom: 1px solid var(--fe-line);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.fe-tirinha-card-thumb.has-thumb {
  /* cria padrão xadrez por baixo — célula PNG geralmente tem transparência */
  background-color: var(--fe-graphite-2);
  background-image:
    linear-gradient(45deg, var(--fe-graphite-3) 25%, transparent 25%),
    linear-gradient(-45deg, var(--fe-graphite-3) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--fe-graphite-3) 75%),
    linear-gradient(-45deg, transparent 75%, var(--fe-graphite-3) 75%);
  background-size: 14px 14px;
  background-position: 0 0, 0 7px, 7px -7px, -7px 0;
}
.fe-tirinha-mark {
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--fe-cyan-2);
  opacity: 0.6;
}
.fe-tirinha-card-dim {
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--paper-3);
  background: var(--fe-graphite-0);
  border: 1px solid var(--fe-line);
  padding: 2px 6px;
}

.fe-tirinha-card-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.fe-tirinha-card-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--paper);
  line-height: 1.2;
  word-break: break-word;
}
.fe-tirinha-card-name-input {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--fe-cyan);
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-cyan);
  padding: 4px 6px;
  width: 100%;
}
.fe-tirinha-card-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--paper-4);
}
.fe-tirinha-card-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 160ms var(--ease);
}
.fe-tirinha-card:hover .fe-tirinha-card-actions { opacity: 1; }
.fe-tirinha-card-btn {
  width: 24px;
  height: 24px;
  background: var(--fe-graphite-0);
  border: 1px solid var(--fe-line);
  color: var(--paper-3);
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 140ms var(--ease);
}
.fe-tirinha-card-btn:hover { color: var(--fe-cyan); border-color: var(--fe-cyan-2); }
.fe-tirinha-card-btn-danger:hover { color: var(--rust); border-color: var(--rust); }

/* ----------------------------------------------------------------------------
   FE · Modal "nova tirinha"
   ---------------------------------------------------------------------------- */

.fe-origin-tabs {
  display: inline-flex;
  background: var(--fe-graphite-1);
  border: 1px solid var(--fe-line);
  margin-bottom: 18px;
}
.fe-origin-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--fe-line);
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 160ms var(--ease);
  text-transform: lowercase;
}
.fe-origin-tab:last-child { border-right: 0; }
.fe-origin-tab:hover:not(:disabled) { color: var(--paper); }
.fe-origin-tab.is-active {
  background: var(--fe-graphite-3);
  color: var(--fe-cyan);
}
.fe-origin-tab:disabled { opacity: 0.4; cursor: not-allowed; }
.fe-origin-tab-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  color: var(--fe-cyan);
  line-height: 1;
}
.fe-origin-tab-label em {
  font-style: italic;
  color: var(--paper-4);
  font-size: 9.5px;
  margin-left: 4px;
}

.fe-origin-pane {
  padding: 16px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fe-origin-pane[hidden] { display: none; }

.fe-dim-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.fe-dim-field input { font-family: var(--font-mono); }

.fe-file-pick {
  display: block;
  cursor: pointer;
}
.fe-file-pick-label {
  display: block;
  padding: 14px 16px;
  background: var(--fe-graphite-1);
  border: 1px dashed var(--fe-line-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--paper-2);
  text-align: center;
  transition: all 140ms var(--ease);
}
.fe-file-pick:hover .fe-file-pick-label {
  border-color: var(--fe-cyan);
  color: var(--fe-cyan);
}

.fe-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fe-progress-bar {
  height: 6px;
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-line);
  overflow: hidden;
}
.fe-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--fe-cyan-2), var(--fe-cyan));
  width: 0%;
  transition: width 240ms var(--ease);
}
.fe-progress-msg {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-3);
}

/* override: campos do modal FE */
body[data-space="frame-editor"] .modal-card,
[data-modal="fe-new-tirinha"] .modal-card,
[data-modal="fe-prompt"] .modal-card {
  background: var(--fe-graphite-1);
  border: 1px solid var(--fe-line-2);
}
[data-modal="fe-new-tirinha"] input[type="text"],
[data-modal="fe-new-tirinha"] input[type="number"],
[data-modal="fe-prompt"] textarea {
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-line);
  color: var(--paper);
}
[data-modal="fe-new-tirinha"] input:focus,
[data-modal="fe-prompt"] textarea:focus {
  border-color: var(--fe-cyan);
}
[data-modal="fe-prompt"] textarea {
  font-family: var(--font-mono);
  font-size: 13px;
  resize: vertical;
  min-height: 100px;
}

.fe-prompt-target {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--fe-graphite-2);
  border-left: 2px solid var(--fe-cyan);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-2);
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.fe-prompt-cost {
  color: var(--fe-cyan);
  font-weight: 600;
  white-space: nowrap;
}
.fe-prompt-cost[hidden] {
  display: none;
}
.fe-prompt-cost-sub {
  color: var(--paper-3);
  font-weight: 400;
  margin-left: 6px;
}

/* ----------------------------------------------------------------------------
   FE · Editor da tirinha — shell + topbar + canvas + matriz
   ---------------------------------------------------------------------------- */

.screen-fe-editor {
  flex-direction: column;
  background: var(--fe-graphite-0);
}

.fe-editor-shell {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.fe-editor-topbar {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 10px 22px 10px 38px;
  background: var(--fe-graphite-1);
  border-bottom: 1px solid var(--fe-line);
  gap: 16px;
  transition: max-height 200ms var(--ease), padding 200ms var(--ease);
  max-height: 200px;
  overflow: hidden;
}
.fe-editor-topbar.is-collapsed {
  max-height: 24px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 1px solid var(--fe-line);
}
.fe-editor-topbar.is-collapsed > *:not(.fe-collapse-topbar) {
  visibility: hidden;
}
.fe-editor-topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.fe-editor-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--fe-line);
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.fe-editor-back:hover { color: var(--fe-cyan); border-color: var(--fe-cyan-2); }
.fe-editor-back-icon { font-size: 14px; }

.fe-editor-sep { color: var(--paper-5); }

.fe-editor-name-wrap { min-width: 0; }
.fe-editor-name {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--paper);
  cursor: pointer;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 480px;
}
.fe-editor-name:hover { color: var(--fe-cyan); }
.fe-editor-name-input {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fe-cyan);
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-cyan);
  padding: 4px 8px;
  width: 360px;
}
.fe-editor-meta {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--paper-4);
}

.fe-editor-topbar-right {
  display: flex;
  gap: 8px;
}
.fe-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid var(--fe-line);
  color: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-transform: lowercase;
  transition: all 140ms var(--ease);
}
.fe-btn-ghost:hover:not(:disabled) {
  color: var(--fe-cyan);
  border-color: var(--fe-cyan-2);
}
.fe-btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }
.fe-btn-ghost.is-stale { color: #c8a45e; border-color: rgba(200, 164, 94, 0.4); }
.fe-btn-ghost.is-stale:hover:not(:disabled) { color: #e0bf7a; border-color: #c8a45e; }
.fe-btn-icon { font-size: 13px; }

/* canvas region */
.fe-editor-canvas-region {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 14px 22px;
  gap: 0;
  flex: 1;
  min-height: 0;
}
.fe-editor-canvas-wrap {
  position: relative;
  flex: 1;
  min-height: 0;
  display: block;
  /* sem scroll do navegador: pan/zoom acontece dentro do canvas */
  overflow: hidden;
  padding: 0;
  width: 100%;
  max-width: 100%;
}
.fe-editor-canvas {
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-line-2);
  /* O canvas sempre preenche o wrap; o pan/zoom é interno (transform no ctx).
     Sem image-rendering aqui — não há escala CSS, e o nearest-neighbor é
     aplicado via imageSmoothingEnabled=false no contexto 2D. */
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: 0 0 0 1px rgba(77, 217, 214, 0.06), 0 8px 32px rgba(0, 0, 0, 0.4);
  /* cursor é controlado por JS (default / grab quando espaço / grabbing no drag) */
}
/* feedback visual de pan/zoom (controlados via JS) */
body[data-space="frame-editor"] .fe-editor-canvas { cursor: default; }
.fe-editor-canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--paper-4);
  text-align: center;
  pointer-events: none;
}
.fe-editor-topbar-center {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}
.fe-zoom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fe-zoom-btn {
  width: 24px;
  height: 24px;
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-line);
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 13px;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 140ms var(--ease);
}
.fe-zoom-btn:hover { color: var(--fe-cyan); border-color: var(--fe-cyan-2); }
.fe-zoom-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-2);
  min-width: 28px;
  text-align: center;
  letter-spacing: 0.04em;
}
.fe-bg-toggle {
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-line);
  color: var(--paper-3);
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-transform: lowercase;
  transition: all 140ms var(--ease);
}
.fe-bg-toggle:hover { color: var(--fe-cyan); border-color: var(--fe-cyan-2); }
.fe-frame-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.fe-frame-info {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-2);
  letter-spacing: 0.04em;
  min-width: 100px;
  text-align: center;
}
.fe-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-cyan-2);
  color: var(--fe-cyan);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.fe-play-btn:hover {
  border-color: var(--fe-cyan);
  background: var(--fe-cyan-soft);
}
.fe-play-btn.is-playing {
  background: var(--fe-cyan-soft);
  border-color: var(--fe-cyan);
  box-shadow: 0 0 0 1px var(--fe-cyan-soft), 0 0 12px var(--fe-cyan-glow);
}
.fe-play-icon {
  font-size: 11px;
  line-height: 1;
}

/* botao de colapsar topbar / matriz (canto superior esquerdo) */
.fe-collapse-toggle {
  position: absolute;
  top: 4px;
  left: 8px;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid transparent;
  color: var(--paper-5);
  font-size: 10px;
  cursor: pointer;
  z-index: 2;
  transition: all 140ms var(--ease);
  padding: 0;
}
.fe-collapse-toggle:hover {
  color: var(--fe-cyan);
  border-color: var(--fe-cyan-2);
}
.fe-collapse-matrix { top: 2px; left: 8px; }
/* menu de contexto — Aseprite-like, custom (anti-padrão: nunca o menu nativo do browser) */
.fe-context-menu {
  position: fixed;
  z-index: 9000;
  min-width: 220px;
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-cyan-2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(77, 217, 214, 0.08);
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--font-mono);
  user-select: none;
}
.fe-context-menu[hidden] { display: none; }
.fe-cm-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  color: var(--paper-2);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-align: left;
  text-transform: lowercase;
  transition: background 100ms var(--ease), color 100ms var(--ease);
}
.fe-cm-item:hover, .fe-cm-item:focus {
  background: var(--fe-cyan-soft);
  color: var(--fe-cyan);
  outline: none;
}
.fe-cm-item:disabled {
  color: var(--paper-5);
  cursor: not-allowed;
  opacity: 0.5;
}
.fe-cm-item:disabled:hover { background: transparent; color: var(--paper-5); }
.fe-cm-item-danger { color: #d97070; }
.fe-cm-item-danger:hover, .fe-cm-item-danger:focus {
  background: rgba(217, 112, 112, 0.10);
  color: #ec8f8f;
}
.fe-cm-shortcut {
  font-size: 10px;
  color: var(--paper-5);
  letter-spacing: 0.06em;
  font-style: italic;
}
.fe-cm-item:hover .fe-cm-shortcut, .fe-cm-item:focus .fe-cm-shortcut {
  color: var(--fe-cyan);
}
.fe-cm-sep {
  height: 1px;
  background: var(--fe-line);
  margin: 3px 6px;
}
/* matriz camadas × quadros */
.fe-matrix-wrap {
  position: relative;
  flex: 0 0 auto;
  max-height: 420px;
  overflow: auto;
  padding: 12px 22px 22px 38px;
  background: var(--fe-graphite-0);
  transition: max-height 200ms var(--ease), padding 200ms var(--ease);
}
.fe-matrix-wrap.is-collapsed {
  max-height: 24px;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}
.fe-matrix-wrap.is-collapsed > *:not(.fe-collapse-matrix) {
  visibility: hidden;
}
.fe-matrix {
  display: grid;
  gap: 4px;
  background: var(--fe-graphite-1);
  padding: 6px;
  border: 1px solid var(--fe-line);
  width: max-content;
  min-width: 100%;
}
.fe-matrix-corner {
  background: transparent;
}
.fe-matrix-col-head {
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-line);
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.05em;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: all 140ms var(--ease);
  position: relative;
}
.fe-matrix-col-head:hover { color: var(--fe-cyan); border-color: var(--fe-cyan-2); }
.fe-matrix-col-head.is-active {
  color: var(--fe-cyan);
  border-color: var(--fe-cyan);
  background: var(--fe-cyan-soft);
}
/* Quadro inteiro selecionado (todas as celulas dele est~ao em selecionadas) —
 * distinto de is-active (que indica foco no canvas). is-active+is-selected: combinam. */
.fe-matrix-col-head.is-selected {
  color: var(--fe-cyan);
  border-color: var(--fe-cyan);
  background: rgba(77, 217, 214, 0.18);
  box-shadow: inset 0 -2px 0 var(--fe-cyan);
}
.fe-matrix-col-head.is-active.is-selected {
  background: rgba(77, 217, 214, 0.28);
}
.fe-matrix-row-head.is-selected {
  background: rgba(77, 217, 214, 0.10);
  box-shadow: inset -2px 0 0 var(--fe-cyan);
}
.fe-matrix-row-head.is-selected .fe-cam-name {
  color: var(--fe-cyan);
}

.fe-matrix-row-head {
  background: var(--fe-graphite-2);
  border: 1px solid var(--fe-line);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  min-width: 0;
  position: relative;
}
.fe-cam-vis {
  width: 22px;
  height: 22px;
  background: transparent;
  border: 1px solid var(--fe-line);
  color: var(--paper-3);
  font-size: 11px;
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all 140ms var(--ease);
  padding: 0;
}
.fe-cam-vis svg { display: block; }
.fe-cam-vis.is-on { color: var(--paper-2); }
.fe-cam-vis.is-off { color: var(--paper-3); opacity: 0.5; }
.fe-cam-vis:hover { color: var(--fe-cyan); border-color: var(--fe-cyan-2); opacity: 1; }
.fe-cam-name {
  flex: 1;
  background: transparent;
  border: 0;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--paper-2);
  cursor: pointer;
  padding: 4px 6px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  min-width: 0;
  letter-spacing: 0.02em;
  transition: color 140ms var(--ease);
}
.fe-cam-name:hover { color: var(--fe-cyan); }
.fe-cam-name-input {
  flex: 1;
  background: var(--fe-graphite-3);
  border: 1px solid var(--fe-cyan);
  color: var(--fe-cyan);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 4px 6px;
  outline: none;
  min-width: 0;
}

.fe-matrix-cell {
  background-color: var(--fe-graphite-2);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--fe-line);
  cursor: pointer;
  position: relative;
  transition: all 140ms var(--ease);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}
.fe-matrix-cell.is-empty {
  background-color: var(--fe-graphite-2);
  background-image:
    linear-gradient(45deg, var(--fe-graphite-3) 25%, transparent 25%),
    linear-gradient(-45deg, var(--fe-graphite-3) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--fe-graphite-3) 75%),
    linear-gradient(-45deg, transparent 75%, var(--fe-graphite-3) 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
.fe-matrix-cell.has-png {
  /* fundo xadrez por baixo da imagem (transparência) */
  background-color: var(--fe-graphite-3);
}
.fe-matrix-cell:hover {
  border-color: var(--fe-cyan-2);
  transform: scale(1.03);
}
.fe-matrix-cell.is-selected {
  border-color: var(--fe-cyan);
  box-shadow: inset 0 0 0 1px var(--fe-cyan), 0 0 0 1px var(--fe-cyan-glow);
}
.fe-matrix-cell.is-active {
  border-color: var(--fe-cyan);
  box-shadow: inset 0 0 0 2px var(--fe-cyan);
}
.fe-matrix-cell.is-processing {
  border-color: var(--fe-violet);
  animation: fe-pulse 1.4s var(--ease) infinite;
}
.fe-cell-processing {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--fe-violet);
  background: rgba(144, 112, 240, 0.18);
  pointer-events: none;
}

@keyframes fe-pulse {
  0%, 100% { box-shadow: inset 0 0 0 1px var(--fe-violet), 0 0 0 1px rgba(144, 112, 240, 0.35); }
  50%      { box-shadow: inset 0 0 0 2px var(--fe-violet), 0 0 0 4px rgba(144, 112, 240, 0.18); }
}

/* Celula que teve falha na ultima gera~cao. Mantem o png antigo (back nao
 * sobrescreve em caso de erro), mas exibe badge "!" no canto sup. dir. e
 * borda vermelha discreta — pra n~ao perder o feedback do erro. */
.fe-matrix-cell.has-gen-error {
  box-shadow: inset 0 0 0 1px var(--rust, #c47855);
}
.fe-cell-gen-error {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--rust, #c47855);
  color: var(--ink-0, #07080b);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  pointer-events: auto;
  cursor: help;
}

/* Lista de prompts usados (modal de hist orico do Frames Editor). */
.fe-prompt-history-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 60vh;
  overflow-y: auto;
}
.fe-prompt-history-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  align-items: start;
  padding: 10px 12px;
  background: var(--fe-graphite-1);
  border: 1px solid var(--fe-line);
  cursor: pointer;
  transition: all 140ms var(--ease);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--paper-2);
  letter-spacing: 0.03em;
  text-align: left;
  line-height: 1.5;
}
.fe-prompt-history-item:hover {
  border-color: var(--fe-cyan);
  color: var(--paper);
  background: rgba(77, 217, 214, 0.05);
}
.fe-prompt-history-item-text {
  grid-row: 1;
  grid-column: 1;
  white-space: pre-wrap;
  word-break: break-word;
}
.fe-prompt-history-item-ts {
  grid-row: 1;
  grid-column: 2;
  font-size: 10px;
  color: var(--paper-5);
  letter-spacing: 0.04em;
  font-style: italic;
  white-space: nowrap;
}
/* Variante com ref de estilo: insere coluna de thumb na esquerda. */
.fe-prompt-history-item.has-ref {
  grid-template-columns: 44px 1fr auto;
}
.fe-prompt-history-item.has-ref .fe-prompt-history-item-text { grid-column: 2; }
.fe-prompt-history-item.has-ref .fe-prompt-history-item-ts { grid-column: 3; }
.fe-prompt-history-item-thumb {
  grid-row: 1;
  grid-column: 1;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border: 1px solid var(--fe-line);
  background: var(--fe-graphite-2);
}
.fe-prompt-history-item-text.is-placeholder {
  color: var(--paper-5);
  font-style: italic;
}
.fe-prompt-history-empty {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--paper-5);
  font-style: italic;
  text-align: center;
  padding: 32px 0;
}
.fe-prompt-history-empty[hidden] { display: none; }

/* Agrupamento dos botoes inline no header do textarea (hist orico + melhorar). */
.field-row-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Bloco informativo no modal de prompt: ratio da tirinha vs ratio que o modelo
 * vai entregar. Avisa visualmente se sao diferentes (badge amarelo) ou iguais
 * (badge verde discreto). */
.fe-ratio-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--fe-graphite-1);
  border: 1px solid var(--fe-line);
  font-family: var(--font-mono);
  font-size: 11px;
}
.fe-ratio-info[hidden] { display: none; }
.fe-ratio-row { display: inline-flex; align-items: baseline; gap: 6px; }
.fe-ratio-label {
  color: var(--paper-5);
  letter-spacing: 0.04em;
  font-size: 10px;
  text-transform: lowercase;
}
.fe-ratio-value {
  color: var(--paper-2);
  letter-spacing: 0.04em;
}
.fe-ratio-arrow {
  color: var(--paper-5);
  margin: 0 4px;
}
.fe-ratio-badge {
  margin-left: auto;
  padding: 2px 8px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: lowercase;
  border: 1px solid;
}
.fe-ratio-badge.is-ok {
  color: var(--moss, #8aa67d);
  border-color: var(--moss, #8aa67d);
  background: rgba(138, 166, 125, 0.08);
}
.fe-ratio-badge.is-warn {
  color: var(--rust, #c47855);
  border-color: var(--rust, #c47855);
  background: rgba(196, 120, 85, 0.08);
}

/* Checkbox custom do Frames Editor — sem visual nativo do SO (regra critica).
 * Input nativo escondido fisicamente (precisa do flow de teclado/screen reader),
 * caixa visual desenhada via ::before. Marcacao com tick cyan. */
.fe-checkbox-field {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px 10px;
  padding: 10px 12px;
  border: 1px solid var(--fe-line);
  background: var(--fe-graphite-1);
  cursor: pointer;
  user-select: none;
  margin-bottom: 12px;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.fe-checkbox-field:hover { border-color: var(--fe-cyan-2); }
.fe-checkbox-field input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.fe-checkbox-field::before {
  content: '';
  grid-row: 1;
  grid-column: 1;
  width: 16px;
  height: 16px;
  border: 1px solid var(--paper-5);
  background: var(--fe-graphite-2);
  display: block;
  transition: all 140ms var(--ease);
}
.fe-checkbox-field:has(input:checked)::before {
  background: var(--fe-cyan);
  border-color: var(--fe-cyan);
  box-shadow: inset 0 0 0 2px var(--fe-graphite-2);
}
.fe-checkbox-field:has(input:focus-visible)::before {
  outline: 2px solid var(--fe-cyan-2);
  outline-offset: 2px;
}
.fe-checkbox-label {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--paper-2);
}
.fe-checkbox-hint {
  grid-row: 2;
  grid-column: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--paper-5);
  font-style: italic;
}
.fe-checkbox-field.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fe-checkbox-field.is-disabled:hover { border-color: var(--fe-line); }

/* Style reference no modal de prompt — drop zone pra anexar uma imagem que
 * o modelo usa como referencia de estilo. Estado vazio: botao clic avel +
 * drop target. Estado carregado: thumb + remover. */
.fe-style-ref { margin-bottom: 12px; }
.fe-style-ref-drop {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 14px 16px;
  border: 1px dashed var(--paper-5);
  background: transparent;
  color: var(--paper-3);
  cursor: pointer;
  text-align: left;
  font-family: var(--font-mono);
  transition: border-color 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease);
}
.fe-style-ref-drop:hover,
.fe-style-ref-drop.is-dragover {
  border-color: var(--fe-cyan);
  background: rgba(80, 180, 200, 0.06);
  color: var(--paper-1);
}
.fe-style-ref-drop-icon {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
  font-size: 22px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  opacity: 0.7;
}
.fe-style-ref-drop-label {
  grid-row: 1;
  grid-column: 2;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}
.fe-style-ref-drop-hint {
  grid-row: 2;
  grid-column: 2;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--paper-5);
  font-style: italic;
}
.fe-style-ref-loaded {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--fe-line);
  background: var(--fe-graphite-1);
}
.fe-style-ref-loaded img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid var(--fe-line);
  background: var(--fe-graphite-2);
}
.fe-style-ref-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.fe-style-ref-info-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--paper-2);
}
.fe-style-ref-remove {
  background: transparent;
  border: 1px solid var(--paper-5);
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 140ms var(--ease);
}
.fe-style-ref-remove:hover {
  border-color: var(--rust, #c47855);
  color: var(--rust, #c47855);
}

/* Botao "limpar avisos" no topbar — borda rust em vez de cyan pra sinalizar
 * que ha algo a tratar. Contador discreto ao lado do label. */
.fe-btn-clear-errors {
  border-color: var(--rust, #c47855) !important;
  color: var(--rust, #c47855) !important;
}
.fe-btn-clear-errors:hover:not(:disabled) {
  background: rgba(196, 120, 85, 0.10);
}
.fe-clear-errors-count {
  margin-left: 4px;
  font-size: 10px;
  opacity: 0.8;
}

/* === Estados otimistas (operações pendentes de sync com backend) === */
/* Bolinha discreta no canto inferior direito do header de linha/coluna ou da
 * borda do nome da tirinha. Sutil, não bloqueia interação. */
.fe-sync-dot {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  background: var(--fe-cyan);
  box-shadow: 0 0 4px var(--fe-cyan-glow);
  opacity: 0.85;
  animation: fe-sync-pulse 1.1s ease-in-out infinite;
}
.fe-sync-dot[data-state="error"] {
  background: var(--rust);
  box-shadow: 0 0 4px rgba(181, 72, 72, 0.6);
  animation: none;
}
.fe-matrix-row-head.is-syncing,
.fe-matrix-col-head.is-syncing,
.fe-matrix-cell.is-syncing { position: relative; }
.fe-matrix-row-head.is-sync-error,
.fe-matrix-col-head.is-sync-error,
.fe-matrix-cell.is-sync-error { border-color: var(--rust); }
.fe-editor-name.is-syncing,
.fe-editor-name.is-sync-error { position: relative; }
.fe-editor-name.is-sync-error { color: var(--rust); }

@keyframes fe-sync-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.7); }
}

/* === Esqueletos pulsantes pra carregamento === */
.video-card-skeleton, .asset-card-skeleton {
  pointer-events: none;
  cursor: default;
  animation: skel-pulse 1.4s ease-in-out infinite;
}
.video-card-skeleton .video-card-thumb,
.asset-card-skeleton .asset-card-preview {
  background: var(--ink-1);
}
.skel-line {
  height: 11px;
  background: var(--ink-1);
  border-radius: 2px;
  margin: 6px 0;
}
.skel-line-name { width: 65%; height: 13px; }
.skel-line-meta { width: 40%; height: 10px; }
@keyframes skel-pulse {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.45; }
}

/* ----------------------------------------------------------------------------
   Atelie - Sidebar de pastas + menu de contexto
   ---------------------------------------------------------------------------- */

.atelie-sub-videos {
  display: flex;
  gap: 0;
  align-items: stretch;
  min-height: 0;
  flex: 1;
}
.atelie-sub-videos .atelie-videos-main {
  flex: 1;
  min-width: 0;
  padding: 0 32px 32px;
  display: flex;
  flex-direction: column;
}

.atelie-folders {
  width: 220px;
  flex-shrink: 0;
  border-right: 1px solid var(--copper-soft);
  background: rgba(217, 122, 58, 0.02);
  padding: 24px 0 32px;
  display: flex;
  flex-direction: column;
}
.atelie-folders-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 14px;
  border-bottom: 1px solid var(--copper-soft);
  margin-bottom: 8px;
}
.atelie-folders-title {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--copper);
  font-weight: 500;
}
.atelie-folders-new {
  background: transparent;
  border: 1px solid var(--copper-soft);
  color: var(--copper);
  width: 22px;
  height: 22px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.atelie-folders-new:hover {
  background: var(--copper-soft);
  border-color: var(--copper);
}
.atelie-folders-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
}
.atelie-folders-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  cursor: pointer;
  font-size: 13px;
  color: var(--paper);
  border-left: 2px solid transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.atelie-folders-item:hover {
  background: rgba(217, 122, 58, 0.06);
}
.atelie-folders-item.is-active {
  border-left-color: var(--copper);
  background: rgba(217, 122, 58, 0.10);
  color: var(--copper);
}
.atelie-folders-item.is-drop-target {
  background: var(--copper-soft);
  border-left-color: var(--copper);
}
.atelie-folders-icon {
  font-size: 11px;
  width: 12px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.8;
}
.atelie-folders-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.atelie-folders-count {
  font-size: 10px;
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-weight: 400;
}
.atelie-folders-sep {
  height: 1px;
  background: var(--copper-soft);
  margin: 6px 12px;
}

/* Menu de contexto custom (anti-padrao: nunca menu nativo) */
.ctx-menu {
  position: fixed;
  z-index: 2000;
  min-width: 180px;
  background: var(--ink-1, #0c0c10);
  border: 1px solid var(--copper-soft);
  border-radius: 6px;
  padding: 4px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
  font-size: 12px;
  user-select: none;
}
.ctx-menu[hidden] { display: none; }
.ctx-menu-item {
  padding: 8px 14px;
  cursor: pointer;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.ctx-menu-item:hover {
  background: var(--copper-soft);
  color: var(--copper);
}
.ctx-menu-item.is-danger:hover {
  background: rgba(170, 60, 60, 0.15);
  color: var(--rust, #c44);
}
.ctx-menu-item.is-disabled {
  opacity: 0.4;
  pointer-events: none;
}
.ctx-menu-sep {
  height: 1px;
  background: var(--copper-soft);
  margin: 4px 0;
}
.ctx-menu-submenu-mark {
  margin-left: auto;
  opacity: 0.5;
  font-size: 10px;
}

/* Modal lista de pastas pra escolher destino */
.folder-pick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 360px;
  overflow-y: auto;
}
.folder-pick-list li {
  padding: 10px 14px;
  border-bottom: 1px solid var(--copper-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--paper);
  transition: background 0.12s;
}
.folder-pick-list li:hover {
  background: var(--copper-soft);
  color: var(--copper);
}
.folder-pick-list li.is-current {
  opacity: 0.4;
  pointer-events: none;
}
.folder-pick-list li.is-special {
  font-style: italic;
}
.folder-pick-count {
  margin-left: auto;
  font-size: 10px;
  color: var(--paper-3);
  font-family: var(--font-mono);
}

/* Video card selecionado via ctrl/shift+click (sem modo multi explicito) */
.video-card.is-multi-selected {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

/* Modal fe-edits — hint inline + sliders */
.field-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--paper-3);
  font-family: var(--font-mono);
  font-style: italic;
}
[data-modal="fe-edits"] input[type="range"] {
  width: 100%;
  margin-top: 6px;
}