/* ==========================================================================
   O ESTÚDIO, POR INTEIRO — a folha comum das 17 telas              (16/09)
   ==========================================================================
   Porte de `prototipos/expansao-2026-09-16-v1/studio.css`. O protótipo tinha
   duas camadas (uma clara e, por cima, a escura "da home"); aqui ficou só a
   que vale — a escura — já fundida, sem o par de regras brigando.

   ESCOPO: tudo mora dentro de `.suite`. O protótipo redefinia body, h1,
   input, svg e button globalmente; isso repintaria o topo compartilhado
   (nav.js) e as telas que já foram portadas antes (/novo, /novo/finalizar,
   /animar). O <body class="suite-page"> só empresta o fundo.

   O que ficou de fora de propósito:
   - o topo e a navegação LATERAL do protótipo: eram o índice de revisão das
     17 prévias ("Páginas do protótipo", "Cópia isolada"). Em produção quem
     navega é o topo do nav.js, igual às telas já portadas;
   - os nomes de @keyframes ganharam o prefixo `s-`: `rise` já existe no
     style.css (a entrada `.rise` de todas as páginas) e seria sobrescrito.

   ÁREA: `data-area` no contêiner troca o acento, como no protótipo —
     edicao/geral = lima · animacao = coral · ferramentas = ciano.

   Carrega DEPOIS de style.css (e de opcoes.css/fontes.css quando houver).
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
.suite{
  --paper:#0a0a0d; --surface:#17191e; --ink:#f6f5ef; --muted:#b5b7be; --line:#353941;
  --dark:#0a0a0d; --lime:#d2f86a; --coral:#ff795f; --cyan:#76dbea;
  --panel:#131318; --panel-raised:#202329; --radius:5px; --display:Cabinet,Arial,sans-serif;
  --accent:var(--lime); --accent-ink:#22300b; --accent-soft:#20271b; --accent-border:#576440;
  color:var(--ink); font:14px/1.5 Arial,sans-serif; -webkit-font-smoothing:antialiased;
  position:relative; z-index:1;
}
.suite[data-area=animacao]{--accent:var(--coral);--accent-ink:#351710;--accent-soft:#2b1c1b;--accent-border:#784738}
.suite[data-area=edicao],.suite[data-area=geral]{--accent:var(--lime);--accent-ink:#22300b;--accent-soft:#20271b;--accent-border:#576440}
.suite[data-area=ferramentas]{--accent:var(--cyan);--accent-ink:#123138;--accent-soft:#15282c;--accent-border:#3c6972}
body.suite-page{background:#0a0a0d}

/* ------------------------------------------------------------------ base */
.suite *{box-sizing:border-box}
.suite button,.suite input,.suite textarea,.suite select{font:inherit}
.suite button,.suite a,.suite input,.suite textarea,.suite select{-webkit-tap-highlight-color:transparent}
.suite button{cursor:pointer}
.suite button:disabled{opacity:.45;cursor:not-allowed}
.suite a{color:inherit;text-decoration:none}
.suite h1,.suite h2,.suite h3,.suite p{margin:0}
.suite h1,.suite h2,.suite h3{text-wrap:balance}
.suite ::selection{background:var(--accent);color:var(--accent-ink)}
.suite [hidden]{display:none!important}

/* campos: especificidade baixa (:where) para as telas poderem desenhar os
   seus próprios controles por cima; dentro de `.field` sobe, porque o
   style.css tem `.field input[type=text]` e ganharia */
.suite :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color]),select,textarea){
  max-width:100%;color:var(--ink);background:#1b1e24;border:1px solid #555b66;
  border-radius:var(--radius);padding:11px 12px;min-height:42px}
.suite :where(input,textarea)::placeholder{color:#adb1bc}
.suite :where(input[type=checkbox],input[type=radio]){min-height:0;width:17px;height:17px;accent-color:var(--accent)}
.suite :where(input[type=range]){padding:0;min-height:20px;accent-color:var(--accent);width:100%}
.suite :where(textarea){resize:vertical;line-height:1.65;width:100%}
.suite :where(select){padding-right:26px}
.suite .field input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
.suite .field select,.suite .field textarea{
  width:100%;max-width:100%;color:var(--ink);background:#1b1e24;border:1px solid #555b66;
  border-radius:var(--radius);padding:11px 12px;min-height:42px;box-shadow:none;font-size:13px}
.suite .field textarea{min-height:0;line-height:1.65}
.suite .field input:focus,.suite .field select:focus,.suite .field textarea:focus{border-color:#555b66;box-shadow:none}
.suite button:focus-visible,.suite a:focus-visible,.suite input:focus-visible,.suite select:focus-visible,
.suite textarea:focus-visible,.suite summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.suite .ico{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* --------------------------------------------------------------- moldura */
.suite .main{min-width:0;padding:36px 38px 18px;max-width:1730px;width:100%;margin:0 auto;align-self:start}
.suite .page-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:30px}
.suite .page-heading h1{font:800 42px/1.06 var(--display);letter-spacing:-.025em;color:var(--ink)}
.suite .page-heading p{color:var(--muted);margin-top:12px;max-width:67ch;font-size:13px;line-height:1.7}
.suite .page-heading p b{color:var(--ink)}
.suite .heading-actions{display:flex;gap:8px;flex-wrap:wrap;flex-shrink:0;padding-top:4px;align-items:center}
.suite h2{font:800 25px/1.16 var(--display)}
.suite h3{font:800 20px/1.2 var(--display)}
.suite .muted{color:var(--muted)}
.suite .small-text{font-size:12px}
.suite .time{font:12px/1.5 ui-monospace,Consolas,monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.suite .row{display:flex;align-items:center;gap:12px}
.suite .push{margin-left:auto}
.suite .two-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.suite .stack{display:grid;gap:14px}
.suite .divider{border:0;border-top:1px solid var(--line);margin:24px 0}
.suite .section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}
.suite .section-head p{font-size:12px;color:var(--muted)}
.suite .section-label{margin:32px 0 16px;font-size:21px}
.suite .compact-help{font-size:11px;line-height:1.7;color:#b1bece;margin-top:25px}

/* ----------------------------------------------------------------- botões */
.suite .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:42px;
  padding:10px 16px;border:1px solid #535a66;background:transparent;color:#e0e2e8;font-size:12px;
  font-weight:600;font-family:inherit;border-radius:var(--radius);letter-spacing:normal;text-transform:none;
  box-shadow:none;transform:none;transition:background .12s,border-color .12s,color .12s;white-space:normal;text-align:center}
.suite .btn:hover{background:#262b32;border-color:var(--accent);color:var(--accent);transform:none;box-shadow:none}
.suite .btn:active{transform:none}
.suite .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);box-shadow:none}
.suite .btn.primary:hover{background:var(--accent);border-color:#ffffffb3;color:var(--accent-ink);filter:brightness(1.08);box-shadow:none}
/* coral é a cor da ANIMAÇÃO em qualquer área (a home manda): "adicionar animação"
   num projeto continua coral, mesmo com a página em lima */
.suite .btn.coral{background:var(--coral);border-color:var(--coral);color:#351710;box-shadow:none}
.suite .btn.coral:hover{background:var(--coral);border-color:#ffffffb3;color:#351710;filter:brightness(1.08);box-shadow:none}
.suite .btn.ghost{border-color:transparent;color:var(--accent);background:transparent}
.suite .btn.ghost:hover{background:#262b32}
.suite .btn.small{padding:7px 11px;min-height:33px;font-size:11px}
.suite .btn.danger{color:#ffa1ae;border-color:#6b3440}
.suite .btn.danger:hover{background:#381e25;color:#ffa1ae;border-color:#ffa1ae}
.suite .btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.suite .btn .ico{width:18px;height:18px}
.suite .icon-button{display:inline-flex;justify-content:center;align-items:center;border:1px solid #444c57;
  background:transparent;min-width:36px;min-height:36px;color:var(--ink);padding:7px;border-radius:var(--radius)}
.suite .icon-button:hover{background:#272d35;color:var(--accent)}

/* -------------------------------------------------------- busca e filtros */
.suite .search{display:flex;align-items:center;gap:10px;min-width:180px;max-width:380px;flex:1;
  border:1px solid #555b66;background:#202329;padding-left:12px;border-radius:5px;color:var(--accent)}
.suite .search input,.suite .search input[type=search]{border:0;background:transparent;min-width:0;width:100%;
  outline-offset:-3px;color:var(--ink);box-shadow:none;border-radius:0 5px 5px 0;padding:11px 12px 11px 0;min-height:42px}
.suite .toolbar{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:24px;flex-wrap:wrap}
.suite .toolbar p{font-size:12px;color:var(--muted)}
.suite .filters{display:flex;gap:7px;flex-wrap:wrap}
.suite .filter{border:1px solid #454c57;padding:8px 12px;background:#181b20;color:#c6c9d2;font-size:12px;
  min-height:36px;border-radius:var(--radius)}
.suite .filter:hover{border-color:var(--accent)}
.suite .filter[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.suite .filter small{opacity:.75;margin-left:4px}

/* ----------------------------------------------------------------- selos */
.suite .badge{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:700;padding:5px 8px;
  border-radius:3px;white-space:nowrap;background:#272b32;color:#c1c7d2;line-height:1.2}
.suite .badge.cyan{background:#123138;color:var(--cyan)}
.suite .badge.coral{background:#351e18;color:#ffad94}
.suite .badge.amber{background:#382d18;color:#f7ce75}
.suite .badge.lime{background:#263316;color:var(--lime)}
.suite .badge.red{background:#381e25;color:#ffa1ae}
.suite .badge.neutral{background:#272b32;color:#c1c7d2}

/* -------------------------------------------------- campos e contêineres */
.suite .field{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;font-size:12px;font-weight:600;min-width:0}
.suite .field>span{color:var(--ink)}
.suite .field small{font-size:11px;font-weight:400;color:var(--muted);line-height:1.6}
.suite .field small b{color:var(--ink)}
.suite .form-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:24px}
.suite .form-actions p{color:var(--muted);font-size:11px}
.suite .inline-form{padding:22px;background:#15181d;border:1px solid #3f4650;margin:0 0 24px;border-radius:5px}
.suite .inline-form h2{margin-bottom:18px}
.suite .inline-form .field:last-child{margin-bottom:0}
.suite .notice{padding:15px 18px;background:var(--accent-soft);border:1px solid var(--accent-border);color:#dce3d6;
  font-size:12px;line-height:1.7;margin-bottom:24px;border-radius:var(--radius)}
.suite .notice strong,.suite .notice b{color:var(--accent)}
.suite .notice.warning{background:#2a2316;border-color:#716039;color:#f2d193}
.suite .notice.warning strong,.suite .notice.warning b{color:#f2d193}
.suite .notice.danger{background:#351e1b;border-color:#895344;color:#ffb3a0}
.suite .notice.danger strong,.suite .notice.danger b{color:#ffb3a0}
.suite .panel{border:1px solid #3f4650;padding:24px;background:#15181d;border-radius:5px}
.suite .panel h2{margin-bottom:18px}
.suite .panel h3{margin-bottom:12px}
.suite .panel p{font-size:12px;color:var(--muted);line-height:1.7}
.suite .empty{padding:48px 24px;text-align:center;border-block:1px solid var(--line)}
.suite .empty h3{margin-bottom:10px}
.suite .empty p{color:var(--muted);font-size:13px;max-width:50ch;margin:auto}
.suite .empty code{font-size:12px;color:var(--accent)}

/* toast: o elemento é o de sempre (as telas trocam `className`), só a cara muda */
.suite .toast{background:var(--accent);color:var(--accent-ink);border:0;border-radius:5px;font-size:13px;
  font-weight:600;padding:14px 20px;box-shadow:0 12px 36px #0006;max-width:calc(100% - 36px)}
.suite .toast.err{background:#381e25;color:#ffa1ae;border:1px solid #895344}

.suite dialog{width:min(620px,calc(100vw - 30px));max-height:85vh;overflow:auto;background:#15181d;color:var(--ink);
  border:1px solid #57616e;border-radius:7px;padding:25px;box-shadow:0 20px 70px #0008}
.suite dialog::backdrop{background:#06080dcc}
.suite dialog>header{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:25px}
.suite dialog pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.suite dialog .field{margin-top:15px}

/* soltar arquivo: a tela liga o clique no seletor escondido */
.suite .file-drop{position:relative;display:flex;min-height:185px;justify-content:center;align-items:center;gap:10px;
  flex-direction:column;border:1px dashed #65717e;background:#171b21;border-radius:5px;text-align:center;
  padding:28px 18px;overflow:hidden;cursor:pointer;color:var(--ink);width:100%}
.suite .file-drop>.ico{width:28px;height:28px;color:var(--accent)}
.suite .file-drop strong{font:800 23px/1.2 var(--display)}
.suite .file-drop>span{color:#b6bdc8;font-size:11px;max-width:50ch}
.suite .file-drop:hover,.suite .file-drop.over{background:var(--accent-soft);border-color:var(--accent)}
.suite .file-drop:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.suite .file-list{margin-top:10px}
.suite .file-list>div{display:flex;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line);font-size:12px}
.suite .file-list span{flex:1;overflow-wrap:anywhere}
.suite .file-list small{white-space:nowrap;color:var(--muted)}
.suite .file-list .ico{width:16px;height:16px;color:var(--accent)}
.suite .file-list button{background:none;border:0;color:var(--muted);padding:4px 6px}
.suite .file-list button:hover{color:#ffa1ae}
.suite .file-list:empty{display:none}

/* envio com barra — o protótipo não subia nada; produção sobe vídeo de GB */
.suite .upload-progress{margin-top:18px}
.suite .upload-progress .bar{height:6px;background:#202329;border-radius:3px;overflow:hidden}
.suite .upload-progress .fill{height:100%;width:0;background:var(--accent);transition:width .2s}
.suite .upload-progress .lbl{font:11px ui-monospace,Consolas,monospace;color:var(--muted);margin-top:8px}

/* ------------------------------------------------------ projetos e fila */
.suite .project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.suite .project-card{min-width:0}
.suite .project-cover{position:relative;display:block;aspect-ratio:16/10;background:#181d23;overflow:hidden;border-radius:5px}
.suite .project-cover img,.suite .project-cover video{width:100%;height:100%;object-fit:cover;transition:transform .25s ease-out;display:block}
.suite .project-cover:hover img,.suite .project-cover:hover video{transform:scale(1.025)}
.suite .project-cover .cover-label{position:absolute;bottom:16px;left:16px;right:16px;color:#fff;font:800 25px/1.1 var(--display);text-shadow:0 2px 10px #000c}
.suite .project-cover .badge{position:absolute;right:12px;top:12px}
.suite .project-cover.sem-capa{background:linear-gradient(160deg,#1b2027,#101216)}
.suite .project-card>header{display:flex;justify-content:space-between;align-items:flex-start;margin:15px 0 9px;gap:10px}
.suite .project-card h2{font-size:23px;line-height:1.1}
.suite .project-card p{font-size:11px;color:#b4bdc8}
.suite .project-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #414955;padding-top:13px;margin-top:13px;gap:9px;font-size:11px;color:#b4bdc8}
.suite .project-detail-head{display:grid;grid-template-columns:240px 1fr;gap:25px;margin-bottom:30px;border-bottom:1px solid var(--line);padding-bottom:25px}
.suite .project-detail-head .project-cover{aspect-ratio:auto;height:145px;border-radius:4px}
.suite .project-detail-head h2{font-size:32px;margin-bottom:8px}
.suite .project-detail-head p{color:var(--muted);font-size:12px}
.suite .project-detail-head .form-actions{margin-top:18px}
.suite .job-list{border-top:1px solid #414955}
.suite .job-row{display:grid;grid-template-columns:78px minmax(0,1fr) 150px minmax(130px,auto) 20px;gap:18px;align-items:center;border-bottom:1px solid var(--line);padding:18px 4px;color:inherit}
.suite .job-row:hover{background:#191d23}
.suite .job-row .job-cover{width:78px;height:52px;object-fit:cover;border-radius:3px;background:#181d23;display:grid;place-items:center;color:var(--accent);overflow:hidden}
.suite .job-row .job-cover .ico{width:22px;height:22px}
.suite .job-row strong{display:block;font-size:14px}
.suite .job-row small{display:block;color:#b3bdc9;margin-top:5px;font-size:11px}
.suite .job-row .stage{font-size:12px}
.suite .job-row .stage span{display:block;font-size:10px;color:#b3bdc9;margin-top:6px}
.suite .job-row>.ico{width:17px;height:17px;color:var(--accent)}
.suite .job-row>.badge{justify-self:start}
.suite .job-row .row-ops{display:flex;gap:6px;justify-content:flex-end}
.suite .queue-attention{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;margin-bottom:24px;
  background:var(--accent);border:1px solid var(--accent);color:var(--accent-ink);gap:20px;border-radius:var(--radius)}
.suite .queue-attention h2{font-size:22px}
.suite .queue-attention p{font-size:12px;color:var(--accent-ink);margin-top:5px}
.suite .queue-attention .btn{color:var(--accent-ink);border-color:#22300b66;min-height:40px}
.suite .queue-attention .btn:hover{background:#ffffff25;color:var(--accent-ink);border-color:var(--accent-ink)}
.suite .queue-progress{height:4px;background:#35342b;margin-top:9px;width:100px}
.suite .queue-progress i{display:block;height:100%;background:#f2c66e}
.suite .queue-progress.andando i{width:35%;animation:s-corre 1.4s ease-in-out infinite}
.suite .orphan{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:17px 0;gap:18px}
.suite .orphan:first-child{border-top:1px solid var(--line)}
.suite .orphan select{font-size:12px;max-width:260px}

/* ----------------------------------------------------- revisão (editorial) */
.suite .editing-page{padding:27px 28px 18px}
.suite .editing-page .page-heading h1{font-size:34px}
.suite .review-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;align-items:start}
.suite .monitor-toolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;background:#1e2228;color:#e4e8ee;
  padding:12px 15px;border-radius:5px 5px 0 0;font-size:12px;flex-wrap:wrap}
.suite .monitor-toolbar select{background:#2a3038;color:#f4f6fa;border:1px solid #66717f;min-height:33px;padding:5px 26px 5px 8px;font-size:11px}
.suite .monitor-toolbar label{display:flex;align-items:center;gap:8px}
.suite .poster{position:relative;aspect-ratio:16/9;overflow:hidden;background:#060608}
.suite .poster>img{width:100%;height:100%;object-fit:cover;display:block}
.suite .player{background:#101216;color:#eff2f7;border-radius:0 0 5px 5px;overflow:hidden}
.suite .player video{display:block;width:100%;background:#000}
.suite .player-controls{display:flex;gap:10px;align-items:center;padding:12px 15px;flex-wrap:wrap}
.suite .player-controls .icon-button{border-color:#596574}
.suite .player-controls input{accent-color:var(--accent);min-width:35px;flex:1}
.suite .frame-step{background:none;color:#c4cedb;border:0;padding:8px 2px;font-size:11px}
.suite .frame-step:hover{color:var(--accent)}
.suite .player-note{font-size:9px;color:#a9b6c8;padding:0 15px 11px;text-align:right}
.suite .review-aside{background:#181c22;border:1px solid #3b4552;border-radius:5px;overflow:hidden}
.suite .review-aside>header{padding:18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #38414d;gap:10px}
.suite .review-aside h2{font-size:22px}
.suite .review-aside header span{font-size:11px;color:#b2bdcd}
.suite .comments{max-height:360px;overflow:auto}
.suite .comment{padding:16px 18px;border-bottom:1px solid #38414d}
.suite .comment .row{justify-content:space-between}
.suite .at-time{white-space:nowrap;border:0;padding:3px 6px;background:var(--accent-soft);color:var(--accent);font:11px ui-monospace,Consolas,monospace;border-radius:3px;min-height:0}
.suite .at-time.geral{background:#382d18;color:#f7ce75}
.suite .comment .at-time.geral{cursor:default}
.suite .comment p{font-size:12px;line-height:1.65;margin:11px 0;color:#e0e5ed}
.suite .comment.done p{text-decoration:line-through;color:#a1adbd}
.suite .comment button{font-size:10px}
.suite .comment-author{font-size:10px;color:#afbbca}
.suite .comment-form{padding:18px}
.suite .comment-form textarea{min-height:85px;background:#222830;font-size:12px;color:#f1f4f8}
.suite .comment-form .row{margin-top:10px;justify-content:space-between}
.suite .timeline{margin-top:18px;padding:17px 18px;background:#1b2027;color:#e1e8f1;border-radius:5px}
.suite .timeline>header{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:15px;font-size:11px;flex-wrap:wrap}
.suite .timeline>header .btn{color:#d3deed;border-color:#536176}
.suite .review-actions{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:20px;margin-top:24px;gap:15px;flex-wrap:wrap}
.suite .review-actions>div{display:flex;gap:8px;flex-wrap:wrap}
.suite .review-actions p{font-size:11px;color:var(--muted)}
.suite .inspector{margin-top:18px;border-block:1px solid var(--line);padding:14px 0}
.suite .inspector h3{font-size:18px;margin-bottom:13px}
.suite .review-state{padding:20px;background:var(--accent-soft);border:1px solid var(--accent-border);margin-bottom:20px;border-radius:var(--radius)}
.suite .review-state h2{margin-bottom:10px}
.suite .review-state p{font-size:12px;color:var(--muted)}
.suite .compare-stage{position:relative;background:#101318;border-radius:5px;overflow:hidden}
.suite .compare-labels{display:flex;justify-content:space-between;font-size:11px;margin:10px 0;color:#b5c0cf}
.suite .scene-prompt{margin-top:24px}
.suite .scene-prompt textarea{margin:14px 0}
.suite .scene-stages{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:24px}
.suite .scene-stage{display:flex;align-items:center;gap:8px;padding:12px 18px;border:0;border-bottom:2px solid transparent;background:transparent;color:#aeb9c8;font-size:12px;border-radius:0}
.suite .scene-stage[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.suite .scene-stage:disabled{opacity:.4}

/* ------------------------------------------------------------------ cortes */
.suite .cut-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:25px}
.suite .cut-card{min-width:0;border-bottom:1px solid #46525e;padding-bottom:20px}
.suite .cut-card .poster{border-radius:4px}
.suite .cut-card h2{font-size:24px;margin:15px 0 9px}
.suite .cut-card p{font-size:12px;color:var(--muted);margin-bottom:14px}
.suite .cut-top{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:12px}
.suite .cut-top label{display:flex;align-items:center;gap:8px;font-size:12px}
.suite .cut-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.suite .cut-meta .btn{min-height:35px;padding:7px 12px}
.suite .batch-bar{position:sticky;bottom:16px;background:var(--accent);color:var(--accent-ink);box-shadow:0 8px 25px #0005;padding:18px 22px;
  display:flex;gap:18px;align-items:center;justify-content:space-between;margin-top:25px;border-radius:5px;z-index:3}
.suite .batch-bar p{font-size:12px}
.suite .batch-bar .btn{background:#171d12;color:var(--accent);border-color:#171d12}
.suite .batch-bar .btn:hover{filter:brightness(1.3);color:var(--accent)}
.suite .batch-bar .btn.ghost{background:transparent;color:var(--accent-ink);border-color:#22300b66}

/* --------------------------------------------------------------- decupagem */
.suite .segment-list>div{display:grid;grid-template-columns:28px minmax(0,1fr) 36px;align-items:center;gap:10px;padding:15px 0;border-bottom:1px solid var(--line)}
.suite .segment-list button{border:0;background:none;text-align:left;padding:0;color:inherit}
.suite .segment-list strong{display:block;font-size:13px}
.suite .segment-list small{display:block;font:11px ui-monospace,Consolas,monospace;color:#adbacb;margin-top:5px}
.suite .segment-list .segment-index{font:800 22px var(--display);color:var(--accent)}
.suite .mark-controls{display:flex;align-items:center;gap:12px;margin-top:18px;flex-wrap:wrap}
.suite .mark-controls span{font-size:11px;color:var(--muted)}

/* ---------------------------------------------------------------- legenda */
.suite .caption-editor{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);gap:24px;align-items:start}
.suite .caption-editor .player{position:sticky;top:100px}
.suite .caption-row{display:grid;grid-template-columns:90px minmax(0,1fr);gap:15px;padding:15px;border-bottom:1px solid #39434f;background:#171b21}
.suite .caption-row:focus-within{background:var(--accent-soft)}
.suite .caption-row>button{background:none;border:0;color:var(--accent);font:11px ui-monospace,Consolas,monospace;padding:0;text-align:left;align-self:start;line-height:1.8}
.suite .caption-row textarea{min-height:67px;font-size:13px;border:1px solid transparent;background:transparent;padding:0;color:var(--ink);border-radius:3px}
.suite .caption-row textarea:focus{border-color:var(--accent-border);padding:6px;outline:none}
.suite .caption-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;flex-wrap:wrap}
.suite .caption-tools p{font-size:12px;color:var(--muted)}
.suite .caption-tools .btn{font-size:11px}
.suite .srt-view{min-height:380px;font:12px/1.8 ui-monospace,Consolas,monospace}

/* ------------------------------------------------------------- bibliotecas */
.suite .library-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:28px}
.suite .library-list{border-right:1px solid var(--line);padding-right:22px}
.suite .library-list button,.suite .library-list a{display:block;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:4px;
  padding:13px 11px;font-size:13px;margin-bottom:5px;color:#c0cad7}
.suite .library-list button small,.suite .library-list a small{display:block;margin-top:5px;font-size:10px;color:#aab8c9}
.suite .library-list [aria-pressed=true],.suite .library-list [aria-current]{background:var(--accent-soft);border-color:var(--accent-border);color:var(--accent)}
.suite .library-list .btn{margin-top:15px;font-size:11px;display:flex;width:100%}
.suite .doc-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:16px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.suite .doc-icon{width:42px;height:48px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid var(--accent-border);color:var(--accent);border-radius:3px;overflow:hidden}
.suite .doc-icon img,.suite .doc-icon video{width:100%;height:100%;object-fit:cover}
.suite .doc-row strong{font-size:14px}
.suite .doc-row small{display:block;font-size:11px;color:#afbdce;margin-top:5px}
.suite .doc-detail{margin:20px 0;padding:23px;background:#151a20;border:1px solid #3d4755;border-radius:var(--radius)}
.suite .doc-detail h3{margin-bottom:15px}
.suite .doc-detail p,.suite .doc-detail pre{font-size:13px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere}
.suite .doc-detail img,.suite .doc-detail video{max-width:100%;max-height:330px;object-fit:contain}

.suite .catalog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.suite .catalog-item{min-width:0}
.suite .catalog-item>img,.suite .catalog-item .missing-thumb{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;border-radius:4px;background:#181f26}
.suite .missing-thumb{display:grid!important;place-items:center;color:#b8c5d5;font-size:12px}
.suite .catalog-caption{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:13px}
.suite .catalog-caption h2,.suite .catalog-caption h3{font-size:23px;overflow-wrap:anywhere}
.suite .catalog-caption small{display:block;font-size:10px;color:#b1bece;margin-top:5px}
.suite .catalog-caption button{border:1px solid #536579;background:none;color:#c1d0e1;padding:6px 9px;min-height:31px;font-size:10px;border-radius:var(--radius)}
.suite .catalog-caption button:hover{border-color:var(--accent);color:var(--accent)}
.suite .catalog-caption button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.suite .catalog-caption button.nao[aria-pressed=true]{background:#381e25;border-color:#895344;color:#ffa1ae}
.suite .catalog-caption .votos{display:flex;gap:6px;flex-shrink:0}
.suite .catalog-item.oculto>.caption-demo,.suite .catalog-item.oculto>img{opacity:.42}
.suite .catalog-description{font-size:12px;color:#b1bece;line-height:1.65;margin:9px 0}
.suite .catalog-item .badges{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}

.suite .motion-demo{height:175px;background:#171d25;color:#e4ecf6;border-radius:4px;position:relative;overflow:hidden;display:grid;place-items:center;padding:25px}
.suite .motion-demo .word{font:800 37px/.95 var(--display);text-align:center;max-width:9ch;color:var(--accent);overflow-wrap:anywhere}
.suite .motion-demo .subline{position:absolute;bottom:21px;left:24px;font-size:9px;letter-spacing:.13em;color:#b2c2d8}
.suite .motion-demo[data-motion=rise] .word{animation:s-rise 3.5s cubic-bezier(.16,1,.3,1) infinite}
.suite .motion-demo[data-motion=scale] .word{animation:s-scale 3.5s cubic-bezier(.16,1,.3,1) infinite}
.suite .motion-demo[data-motion=wipe] .word{animation:s-wipe 3.5s cubic-bezier(.16,1,.3,1) infinite}
.suite .motion-demo[data-motion=track] .word{animation:s-track 3.5s cubic-bezier(.16,1,.3,1) infinite}
.suite .motion-demo[data-motion=shift] .word{animation:s-shift 3.5s cubic-bezier(.16,1,.3,1) infinite}
.suite .motion-demo[data-motion=highlight] .word span{background:var(--accent);color:var(--accent-ink);padding:0 4px;animation:s-highlight 3.5s infinite}
.suite .catalog-paused .word,.suite .catalog-paused .word span,.suite .catalog-paused .cap,.suite .catalog-paused .cap *{animation-play-state:paused!important}

.suite .font-sample{font-size:36px;line-height:1.2;padding:25px 0;overflow-wrap:anywhere}
.suite .font-row{display:grid;grid-template-columns:175px minmax(0,1fr) auto;gap:20px;align-items:center;border-top:1px solid #3a4859;padding:14px 0}
.suite .font-row.oculto .font-sample{opacity:.42}
.suite .font-row h2{font:400 23px/1.2 var(--sample-font);overflow-wrap:anywhere}
.suite .font-row small{display:block;color:#b1bece;font:10px/1.6 Arial,sans-serif;margin-top:8px}
.suite .font-row .votos{display:flex;gap:6px;justify-content:flex-end}
.suite .font-row .btn{font-size:10px;padding:8px;min-height:35px}
.suite .font-row .btn.nao[aria-pressed=true]{background:#381e25;border-color:#895344;color:#ffa1ae}
.suite .font-controls{display:grid;grid-template-columns:minmax(0,1fr) 200px;gap:24px;margin-bottom:26px}
.suite .font-controls .field{margin:0}

.suite .caption-demo{position:relative;aspect-ratio:16/10;background:#10161f;overflow:hidden;border-radius:4px}
.suite .caption-demo .cap{position:absolute;inset:0;height:auto;border-radius:0}

/* ------------------------------------------------------------ ferramentas */
.suite .tool-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:32px;align-items:start}
.suite .tool-layout>aside{border-left:1px solid var(--line);padding-left:26px}
.suite .tool-layout>aside h2{font-size:24px;margin-bottom:20px}
.suite .output-preview{background:var(--accent);color:var(--accent-ink);padding:25px;border-radius:5px;margin-bottom:23px}
.suite .output-preview strong{font:800 52px/1 var(--display);display:block;margin:10px 0 18px;color:var(--accent-ink);overflow-wrap:anywhere}
.suite .output-preview small{font-size:11px;color:var(--accent-ink)}
.suite .output-preview p{font-size:12px;color:var(--accent-ink)}
.suite .output-summary{display:grid;grid-template-columns:1fr 1fr;font-size:12px;gap:12px;margin-top:20px}
.suite .output-summary dt{color:#b1c0d2}
.suite .output-summary dd{margin:0;text-align:right;font-weight:600;color:var(--ink);overflow-wrap:anywhere}
.suite .output-types{display:flex;gap:6px;flex-wrap:wrap;margin:18px 0 24px}
.suite .tool-section{border-top:1px solid var(--line);padding-top:23px;margin-top:25px}
.suite .tool-section h2{margin-bottom:20px}
.suite .tool-section>summary{cursor:pointer;font-weight:600;font-size:13px;color:var(--ink)}
.suite .tool-section[open]>summary{margin-bottom:14px}
.suite .check-line{display:flex;align-items:center;gap:10px;font-size:12px;line-height:1.6}
.suite .output-result{background:var(--accent-soft);border:1px solid var(--accent-border);padding:18px;margin-top:22px;border-radius:var(--radius)}
.suite .output-result h3{margin-bottom:10px;color:var(--accent)}
.suite .output-result p{font-size:12px;color:#c2cad0;line-height:1.7}
.suite .history-list{border-top:1px solid var(--line);margin-top:30px;padding-top:23px}
.suite .history-list h2{margin-bottom:15px}
.suite .history-row{display:flex;justify-content:space-between;align-items:center;gap:15px;font-size:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.suite .history-row>span:first-child{min-width:0;flex:1;overflow-wrap:anywhere}
.suite .history-row small{font-size:10px;color:#b2c1d2}
.suite .history-row .row{gap:8px;flex-wrap:wrap;justify-content:flex-end}
.suite .steps-list{padding:0;list-style:none;counter-reset:step;margin:0}
.suite .steps-list li{counter-increment:step;position:relative;padding:0 0 22px 38px;border-bottom:1px solid var(--line);margin-bottom:22px}
.suite .steps-list li:before{content:counter(step);position:absolute;left:0;top:-1px;font:800 24px var(--display);color:var(--accent)}
.suite .steps-list h3{font-size:19px;margin-bottom:9px}
.suite .steps-list p{font-size:12px;color:#b2c1d2;line-height:1.7}
.suite .code-path{display:block;overflow-wrap:anywhere;background:#1b2530;color:#c4d7e9;padding:12px;font:11px/1.6 ui-monospace,Consolas,monospace;margin-top:10px;border:0;text-align:left;width:100%;border-radius:3px}
.suite button.code-path:hover{color:var(--accent)}
.suite .matte-preview{background:repeating-conic-gradient(#1b242c 0% 25%,#27333d 0% 50%) 50%/20px 20px;aspect-ratio:16/10;display:grid;place-items:center;position:relative;border:1px solid #405467;border-radius:4px}
.suite .matte-preview span{font:800 28px var(--display);color:var(--accent);text-align:center;max-width:10ch}

/* ------------------------------------------------------------------ acesso */
.suite .member-row{display:grid;grid-template-columns:45px minmax(0,1fr) 120px 100px;gap:18px;align-items:center;border-bottom:1px solid var(--line);padding:20px 0}
.suite .avatar{width:43px;height:43px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700}
.suite .member-row strong{display:block;font-size:14px}
.suite .member-row .badge{justify-self:start}
.suite .member-row small{display:block;color:#b1bdce;font-size:11px;margin-top:4px}
.suite .access-note{font-size:12px;color:#b2c1d2;line-height:1.7;max-width:60ch}
.suite .login-layout{display:grid;grid-template-columns:1.1fr 1fr;min-height:540px;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.suite .login-art{position:relative;background:#0b0e12;color:#fff;overflow:hidden}
.suite .login-art img{position:absolute;width:100%;height:100%;object-fit:cover;opacity:.65}
.suite .login-art>div{position:absolute;inset:35px;display:flex;flex-direction:column;justify-content:space-between}
.suite .login-art strong{font:800 60px/.92 var(--display);color:var(--lime);letter-spacing:-.025em;max-width:8ch}
.suite .login-art small{font-size:10px;letter-spacing:.1em}
.suite .login-form{padding:45px;display:flex;flex-direction:column;justify-content:center;background:#15191f}
.suite .login-form h2{font-size:34px;margin-bottom:12px}
.suite .login-form>p{font-size:12px;line-height:1.7;color:#b9c2d1;margin-bottom:30px}
.suite .password-wrap{position:relative;display:block}
.suite .password-wrap input{padding-right:50px!important;width:100%}
.suite .password-wrap button{position:absolute;right:4px;top:4px;min-height:34px;border:0}
.suite .login-form .btn.primary{width:100%;margin-top:8px}
.suite .screen-error{font-size:12px;color:#ffb3a0;background:#351e1b;border:1px solid #895344;padding:12px;margin-top:12px;border-radius:3px}

/* ---------------------------------------------------------------- movimento */
@keyframes s-rise{0%,8%{transform:translateY(18px);opacity:.65}28%,82%{transform:translateY(0);opacity:1}100%{opacity:.65}}
@keyframes s-scale{0%,8%{transform:scale(.88);opacity:.65}30%,82%{transform:scale(1);opacity:1}100%{opacity:.65}}
@keyframes s-wipe{0%,8%{clip-path:inset(0 10% 0 0)}35%,82%{clip-path:inset(0)}100%{clip-path:inset(0 0 0 10%)}}
@keyframes s-track{0%,8%{letter-spacing:.08em;opacity:.65}35%,82%{letter-spacing:0;opacity:1}100%{opacity:.65}}
@keyframes s-highlight{0%,25%{background:transparent;color:inherit}40%,85%{background:var(--accent);color:var(--accent-ink)}100%{background:transparent;color:inherit}}
@keyframes s-shift{0%,8%{transform:translateX(-18px);opacity:.65}35%,82%{transform:translateX(0);opacity:1}100%{opacity:.65}}
@keyframes s-corre{0%{margin-left:-35%}100%{margin-left:100%}}
@keyframes s-giro{to{transform:rotate(360deg)}}
.suite .giro{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--accent-border);border-top-color:var(--accent);animation:s-giro .8s linear infinite;display:inline-block}

/* ------------------------------------------------------------- respiro */
@media(min-width:1700px){
  .suite .main{padding:45px 52px 22px}
  .suite .editing-page{padding:32px}
  .suite .review-layout{grid-template-columns:minmax(0,1fr) 340px}
  .suite .project-grid,.suite .catalog-grid{gap:30px}
}
@media(max-width:1200px){
  .suite .main{padding:28px 26px 18px}
  .suite .page-heading h1{font-size:36px}
  .suite .page-heading{flex-wrap:wrap;gap:18px}
  .suite .heading-actions{padding:0}
  .suite .review-layout{grid-template-columns:minmax(0,1fr) 275px;gap:18px}
  .suite .review-aside>header,.suite .comment,.suite .comment-form{padding:14px}
  .suite .project-grid{gap:18px}
  .suite .project-card h2{font-size:20px}
  .suite .project-cover .cover-label{font-size:21px}
  .suite .job-row{grid-template-columns:60px minmax(0,1fr) minmax(130px,auto) 20px;gap:14px}
  .suite .job-row .job-cover{width:60px;height:45px}
  .suite .job-row .stage{display:none}
  .suite .tool-layout{grid-template-columns:minmax(0,1fr) 255px;gap:24px}
  .suite .catalog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suite .font-row{grid-template-columns:140px minmax(0,1fr) auto;gap:15px}
  .suite .caption-editor{grid-template-columns:minmax(250px,.8fr) minmax(0,1.2fr)}
  .suite .login-form{padding:30px}
  .suite .login-art strong{font-size:48px}
}
@media(max-width:950px){
  .suite .review-layout{grid-template-columns:1fr}
  .suite .review-aside{margin-top:5px}
  .suite .comments{max-height:260px}
  .suite .project-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .suite .tool-layout{grid-template-columns:1fr}
  .suite .tool-layout>aside{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}
  .suite .output-preview{max-width:100%;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5px 20px}
  .suite .output-preview strong{grid-row:1/3;grid-column:2;text-align:right}
  .suite .library-layout{grid-template-columns:170px 1fr;gap:20px}
  .suite .caption-editor{grid-template-columns:1fr}
  .suite .caption-editor .player{position:static}
  .suite .font-row{grid-template-columns:130px 1fr}
  .suite .font-row .votos{grid-column:2;justify-self:end;margin-top:-12px}
  .suite .font-sample{font-size:30px;padding:18px 0}
  .suite .font-controls{grid-template-columns:1fr}
  .suite .login-layout{grid-template-columns:1fr}
  .suite .login-art{min-height:230px}
  .suite .login-art strong{font-size:40px;max-width:12ch}
  .suite .login-art>div{inset:25px}
  .suite .member-row{grid-template-columns:40px 1fr 85px;gap:12px}
  .suite .member-row .btn{grid-column:2/4;justify-self:start;min-height:30px;font-size:10px}
  .suite .scene-stage{padding:11px 12px}
}
@media(max-width:700px){
  .suite .main,.suite .editing-page{padding:26px 18px 18px}
  .suite .page-heading h1{font-size:34px}
  .suite .page-heading p{font-size:12px;line-height:1.7}
  .suite .page-heading{margin-bottom:25px}
  .suite .heading-actions{width:100%}
  .suite .heading-actions .btn{min-height:40px}
  .suite .toolbar{gap:14px}
  .suite .search{max-width:none;width:100%;flex-basis:100%}
  .suite .project-grid{grid-template-columns:1fr;gap:28px}
  .suite .project-card h2{font-size:26px}
  .suite .project-cover .cover-label{font-size:29px}
  .suite .project-cover{aspect-ratio:16/9}
  .suite .project-detail-head{grid-template-columns:1fr}
  .suite .project-detail-head .project-cover{height:155px}
  .suite .job-row{grid-template-columns:54px minmax(0,1fr) 16px;gap:12px;padding:17px 0}
  .suite .job-row .job-cover{width:54px;height:48px}
  .suite .job-row>.badge{grid-column:2;justify-self:start;margin-top:-4px}
  .suite .job-row>.ico{grid-column:3;grid-row:1}
  .suite .job-row strong{font-size:13px}
  .suite .queue-attention{flex-wrap:wrap;gap:14px;padding:18px}
  .suite .queue-attention .btn{min-height:36px}
  .suite .two-cols{grid-template-columns:1fr;gap:0}
  .suite .player-controls{padding:10px;gap:8px}
  .suite .player-controls .time{font-size:10px}
  .suite .player-note{font-size:8px;text-align:left;padding-left:10px}
  .suite .monitor-toolbar{padding:10px;font-size:10px}
  .suite .timeline{padding:15px 11px}
  .suite .review-actions{align-items:stretch}
  .suite .review-actions>div{width:100%}
  .suite .review-actions .btn{flex:1;min-width:140px}
  .suite .cut-grid{grid-template-columns:1fr}
  .suite .batch-bar{padding:15px;gap:12px;bottom:10px;flex-wrap:wrap}
  .suite .batch-bar .btn{width:100%}
  .suite .scene-stages{overflow-x:auto}
  .suite .scene-stage{font-size:11px;white-space:nowrap}
  .suite .caption-row{grid-template-columns:72px minmax(0,1fr);padding:13px 10px;gap:9px}
  .suite .caption-row>button{font-size:10px}
  .suite .library-layout{grid-template-columns:1fr}
  .suite .library-list{border:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
  .suite .library-list button,.suite .library-list a{width:auto;flex:1;min-width:130px}
  .suite .library-list .btn{margin:0}
  .suite .catalog-grid{gap:20px 12px}
  .suite .catalog-caption{gap:7px;align-items:flex-start;flex-wrap:wrap}
  .suite .catalog-caption h2,.suite .catalog-caption h3{font-size:20px}
  .suite .catalog-caption small{font-size:9px}
  .suite .catalog-item>img,.suite .catalog-item .missing-thumb{aspect-ratio:1/1}
  .suite .catalog-description{font-size:11px}
  .suite .motion-demo{height:148px;padding:17px}
  .suite .motion-demo .word{font-size:29px}
  .suite .motion-demo .subline{font-size:8px;left:15px;bottom:15px}
  .suite .caption-demo{aspect-ratio:1/1}
  .suite .font-row{grid-template-columns:1fr auto;gap:4px}
  .suite .font-row h2{font-size:24px}
  .suite .font-row>div:first-child{grid-column:1}
  .suite .font-sample{grid-column:1/-1;grid-row:2;padding:14px 0;min-width:0}
  .suite .font-row .votos{grid-column:2;grid-row:1;margin:0}
  .suite .doc-row{grid-template-columns:35px 1fr;gap:11px}
  .suite .doc-icon{width:35px;height:43px}
  .suite .doc-row>.row{grid-column:2;flex-wrap:wrap}
  .suite .orphan{flex-wrap:wrap}
  .suite .orphan select{max-width:none;width:100%}
  .suite .section-head{gap:15px;flex-wrap:wrap}
  .suite .login-art{min-height:240px}
  .suite .login-form{padding:28px 24px}
  .suite .login-art strong{font-size:48px;max-width:9ch}
  .suite .panel{padding:20px}
  .suite .file-drop{padding:25px 16px}
  .suite .file-drop strong{font-size:22px}
  .suite .output-preview strong{font-size:43px}
  .suite .history-row{flex-wrap:wrap}
  .suite .form-actions .btn{flex-grow:1}
}
@media(prefers-reduced-motion:reduce){
  .suite *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  .suite .word{opacity:1!important;transform:none!important;clip-path:none!important}
}