/* ============================================================
   IA HUB — dark theme + glass, bold & big
   Inter pesada, fundo escuro com vibração, painéis translúcidos
   com blur, ícones minimal de linha (branco).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  --bg: #191b23;                     /* menos dark: charcoal claro no lugar do quase-preto */
  --card: #24262f;                   /* superfícies sólidas e chapadas (sem translúcido) */
  --card-2: #2c2f39;
  --ink: #eef0f6;
  --muted: #a0a6b5;
  --faint: #737a8b;
  --line: rgba(255, 255, 255, 0.13);
  --line-2: rgba(255, 255, 255, 0.08);
  --accent: #7c5cff;
  --accent-soft: rgba(124, 92, 255, 0.18);
  --accent-ink: #b9a8ff;
  --accent-glow: rgba(124, 92, 255, 0.42);
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --serif: 'Inter', system-ui, sans-serif;
  --glass: saturate(150%) blur(22px);
  --radius: 24px;
  --radius-sm: 15px;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  --shadow-soft: 0 6px 22px rgba(0, 0, 0, 0.4);
  --content-max: 1040px;
  --topbar-h: 74px;
}

/* mood por aba-mãe: Imagem = azul (Photoshop) · Vídeo = roxo (Premiere, padrão)
   · Áudio = verde (waveform) · Ferramentas = amarelo */
body.theme-image {
  --accent: #2f8fff;
  --accent-soft: rgba(47, 143, 255, 0.18);
  --accent-ink: #9cc4ff;
  --accent-glow: rgba(47, 143, 255, 0.42);
}
body.theme-audio {
  --accent: #35c46a;
  --accent-soft: rgba(53, 196, 106, 0.18);
  --accent-ink: #86e3a6;
  --accent-glow: rgba(53, 196, 106, 0.42);
}
body.theme-tools {
  --accent: #f2c31d;
  --accent-soft: rgba(242, 195, 29, 0.18);
  --accent-ink: #ffe08a;
  --accent-glow: rgba(242, 195, 29, 0.42);
}
body.theme-3d {
  --accent: #ff8a2b;
  --accent-soft: rgba(255, 138, 43, 0.18);
  --accent-ink: #ffc48a;
  --accent-glow: rgba(255, 138, 43, 0.42);
}
body.theme-control {
  --accent: #ec5a9e;
  --accent-soft: rgba(236, 90, 158, 0.18);
  --accent-ink: #ffa9d0;
  --accent-glow: rgba(236, 90, 158, 0.42);
}
body.theme-gray {
  --accent: #8b93a7;
  --accent-soft: rgba(139, 147, 167, 0.18);
  --accent-ink: #c3cad9;
  --accent-glow: rgba(139, 147, 167, 0.38);
}
/* Doc (extrair mídia) — mood ciano próprio (não fica cinza de sistema) */
body.theme-doc { --accent: #1fb6c9; --accent-soft: rgba(31, 182, 201, 0.18); --accent-ink: #8fe3ee; --accent-glow: rgba(31, 182, 201, 0.38); }
/* Apps (e todos os apps) — mood cinza escuro */
body.theme-apps { --accent: #6a7180; --accent-soft: rgba(106, 113, 128, 0.20); --accent-ink: #c1c7d3; --accent-glow: rgba(106, 113, 128, 0.38); }
/* legado (não mais aplicados diretamente) */
body.theme-injection { --accent: #ff4d57; --accent-soft: rgba(255, 77, 87, 0.18); --accent-ink: #ff9aa0; }
/* LoRA (treino) — mood ouro próprio (aba principal), cor mais distinta das demais */
body.theme-train { --accent: #eab308; --accent-soft: rgba(234, 179, 8, 0.18); --accent-ink: #f5db8a; --accent-glow: rgba(234, 179, 8, 0.42); }

/* Painéis SÓLIDOS e chapados no mood da aba (estilo ValhallaDSP/Ableton).
   SEM color-mix (falha no Safari e pode sair branco): tinta = overlay rgba (accent-soft) sobre
   base escura sólida. Garante painel sempre ESCURO, tintado no mood, nunca branco. */
body {
  --panel:    linear-gradient(var(--accent-soft), var(--accent-soft)), #23252d;  /* janelas/nodes */
  --panel-2:  linear-gradient(var(--accent-soft), var(--accent-soft)), #2a2d36;  /* chips (params/geração) */
  --panel-hi: linear-gradient(var(--accent-soft), var(--accent-soft)), #313540;  /* foco/hover */
  --field:    #202127;                                                            /* campos de ESCRITA — neutro escuro */
  --field-hi: #282a31;
}
/* fundo CHAPADO e sólido (sem degradê/glow radial) — escuro sólido; o mood vem dos painéis/chips */
body, body[class*="theme-"] { background: var(--bg) !important; background-attachment: fixed; }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

body {
  font-family: var(--sans);
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.5;
  background:
    radial-gradient(55% 50% at 12% 0%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(45% 45% at 100% 8%, rgba(60,190,210,.10), transparent 60%),
    radial-gradient(60% 60% at 85% 100%, rgba(255,80,160,.09), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  transition: background .4s ease;
  /* app-like: arrastar (girar 3D, sliders, comparador de upscale, drag-drop) NÃO seleciona a interface. */
  -webkit-user-select: none; user-select: none;
}
/* seleção de texto continua onde faz sentido: campos e saídas copiáveis (LLM, legendas, descrição). */
input, textarea, select, [contenteditable="true"], .selectable,
.llm-bubble, .lightbox-cap, .li-prompt, .detect-body, .li-params, .li-head, .li-refs-t {
  -webkit-user-select: text; user-select: text;
}
/* glow de fundo combinando com o mood da aba */
body.theme-image {
  background:
    radial-gradient(55% 50% at 12% 0%, rgba(47,191,113,.18), transparent 60%),
    radial-gradient(50% 50% at 92% 6%, rgba(60,210,150,.10), transparent 60%),
    radial-gradient(60% 60% at 85% 100%, rgba(47,191,113,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.theme-injection {
  background:
    radial-gradient(55% 50% at 12% 0%, rgba(255,77,87,.18), transparent 60%),
    radial-gradient(50% 50% at 92% 6%, rgba(255,120,90,.10), transparent 60%),
    radial-gradient(60% 60% at 85% 100%, rgba(255,77,87,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.theme-audio {
  background:
    radial-gradient(55% 50% at 12% 0%, rgba(245,166,35,.18), transparent 60%),
    radial-gradient(50% 50% at 92% 6%, rgba(255,200,90,.10), transparent 60%),
    radial-gradient(60% 60% at 85% 100%, rgba(245,166,35,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.theme-3d {
  background:
    radial-gradient(55% 50% at 12% 0%, rgba(255,138,43,.18), transparent 60%),
    radial-gradient(50% 50% at 92% 6%, rgba(255,170,80,.10), transparent 60%),
    radial-gradient(60% 60% at 85% 100%, rgba(255,138,43,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.theme-control {
  background:
    radial-gradient(55% 50% at 12% 0%, rgba(236,90,158,.18), transparent 60%),
    radial-gradient(50% 50% at 92% 6%, rgba(255,130,190,.10), transparent 60%),
    radial-gradient(60% 60% at 85% 100%, rgba(236,90,158,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.theme-gray {
  background:
    radial-gradient(55% 50% at 12% 0%, rgba(139,147,167,.16), transparent 60%),
    radial-gradient(50% 50% at 92% 6%, rgba(160,168,186,.09), transparent 60%),
    radial-gradient(60% 60% at 85% 100%, rgba(139,147,167,.07), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.theme-apps {
  background:
    radial-gradient(55% 50% at 12% 0%, rgba(106,113,128,.18), transparent 60%),
    radial-gradient(50% 50% at 92% 6%, rgba(120,128,142,.10), transparent 60%),
    radial-gradient(60% 60% at 85% 100%, rgba(106,113,128,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
body.theme-train {
  background:
    radial-gradient(55% 50% at 12% 0%, rgba(234,179,8,.18), transparent 60%),
    radial-gradient(50% 50% at 92% 6%, rgba(245,203,60,.10), transparent 60%),
    radial-gradient(60% 60% at 85% 100%, rgba(234,179,8,.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ícones minimal */
.ic { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; display: block; flex-shrink: 0; }
.ic.inline { width: 15px; height: 15px; display: inline-block; vertical-align: -3px; }

/* ---------- Topbar ---------- */
.topbar {
  height: var(--topbar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 22px; padding: 0 22px;
  position: sticky; top: 0; z-index: 50;
  background: rgba(16,17,24,.72); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand-logo { height: 42px; width: auto; display: block; }
.brand-logo-login { height: 96px; width: auto; display: block; margin: 0 auto 10px; }
.logo {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 21px; color: #fff; font-weight: 900;
  background: linear-gradient(150deg, #9a7bff, var(--accent)); box-shadow: 0 8px 24px rgba(124,92,255,.45);
}
.brand-name { font-size: 24px; line-height: 1; display: inline-flex; align-items: baseline; }
.brand-ia { font-family: 'Arial Black', Arial, sans-serif; font-weight: 900; letter-spacing: -0.5px; }
.brand-hub { font-family: Helvetica, Arial, sans-serif; font-weight: 200; letter-spacing: 0.5px; }

.nav { position: relative; display: flex; flex-direction: row; gap: 4px; }
/* REGRA UNIVERSAL: o atributo hidden sempre vence. Sem isto, qualquer regra de
   classe com display (ex.: .field { display:flex }) ganha do [hidden] do navegador
   — era por isso que os parâmetros de TODOS os provedores apareciam ao mesmo tempo. */
[hidden] { display: none !important; }
.nav-item[hidden] { display: none !important; }
/* Login */
.login-overlay[hidden] { display: none; }
.login-overlay { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; background: rgba(6,7,11,.55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.login-card { width: min(360px, 92vw); padding: 26px 24px; border-radius: 18px; background: var(--card); border: 1px solid var(--line-2); box-shadow: 0 24px 70px rgba(0,0,0,.6); }
.login-sub { color: var(--muted); font-size: 13.5px; text-align: center; margin: 0 0 16px; }
.login-input { width: 100%; height: 44px; margin-bottom: 10px; padding: 0 14px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); font-family: var(--sans); font-size: 14px; -webkit-appearance: none; appearance: none; }
.login-input:focus { outline: none; border-color: var(--accent); }
/* Safari: o autofill pinta os inputs de branco (o "glitch" da aba Usuários) — força fundo/texto escuros */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus,
.login-input:-webkit-autofill, .adm-name-input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #14161d inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-out 0s;   /* impede o flash branco do autofill */
}
.login-card .hint { text-align: center; margin-top: 8px; }
/* chip de usuário */
.user-chip[hidden] { display: none; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 7px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid var(--line); font-weight: 800; font-size: 13px; color: var(--ink); }
.user-avatar { position: relative; width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.06); background-size: cover; background-position: center; display: grid; place-items: center; cursor: pointer; overflow: hidden; flex: 0 0 auto; }
.user-avatar .ua-ph { font-size: 16px; font-weight: 300; color: var(--muted); line-height: 1; }
.user-avatar.has-img .ua-ph { display: none; }
.user-avatar:hover { border-color: var(--accent); }
.user-logout { border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1; }
.user-logout:hover { color: var(--accent-ink); }
/* Administração */
.adm-pool { margin-bottom: 18px; padding: 18px 20px; border-radius: 14px; background: rgba(53,196,106,.08); border: 1px solid rgba(53,196,106,.3); }
.adm-pool-big { font-family: var(--serif); font-size: 44px; font-weight: 800; line-height: 1; color: #35c46a; }
.adm-pool-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
/* card do nome: input + estrela juntos, estrela logo após o nome */
.adm-name-wrap { display: inline-flex; align-items: center; gap: 4px; height: 44px; padding: 0 12px; border-radius: 11px; border: 1px solid var(--line); background: rgba(255,255,255,.04); }
.adm-name-wrap:focus-within { border-color: var(--accent); }
.adm-name-input { border: none; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 14px; min-width: 40px; }
.adm-name-input:focus { outline: none; }
.adm-star { color: #f2c31d; font-size: 14px; }
.log-list { display: flex; flex-direction: column; gap: 2px; max-height: calc(100vh - 260px); overflow: auto; }
.log-row { display: flex; gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; }
.log-row:nth-child(odd) { background: rgba(255,255,255,.03); }
.log-t { color: var(--muted); flex: 0 0 150px; font-variant-numeric: tabular-nums; }
.log-user { font-weight: 800; flex: 0 0 90px; }
.log-act { font-weight: 700; flex: 0 0 auto; }
.log-params { color: var(--muted); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; }
.adm-add .login-input { height: 40px; margin: 0; }
.adm-list { display: flex; flex-direction: column; gap: 8px; }
/* linha de usuário em COLUNAS: [nome fixo] [saldo fixo · alinhado] [espaço] [ações à direita] */
.adm-row { display: grid; grid-template-columns: minmax(150px, 210px) 130px 1fr; align-items: center; gap: 14px; padding: 10px 14px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.adm-name-wrap { width: 100%; }
.adm-name-input { width: 100%; min-width: 0; }
.adm-name { font-weight: 800; min-width: 90px; }
.adm-role { font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--muted); }
.adm-cred { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin: 0; }
.adm-cred .login-input { height: 36px; margin: 0; width: 100%; }
/* Salvar/Remover: botões pequenos, agrupados à direita do card */
.adm-acts { display: inline-flex; gap: 8px; justify-content: flex-end; }
.adm-acts .btn-ghost.sm { flex: 0 0 auto; padding: 7px 14px; min-width: 84px; }
/* Safari: inputs translúcidos dentro do painel glass viram BRANCO — fundo sólido opaco resolve */
#admUsersPanel .login-input, #admUsersPanel .adm-name-wrap { background: #14161d; backdrop-filter: none; -webkit-backdrop-filter: none; }
#admUsersPanel .adm-name-input { background: transparent; }
/* API keys da plataforma (mascaradas + editar/limpar) */
.adm-keys { margin-top: 18px; }
.adm-key-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line-2); }
.adm-key-name { flex: 0 0 168px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.adm-key-prev { flex: 1 1 120px; min-width: 90px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); letter-spacing: .5px; overflow: hidden; text-overflow: ellipsis; }
.adm-key-empty { color: var(--faint); font-style: italic; }
.adm-key-input { flex: 1 1 150px; min-width: 130px; height: 34px; margin: 0; }
/* modo USER: sem configs de servidor (só ligar) */
body.mode-user #podSelect, body.mode-user #podManage, body.mode-user #podRefresh, body.mode-user #podGpu { display: none !important; }
.nav-item {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 9px; padding: 11px 16px; border: none; background: transparent;
  color: var(--muted); font-family: var(--sans); font-size: 15.5px; font-weight: 800; border-radius: 12px; cursor: pointer; white-space: nowrap;
  transition: color .32s cubic-bezier(.87,0,.13,1);   /* cor acompanha o mood no crossfade */
}
.nav-item:hover { color: var(--ink); }
/* pill deslizante: fica ATRÁS do item ativo e desliza entre abas com easing exponencial */
.nav-ind {
  position: absolute; top: 0; left: 0; height: 100%; margin: 0; padding: 0; border-radius: 12px; z-index: 0;
  background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent), 0 4px 16px var(--accent-soft);
  transform: translateX(var(--nav-x, 0)); width: var(--nav-w, 0);
  opacity: 0; pointer-events: none;
  transition: transform .3s cubic-bezier(.87,0,.13,1), width .3s cubic-bezier(.87,0,.13,1),
              background-color .28s ease, box-shadow .28s ease, opacity .18s ease;
}
.nav-ind.on { opacity: 1; }
.nav-item.active { color: var(--accent-ink); }
.nav-item .ic { width: 20px; height: 20px; stroke-width: 2; }

/* lado direito: saldos + toggle */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 7px; min-width: 0; flex-shrink: 1; flex-wrap: wrap; justify-content: flex-end; }
.topbar-right .chip-wrap, .topbar-right .balchip, .topbar-right .gem-quota { flex: 0 0 auto; }
/* créditos: só COR + NÚMERO (o nome fica escondido; aparece ao clicar no modo ADM) */
.topbar-right .balchip .balchip-k { display: none; }
.topbar-right .balchip.show-name .balchip-k { display: inline; }
.mode-switch { display: flex; gap: 3px; padding: 3px; background: rgba(255,255,255,.05); border: 1px solid var(--line-2); border-radius: 11px; }
/* toggle retrátil da galeria/fila (topbar) */
.rail-toggle { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border: 1px solid var(--line-2); background: var(--card); color: var(--muted); border-radius: 11px; cursor: pointer; }
.rail-toggle:hover { color: var(--ink); }
.rail-toggle .ic { width: 18px; height: 18px; }
.rail-count { font-size: 11px; font-weight: 800; color: var(--accent-ink); }
body.gallery-open .rail-toggle { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.mode-opt { padding: 7px 13px; border: none; border-radius: 8px; cursor: pointer; font-family: var(--sans); font-weight: 800; font-size: 12.5px; letter-spacing: 1px; background: transparent; color: var(--muted); transition: .16s; }
.mode-opt:hover { color: var(--ink); }
.mode-opt.active { background: #f2f3f5; color: #14151c; box-shadow: 0 3px 12px rgba(0,0,0,.3); }   /* branco, independente da aba */
/* engrenagem de Administração (ao lado do toggle) */
.admin-cog { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-2); border-radius: 10px; background: rgba(255,255,255,.05); color: var(--muted); cursor: pointer; padding: 0; }
.admin-cog[hidden] { display: none !important; }   /* o atributo hidden vence o display:flex acima (modo USER não vê a engrenagem) */
.admin-cog:hover { color: var(--ink); border-color: var(--accent); }
.admin-cog svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.chip-wrap { position: relative; }
.balchip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 12px; cursor: pointer; font-family: var(--sans); font-size: 13px; transition: .16s; white-space: nowrap; }
.balchip:hover { background: var(--card-2); }
.balchip-k { color: var(--muted); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; }
.balchip strong { font-family: var(--serif); font-weight: 900; font-size: 17px; letter-spacing: -.3px; }
.balchip .pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.balchip .pdot.on { background: #38d39b; box-shadow: 0 0 0 3px rgba(56,211,155,.18); }
/* chip da cota free do Gemini (Nano): verde = livre · amarelo = em cooldown (contador) */
.gem-quota { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; cursor: pointer; }
.gem-quota:hover { background: var(--card-2); }
.gem-quota .gem-dot { width: 8px; height: 8px; border-radius: 50%; background: #38d39b; box-shadow: 0 0 0 3px rgba(56,211,155,.16); }
.gem-quota .gem-quota-k { color: var(--muted); font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .7px; }
.gem-quota.wait { color: #f2c31d; border-color: rgba(242,195,29,.35); }
.gem-quota.wait .gem-dot { background: #f2c31d; box-shadow: 0 0 0 3px rgba(242,195,29,.16); animation: qpulse 1.2s ease-in-out infinite; }
.gem-quota.low { color: #ff6b6b; border-color: rgba(255,107,107,.4); }
.gem-quota.low .gem-dot { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,.16); }
.balchip .pdot.off { background: #ff5a6e; }
.balchip .pdot.init { background: #f5c451; box-shadow: 0 0 0 3px rgba(245,196,81,.18); }
.chip-pop { position: absolute; right: 0; top: calc(100% + 9px); width: 248px; z-index: 60; padding: 16px; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(20,21,28,.97); backdrop-filter: var(--glass); box-shadow: var(--shadow); }
.chip-pop[hidden] { display: none; }

/* sem backdrop-filter aqui: já estão dentro da sidebar glass (evita virar branco) */
.credits-card, .status-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft);
}
.credits-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; color: var(--muted); display: flex; align-items: center; justify-content: space-between; }
.card-refresh { border: none; background: transparent; color: var(--muted); cursor: pointer; padding: 2px; border-radius: 7px; display: grid; place-items: center; }
.card-refresh:hover { color: var(--ink); background: var(--card-2); }
.card-refresh .ic { width: 15px; height: 15px; }
/* dropdowns do painel de pods — mesmo shade da UI */
.pod-select { width: 100%; margin: 4px 0 10px; padding: 8px 10px; font-size: 12px; font-family: var(--sans); color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 9px; cursor: pointer; }
.pod-select:focus { outline: none; border-color: var(--accent); }
/* botão único ligar/desligar — verde rodando, vermelho parado */
.pod-toggle { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 11px; border-radius: var(--radius-sm); border: 1px solid transparent; font-family: var(--sans); font-weight: 800; font-size: 13.5px; cursor: pointer; transition: .16s; }
.pod-toggle .pt-ic { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pod-toggle.on { background: rgba(56,211,155,.16); border-color: rgba(56,211,155,.5); color: #38d39b; }
.pod-toggle.on:hover { background: rgba(56,211,155,.26); }
.pod-toggle.off { background: rgba(255,90,110,.16); border-color: rgba(255,90,110,.5); color: #ff5a6e; }
.pod-toggle.off:hover { background: rgba(255,90,110,.26); }
.pod-toggle:disabled { opacity: .5; cursor: default; }
.pod-manage { margin-top: 10px; border-top: 1px solid var(--line); padding-top: 10px; }
.pod-manage > summary { cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--muted); list-style: none; }
.pod-manage > summary::-webkit-details-marker { display: none; }
.pod-manage > summary::before { content: '⚙ '; }
.pod-mlabel { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; color: var(--faint); margin: 10px 0 4px; }
.btn-ghost.danger { color: #ff7a8a; border-color: rgba(255,90,110,.35); }
.btn-ghost.danger:hover { background: rgba(255,90,110,.14); }
.credits-value {
  font-family: var(--serif); font-size: 44px; font-weight: 800; line-height: 1; margin: 8px 0 4px; letter-spacing: -1.5px;
  background: linear-gradient(120deg, #fff, var(--accent-ink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.credits-sub { color: var(--muted); font-size: 11.5px; margin-bottom: 14px; line-height: 1.45; }
.status-card { font-size: 13px; color: var(--ink); line-height: 1.95; font-weight: 500; }
.status-card .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px; vertical-align: middle; }
.dot.on { background: #38d39b; box-shadow: 0 0 0 3px rgba(56,211,155,.18); }
.dot.off { background: #3a3f4c; }
.pdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; vertical-align: middle; }
.pdot.on { background: #38d39b; box-shadow: 0 0 0 3px rgba(56,211,155,.2); }
.pdot.off { background: #6a6f7c; }
.pdot.mid { background: #f5c451; box-shadow: 0 0 0 3px rgba(245,196,81,.2); }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; padding: 16px clamp(12px, 1.6vw, 22px); }
.workspace { flex: 1; display: flex; min-width: 0; width: 100%; max-width: 1560px; margin-inline: auto; }
.tab { display: none; }
.tab.active { display: block; }   /* troca de aba SECA: sem crossfade/slide — só o mood (cor) muda */
/* coluna central: alarga e centraliza pra preencher o vão, alinhada com o título */
#tab-video.tab.active, #tab-image.tab.active, #tab-audio.tab.active, #tab-injection.tab.active, #tab-train.tab.active, #tab-assets.tab.active, #tab-control.tab.active, #tab-tools.tab.active, #tab-desc.tab.active, #tab-fala.tab.active, #tab-3d.tab.active { max-width: var(--content-max); margin-inline: 0; }
.model-select { width: 100%; font-weight: 700; }
/* Ferramentas (hub) */
.tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-items: start; }
/* Apps em COLUNAS por categoria (imagem, vídeo, áudio, 3d, ferramentas) */
.tools-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; align-items: start; }
.tool-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tool-col-head { font-family: var(--serif); font-weight: 800; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 2px 2px 4px; border-bottom: 1px solid var(--line); margin-bottom: 2px; }
.app-soon { padding: 40px 24px; text-align: center; color: var(--muted); font-size: 14px; }
/* cada app = CARD: imagem em cima + título embaixo */
.tool-launch { display: flex; flex-direction: column; align-items: stretch; gap: 0; text-align: center; padding: 0; border: 4px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,.065), rgba(255,255,255,.03)); cursor: pointer; transition: .16s; box-shadow: var(--shadow-soft); overflow: hidden; }
.tool-launch:hover { background: var(--card-2); transform: translateY(-2px); }
/* cada card segue o mood da aba a que o app pertenceria (dentro do app segue cinza) */
.tool-launch[data-mood="image"] { --am-ink: #9cc4ff; --am-b: rgba(47,143,255,.5);  --am-g: rgba(47,143,255,.3); }
.tool-launch[data-mood="video"] { --am-ink: #af9bff; --am-b: rgba(124,92,255,.5);  --am-g: rgba(124,92,255,.3); }
.tool-launch[data-mood="audio"] { --am-ink: #86e3a6; --am-b: rgba(53,196,106,.5);  --am-g: rgba(53,196,106,.3); }
.tool-launch[data-mood="3d"]    { --am-ink: #ffc48a; --am-b: rgba(255,138,43,.5);  --am-g: rgba(255,138,43,.3); }
.tool-launch[data-mood="apps"]  { --am-ink: #c1c7d3; --am-b: rgba(106,113,128,.5); --am-g: rgba(106,113,128,.3); }
.tool-launch { border-color: var(--am-b, var(--line)); }
.tool-launch .tl-name { color: var(--am-ink, var(--ink)); }
.tool-launch:hover { border-color: var(--am-ink, var(--line)); box-shadow: 0 8px 26px var(--am-g, transparent); }
/* card com a ALTURA da própria imagem (proporção natural do placeholder) */
.tl-card { position: relative; display: block; width: 100%; background: #0c0d12; overflow: hidden; line-height: 0; }
.tl-card > img:first-child { width: 100%; height: auto; display: block; }
.tl-card img.tl-fallback { height: 150px; object-fit: contain; padding: 24px; opacity: .85; }   /* fallback (ícone): altura fixa */
.tl-name { display: block; font-family: var(--serif); font-weight: 800; font-size: 15px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 10px 8px; text-align: center; }
.tl-sub { display: none; }
.tool-back { display: inline-block; border: 1px solid var(--line); background: var(--card); color: var(--accent-ink); border-radius: 9px; font-size: 12px; font-weight: 700; padding: 6px 11px; cursor: pointer; margin-bottom: 12px; font-family: var(--sans); }
.tool-back:hover { background: var(--card-2); }
.cmodel-btn, .upmode-btn { flex: 1; padding: 11px; border: none; border-radius: 12px; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 13px; background: transparent; color: var(--muted); transition: .18s; }
.cmodel-btn:hover, .upmode-btn:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.cmodel-btn.active, .upmode-btn.active { background: var(--card-2); color: var(--ink); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--accent-soft); }

/* ---------- Upscale: aba mais larga + slider antes/depois ---------- */
#tab-upscale.tab.active { max-width: 1120px; margin-inline: auto; }
.up-stage { margin-top: 22px; }
.cmp { position: relative; width: 100%; border-radius: var(--radius); overflow: hidden; background: #000; border: 1px solid var(--line); user-select: none; -webkit-user-select: none; touch-action: none; cursor: ew-resize; }
.cmp-after, .cmp-before { line-height: 0; }
.cmp-after img, .cmp-after video, .cmp-before img, .cmp-before video { display: block; width: 100%; height: auto; max-height: 74vh; object-fit: contain; background: #000; pointer-events: none; user-select: none; -webkit-user-drag: none; -webkit-user-select: none; }
.cmp-before { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.cmp-before img, .cmp-before video { max-width: none; } /* a largura é fixada em px pelo JS p/ alinhar */
.cmp-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); cursor: ew-resize; }
.cmp-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0,0,0,.55); border: 2px solid #fff; display: grid; place-items: center; }
.cmp-handle::before { content: '⟺'; color: #fff; font-size: 15px; }
/* barra de progresso do upscale (overlay no comparador) */
.up-progress { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(8,9,13,.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); pointer-events: none; }
.up-progress[hidden] { display: none; }
.up-progress-label { font-family: var(--sans); font-size: 13px; font-weight: 700; color: #fff; letter-spacing: .3px; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.up-progress-track { width: min(60%, 340px); height: 6px; border-radius: 999px; background: rgba(255,255,255,.18); overflow: hidden; }
.up-progress-fill { height: 100%; width: 0%; border-radius: 999px; background: var(--accent, #2f8fff); transition: width .3s ease; }
.up-progress.indet .up-progress-fill { width: 40%; animation: upIndet 1.1s ease-in-out infinite; }
@keyframes upIndet { 0% { margin-left: -42%; } 100% { margin-left: 100%; } }
/* Upscale como estúdio (sem galeria/fila): canvas grande + controles abaixo */
#tab-upscale.tab.active, #tab-ff.tab.active { max-width: 1320px; }
.up-studio { height: calc(100vh - var(--topbar-h) - 30px); }
#upPreview { grid-area: 1 / 1; position: relative; overflow: hidden; background: #0c0d12; }
#upPreview .cmp { position: absolute; inset: 0; width: 100%; height: 100%; border: none; border-radius: 0; background: transparent; overflow: hidden; }
#upPreview .cmp-after { position: absolute; inset: 0; }
#upPreview .cmp-before { position: absolute; top: 0; bottom: 0; left: 0; width: 50%; overflow: hidden; }
#upPreview .cmp-after img, #upPreview .cmp-after video { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; background: transparent; }
#upPreview .cmp-before img, #upPreview .cmp-before video { position: absolute; left: 0; top: 0; right: auto; bottom: auto; height: 100%; max-height: none; object-fit: contain; background: transparent; }
.up-controls { flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; justify-content: center; flex-wrap: wrap; max-width: 100%; }
.up-controls .up-gen { flex: 0 0 auto; margin: 0; padding: 8px 12px; }
.up-controls .up-params { flex: 0 1 auto; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 8px 14px; min-width: 0; max-width: 100%; }
.up-controls .up-params .field { min-width: 0; }
.up-gen .gen-bar-btn { flex: 0 0 auto; min-width: 110px; width: auto; height: 40px; }
.up-gen .cost-chip { flex: 0 0 auto; height: 40px; padding: 0 12px; }
.up-dl { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: none; border-radius: 10px; background: rgba(255,255,255,.06); color: var(--ink); cursor: pointer; }
.up-dl:hover:not(:disabled) { background: rgba(255,255,255,.12); }
.up-dl:disabled { opacity: .4; cursor: default; }
.up-dl .ic { width: 17px; height: 17px; }
/* aba upscale: esconde galeria/fila e o canvas usa a largura toda */
body.up-active .gallery, body.up-active .queue-panel { display: none; }
body.up-active #tab-upscale.tab.active, body.up-active #tab-segment.tab.active, body.up-active #tab-ff.tab.active { max-width: none; }
#tab-segment.tab.active { max-width: 1320px; }
/* Segmentar: canvas grande com brush + máscaras */
#segStage { grid-area: 1 / 1; position: relative; overflow: hidden; background: #0c0d12; display: grid; place-items: center start; }
.seg-wrap { position: relative; }
#segStage .seg-wrap img, #segStage .seg-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; }
#segBaseImg { object-fit: fill; user-select: none; -webkit-user-drag: none; }
#segPaint { cursor: none; touch-action: none; }
/* anel do pincel — diâmetro exato da pintura, segue o mouse (não intercepta cliques) */
.seg-cursor { position: absolute; z-index: 5; border-radius: 50%; pointer-events: none;
  transform: translate(-50%, -50%); border: 1.5px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.35);
  background: rgba(255,255,255,.06); mix-blend-mode: difference; }
#segResult { display: none; pointer-events: auto; background:
  repeating-conic-gradient(#1a1c22 0% 25%, #12141a 0% 50%) 0 / 22px 22px; }
/* gizmo de transform da layer selecionada (SVG sobre o canvas) — só as alças capturam o mouse */
.seg-gizmo { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; overflow: visible; touch-action: none; }
.seg-gizmo [data-h] { pointer-events: all; }
.seg-controls { align-items: stretch; }
.seg-tools { display: flex; flex-direction: row; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; }
.seg-tools .field { flex: 0 0 auto; }
.seg-btn { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 12.5px; }
.seg-btn:hover { background: rgba(255,255,255,.1); }
.seg-masks { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-mask { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; font-weight: 700; font-size: 12px; }
.seg-mask.on { border-color: var(--mc); box-shadow: inset 0 0 0 1px var(--mc); }
.seg-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--mc); }
/* Segmentar — modo layers: [toolbar] [canvas] [painel] em 3 colunas (nada sobre o canvas) */
#tab-segment .s-stage.has-layers { grid-template: minmax(0,1fr) / 48px minmax(0,1fr) 380px; gap: 10px; }
#tab-segment .s-stage.has-layers #segToolbar { grid-area: 1 / 1; }
#tab-segment .s-stage.has-layers #segStage { grid-area: 1 / 2; }
#tab-segment .s-stage.has-layers #segLayers { grid-area: 1 / 3; }
#tab-segment .s-stage.has-layers #segIo { display: none; }   /* com projeto carregado, sem o "+" */
/* modo resultado: xadrez atrás pra ver o alpha dos layers */
.seg-wrap.result { background-color: #c4c9d0; background-image:
  linear-gradient(45deg,#aeb4bd 25%,transparent 25%,transparent 75%,#aeb4bd 75%),
  linear-gradient(45deg,#aeb4bd 25%,transparent 25%,transparent 75%,#aeb4bd 75%);
  background-size: 22px 22px; background-position: 0 0, 11px 11px; }
/* toolbar de edição das layers (esquerda do canvas) */
.seg-toolbar { align-self: center; justify-self: center; display: flex; flex-direction: column; gap: 6px; padding: 6px; background: rgba(12,13,18,.86); border: 1px solid var(--line); border-radius: 12px; }
.seg-toolbar[hidden] { display: none; }
.seg-t { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--ink); border-radius: 9px; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; }
.seg-t:hover { border-color: var(--accent); }
.seg-t.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent); }
.seg-t img, .seg-t svg { width: 25px; height: 25px; object-fit: contain; filter: brightness(0) invert(1); pointer-events: none; }
/* opções da borracha: bloco no painel de layers (fora do canvas) */
.seg-t-fx { display: flex; flex-direction: column; gap: 11px; padding: 11px 13px; margin: 8px; border: 1px solid var(--line); border-radius: 11px; background: rgba(255,255,255,.04); }
.seg-t-fx[hidden] { display: none; }
/* label EM CIMA do slider -> slider ocupa a largura toda e chega até o fim */
.seg-t-fx .fxrow { display: flex; flex-direction: column; align-items: stretch; gap: 5px; min-width: 0; }
.seg-t-fx label { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
/* slider custom: trilho fino + thumb pequeno que encosta nas pontas em min/max */
.seg-t-fx input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; height: 16px; margin: 0; background: transparent; cursor: pointer; }
.seg-t-fx input[type=range]::-webkit-slider-runnable-track { height: 3px; border-radius: 999px; background: rgba(255,255,255,.20); }
.seg-t-fx input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.seg-t-fx input[type=range]::-moz-range-track { height: 3px; border-radius: 999px; background: rgba(255,255,255,.20); }
.seg-t-fx input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
.seg-lp-x { width: 26px; height: 26px; padding: 0; display: grid; place-items: center; border: none; border-radius: 999px; background: rgba(255,255,255,.10); color: var(--ink); font-size: 17px; line-height: 1; cursor: pointer; }
.seg-lp-x:hover { background: rgba(255,90,95,.30); color: #fff; }
/* card de opções (placeholders) — só no mini-photoshop, no lugar dos controles de máscara */
.seg-ph-card { flex-direction: row; align-items: center; justify-content: center; gap: 12px; }
.up-controls .seg-ph-card { display: none; }                 /* oculto no modo máscaras (vence .node) */
.s-stage.has-layers + .up-controls .seg-tools,
.s-stage.has-layers + .up-controls .gen-bar { display: none; }
.s-stage.has-layers + .up-controls .seg-ph-card { display: flex; }   /* aparece só no mini-photoshop */
.seg-ph { width: 40px; height: 40px; display: grid; place-items: center; border: 1px dashed var(--line-2); border-radius: 10px; background: rgba(255,255,255,.03); color: var(--muted); font-size: 18px; cursor: pointer; }
.seg-ph:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
/* progresso da edição da layer (gerar → recortar → aplicar) */
.seg-edit-prog { margin: 12px 0 4px; }
.seg-edit-prog[hidden] { display: none; }
.seg-edit-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.10); overflow: hidden; }
.seg-edit-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .3s ease; }
.seg-edit-stage { margin-top: 7px; font-size: 12px; color: var(--muted); font-weight: 600; }
/* cursor da borracha: anel sólido (diâmetro) + anel pontilhado (extensão do feather) */
/* editor de matte (aba Matte): borracha P&B com feather */
.matte-editor { margin-top: 12px; }
.matte-toolbar { display: inline-flex; gap: 6px; margin-bottom: 10px; }
.matte-fx { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.matte-fx .field { margin-bottom: 0; }
/* (.matte-stage é legado: não existe no markup atual. O canvas do Matte é o #maStage,
   dimensionado na regra de canvas fixo mais abaixo.) */
.matte-stage { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #0c0d12; }
.matte-stage canvas { display: block; max-width: 100%; height: auto; }
.matte-stage .seg-erase-cursor { border: 1.5px solid #fff; border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 1px rgba(0,0,0,.6); }
.seg-erase-cursor { position: absolute; z-index: 8; pointer-events: none; display: none; }
.seg-erase-cursor .core, .seg-erase-cursor .feather { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%); }
.seg-erase-cursor .core { border: 1.5px solid rgba(255,255,255,.95); box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.35); }
.seg-erase-cursor .feather { border: 1.5px dashed rgba(255,255,255,.7); }
.seg-layer.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.seg-layers-panel { display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.seg-layers-panel[hidden] { display: none; }
.seg-lp-head { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; border-bottom: 1px solid var(--line); }
.seg-lp-head strong { font-family: var(--serif); font-size: 14px; }
.seg-lp-save { border: none; background: var(--accent); color: #fff; font-weight: 700; font-size: 12px; padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.seg-lp-save:hover { filter: brightness(1.08); }
.seg-lp-save:disabled { opacity: .5; cursor: default; }
.seg-lp-psd { background: rgba(255,255,255,.10); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.seg-lp-list { flex: 1 1 auto; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.seg-lp-hint { padding: 8px 12px; font-size: 10.5px; color: var(--muted); border-top: 1px solid var(--line); }
.seg-layer { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); cursor: grab; }
.seg-layer.sel { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.seg-layer.dragging { opacity: .5; }
.seg-layer.hidden-layer { opacity: .5; }
.seg-layer-grip { color: var(--muted); font-size: 13px; cursor: grab; user-select: none; }
.seg-layer-thumb { width: 40px; height: 40px; border-radius: 7px; flex: 0 0 auto; background-color: #c4c9d0; background-image:
  linear-gradient(45deg,#aeb4bd 25%,transparent 25%,transparent 75%,#aeb4bd 75%),
  linear-gradient(45deg,#aeb4bd 25%,transparent 25%,transparent 75%,#aeb4bd 75%);
  background-size: 10px 10px; background-position: 0 0, 5px 5px; overflow: hidden; }
.seg-layer-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.seg-layer-name { flex: 1 1 auto; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: transparent; border: none; color: var(--ink); min-width: 0; }
.seg-layer-eye { flex: 0 0 auto; width: 26px; height: 26px; display: grid; place-items: center; border: none; background: transparent; color: var(--ink); cursor: pointer; border-radius: 6px; font-size: 15px; }
.seg-layer-eye:hover { background: rgba(255,255,255,.08); }
.seg-layer-eye img { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); pointer-events: none; }
.seg-layer-eye.off img { opacity: .3; }
.seg-layer { gap: 3px; }
.seg-layer-grip { margin-right: 1px; }
.seg-layer-solo, .seg-layer-trash, .seg-layer-lock { flex: 0 0 auto; width: 24px; height: 26px; display: grid; place-items: center; border: none; background: transparent; cursor: pointer; border-radius: 6px; padding: 0; }
.seg-layer-solo { font-size: 13px; font-weight: 800; color: var(--muted); border: 1px solid transparent; }
.seg-layer-solo:hover, .seg-layer-lock:hover { background: rgba(255,255,255,.08); }
.seg-layer-solo.on { color: #ffcc3d; border-color: rgba(255,204,61,.6); background: rgba(255,204,61,.14); }
.seg-layer-lock { font-size: 14px; opacity: .55; }
.seg-layer-lock.on { opacity: 1; }
/* ícones (png branco) dos botões do painel de layers */
.seg-layer-lock img { width: 19px; height: 19px; object-fit: contain; filter: brightness(0) invert(1); pointer-events: none; }
.seg-layer-op img, .seg-layer-blendbtn img { width: 24px; height: 24px; object-fit: contain; filter: brightness(0) invert(1); pointer-events: none; }
.seg-layer-trash { font-size: 21px; line-height: 1; opacity: .55; color: var(--ink); }
.seg-layer-trash:hover { opacity: 1; color: #ff6b78; background: rgba(255,80,80,.16); }
.seg-layer-eye { width: 26px; height: 26px; }
.seg-layer-op, .seg-layer-blendbtn { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: none; background: transparent; cursor: pointer; border-radius: 6px; padding: 0; font-size: 17px; color: var(--muted); }
.seg-layer-op:hover, .seg-layer-blendbtn:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.seg-layer-blendbtn.on { color: var(--accent-ink); background: var(--accent-soft); }
/* popovers de opacidade / blend do painel de layers */
.seg-pop { position: fixed; z-index: 60; background: rgba(16,18,24,.97); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 16px 44px rgba(0,0,0,.66); padding: 8px; width: 180px;
  backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); }
.seg-blend-pop { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.seg-pop-item { text-align: left; font-size: 11px; padding: 5px 7px; border: none; border-radius: 6px; background: transparent; color: var(--ink); cursor: pointer; }
.seg-pop-item:hover { background: rgba(255,255,255,.08); }
.seg-pop-item.on { background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.seg-op-pop .seg-pop-lab { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.seg-op-pop .seg-pop-lab b { color: var(--ink); }
.seg-op-pop input[type=range] { width: 100%; }
/* LLM — chat Gemini */
#tab-llm.tab.active { max-width: 900px; margin-inline: auto; }
.llm-chat { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 96px); }
.llm-thread { flex: 1 1 auto; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding: 6px 2px 14px; }
.llm-empty { margin: auto; color: var(--muted); font-size: 13.5px; text-align: center; max-width: 320px; }
.llm-msg { display: flex; }
.llm-msg.user { justify-content: flex-end; }
.llm-bubble { max-width: 80%; padding: 11px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; border: 1px solid var(--line); }
.llm-msg.user .llm-bubble { background: var(--accent); color: #fff; border-color: transparent; border-bottom-right-radius: 6px; }
.llm-msg.assistant .llm-bubble { background: rgba(255,255,255,.05); color: var(--ink); border-bottom-left-radius: 6px; }
.llm-txt code { background: rgba(0,0,0,.28); padding: 1px 5px; border-radius: 5px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.llm-txt pre { background: rgba(0,0,0,.35); padding: 10px 12px; border-radius: 10px; overflow-x: auto; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; margin: 6px 0; }
.llm-msg-img { display: block; max-width: 220px; max-height: 220px; border-radius: 10px; margin-bottom: 6px; }
.llm-dots { display: inline-flex; gap: 4px; }
.llm-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); animation: llmb 1s infinite; }
.llm-dots i:nth-child(2) { animation-delay: .15s; } .llm-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes llmb { 0%,60%,100% { opacity: .3; } 30% { opacity: 1; } }
.llm-composer { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.04); padding: 8px 8px 6px; }
.llm-atts { display: flex; gap: 8px; flex-wrap: wrap; }
.llm-atts:not(:empty) { padding: 4px 4px 8px; }
.llm-att { position: relative; }
.llm-att img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; }
.llm-att button { position: absolute; top: -6px; right: -6px; width: 18px; height: 18px; border-radius: 50%; border: none; background: #000; color: #fff; cursor: pointer; font-size: 11px; line-height: 1; }
.llm-inputrow { display: flex; align-items: flex-end; gap: 8px; }
.llm-attach { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; color: var(--muted); flex: 0 0 auto; }
.llm-attach:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.llm-attach .ic { width: 19px; height: 19px; }
.llm-inputrow textarea { flex: 1 1 auto; resize: none; border: none; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; padding: 9px 4px; max-height: 200px; }
.llm-inputrow textarea:focus { outline: none; }
.llm-send { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; border: none; background: var(--accent); color: #fff; cursor: pointer; flex: 0 0 auto; box-shadow: 0 6px 16px var(--accent-glow); }
.llm-send:hover { filter: brightness(1.08); }
.llm-send .ic { width: 18px; height: 18px; }
.llm-bar { display: flex; align-items: center; gap: 12px; padding: 8px 4px 2px; }
.llm-bar .hint { margin: 0; }
.detect-body { font-size: 14px; line-height: 1.6; color: var(--ink); white-space: pre-wrap; min-height: 60px; }
#dtResult { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; line-height: 1.5; }
/* sub-abas dentro da aba Áudio (Gerar/Sonorizar/Fala/Transcrição) */
.audio-subtabs { display: flex; gap: 4px; margin: 0 auto 16px; padding: 4px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: 12px; width: fit-content; }
/* waveform de áudio (clique = play/pause · arraste = scrub) */
.wave { position: relative; width: 100%; height: 100%; min-height: 46px; cursor: pointer; touch-action: none; user-select: none; }
.wave-cv { display: block; width: 100%; height: 100%; }
.wave-ph { position: absolute; top: 4%; bottom: 4%; left: 0; width: 2px; background: #35c46a; box-shadow: 0 0 6px rgba(53,196,106,.6); border-radius: 2px; pointer-events: none; }
/* Agente diabinho (modo USER) */
.agent-fab { position: fixed; right: 20px; bottom: 20px; z-index: 2147483001; width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; font-size: 30px; line-height: 1; display: none; place-items: center; background: rgba(20,22,30,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 10px 28px rgba(0,0,0,.45); transition: transform .16s, box-shadow .16s; }
body.agent-user .agent-fab { display: grid; }
.agent-fab:hover { transform: scale(1.08) rotate(-6deg); }
.agent-fab.on { background: #f2c31d; box-shadow: 0 0 0 3px rgba(242,195,29,.4), 0 10px 28px rgba(0,0,0,.45); }
.agent-overlay { position: fixed; inset: 0; z-index: 2147482990; background: rgba(4,5,9,.66); pointer-events: none; opacity: 0; transition: opacity .18s; }
.agent-overlay.has-hole { opacity: 1; }
.agent-ring { position: fixed; z-index: 2147482995; border: 2px solid #f2c31d; border-radius: 12px; box-shadow: 0 0 18px rgba(242,195,29,.55); pointer-events: none; opacity: 0; transition: opacity .12s; }
.agent-ring.show { opacity: 1; }
.agent-bubble { position: fixed; z-index: 2147483000; max-width: 260px; padding: 10px 13px; border-radius: 14px; background: #f2c31d; color: #241c00; font-family: var(--sans); font-weight: 800; font-size: 13px; line-height: 1.4; box-shadow: 0 12px 30px rgba(0,0,0,.5); opacity: 0; transform: translateY(-100%); pointer-events: none; transition: opacity .14s; }
.agent-bubble.below { transform: translateY(0); }
.agent-bubble.show { opacity: 1; }
.preview-audio .wave { height: 56px; min-height: 0; width: min(92%, 760px); }
.lb-audio .wave { min-height: 120px; width: min(80vw, 760px); }
.asub { border: none; background: transparent; color: var(--muted); font-family: var(--sans); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 9px; cursor: pointer; }
.asub:hover { color: var(--ink); }
.asub.on { background: var(--accent); color: #fff; }
/* SFX: 3 faixas com blocos redimensionáveis */
.son-lanes { position: relative; margin: 8px 0 14px; }
.son-lane { position: relative; display: flex; align-items: center; gap: 8px; height: 34px; margin-bottom: 6px; }
.son-lane-lbl { flex: 0 0 42px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; color: var(--muted); text-align: right; }
.son-block.sel { outline: 2px solid #fff; outline-offset: -1px; box-shadow: 0 0 0 2px rgba(255,255,255,.25); z-index: 2; }
/* Auto (Gemini) por stem — só o ícone */
.son-lane-auto { flex: 0 0 22px; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,255,255,.04); cursor: pointer; }
.son-lane-auto:hover { border-color: var(--accent); background: var(--accent-soft); }
.son-lane-auto img { width: 15px; height: 15px; object-fit: contain; }
.son-lane-auto.analyzing { border-color: #35c46a; animation: analyzePulse 1s ease-in-out infinite; }
.son-lane-track { position: relative; flex: 1 1 auto; height: 100%; background: rgba(255,255,255,.05); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: crosshair; touch-action: none; }
.son-block { position: absolute; top: 3px; bottom: 3px; border: 1px solid; border-radius: 6px; display: flex; align-items: center; overflow: hidden; cursor: grab; min-width: 6px; }
.son-block:active { cursor: grabbing; }
.son-block-txt { font-size: 10.5px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 9px; pointer-events: none; }
.son-block-h { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; }
.son-block-h.l { left: 0; } .son-block-h.r { right: 0; }
.son-lane-play { position: absolute; top: 0; bottom: 6px; left: 0; width: 2px; background: #fff; box-shadow: 0 0 5px rgba(255,255,255,.5); pointer-events: none; }
/* botão analisando (Gemini) — oscila em verde */
.analyzing { animation: analyzePulse 1s ease-in-out infinite; color: #35c46a !important; border-color: rgba(53,196,106,.6) !important; }
@keyframes analyzePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(53,196,106,.0); background: rgba(53,196,106,.10); } 50% { box-shadow: 0 0 14px 2px rgba(53,196,106,.45); background: rgba(53,196,106,.24); } }
/* barra de processo do preprocess (ffmpeg) — indeterminada */
.son-prog { height: 6px; border-radius: 6px; background: rgba(255,255,255,.08); overflow: hidden; margin: 0 0 14px; position: relative; }
.son-prog-fill { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 6px; background: var(--accent); animation: sonprog 1.1s ease-in-out infinite; }
@keyframes sonprog { 0% { left: -42%; } 100% { left: 100%; } }
/* aba Áudio: MESMA altura das outras (sem sub-abas agora — Lyria virou modelo no seletor) */
#tab-audio .studio { height: calc(100vh - var(--topbar-h) - 30px); }
.cmp-labels { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12.5px; color: var(--muted); font-weight: 600; }

/* ---------- Assets (storage fal) ---------- */
/* ==== Galeria fal.ai (aba Assets) ==== */
#tab-assets.tab.active { max-width: min(1200px, 100%); } /* galeria em grid pede mais largura */
.as-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.as-search { flex: 1 1 220px; min-width: 180px; height: 40px; }
#asType.dim-chips { flex: 0 0 auto; }
.as-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.as-grid > .hint { grid-column: 1 / -1; }
.as-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.03); transition: .15s; }
.as-card:hover { border-color: var(--line-2); box-shadow: var(--shadow-soft); }
.as-media { aspect-ratio: 1; background: #000; overflow: hidden; display: block; cursor: pointer; }
.as-media img, .as-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.as-audio { width: 100%; height: 100%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent-soft), rgba(255,255,255,.04)); color: var(--accent-ink); }
.as-audio .ic { width: 40px; height: 40px; }
.as-info { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; }
.as-desc { font-size: 12px; color: var(--ink); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.as-sub { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.as-acts { display: flex; gap: 6px; margin-top: 6px; }
.as-open, .as-dl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 9px; padding: 7px 8px; font-size: 11.5px; font-weight: 600; text-decoration: none; cursor: pointer; }
.as-open:hover, .as-dl:hover { background: var(--card-2); }
/* NÃO animar opacity: no Safari, opacity<1 no ancestral zera o backdrop-filter dos campos
   glassy durante a troca de aba (eles piscam brancos). Só um slide sutil (transform). */
@keyframes fade { from { transform: translateY(8px); } to { transform: none; } }

.tab-head { display: none; } /* título/subtítulo redundantes: a aba selecionada já indica */
.tab-head h1 { font-family: var(--serif); font-size: 56px; font-weight: 800; letter-spacing: -2px; line-height: .98; }
.tab-head p { color: var(--muted); margin-top: 12px; font-size: 15px; font-weight: 500; }

.form-wrap { max-width: 100%; }

/* ---------- Fluxo de nodes (left-to-right) ---------- */
/* as 4 abas principais compartilham a MESMA largura (o layout não muda ao trocar de aba) */
#tab-image.tab.active, #tab-video.tab.active, #tab-audio.tab.active, #tab-3d.tab.active, #tab-control.tab.active, #tab-train.tab.active { max-width: min(1280px, 100%); }
.node-flow { display: flex; flex-direction: row; align-items: stretch; gap: 0; overflow-x: auto; padding: 6px 2px 18px; }
/* grade de nodes p/ as demais abas: sempre alinhada à esquerda, prioriza 3 por linha */
.node-grid { display: grid; grid-template-columns: repeat(3, minmax(260px, 340px)); justify-content: start; gap: 14px; padding: 6px 2px 18px; align-items: start; }
.node-grid .node { flex: none; min-width: 0; }
.node-grid .node.span-2 { grid-column: span 2; }
.node-grid .node.span-3 { grid-column: 1 / -1; }
@media (max-width: 1080px) { .node-grid { grid-template-columns: repeat(2, minmax(240px, 340px)); } .node-grid .node.span-2, .node-grid .node.span-3 { grid-column: 1 / -1; } }
@media (max-width: 720px) { .node-grid { grid-template-columns: minmax(0, 1fr); } }
.node { flex: 0 0 280px; min-width: 264px; display: flex; flex-direction: column; align-self: stretch; position: relative;
  background: #262933; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-soft); }
.node-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.4px; font-weight: 800; color: var(--accent-ink); margin-bottom: 14px; padding-bottom: 9px; border-bottom: 1px solid var(--line-2); }
.node-out { background: var(--panel-hi); }
.node-arrow { flex: 0 0 30px; align-self: center; position: relative; height: 2px; background: var(--line); }
.node-arrow::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); border-left: 8px solid var(--accent); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.node::before, .node::after { display: none; } /* pontos conectores do node-flow antigo: desligados */
/* dentro dos nodes, a lista de modelos fica em UMA coluna (botões empilhados) */
.node .model-toggle { flex-direction: column; }
.node .model-btn { flex: none; width: 100%; text-align: left; }
@media (max-width: 1000px) {
  .node-flow { flex-direction: column; }
  .node { flex: none; min-width: 0; }
  .node-arrow { width: 2px; height: 26px; align-self: center; }
  .node-arrow::after { right: 50%; top: auto; bottom: 0; transform: translateX(50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--accent); border-bottom: none; }
}
.panel {
  position: relative;
  background: #24262f; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 34px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}
/* fio de luz sutil no topo do painel (acompanha o mood da aba) */
.panel::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent-soft) 30%, var(--accent-soft) 70%, transparent);
  opacity: .9; pointer-events: none;
}

.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; min-width: 0; }
.node { overflow: hidden; } /* impede que campos vazem pra fora do card */
.node > :last-child { margin-bottom: 0; } /* padding inferior = superior (sem borda extra) */
.field > span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* TODOS os inputs seguem o mesmo material: vidro fosco (glass) semi-transparente.
   A cor (borda/foco) vem do accent do tema, então respeita o color-coding de cada mídia
   (imagem=azul · vídeo=roxo · áudio=verde · 3D=laranja · apps=aqua · doc=teal). */
/* CAMPOS DE ESCRITA (input de texto/número/url + textarea) = NEUTRO (sem mood) */
input, select, textarea {
  background: #23252c; background: var(--field); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--radius-sm); padding: 13px 15px; font-size: 14.5px; font-family: var(--sans); font-weight: 500; outline: none;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover, select:hover, textarea:hover { border-color: var(--accent-soft); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); background-color: var(--field-hi); box-shadow: 0 0 0 4px var(--accent-soft); }
/* selects = CHIPS → seguem o mood da aba (não são campos de escrita) */
select { background-color: #1e2028; background-color: var(--panel-2); }
select:focus { background-color: var(--panel-hi); }
/* selects flat: remove o estilo nativo do SO e usa uma setinha custom */
select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23969cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
  padding-right: 34px; cursor: pointer;
}
select option { background: #262933; color: var(--ink); }
input[type=number] { -moz-appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
textarea { resize: vertical; line-height: 1.5; }
input[type=file] { font-size: 12.5px; color: var(--muted); }
input[type=file]::file-selector-button { background: var(--card-2); border: 1px solid var(--line); color: var(--ink); border-radius: 9px; padding: 6px 10px; margin-right: 10px; cursor: pointer; font-family: var(--sans); }

.checkrow { display: flex; align-items: center; gap: 9px; padding: 11px 0; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.checkrow input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.cost-line { color: var(--muted); font-size: 13px; margin: 6px 0 16px; }
/* ===== Layout "studio" (abas Imagem/Vídeo): modelos | preview/params · in+prompt · gerar ===== */
/* studio: [inputs | preview] no topo · modelo | parâmetros · prompt largo · gerar */
/* studio: palco (preview+refs) cresce; params + prompt + gerar FIXOS no rodapé da tela */
.studio { display: flex; flex-direction: column; gap: 8px; height: calc(100vh - var(--topbar-h) - 30px); }
.s-stage { flex: 1 1 auto; display: grid; grid-template: minmax(0,1fr) / minmax(0,1fr); min-height: 100px; border-radius: 16px; overflow: hidden; background: #0c0d12; }
.s-params, .s-prompt, .s-gerar { flex: 0 0 auto; }
/* modelo virou o 1º item da barra de parâmetros */
.s-params .model-select { flex: 0 0 auto; width: auto; min-width: 128px; max-width: none; }
/* ícone da marca do modelo, à esquerda do seletor */
.model-ic { flex: 0 0 auto; width: 43px; height: 43px; object-fit: contain; align-self: center; opacity: .95; cursor: pointer; pointer-events: auto; }
.model-ic:hover { opacity: 1; }
/* sliders na linha de parâmetros: largura contida */
.s-params .field input[type=range] { width: 108px; min-width: 108px; padding: 0; align-self: center; }
/* áudio agora idêntico a imagem/vídeo: palco grande (waveform) no topo + params/prompt/gerar fixos no rodapé */
.audio-studio { height: calc(100vh - var(--topbar-h) - 30px); }
/* Seed Audio tem muitos params: deixa quebrar linha em telas estreitas (13") em vez de esconder */
/* alinha pelo TOPO p/ que os títulos (VOZ/FORMATO/…) fiquem todos na mesma linha */
.audio-studio .s-params { flex-wrap: wrap; overflow-x: visible; row-gap: 12px; align-items: center; }
.audio-studio .s-params > .model-select { align-self: center; }   /* o pill do modelo continua centrado */
.audio-studio .s-stage { flex: 1 1 auto; min-height: 160px; }
.audio-studio .s-stage[hidden] { display: none; }
/* referências de áudio ao lado do prompt */
.a-refs { display: flex; flex-direction: column; gap: 8px; }
.a-refs .field { margin: 0; }
/* refs na MESMA linha do seletor de modelo (Áudio/Fala) — igual imagem/vídeo */
.s-params .a-refs { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
.lora-btn { align-self: flex-end; height: 40px; padding: 0 16px; border-radius: 12px; border: 1px solid rgba(108,128,238,.35); background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: 13px; cursor: pointer; }
.lora-btn:hover { background: var(--accent); color: #fff; }
/* modal (lightbox de config) */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 90; background: rgba(6,7,11,.72); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; }
.modal-card { width: min(520px, 96vw); max-height: 82vh; overflow: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; padding: 18px; box-shadow: var(--shadow-soft); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-head strong { font-family: var(--serif); font-size: 18px; font-weight: 800; }
.modal-x { border: none; background: transparent; color: var(--muted); font-size: 18px; cursor: pointer; line-height: 1; }
.modal-x:hover { color: var(--ink); }
.modal-card .loras { margin: 0; }
.studio .node { padding: 12px 14px; }
/* card desabilitado (ex.: prompt do 3D nos modelos sem texto): visível, esmaecido, sem interação */
/* prompt não aplicável: janela NORMAL (sem esmaecer) — só não dá pra escrever/clicar/ver o cursor */
.studio .node.node-off { pointer-events: none; }
.studio .node.node-off textarea, .studio .node.node-off textarea:disabled {
  opacity: 1; color: var(--faint); -webkit-text-fill-color: var(--faint); caret-color: transparent; cursor: default;   /* mesma cor de placeholder dos outros */
}
.studio .node.node-off textarea::placeholder { color: var(--faint); -webkit-text-fill-color: var(--faint); }
.studio .node-title { margin-bottom: 9px; padding-bottom: 7px; }
.studio .field { margin-bottom: 8px; gap: 5px; }
.studio .field > span { font-size: 12px; }
/* preview preenche o palco (só a mídia é cortada por object-fit; o layout não) */
.s-preview { grid-area: 1 / 1; position: relative; padding: 0 !important; overflow: hidden; display: grid; place-items: center; background: #0c0d12; }
.s-preview img, .s-preview video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; background: #000; cursor: zoom-in; }
.s-preview .preview-empty { display: none; }   /* canvas vazio é vazio mesmo (sem lettering) */
.s-preview .preview-audio { width: min(80%, 480px); display: grid; place-items: center; }
.s-preview .preview-audio audio { width: 100%; }
/* canvas de áudio (aba Áudio): waveform grande, como a mídia grande dos outros módulos */
#aPreview .preview-audio { width: min(92%, 900px); }
#aPreview .preview-audio .wave { height: 160px; }
/* refs: tiles-ícone glassy sobrepostos no canto do palco */
.s-io { grid-area: 1 / 1; align-self: start; justify-self: start; margin: 12px; z-index: 6; display: flex; flex-wrap: wrap; gap: 8px; max-width: calc(100% - 24px); }
/* x de limpar o visualizador central (canto sup. direito do palco) */
.preview-clear { grid-area: 1 / 1; align-self: start; justify-self: end; margin: 12px; z-index: 7;
  width: 30px; height: 30px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.22); border-radius: 9px; color: #fff;
  background: rgba(0,0,0,.42); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.preview-clear:hover { background: rgba(0,0,0,.62); border-color: rgba(255,255,255,.4); }
.preview-clear .ic { width: 15px; height: 15px; }
/* barra de ferramentas no canto inferior direito do canvas (upscale, fundo, pre, passes, controle) */
/* barra de ferramentas no canto inferior direito do canvas */
/* barra de ferramentas do canvas: card vertical no canto direito */
.canvas-tools { grid-area: 1 / 1; align-self: center; justify-self: end; margin: 12px; z-index: 7;
  display: flex; flex-direction: column; gap: 4px; padding: 6px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  background: rgba(0,0,0,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.canvas-tool { width: 34px; height: 34px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid transparent; border-radius: 9px; color: #fff; background: transparent; }
.canvas-tool:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
/* overlays do canvas (refs, tools, fundo, x) aparecem SÓ no hover do canvas */
.s-stage > .s-io, .s-stage > .preview-clear, .s-stage > .canvas-tools, .s-stage > .canvas-bg {
  opacity: 0; transition: opacity .16s ease; pointer-events: none; }
.s-stage:hover > .s-io, .s-stage:hover > .preview-clear, .s-stage:hover > .canvas-tools, .s-stage:hover > .canvas-bg,
.s-stage:focus-within > .s-io, .s-stage:focus-within > .preview-clear, .s-stage:focus-within > .canvas-tools, .s-stage:focus-within > .canvas-bg {
  opacity: 1; pointer-events: auto; }
.canvas-tool .ic { width: 17px; height: 17px; }
/* PNGs das ferramentas de edição: força branco (independe da cor original) */
.canvas-tool .ct-ic { width: 20px; height: 20px; object-fit: contain; filter: brightness(0) invert(1); }
.canvas-tool .ct-emoji { filter: none; font-size: 16px; line-height: 1; }
.bg-menu { position: fixed; z-index: 80; min-width: 168px; padding: 6px;
  background: rgba(12,13,18,.72); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.55); display: flex; flex-direction: column; gap: 2px; }
.bg-menu-hd { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 4px 10px 6px; }
.bg-menu button { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 9px 12px; border: none; background: transparent; color: var(--ink); font-family: var(--sans); font-size: 13.5px; font-weight: 700; border-radius: 9px; cursor: pointer; }
.bg-menu button span { color: var(--muted); font-size: 11.5px; font-weight: 700; }
.bg-menu button:hover { background: var(--accent-soft); color: var(--accent-ink); }
/* REGRA: o ref-tile segue SEMPRE a cor do seu TIPO (imagem/vídeo/áudio/3D), nunca o mood da aba.
   Variáveis --rt* são o color-code do tile; o default cai no accent da aba só p/ tiles sem tipo. */
.ref-tile { --rt: var(--accent); --rt-ink: var(--accent-ink); --rt-soft: var(--accent-soft); --rt-glow: var(--accent-glow);
  position: relative; width: 60px; height: 60px; border-radius: 12px; border: 1px solid var(--rt-glow);
  background: rgba(8,10,15,.42); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
  background-size: cover; background-position: center; display: grid; place-items: center; cursor: pointer; overflow: visible; transition: border-color .16s, box-shadow .16s; }
.ref-tile:hover { box-shadow: 0 0 0 4px var(--rt-soft); }
.ref-tile > span:not(.ref-plus) { display: none; }
/* o "+" é um BOTÃO delimitado (abre o browser do sistema); o resto do tile = clicar seleciona */
.ref-tile .ref-plus { font-size: 21px; font-weight: 300; color: var(--rt-ink); line-height: 1; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--rt-glow); background: rgba(255,255,255,.05); }
.ref-tile .ref-plus:hover { background: var(--rt-soft); }
/* invisível mas RENDERIZADO — Safari só abre o seletor de inputs não-display:none.
   pointer-events:none faz o clique no corpo do tile passar reto pro handler de seleção. */
.ref-tile input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0; }
.ref-tile input[type=url] { display: none; }
/* input SELECIONADO: outline/glow na cor do TIPO (via --rt), nunca o accent da aba */
.ref-tile.input-sel { outline: 2px solid var(--rt); outline-offset: 2px; box-shadow: 0 0 0 5px var(--rt-soft); }
/* LTX unificado: tile desabilitado (imagem × áudio mutuamente exclusivos) */
.ref-tile.ref-dim { opacity: .32; filter: grayscale(1); pointer-events: none; }
/* color-code por TIPO — define as variáveis que a borda, o "+", o hover e a seleção usam.
   imagem=azul · vídeo=roxo · áudio=verde · 3D=laranja. Autossuficiente: não herda da aba. */
.ref-tile.ref-t-image { --rt: #2f8fff; --rt-ink: rgba(140,190,255,.95); --rt-soft: rgba(47,143,255,.20); --rt-glow: rgba(47,143,255,.5); }
.ref-tile.ref-t-video { --rt: #7c5cff; --rt-ink: rgba(175,155,255,.95); --rt-soft: rgba(124,92,255,.20); --rt-glow: rgba(124,92,255,.5); }
.ref-tile.ref-t-audio { --rt: #35c46a; --rt-ink: rgba(130,225,160,.95); --rt-soft: rgba(53,196,106,.20); --rt-glow: rgba(53,196,106,.5); }
.ref-tile.ref-t-3d    { --rt: #ff8a2b; --rt-ink: rgba(255,185,120,.96); --rt-soft: rgba(255,138,43,.20); --rt-glow: rgba(255,150,60,.55); }
/* treino: grade de imagens em tiles "+" (auto-fill, ~5 linhas) */
.tr-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); gap: 8px; margin: 0; align-content: start; }
/* aba LoRA: chips no MESMO tamanho das outras abas — títulos em 1 linha (nowrap + reticências),
   só o WRAP dos chips continua (são muitos), sem espremer a altura do controle. */
.tr-modelrow { align-items: center; flex-wrap: wrap; row-gap: 10px; }
.tr-modelrow .field { height: var(--s-row-h, 52px); min-height: var(--s-row-h, 52px); max-height: var(--s-row-h, 52px); }
.tr-modelrow .field > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* chips no MESMO padrão das outras abas: sem overrides de largura — herdam as regras de .s-params
   (model-select min 128px · dim-sel/campos width:auto), então ficam idênticos às demais abas. */
/* barra de progresso do upload do dataset .zip */
.tr-zip-prog { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; }
.tr-zip-prog[hidden], .tr-pairs-note[hidden] { display: none !important; }   /* display:flex anulava o [hidden] → barra vazia aparecia depois do modelo */
.tzp-track { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.tzp-fill { height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width .2s ease; }
.tzp-fill.indet { width: 35% !important; animation: tzpIndet 1.1s ease-in-out infinite; }
@keyframes tzpIndet { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.tzp-txt { font-size: 12px; color: var(--muted); white-space: nowrap; font-weight: 600; }
.tr-zip-prog.done .tzp-fill { background: #35c46a; }
.tr-zip-prog.done .tzp-txt { color: #86e3a6; }
.tr-zip-prog.err .tzp-fill { background: #ff6b6b; width: 100%; }
.tr-zip-prog.err .tzp-txt { color: #ff9aa0; }
.tr-pairs-note { margin: 2px 0 0; line-height: 1.5; }
.tr-pairs-note code { background: rgba(255,255,255,.08); border-radius: 5px; padding: 1px 5px; font-size: 12px; }
/* canvas do treino = .s-preview mostrando as imagens do dataset (rola, não centraliza/corta) */
#trCanvas { display: block; place-items: stretch; overflow: auto; padding: 12px; }
#trCanvas .tr-tiles { width: 100%; }
#trCanvas:not(.has-items) .preview-empty { display: grid; place-items: center; position: absolute; inset: 0; color: var(--muted); font-size: 13px; }
#trCanvas.has-items .preview-empty { display: none; }
/* ref de .zip: color code CINZA (arquivos zipados) */
.ref-tile.ref-t-zip { --rt: #8a90a0; --rt-ink: rgba(205,210,220,.95); --rt-soft: rgba(138,144,160,.20); --rt-glow: rgba(138,144,160,.5); }
.ref-tile.ref-t-zip.has-file::after { content: 'ZIP'; font-size: 13px; font-weight: 800; letter-spacing: .5px; color: var(--rt-ink); }
.tr-tiles .ref-tile { width: auto; height: auto; aspect-ratio: 1; }
/* tile que aceita MAIS de um tipo: ponto no canto com a cor do 2º tipo */
/* ponto de tile multi-tipo removido — a cor do "+" e a borda de seleção já indicam o tipo */
.ref-tile.ref-t-3d { border-color: rgba(255,150,60,.55); }
.ref-tile.ref-t-3d .ref-plus { color: rgba(255,185,120,.96); }
/* Sonorizar/Transcrição: tiles "+" com fundo preto sólido (os demais seguem glassy) */
#audioSonorize .ref-tile, #audioTranscribe .ref-tile, #trTiles .tr-add { background: #000; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* LipSync (Heygen) agora usa o layout PADRÃO do studio (igual às outras abas):
   os grupos de params viram display:contents e fluem inline na linha, quebrando se faltar espaço */
#audioFala .s-params { flex-wrap: wrap; white-space: normal; }
#audioFala .s-params #faAvatarParams, #audioFala .s-params #faLipParams, #audioFala .s-params #faSyncParams { display: contents; }
/* ref selecionada (mostrada sozinha no canvas) */
.ref-tile.ref-sel { outline: 2px solid var(--rt); outline-offset: 1px; box-shadow: 0 0 0 4px var(--rt-soft); }
/* imagem preenchida = INTEIRA (contain), igual ao canvas — nunca cortada no drop/carregamento */
.ref-tile.has-img { border-color: var(--rt); background-color: rgba(0,0,0,.35); background-size: contain; background-repeat: no-repeat; background-position: center; }
.ref-tile.has-img .ref-plus { display: none; }
.ref-tile.has-file { border-color: var(--rt); background: rgba(0,0,0,.4); }
.ref-tile.has-file .ref-plus { display: none; }
.ref-tile.has-file::after { content: '✓'; font-size: 24px; font-weight: 800; color: var(--rt-ink); }
.ref-group { display: flex; flex-wrap: wrap; gap: 8px; }
/* Omni: refs de imagem (azul) e vídeo (roxo) lado a lado numa faixa única (igual ao Ray).
   display:contents faz os tiles dos dois grupos virarem itens diretos do flex-wrap,
   fluindo lado a lado (imagens, depois vídeos) e quebrando só quando faltar espaço. */
#vKlifImages > #vImageList, #vKlifImages > #vVideoList { display: contents; }
.vimg-tag { position: absolute; top: 3px; left: 6px; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.7); z-index: 2; pointer-events: none; }
.vimg-del { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border: none; background: rgba(0,0,0,.6); color: #fff; border-radius: 6px; cursor: pointer; display: none; place-items: center; padding: 0; z-index: 3; }
.ref-tile.has-img .vimg-del, .ref-tile.has-file .vimg-del, .ref-tile.has-vid .vimg-del, .ref-tile.has-audio .vimg-del { display: grid; }
.ref-tile:not(.has-img):not(.has-file):not(.has-vid):not(.has-audio) .vimg-del { display: none !important; }  /* vazio: só o + */
.vimg-del .ic { width: 12px; height: 12px; }
/* legenda embaixo do tile (frame inicial/final: in / out) */
.ref-cap-wrap { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.ref-cap { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); line-height: 1; }
/* painel de inputs (vídeo/fala): campos flutuantes glassy no canto do palco */
.s-io-panel { flex-direction: column; max-width: 264px; max-height: calc(100% - 24px); overflow: auto;
  padding: 10px; border-radius: 12px; background: rgba(18,22,38,.62); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.14); }
.s-io-panel .field { margin: 0 0 8px; }
.s-io-panel .field:last-child { margin-bottom: 0; }
.s-io-panel .loras { margin: 0 0 8px; background: transparent; border: none; padding: 0; }
.s-prompt { display: flex; flex-direction: row; gap: 12px; align-items: stretch; flex-wrap: nowrap; }
.s-prompt .field { margin-bottom: 0; min-width: 0; display: flex; flex-direction: column; flex: 1 1 auto; }   /* campo único ocupa TODO o card */
.s-prompt .field:not(.pw-neg) > span { display: none; }   /* janelas de prompt não têm título */
/* o título do negative NÃO empurra a altura da linha: vira rótulo flutuante sobre o textarea */
.s-prompt .pw-neg { position: relative; }
/* prompt negativo agora sem título flutuante — a sugestão vive no placeholder, mesma altura das outras janelas */
.s-prompt .pw-pos { flex: 2 1 0; position: relative; }   /* âncora do botão de expandir (contido na janela) */
.s-prompt .pw-neg { flex: 1 1 0; }
/* prompt e negative prompt preenchem a altura do card (vão até embaixo) */
.s-prompt textarea { flex: 1 1 auto; min-height: 84px; height: auto; resize: none; }
/* o card de prompt ancora o mic de ditado e a varinha (posicionados absolutos) */
.studio .s-prompt { position: relative; }
.s-gerar { margin: 0; }
/* largura+altura agrupadas (conectadas) */
.dim-pair { display: flex; gap: 5px; align-items: flex-end; }
/* Trainer: box do trigger/legenda com borda visível (sem exemplo dentro) */
/* Tile de LoRA na galeria (treino pronto): ícone grande + selo p/ baixar */
.tile-lora { display: grid; place-items: center; background: var(--card); }
.tile-lora .tl-lora-ic { width: 46%; max-width: 92px; opacity: .92; }
.tr-box { border: 1px solid rgba(255,255,255,.28) !important; border-radius: 8px; background: rgba(0,0,0,.2); }
.tr-box:focus { border-color: var(--accent) !important; }
/* LoRAs: painel 1/3 da linha do prompt (lista de LoRAs carregados + peso) */
/* card de LoRA = LARGURA FIXA E SÓLIDA (cabe os 4 slots: 4×46 + 3×10 gap = 214px + folga).
   Não depende da aba nem de ter prompt negativo → nunca "encolhe" nem varia.
   Centralizado na região. */
.lora-card { flex: 0 0 236px; width: 236px; min-width: 236px; max-width: 236px; display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: center; }
.lora-card .field-lbl { font-size: 12px; color: var(--muted); }
/* Painel (ao lado do prompt) = 4 espaços 9:16. Vazio = "+". Carregado = card + fader vertical. */
/* LoRAs SEMPRE em uma linha (nowrap + scroll horizontal) — não quebram pra 2 linhas nem esticam a altura */
/* LoRA: cada chip = coluna (card em cima · slider HORIZONTAL embaixo · valor num selo no card).
   Larguras iguais entre cheios e vazios → alinhado, sem sobreposição. */
.lora-list { display: flex; flex-direction: row; flex-wrap: nowrap; gap: 10px; align-items: flex-start; overflow-x: auto; overflow-y: hidden; padding-bottom: 2px; }
.lora-chip { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 46px; }
.lora-chip.empty .lc-empty { width: 46px; height: 71px; border-radius: 9px; display: grid; place-items: center; cursor: pointer;
  border: 1px dashed rgba(255,255,255,.25); background: rgba(255,255,255,.02); padding: 0; }
.lora-chip.empty .lc-empty:hover { border-color: var(--accent); background: var(--accent-soft); }
.lora-chip.empty .lc-empty .ref-plus { font-size: 22px; font-weight: 300; color: var(--muted); }
.lora-chip .lc-card { position: relative; width: 46px; height: 54px; border-radius: 9px; display: grid; place-items: center; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--card); border: 0; cursor: pointer; }
.lora-chip .lc-card:hover { filter: brightness(1.08); }
.lora-chip .lc-card .lc-ic { width: 52%; opacity: .85; }
.lora-chip .lc-del { position: absolute; top: 2px; right: 2px; display: none; place-items: center; width: 16px; height: 16px; padding: 0;
  border-radius: 50%; background: rgba(0,0,0,.6); border: 0; cursor: pointer; }
.lora-chip .lc-card:hover .lc-del { display: grid; }
.lora-chip .lc-del .ic { width: 10px; height: 10px; color: #fff; }
/* valor = selo pequeno no canto inferior do card */
.lc-card .lr-val { position: absolute; bottom: 2px; right: 2px; font-size: 9px; font-weight: 800; color: #fff; background: rgba(10,11,16,.78); padding: 0 3px; border-radius: 4px; line-height: 1.35; font-variant-numeric: tabular-nums; pointer-events: none; }
/* slider HORIZONTAL embaixo do card (sem rotação, sem sobrepor) */
.lr-scale { width: 100%; height: 12px; -webkit-appearance: none; appearance: none; background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; }
.lr-scale::-webkit-slider-runnable-track { width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); }
.lr-scale::-moz-range-track { width: 100%; height: 3px; border-radius: 2px; background: rgba(255,255,255,.28); }
.lr-scale::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; border: 0; background: var(--accent); }
.lr-scale::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; border: 0; background: var(--accent); }
/* tiles de LoRA no ref: item carregado (thumb) + "＋ LoRa" */
.lora-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.ref-tile.lora-tile { --rt: #8b8f98; --rt-ink: #cfd3da; --rt-soft: rgba(139,143,152,.18); --rt-glow: rgba(139,143,152,.5); }
.ref-tile.lora-tile.filled { position: relative; background-size: cover; background-position: center; border-color: var(--accent-glow, rgba(255,255,255,.28)); }
.ref-tile.lora-tile.filled .lt-icon { width: 52%; opacity: .85; }
.ref-tile.lora-tile.filled.has-thumb .lt-icon { display: none; }
.lora-tile .lt-del { position: absolute; top: 2px; right: 2px; display: grid; place-items: center; width: 16px; height: 16px; padding: 0;
  border-radius: 50%; background: rgba(0,0,0,.6); border: 0; cursor: pointer; opacity: .9; }
.lora-tile .lt-del .ic { width: 10px; height: 10px; }
/* trigger words como blocos na cor accent do mood da aba, dentro da janela de prompt */
.lora-triggers { display: none; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; }
.lora-trig { padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; cursor: pointer;
  color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent); }
.lora-trig:hover { background: var(--accent); color: #fff; }
.lora-trig.used { opacity: .55; }
.lora-trig-toggle { padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; cursor: pointer; line-height: 1;
  color: var(--accent-ink); background: transparent; border: 1px solid var(--accent); }
.lora-trig-toggle:hover { background: var(--accent-soft); }
/* campos dinâmicos de trigger word no lightbox (cada campo = 1 frase inteira) */
.lora-trig-fields { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.trig-field { display: flex; align-items: center; gap: 6px; }
.trig-field .trig-inp { flex: 1 1 auto; min-width: 0; }
.trig-field .trig-del, .trig-field .trig-send { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; padding: 0;
  border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; }
.trig-field .trig-del:hover { color: var(--ink); border-color: var(--accent); }
.trig-field .trig-send { color: var(--accent-ink); border-color: var(--accent); }   /* ↘ enviar pro prompt */
.trig-field .trig-send:hover { background: var(--accent); color: #fff; }
.trig-field .trig-del .ic, .trig-field .trig-send .ic { width: 13px; height: 13px; }
/* Galeria de LoRAs (feed · thumbs fixos 135x240) */
.lora-gallery-card { width: min(1240px, 96vw); max-height: 86vh; display: flex; flex-direction: column; }
.lora-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, 135px); gap: 12px; justify-content: center; overflow: auto; padding: 4px 2px; }
.lora-gcard { position: relative; width: 135px; display: flex; flex-direction: column; gap: 4px; align-items: stretch; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); }
.lora-gcard .lg-thumb { position: relative; width: 135px; height: 240px; border-radius: 12px; display: grid; place-items: center; overflow: hidden;
  background-size: cover; background-position: center; border: 1px solid var(--line); background-color: var(--card); }
.lora-gcard .lg-thumb .lg-ic { width: 46%; opacity: .85; }
.lora-gcard .lg-thumb .ref-plus { font-size: 30px; font-weight: 300; color: var(--muted); }
.lora-gcard.add .lg-thumb { border-style: dashed; }
.lora-gcard:hover .lg-thumb { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lora-gcard .lg-name { font-size: 12px; font-weight: 800; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lora-gcard .lg-model { font-size: 10px; color: var(--muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lora-gcard .lg-del { position: absolute; top: 4px; right: 4px; z-index: 2; display: none; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: rgba(0,0,0,.6); }
.lora-gcard:hover .lg-del { display: grid; }
.lora-gcard .lg-del .ic { width: 11px; height: 11px; color: #fff; }
/* modal enxuto: barra de ações com ícones (upload · thumb · aplicar) */
.lora-actions { display: flex; gap: 8px; margin-top: 12px; align-items: center; }
.ic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 38px; min-width: 42px; padding: 0 10px;
  border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); cursor: pointer; }
.ic-btn:hover { border-color: var(--accent); color: var(--accent-ink); }
.ic-btn.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.ic-btn.busy { opacity: .6; pointer-events: none; }
.ic-btn .ic { width: 17px; height: 17px; }
.ic-btn span { font-size: 12px; font-weight: 800; }
.ic-btn span:empty { display: none; }
.lora-apply { flex: 1 1 auto; height: 38px; }
/* lightbox de LoRAs (2 abas) */
.lora-modal-card { width: min(860px, 94vw); }   /* mais largo: a galeria Civitai respira */
/* detalhe do LoRA: thumb 9:16 à esquerda + campos à direita (hierarquia enxuta) */
.lora-detail { display: flex; gap: 14px; align-items: flex-start; }
.ld-thumb { position: relative; flex: 0 0 auto; width: 108px; height: 192px; border-radius: 12px; overflow: hidden; cursor: pointer;
  border: 1px dashed rgba(255,255,255,.25); background: rgba(255,255,255,.03); display: grid; place-items: center; }
.ld-thumb.has { border-style: solid; border-color: var(--line); }
.ld-thumb:hover { border-color: var(--accent); }
.ld-thumb .ld-thumb-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.ld-thumb .ld-thumb-hint { position: relative; z-index: 1; font-size: 11px; color: var(--muted); }
.ld-thumb.has .ld-thumb-hint { display: none; }
.ld-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.ld-fields > input, .ld-fields > select, .ld-fields > textarea { width: 100%; padding: 9px 11px; }
.ld-fields .ld-name { font-weight: 800; font-size: 15px; }
.lora-trig-fields { gap: 5px; }
.lora-tabs { display: flex; gap: 6px; margin: 6px 0 12px; }
.lora-tab { padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 800; font-size: 13px; cursor: pointer; }
.lora-tab.active { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.lora-pane[hidden] { display: none; }
.lora-vol { display: flex; flex-direction: column; gap: 6px; max-height: 340px; overflow-y: auto; }
.lora-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; width: 100%;
  padding: 9px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(255,255,255,.04); cursor: pointer; color: var(--ink); }
.lora-pick:hover { border-color: var(--accent); background: var(--accent-soft); }
.lora-pick b { font-size: 13.5px; font-weight: 800; }
.lora-pick span { font-size: 10.5px; color: var(--muted); word-break: break-all; }
/* --- visual do mockup: pílulas navy + parâmetros em barra horizontal --- */
.studio .node { border-radius: 16px; background: #262933; background: var(--panel); border: 1px solid var(--line); }
/* linha do prompt: sem card externo (o textarea já é um campo) → o LoRA fica só imagem + fader, sem caixa */
.studio .s-prompt { background: transparent; border-color: transparent; padding: 0; }
.s-modelos .node-title, .s-params .node-title, .s-io .node-title { display: none; }
.s-modelos .model-select { font-size: 14px; font-weight: 800; }
/* parâmetros: tudo em linha, rótulo pequeno acima do valor */
/* params: nunca rolagem horizontal — quebra linha quando não cabe (ex.: Flux/Qwen do pod) */
.s-params { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 10px 11px; overflow-x: visible; white-space: nowrap; min-height: var(--s-row-h, 52px); }
/* altura FIXA da linha: chip de modelo e cada campo (título + controle) ocupam a MESMA
   altura, então o layout não muda ao trocar de modelo/aba (uns com título, outros sem). */
/* altura TRAVADA em 52px (min=max) — como .field é flex-item, o min-height:auto do flex
   deixava alguns crescerem (título + controle). Agora TODO chip tem exatamente a mesma altura. */
.s-params > .model-select, .s-params > select, .s-params > input, .s-params .field {
  height: var(--s-row-h, 52px); min-height: var(--s-row-h, 52px); max-height: var(--s-row-h, 52px); box-sizing: border-box;
}
.s-params .field { overflow: visible; }
/* TÍTULO no topo (em FLUXO: o card cresce pra caber o rótulo, sem estourar/colidir com o vizinho);
   VALOR centralizado no espaço abaixo do título via margens automáticas. */
.s-params .field { justify-content: flex-start; }
/* rótulo NUNCA quebra em 2 linhas (senão o chip cresce de altura em abas white-space:normal) */
.s-params .field > span { flex: 0 0 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.s-params .field > *:not(span) { margin-top: auto; margin-bottom: auto; }   /* centraliza o controle abaixo do título */
/* checkbox = parâmetro: título no topo, checkbox centralizado abaixo */
.s-params .field.chk { flex-direction: column; justify-content: flex-start; align-items: center; gap: 0; }
.s-params .field.chk > span { order: -1; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; text-align: center; color: var(--muted); font-weight: 600; display: block; }
/* checkbox de parâmetro (modelos/apps): 2x maior, retângulo colorido no mood da aba, SEM o check dentro */
.s-params .field input[type=checkbox], .field.chk > input[type=checkbox] {
  -webkit-appearance: none; appearance: none; order: 1; margin: auto 0; cursor: pointer;   /* auto = centraliza no MESMO nível do valor dos outros params */
  width: 38px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--accent); background: transparent;
  transition: background .15s ease, box-shadow .15s ease, border-color .15s ease; }
.s-params .field input[type=checkbox]:checked, .field.chk > input[type=checkbox]:checked {
  background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.s-params .field input[type=checkbox]:hover, .field.chk > input[type=checkbox]:hover { border-color: var(--accent-ink); }
/* campo Voz (Heygen): contorno como uma mini janela de prompt embutida */
#faVoice { border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 10px; padding: 8px 12px; min-width: 130px; text-align: center; }
#faVoice:hover { border-color: var(--accent-soft); }
#faVoice:focus { border-color: var(--accent); background-color: rgba(255,255,255,.07); }
/* submodelo (dim-sel SEM título) tem a MESMA altura do chip de modelo (chip cheio) */
.s-params .field:not(:has(> span)) > select.dim-sel { height: 100%; }
/* achata os grupos: modelo + todos os campos viram irmãos numa linha só */
.s-params #iRunpodFields, .s-params #iApiDims { display: contents; }
.s-params #iRunpodFields[hidden], .s-params #iApiDims[hidden] { display: none; }
.s-params .row { display: contents; }
.s-params > #faAvatarParams, .s-params > #faLipParams { display: contents; }
.s-params .field { margin-bottom: 0; flex: 0 0 auto; width: auto; gap: 2px; }
.s-params .field > span { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.s-params .field { align-items: center; }
.s-params .field > span { text-align: center; }
/* TÍTULOS de parâmetro de volta nos cards: rótulo enxuto acima de cada controle */
.s-params .field:not(.chk) > span { display: block; }
.s-params .field:has(> input[type="range"]) > span { display: block; }
/* valores de parâmetro de modelo começam com maiúscula (ex.: Raster, Adhere) — exceto acrônimos/códigos */
.s-params select, .s-params .dim-sel { text-transform: capitalize; }
#aSampleRate, #aFormat, #aXaiLang, #vResolution, #vRayRes { text-transform: none; }
.s-params .field input, .s-params .field select { width: auto; min-width: 0; max-width: none; text-align: center; padding: 7px 6px; text-overflow: clip; }
.s-params .field input[type=number] { max-width: 78px; }
/* CHIPS FIXOS — todos os chips de parâmetro têm a MESMA largura, sólida como rocha (não adapta à resolução).
   Calibrado p/ MacBook 13" (Safari). Ajuste fino só no --chip-w. */
.s-params { --chip-w: 118px; }
/* PARÂMETROS (campo COM título) = largura fixa uniforme. SUBMODELO (dropdown sem título) NÃO — ele
   precisa caber o rótulo, então tem largura confortável (não minúsculo). */
.s-params .field:has(> span) { flex: 0 0 var(--chip-w) !important; width: var(--chip-w) !important; min-width: var(--chip-w) !important; max-width: var(--chip-w) !important; }
.s-params .field:has(> span) > select, .s-params .field:has(> span) > input { width: 100%; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.s-params .field.chk { flex-basis: var(--chip-w) !important; }   /* checkbox segue a mesma largura */
/* submodelo (chip contornado): largura confortável, cabe o texto, com teto p/ não explodir */
.s-params > select.dim-sel,
.s-params .field:not(:has(> span)) > select.dim-sel { flex: 0 0 auto !important; width: auto !important; min-width: 128px !important; max-width: 220px !important; overflow: hidden; text-overflow: ellipsis; }
/* LTX: só os PARÂMETROS extras mais estreitos. */
#vLtxRow { --chip-w: 94px; }
/* Hunyuan · Saída: "Geometria + Textura" é longo → chip mais largo (sem reticências). */
#tab-3d .s-params .field:has(#d3Type) { --chip-w: 176px; }
/* REGRA DE OURO: a barra de parâmetros NUNCA passa de UMA linha (nenhum modelo).
   Se não couber, ROLA na horizontal em vez de quebrar. Vence inclusive style="flex-wrap:wrap" inline. */
.node.s-params { flex-wrap: nowrap !important; overflow-x: auto; overflow-y: visible; scrollbar-width: thin; }
.node.s-params::-webkit-scrollbar { height: 6px; }
.node.s-params::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
/* parâmetros: sem box (borda/fundo) — só o model-select tem box, pra destaque */
.s-params .field select, .s-params .field input { border: none; background-color: transparent; background-image: none; padding-right: 6px; font-weight: 700; color: var(--ink); }
.s-params .field select { text-align-last: center; }
.s-params .field select:hover, .s-params .field input:hover { color: var(--accent-ink); }
.s-params .field input[type=text] { min-width: 78px; text-align: left; }
/* SUBMODELO = seletor SEM título (chip contornado estilo Nano). PARÂMETRO = COM título (sem borda).
   `.dim-sel` é usado por ambos, então o que decide a borda é a AUSÊNCIA de <span> no campo. */
.s-params > select.dim-sel,                                   /* filho direto de .s-params (imagem: Nano) */
.s-params .field:not(:has(> span)) > select.dim-sel {         /* dentro de .field, mas SEM título (vídeo) */
  border: 1px solid var(--line);
  /* chip SÓLIDO (sem translúcido): base opaca + leve tinta do mood + a setinha */
  background-color: #2a2d36;
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft)), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23969cab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat; background-position: center, right 11px center; background-size: cover, 14px;
  border-radius: var(--radius-sm); padding: 9px 32px 9px 13px; font-weight: 700;
  text-align: left; text-align-last: left; min-width: 0;
}
.s-params > select.dim-sel:hover,
.s-params .field:not(:has(> span)) > select.dim-sel:hover { border-color: var(--accent-soft); color: var(--accent-ink); }
.s-params .dim-group { display: flex; align-items: center; gap: 6px; }
.s-params .dim-group .dim-label { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.s-params .loras { flex: 1 1 100%; margin-top: 4px; max-height: 110px; overflow: auto; }
@media (max-width: 1000px) { .s-prompt { flex-wrap: wrap; } }

/* card de prompt largo (acima do Gerar): pos 2/3 + neg 1/3 na mesma linha */
.prompt-wide { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin: 0 0 12px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--line); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)); box-shadow: var(--shadow-soft); }
.prompt-wide .field { margin-bottom: 0; min-width: 0; }
.prompt-wide .pw-pos { flex: 2 1 260px; }   /* 2/3 */
.prompt-wide .pw-neg { flex: 1 1 160px; }   /* 1/3 (some quando o modelo não tem negative) */

/* barra de geração larga (embaixo) + chip de custo destacado ao lado do botão */
.gen-bar { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; padding: 16px 18px;
  border-radius: var(--radius); border: 1px solid var(--line); background: #262933; background: var(--panel); box-shadow: var(--shadow-soft); }
/* quantidade: chip de GERAÇÃO → segue o mood (não é campo de escrita) */
.gen-qty { flex: 0 0 56px; width: 56px; height: 52px; margin: 0; padding: 0; text-align: center;
  background: var(--panel-2); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gen-bar-btn { flex: 1; min-width: 220px; width: auto; height: 52px; }
/* hints/erros do "Gerar": FLUTUAM acima da barra (position:absolute) — nunca empurram o layout */
.gen-bar > .hint {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 6px); margin: 0; padding: 9px 14px; z-index: 30;
  border-radius: 11px; background: rgba(18,20,28,.97); border: 1px solid var(--line-2);
  box-shadow: 0 10px 28px rgba(0,0,0,.45); font-size: 13px; font-weight: 600; pointer-events: none;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.gen-bar > .hint:empty { display: none; }
.gen-bar > .hint.warn { color: #ff9aa4; border-color: rgba(255,90,110,.42); }
/* largura fixa + dígitos tabulares: o valor muda sem empurrar o botão (sem "samba") */
.cost-chip { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 52px; padding: 0 18px; border-radius: 12px; flex: 0 0 158px;
  background: var(--panel-2); color: var(--ink); font-family: var(--serif); font-weight: 800; font-size: 16px; white-space: nowrap; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line); }
.cost-chip::before { content: '◆'; font-size: 11px; opacity: .6; }
/* crédito FAL = boom amarelo · crédito Gemini (Google) = logo do Gemini (azul) */
.cost-chip.prov-fal::before, .cost-chip.prov-google::before {
  content: ''; width: 15px; height: 15px; font-size: 0; opacity: 1;
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
.cost-chip.prov-fal::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2c31d'%3E%3Cpath d='M12 1l2.5 5.6L20 4.5l-2.6 5.9L23 12l-5.6 1.5L20 19.5l-5.9-2.6L12 23l-1.5-5.6L4.5 20l2.6-5.9L1 12l5.6-1.5L4 4.5l5.9 2.6z'/%3E%3C/svg%3E");
}
.cost-chip.prov-google::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232f8fff'%3E%3Cpath d='M12 2c.3 5.4 4.4 9.5 9.8 9.8v.4C16.4 12.5 12.3 16.6 12 22h-.4C11.3 16.6 7.2 12.5 1.8 12.2v-.4C7.2 11.5 11.3 7.4 11.6 2z'/%3E%3C/svg%3E");
}
/* chip de SALDO da fal na topbar: mesmo boom amarelo do chip de custo */
.balchip.prov-fal::before {
  content: ''; width: 14px; height: 14px; flex: 0 0 auto;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f2c31d'%3E%3Cpath d='M12 1l2.5 5.6L20 4.5l-2.6 5.9L23 12l-5.6 1.5L20 19.5l-5.9-2.6L12 23l-1.5-5.6L4.5 20l2.6-5.9L1 12l5.6-1.5L4 4.5l5.9 2.6z'/%3E%3C/svg%3E");
}
/* chip CINZA (Upscale): custo sem cor de provedor — texto, borda e ◆ em cinza */
.cost-chip.cost-gray { color: #9aa3b2; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.cost-chip.cost-gray::before { content: '◆'; color: #9aa3b2; background: none !important; width: auto; height: auto; font-size: 11px; opacity: .75; }
/* local/grátis (custo = 0): o chip vira o selo "Local" com triângulo ▼ verde */
.cost-chip.cost-local { color: #3fcf7a; box-shadow: inset 0 0 0 1px rgba(63,207,122,.42); text-transform: none; }
.cost-chip.cost-local::before { content: '▼'; font-size: 11px; line-height: 1; color: #3fcf7a; background: none !important; opacity: 1; width: auto; height: auto; }
/* custo ao lado do Gerar que não é .cost-chip (ex.: Passes) — mesmo neutro do FAL */
.gen-bar-cost { display: inline-flex; }
.cost-amt { display: inline-flex; align-items: center; gap: 7px; height: 52px; padding: 0 18px; border-radius: 12px;
  background: rgba(255,255,255,.06); color: var(--ink); font-family: var(--serif); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; box-shadow: inset 0 0 0 1px var(--line); }
.cost-amt::before { content: '◆'; font-size: 11px; opacity: .6; }
/* fundo xadrez p/ visualizar alpha (preview do Matte, etc.) */
/* app Extrair: grade de prévia com seleção (tick) */
.ex-head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; flex-wrap: wrap; }
.ex-all { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink); cursor: pointer; }
.ex-head .btn-primary.sm { margin-left: auto; }
.ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; max-height: 62vh; overflow-y: auto; padding: 2px; align-items: start; }
.ex-item { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; cursor: pointer; aspect-ratio: 1; min-height: 0;
  background-color: #c4c9d0; background-image: linear-gradient(45deg,#aeb4bd 25%,transparent 25%,transparent 75%,#aeb4bd 75%), linear-gradient(45deg,#aeb4bd 25%,transparent 25%,transparent 75%,#aeb4bd 75%); background-size: 16px 16px; background-position: 0 0, 8px 8px; }
.ex-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
/* preselect enfático: selecionadas com anel forte; as fora de seleção esmaecem p/ contraste */
.ex-item.on { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent), 0 0 0 1px var(--accent); }
.ex-item:not(.on) { opacity: .5; filter: saturate(.7); }
/* checkbox no padrão do layout: retângulo colorido, SEM check dentro */
.ex-item .ex-chk { position: absolute; top: 8px; left: 8px; width: 30px; height: 18px; border-radius: 6px; border: 1.5px solid var(--accent); background: rgba(0,0,0,.4); color: transparent; font-size: 0; }
.ex-item.on .ex-chk { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* "Selecionar todas" vira um ÍCONE (sem texto) — o estado colore o ícone */
.ex-all { display: inline-flex; align-items: center; cursor: pointer; padding: 4px; border-radius: 8px; }
.ex-all:hover { background: rgba(255,255,255,.06); }
.ex-all input[type=checkbox] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.ex-all-ic { width: 24px; height: 24px; color: var(--muted); transition: color .15s; }
.ex-all:hover .ex-all-ic { color: var(--ink); }
.ex-all input:checked ~ .ex-all-ic { color: var(--accent); }
.ex-item .ex-name { position: absolute; bottom: 0; left: 0; right: 0; padding: 3px 6px; font-size: 10px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.72)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alpha-checker { background-color: #c4c9d0; background-image:
  linear-gradient(45deg,#9aa0aa 25%,transparent 25%,transparent 75%,#9aa0aa 75%),
  linear-gradient(45deg,#9aa0aa 25%,transparent 25%,transparent 75%,#9aa0aa 75%);
  background-size: 22px 22px; background-position: 0 0, 11px 11px; }
/* cores de crédito/custo por PROVEDOR (independe do tema da aba):
   fal = branco/neutro · Google = azul · Hi3D = laranja */
/* o CHIP mantém sempre a cor padrão — só o ícone (::before) muda por provedor */
/* chip de saldo fal = roxo · medidor do Google = azul */
/* saldo do FAL = cor padrão (branco/default); só os outros tipos têm cor própria */
.balchip.prov-hi3d { border-color: rgba(255,159,67,.42); }
.balchip.prov-hi3d .balchip-k { color: #e0a468; }
.balchip.prov-hi3d strong { color: #ffcf9c; }
/* Google = "G" vermelho. Aceso (ok) = disponível · apagado (off) = rate limit */
.gem-quota { padding: 6px 11px; }
.gem-quota .gem-quota-txt { font-family: var(--sans); font-weight: 900; font-size: 15px; line-height: 1; letter-spacing: 0; }
.gem-quota.ok { border-color: rgba(255,68,68,.45); background: rgba(255,68,68,.08); }
.gem-quota.ok .gem-quota-txt { color: #ff4d4d; text-shadow: 0 0 9px rgba(255,68,68,.7); }
.gem-quota.off { border-color: var(--line); background: var(--card); }
.gem-quota.off .gem-quota-txt { color: #5c3a3c; text-shadow: none; }
.gem-quota.wait { border-color: rgba(255,68,68,.28); }
.gem-quota.wait .gem-quota-txt { color: #b34a4a; text-shadow: none; animation: qpulse 1.2s ease-in-out infinite; }

/* BytePlus = azul (placeholder) */
.balchip.prov-byte { border-color: rgba(47,143,255,.42); }
.balchip.prov-byte .balchip-k { color: #7fb0ff; }
.balchip.prov-byte strong { color: #a9ccff; }
.cost-chip.prov-byte { background: rgba(47,143,255,.16); color: #a9ccff; box-shadow: inset 0 0 0 1px rgba(47,143,255,.34); }
.cost-line strong { font-family: var(--serif); color: var(--accent-ink); font-weight: 800; font-size: 18px; }

.gen-row { display: flex; gap: 12px; align-items: flex-end; }
.gen-row .btn-primary { flex: 1; }
.qty { display: flex; flex-direction: column; gap: 7px; width: 74px; flex-shrink: 0; }
.qty span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.qty input { text-align: center; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px; border: none; border-radius: var(--radius-sm); cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 14.5px; color: #fff; letter-spacing: .2px;
  background: var(--accent);
  box-shadow: 0 10px 28px var(--accent-glow);
  transition: transform .16s, filter .16s, background-color .32s cubic-bezier(.87,0,.13,1), box-shadow .32s cubic-bezier(.87,0,.13,1);
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); box-shadow: 0 14px 34px var(--accent-glow); }
/* foco dos campos acompanha o mood da aba */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 4px var(--accent-soft); }
body.theme-train input:focus, body.theme-train select:focus, body.theme-train textarea:focus { box-shadow: 0 0 0 4px rgba(234,179,8,.18); }

/* ---------- Treinamento: cards de resultado ---------- */
.tr-results { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.tr-results:empty { display: none; }   /* vazio não empurra a gen-bar: base do "Treinar LoRA" alinha com o "Gerar" das outras abas */
.tr-card { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; background: rgba(255,255,255,.03); }
.tr-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tr-card-title { font-weight: 700; font-size: 14px; }
.tr-badge { margin-left: auto; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.tr-badge.proc { background: var(--accent-soft); color: var(--accent-ink); }
.tr-badge.done { background: rgba(56,211,155,.16); color: #7fe0a8; }
.tr-badge.fail { background: rgba(255,90,110,.16); color: #ff9aa0; }
.tr-card-sub { font-size: 12px; color: var(--muted); line-height: 1.5; }
.tr-card-sub code { background: var(--card-2); padding: 1px 6px; border-radius: 6px; color: var(--accent-ink); font-size: 11.5px; }
.tr-card-acts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.tr-dl { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 600; text-decoration: none; }
.tr-dl:hover { background: var(--card-2); }
.tr-del { margin-left: auto; }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { background: rgba(255,255,255,.12); color: var(--muted); cursor: not-allowed; box-shadow: none; transform: none; }

.btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--ink); cursor: pointer; font-size: 12.5px; font-weight: 600; transition: .16s;
}
.btn-ghost:hover { background: var(--card-2); }
.btn-ghost.sm { width: auto; padding: 8px 12px; flex: 1; }

.hint { color: var(--muted); font-size: 13px; margin-top: 12px; line-height: 1.55; }
.hint.warn { color: var(--accent-ink); }

/* grupos por fonte */
.src-group { margin-bottom: 14px; }
.src-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700; color: var(--muted); margin: 0 0 7px 4px; }

/* segmented */
.model-toggle { display: flex; gap: 5px; margin-bottom: 20px; padding: 5px; background: rgba(255,255,255,.04); border: 1px solid var(--line-2); border-radius: 16px; }
.model-btn, .vprov-btn, .amodel-btn, .seng-btn { flex: 1; padding: 11px; border: none; border-radius: 12px; cursor: pointer; font-family: var(--sans); font-weight: 600; font-size: 13.5px; background: transparent; color: var(--muted); transition: .18s cubic-bezier(.2,.7,.2,1); }
.model-btn:hover, .vprov-btn:hover, .amodel-btn:hover, .seng-btn:hover { color: var(--ink); background: rgba(255,255,255,.04); }
.model-btn.active, .vprov-btn.active, .amodel-btn.active, .seng-btn.active { background: var(--card-2); color: var(--ink); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--accent-soft); }

/* ---------- Sonorização: vídeo + timeline + marcas ---------- */
#sonVideo { width: 100%; max-height: 320px; border-radius: var(--radius-sm); background: #000; display: block; margin-bottom: 12px; }
.son-tl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.son-time { margin-left: auto; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.son-timeline { position: relative; height: 30px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid var(--line); cursor: pointer; overflow: hidden; }
.son-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); pointer-events: none; }
.son-markers { position: absolute; inset: 0; }
.son-marker { position: absolute; top: 50%; width: 14px; height: 14px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid #fff; background: var(--accent); cursor: pointer; padding: 0; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
.son-marker:hover { filter: brightness(1.15); transform: translate(-50%, -50%) scale(1.15); }
.son-marker.selected { transform: translate(-50%, -50%) scale(1.3); box-shadow: 0 0 0 3px rgba(255,255,255,.35), 0 2px 6px rgba(0,0,0,.5); z-index: 2; }
.son-pop-colors { display: flex; gap: 6px; margin: 8px 0 2px; flex-wrap: wrap; }
.son-swatch { width: 20px; height: 20px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); cursor: pointer; padding: 0; }
.son-swatch.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.son-now { border: 1px solid var(--line); background: var(--card); color: var(--accent-ink); border-radius: 7px; font-size: 10.5px; font-weight: 700; padding: 1px 7px; cursor: pointer; margin-left: 6px; }
.son-now:hover { background: var(--card-2); }
/* trim estilo QuickTime: barra com região arrastável + alças in/out */
.trim { margin-bottom: 8px; }
.trim-track { position: relative; height: 46px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid var(--line); overflow: hidden; touch-action: none; }
.trim-region { position: absolute; top: 0; bottom: 0; background: var(--accent-soft); border: 2px solid var(--accent); border-radius: 8px; cursor: grab; box-sizing: border-box; }
.trim-region:active { cursor: grabbing; }
.trim-handle { position: absolute; top: 0; bottom: 0; width: 14px; background: var(--accent); cursor: ew-resize; display: flex; align-items: center; justify-content: center; }
.trim-handle::before { content: ''; width: 2px; height: 18px; background: rgba(255,255,255,.85); border-radius: 2px; box-shadow: 3px 0 0 rgba(255,255,255,.85), -3px 0 0 rgba(255,255,255,.85); }
.trim-handle.in { left: -1px; border-radius: 8px 0 0 8px; }
.trim-handle.out { right: -1px; border-radius: 0 8px 8px 0; }
.trim-playhead { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; box-shadow: 0 0 6px #fff; pointer-events: none; }
.trim-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.trim-len { color: var(--accent-ink); font-weight: 700; }
.son-flags { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
.son-flag { display: grid; grid-template-columns: 64px 1fr 36px; gap: 8px; align-items: center; }
.son-flag-tc { border: 1px solid var(--line); background: var(--accent-soft); color: var(--accent-ink); border-radius: 9px; font-weight: 700; font-size: 12px; padding: 8px 0; cursor: pointer; font-variant-numeric: tabular-nums; }
.son-flag-in { padding: 9px 11px; font-size: 13px; }
.son-json { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 14px; margin-bottom: 16px; background: rgba(255,255,255,.03); }
.son-json > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--muted); list-style: none; }
.son-json > summary::-webkit-details-marker { display: none; }
.son-json > summary::before { content: '{ } '; color: var(--accent-ink); }
.son-json-pre { margin-top: 10px; font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 11.5px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; word-break: break-word; max-height: 280px; overflow: auto; }
.son-popover { position: absolute; z-index: 97; width: 280px; background: rgba(22,24,32,.98); backdrop-filter: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: 12px; box-shadow: var(--shadow); }
.son-pop-tc { font-size: 12px; font-weight: 700; color: var(--accent-ink); margin-bottom: 8px; }
.son-pop-text { width: 100%; font-size: 13px; }
.son-pop-acts { display: flex; gap: 8px; margin-top: 8px; }

/* loras */
.loras { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 15px; margin-bottom: 18px; background: rgba(255,255,255,.03); }
.loras-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 11px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.lora-row { display: grid; grid-template-columns: 1fr 74px 38px; gap: 9px; margin-bottom: 9px; }
.lora-row input { padding: 9px 11px; font-size: 13px; }
.lora-del, .vimg-del { background: var(--card); border: 1px solid var(--line); border-radius: 11px; color: #ff7a8a; cursor: pointer; display: grid; place-items: center; }
.lora-del:hover, .vimg-del:hover { background: rgba(255,90,110,.16); }
/* ícone de injeção no canto do prompt de vídeo */
/* wrap do prompt de vídeo: coluna flex que estica → o textarea preenche o card */
.prompt-wrap { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.prompt-wrap > textarea { width: 100%; flex: 1 1 auto; min-height: 84px; }
.prompt-inject { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid var(--line); background: var(--card); color: var(--muted); cursor: pointer; transition: .15s; }
.prompt-inject:hover { color: var(--ink); border-color: var(--accent); }
.prompt-inject.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.prompt-inject .ic { width: 16px; height: 16px; }
textarea.locked { opacity: .85; border-color: var(--accent); background: var(--accent-soft); cursor: not-allowed; }

/* Injection: combinar imagens (collage) */
.inj-collage { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 16px; background: rgba(255,255,255,.03); }
.inj-collage > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--ink); list-style: none; }
.inj-collage > summary::-webkit-details-marker { display: none; }
.inj-collage > summary::before { content: '＋ '; color: var(--muted); }
.inj-collage[open] > summary::before { content: '－ '; }
.inj-collage[open] > summary { margin-bottom: 12px; }
.col-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.col-slot { position: relative; aspect-ratio: 1; border: 1px dashed var(--line); border-radius: 10px; display: grid; place-items: center; cursor: pointer; overflow: hidden; background: var(--card); color: var(--faint); font-size: 22px; }
.col-slot.filled { border-style: solid; }
.col-slot img { width: 100%; height: 100%; object-fit: cover; }
.col-rm { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 999px; border: none; background: rgba(10,11,15,.7); color: #fff; cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center; }
.col-rm:hover { background: #ff3344; }
#colCanvas { max-width: 100%; max-height: 240px; width: auto; height: auto; border-radius: 8px; background: #000; cursor: move; touch-action: none; }
#colCanvas:not([width]) { display: none; }

/* Injection: ferramentas + prévia menor (pra editar mais fácil) */
.inj-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.inj-tools .dim-chips { gap: 6px; }
.inj-tools .dim-chip { padding: 5px 10px; font-size: 11.5px; }
.inj-tools-r { display: flex; gap: 6px; }
.inj-preview { margin: 4px 0 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; background: rgba(0,0,0,.25); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.inj-preview canvas { max-width: 100%; max-height: 320px; width: auto; height: auto; object-fit: contain; border-radius: 8px; box-shadow: var(--shadow-soft); background: #000; touch-action: none; }
.inj-preview canvas.drawing { cursor: crosshair; }
.inj-preview canvas:not([width]) { display: none; }

/* LoRAs do volume do pod: chips clicáveis (feature antiga do RunPod — só o container ficou) */
.lora-vol { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 10px; }
.lora-vol .hint { width: 100%; }

/* dimensões por modelo (chips de proporção/resolução/qualidade/formato) */
.dim-group { margin-bottom: 12px; }
.dim-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 700; color: var(--muted); margin-bottom: 7px; }
.dim-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.dim-chip { border: 1px solid var(--line-2); background: var(--card); color: var(--muted); font-family: var(--sans); font-weight: 700; font-size: 12.5px; padding: 7px 13px; border-radius: 10px; cursor: pointer; transition: .15s; }
.dim-chip:hover { color: var(--ink); }
.dim-chip.on { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }

/* botão de adicionar mais uma imagem de referência */
/* Refs do Omni (Seedance/Gemini): tiles de imagem (azul) e vídeo (roxo) LADO A LADO,
   numa faixa horizontal única (igual ao Ray), quebrando só quando faltar espaço. */
#vKlifImages { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 8px; max-width: 100%; }
#vKlifImages > .ref-cap { display: block; flex-basis: 100%; max-width: 240px; line-height: 1.25; margin-bottom: 2px; white-space: normal; }
#vKlifImages #vImageList { max-width: 300px; }
.add-ref-btn { margin-top: 8px; align-self: flex-start; padding: 7px 14px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px dashed var(--line); border-radius: 999px; background: rgba(255,255,255,.03); color: var(--muted); }
.add-ref-btn:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
/* (removido o design de card antigo do Seedance — os refs Omni usam o .ref-tile compacto,
   com color-code por tipo; a classe .vimg-row continua no JS só como marcador, sem estilo próprio) */
/* × (remover) FORA do retângulo, no canto superior direito */
/* × (remover) FORA do retângulo, no canto superior direito */
.ref-tile .vimg-del { top: -8px; right: -8px; width: 20px; height: 20px; padding: 0; border: 2px solid rgba(10,11,16,.92); background: #e34860; border-radius: 50%; color: #fff; z-index: 6; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.ref-tile .vimg-del:hover { background: #ff5a72; color: #fff; }
.ref-tile .vimg-del .ic { width: 11px; height: 11px; }

/* ---------- Barra de rolagem: escondida por padrão; glassy só na galeria/fila/catálogo ---------- */
* { scrollbar-width: none; }
*::-webkit-scrollbar { width: 0; height: 0; }
/* sem barra de rolagem visível em lugar nenhum — rola só com mouse/trackpad */

/* ---------- Galeria + Fila (painéis glass) ---------- */
.gallery {
  width: 396px; flex-shrink: 0; height: calc(100vh - var(--topbar-h)); position: sticky; top: var(--topbar-h);
  display: flex; flex-direction: column; border-left: 1px solid var(--line);
  background: rgba(255,255,255,.03); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
}
.queue-panel {
  width: 248px; flex-shrink: 0; height: calc(100vh - var(--topbar-h)); position: sticky; top: var(--topbar-h);
  display: flex; flex-direction: column; border-left: 1px solid var(--line);
  background: rgba(255,255,255,.02); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass);
}
.queue-head { display: flex; align-items: center; gap: 7px; padding: 14px 14px 10px; border-bottom: 1px solid var(--line); }
.queue-head strong { font-family: var(--serif); font-size: 15px; font-weight: 800; }
/* galeria e fila são fixas — sempre visíveis */

.gallery-head { display: flex; flex-direction: column; gap: 10px; padding: 16px 14px 12px; border-bottom: 1px solid var(--line); }
.gallery-acts { display: flex; justify-content: flex-end; gap: 6px; }
.gallery-tabs { display: flex; flex-direction: column; gap: 4px; background: rgba(255,255,255,.05); border-radius: 12px; padding: 4px; }
.gtab-row { display: flex; gap: 4px; }
.gtab-row[hidden] { display: none; }   /* o [hidden] das subseções (Galeria/Biblioteca) precisa vencer o display:flex acima */
/* nível 1 da galeria: SÓ ícones (Galeria / Fila / Bibliotecas) */
.gmain-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.gmain { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 32px; border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 10px; cursor: pointer; }
.gmain svg { width: 17px; height: 17px; display: block; }
.gmain:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.gmain.active { color: var(--ink); background: var(--card-2); border-color: var(--line); }
.gmain .gallery-count { position: absolute; top: -3px; right: -3px; }
.gmain-row .gtab-acts { margin-left: auto; }
.gtab-soon { opacity: .38; cursor: default; }
/* Freesound: lista de sons */
.fs-list { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
/* chip alargado: waveform (padrão da UI) EM CIMA + linha de infos embaixo */
.fs-item { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.045); border: 1px solid var(--line); }
.fs-item.playing { border-color: var(--accent); }
.fs-row { display: flex; align-items: center; gap: 9px; }
.fs-wave { width: 100%; border-radius: 8px; overflow: hidden; background: rgba(255,255,255,.04); }
.fs-wave .wave { height: 54px; }
.fs-play, .fs-use, .fs-dl { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; border: none; border-radius: 8px; background: rgba(255,255,255,.08); color: var(--ink); cursor: pointer; font-size: 12px; }
.fs-play:hover, .fs-use:hover, .fs-dl:hover { background: rgba(124,92,255,.3); }
.fs-item.playing .fs-play { background: var(--accent); color: #fff; }
/* rótulo de licença (no lugar do antigo botão de play) */
.fs-lic { flex: 0 0 auto; padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,.08); color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .4px; white-space: nowrap; }
/* CC0 = domínio público (livre) → verde */
.fs-lic.cc0 { background: rgba(63,207,122,.16); color: #3fcf7a; box-shadow: inset 0 0 0 1px rgba(63,207,122,.4); }
.fs-main { flex: 1 1 auto; min-width: 0; }
.fs-name { font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-meta { font-size: 11px; color: var(--muted); }
.gtab { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: none; background: transparent; color: var(--muted); font-family: var(--sans); font-weight: 700; font-size: 12px; padding: 7px 6px; border-radius: 9px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtab .gallery-count { flex: 0 0 auto; }
/* Fila = só ícone (compacto, não estica como os outros gtabs) */
.gtab-ico { flex: 0 0 auto; padding: 7px 10px; }
.gtab-ico svg { width: 15px; height: 15px; display: block; }
.gtab.active { background: var(--card-2); color: var(--ink); }
.gallery-count { color: var(--accent-ink); font-size: 11px; font-weight: 700; }
.gallery-x { display: grid; place-items: center; border: 1px solid var(--line); background: var(--card); border-radius: 10px; width: 32px; height: 32px; cursor: pointer; color: var(--muted); }
.gallery-x:hover { background: var(--card-2); color: var(--ink); }
.gallery-x.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.gtab-row { align-items: center; }
/* grupo de ações (Layout · retrair fila · retrair galeria) — junto, mas destacado das abas */
.gtab-acts { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--line); flex: 0 0 auto; }
.gtab-act { flex: 0 0 auto; width: 30px; height: 30px; align-self: center; }
/* Fila como view da galeria: barra de ações (limpar/atualizar) no topo, à direita */
.queue-actbar { display: flex; justify-content: flex-end; gap: 6px; padding: 6px 4px 8px; }
#queueView .queue-list { flex: none; overflow: visible; padding: 0; }

.gallery-grid { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px; }
.gallery-col { display: flex; flex-direction: column; gap: 14px; }
/* --- 3 modos de layout da galeria --- */
.gallery-col.mode-grid { display: block; column-count: 2; column-gap: 10px; }
.gallery-col.mode-grid .tile { width: 100%; margin: 0 0 10px; break-inside: avoid; }
.gallery-col.mode-list { gap: 8px; }
.gallery-col.mode-list .tile { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.gallery-col.mode-list .tile .media { width: 56px; height: 56px; flex: 0 0 56px; border-radius: 8px; overflow: hidden; }
.gallery-col.mode-list .tile .media img, .gallery-col.mode-list .tile .media video { width: 100%; height: 100%; object-fit: cover; }
.gallery-col.mode-list .tile .media.audio { padding: 0; }
.gallery-col.mode-list .tile .media.audio audio { display: none; }
/* lista: sem prompt no corpo (aparece como tooltip no hover do thumb); só thumb + ações + seleção, nada sobrepõe */
.gallery-col.mode-list .tile .media { position: relative; }
.gallery-col.mode-list .tile-actions { position: static; flex: 1; justify-content: flex-end; opacity: 1; background: none; padding: 0; }
.gallery-col.mode-list .tile .tsel { position: static; flex: 0 0 auto; }
.gallery-empty { color: var(--muted); text-align: center; padding: 36px 12px; font-size: 13px; }
/* toggle de áudio sincronizado: só um ícone de speaker on/off */
.spk-field { align-self: flex-end; display: inline-flex; margin-bottom: 2px; cursor: pointer; }
.spk-input { position: absolute; opacity: 0; width: 0; height: 0; }
.spk-ico { width: 30px; height: 30px; background: url("icons/icon_sound_off.png") center/contain no-repeat;
  opacity: .55; transition: opacity .12s; }
.spk-input:checked ~ .spk-ico { background-image: url("icons/icon_sound_on.png"); opacity: 1; }
.spk-field:hover .spk-ico { opacity: 1; }
/* tiles de áudio (sem thumbnail) */
.media.audio { display: grid; place-items: center; padding: 18px 12px; background: linear-gradient(180deg, rgba(53,196,106,.20), rgba(53,196,106,.05)); }
.audio-card { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.audio-card .audio-ic { width: 34px; height: 34px; color: var(--accent-ink); }
.audio-card audio { width: 100%; }
.lb-audio { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 36px; }
.lb-audio audio { width: min(70vw, 560px); }
.folder-chip { display: none; }
.folder-chip.show { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 6px 12px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; cursor: pointer; }

/* filtro por plataforma */
.plat-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.plat-bar[hidden] { display: none; }
.plat-chip { border: 1px solid var(--line-2); background: var(--card); color: var(--muted); font-family: var(--sans); font-weight: 700; font-size: 11.5px; padding: 5px 11px; border-radius: 999px; cursor: pointer; transition: .15s; }
.plat-chip:hover { color: var(--ink); }
.plat-chip.on { background: var(--accent-soft); color: var(--accent-ink); border-color: transparent; }
.plat-select { width: 100%; border: 1px solid var(--line); background-color: rgba(18,20,28,.94); background-image: none; backdrop-filter: none; -webkit-backdrop-filter: none; color: var(--ink); font-family: var(--sans); font-weight: 600; font-size: 12.5px; padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.plat-select:focus { outline: none; border-color: var(--accent); }

/* feedback ao arrastar um arquivo baixado de volta */

.tile { position: relative; display: block; width: 100%; border-radius: 14px; overflow: hidden; background: #0c0d12; box-shadow: var(--shadow-soft); border: 1px solid rgba(255,255,255,.14); }
.tile .media { width: 100%; display: block; cursor: pointer; }
.tile video, .tile img { width: 100%; height: auto; display: block; }
.tile .media.proc { position: relative; }
.tile .media.proc.noimg { aspect-ratio: 1 / 1; display: grid; place-items: center; }
.tile .thumb-blur { width: 100%; height: auto; display: block; filter: blur(9px) brightness(.55); transform: scale(1.08); }
.tile .media.proc .throbber { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.tile .badge { position: absolute; top: 7px; left: 7px; z-index: 2; font-size: 9px; text-transform: uppercase; letter-spacing: .6px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: rgba(10,11,15,.6); color: #fff; backdrop-filter: blur(4px); }
.tile .tdur { position: absolute; top: 30px; left: 7px; z-index: 2; display: inline-flex; align-items: center; gap: 3px; font-size: 9.5px; font-weight: 700; padding: 3px 8px 3px 6px; border-radius: 999px; background: rgba(10,11,15,.6); color: #fff; backdrop-filter: blur(4px); }
.tile .tdur .ic { width: 11px; height: 11px; }
.tile .errmsg { color: #fff; font-size: 10px; padding: 10px; text-align: center; }
/* selo "já baixado" (verde) — canto inferior esquerdo */
.tile .dlcheck { position: absolute; bottom: 8px; left: 8px; z-index: 3; width: 26px; height: 26px; border-radius: 999px; background: #21a366; color: #fff; display: none; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.45); }
.tile.downloaded .dlcheck { display: grid; }
.tile .dlcheck .ic { width: 15px; height: 15px; }

/* ações no card — canto inferior direito */
.tile-actions { position: absolute; bottom: 8px; right: 8px; z-index: 3; display: flex; gap: 6px; }
.tile-actions button { width: 30px; height: 30px; border-radius: 999px; border: none; background: rgba(10,11,15,.55); color: #fff; cursor: pointer; backdrop-filter: blur(4px); display: grid; place-items: center; }
.tile-actions button:hover { background: var(--accent); }
.tile-actions .tdel:hover { background: #e0463f; }
.tile-actions .ic { width: 16px; height: 16px; }
/* checkbox de seleção (batch) — canto superior direito */
.tile .tsel { position: absolute; top: 8px; right: 8px; z-index: 3; width: 24px; height: 24px; border-radius: 50%; border: 2px solid rgba(255,255,255,.75); background: rgba(10,11,15,.5); cursor: pointer; display: grid; place-items: center; padding: 0; }
.tile.sel .tsel { background: var(--accent); border-color: var(--accent); }
.tile.sel .tsel::after { content: ''; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(0, -1px); }
.tile.sel { box-shadow: 0 0 0 3px var(--accent); }

/* spinner tradicional (12 barras) */
.throbber { position: relative; width: 38px; height: 38px; }
.throbber i { position: absolute; top: 2px; left: 50%; width: 3px; height: 10px; margin-left: -1.5px; border-radius: 3px; background: #fff; opacity: .15; animation: throb 1s linear infinite; transform-origin: 1.5px 17px; box-shadow: 0 0 2px rgba(0,0,0,.45); }
.throbber i:nth-child(1)  { transform: rotate(0deg);   animation-delay: -.916s; }
.throbber i:nth-child(2)  { transform: rotate(30deg);  animation-delay: -.833s; }
.throbber i:nth-child(3)  { transform: rotate(60deg);  animation-delay: -.75s; }
.throbber i:nth-child(4)  { transform: rotate(90deg);  animation-delay: -.666s; }
.throbber i:nth-child(5)  { transform: rotate(120deg); animation-delay: -.583s; }
.throbber i:nth-child(6)  { transform: rotate(150deg); animation-delay: -.5s; }
.throbber i:nth-child(7)  { transform: rotate(180deg); animation-delay: -.416s; }
.throbber i:nth-child(8)  { transform: rotate(210deg); animation-delay: -.333s; }
.throbber i:nth-child(9)  { transform: rotate(240deg); animation-delay: -.25s; }
.throbber i:nth-child(10) { transform: rotate(270deg); animation-delay: -.166s; }
.throbber i:nth-child(11) { transform: rotate(300deg); animation-delay: -.083s; }
.throbber i:nth-child(12) { transform: rotate(330deg); animation-delay: 0s; }
@keyframes throb { 0% { opacity: 1; } 100% { opacity: .15; } }

/* menu de pastas */
.folder-menu { position: fixed; z-index: 90; background: rgba(20,22,30,.92); backdrop-filter: var(--glass); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 170px; max-height: 280px; overflow-y: auto; }
.folder-menu button { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: none; background: transparent; padding: 9px 11px; border-radius: 8px; font-size: 13px; cursor: pointer; color: var(--ink); }
.folder-menu button:hover { background: var(--accent-soft); }
.folder-menu .fm-new { color: var(--accent-ink); font-weight: 700; border-top: 1px solid var(--line); margin-top: 4px; }

/* aba Pastas */
.folders-view { flex: 1; overflow-y: auto; padding: 16px; }
.folder-new { display: flex; gap: 8px; margin-bottom: 16px; }
.folder-new input { flex: 1; }
.folder-item { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; cursor: pointer; }
.folder-item:hover { background: var(--card); }
.folder-item.active { border-color: var(--accent); background: var(--accent-soft); }
.folder-item .fname { flex: 1; font-weight: 700; font-size: 14px; }
.folder-item .fcount { color: var(--muted); font-size: 12px; }
.folder-item .fdel { display: grid; place-items: center; border: none; background: transparent; color: #ff7a8a; cursor: pointer; }

/* Fila (log) */
.queue-list { flex: 1; overflow-y: auto; padding: 8px 12px 14px; }
.q-item { display: flex; align-items: center; gap: 11px; padding: 11px 8px; border-bottom: 1px solid var(--line-2); cursor: pointer; border-radius: 8px; transition: background .14s; }
.q-item:hover { background: rgba(255,255,255,.05); }
.q-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--faint); }
.q-item.run .q-dot { background: #f2c31d; animation: qpulse 1.2s ease-in-out infinite; }   /* processando = amarelo, em qualquer aba */
.q-item.ok .q-dot { background: #38d39b; }
.q-item.err .q-dot { background: #ff5a6e; }
.q-item.wait .q-dot { background: #4a4f5c; }
@keyframes qpulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.q-main { flex: 1; min-width: 0; }
.q-model { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.q-kind { font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; margin-left: 4px; }
.q-params { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.q-meta { text-align: right; flex-shrink: 0; }
.q-status { display: block; font-size: 11px; font-weight: 700; }
.q-item.ok .q-status { color: #38d39b; } .q-item.err .q-status { color: #ff5a6e; } .q-item.run .q-status { color: #f2c31d; } .q-item.wait .q-status { color: var(--muted); }
.q-time { font-size: 10.5px; color: var(--faint); }

.gallery-toggle {
  position: fixed; left: 20px; bottom: 20px; z-index: 40; display: inline-flex; align-items: center; gap: 8px;
  background: rgba(20,22,30,.85); backdrop-filter: var(--glass); color: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 17px; font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
}
.gallery-toggle:hover { background: rgba(124,92,255,.4); }
#galleryToggleCount:not(:empty) { background: var(--accent); color: #fff; border-radius: 999px; padding: 0 6px; font-size: 11px; }
@media (max-width: 1440px) { .gallery { width: 340px; } .queue-panel { width: 224px; } }
@media (max-width: 1180px) { .gallery { width: 300px; } .queue-panel { width: 210px; } }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(6,7,11,.94); display: none; align-items: center; justify-content: center; padding: 32px; }
.lightbox.open { display: flex; }
/* agora: mídia à esquerda, infos num painel à direita */
.lightbox-media { max-width: 94vw; max-height: 86vh; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 22px; }
.lb-left { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
.lb-right { width: 340px; flex-shrink: 0; max-height: 82vh; overflow-y: auto; }
.lightbox-media video, .lightbox-media img { max-width: 64vw; max-height: 80vh; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.6); background: #000; }
.lightbox-cap { color: #c7cbd6; font-size: 14px; max-width: 760px; text-align: center; line-height: 1.5; }
.lightbox-info { width: 100%; text-align: left; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; cursor: pointer; color: var(--ink); transition: background .16s, border-color .16s; }
@media (max-width: 820px) { .lightbox-media { flex-direction: column; } .lb-right { width: 100%; max-width: 64vw; } }
.lightbox-info:hover { background: rgba(124,92,255,.18); border-color: var(--accent); }
.li-head { font-weight: 800; font-size: 14px; }
.li-head span { font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-left: 6px; font-weight: 700; }
.li-params { font-size: 12px; color: var(--muted); margin-top: 4px; }
.li-prompt { font-size: 13px; color: #c7cbd6; margin-top: 8px; line-height: 1.45; max-height: 320px; overflow-y: auto; }
.li-hint { font-size: 11px; color: var(--accent-ink); font-weight: 700; margin-top: 10px; }
/* refs usadas na geração — clicáveis p/ navegar até a origem */
.seg-layer-blend { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 2px 6px; flex-shrink: 0; }
.li-refs { margin-top: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; }
.li-refs-t { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.li-refs-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.li-ref { padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; width: 64px; height: 64px; transition: border-color .16s, transform .12s; }
.li-ref:hover { border-color: var(--accent); transform: scale(1.05); }
.li-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.li-file { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 12.5px; font-weight: 700; text-decoration: none; border: 1px solid var(--line); }
.li-file:hover { background: rgba(124,92,255,.25); border-color: var(--accent); }
/* PRJ — projeto do App: ícone de arquivo (reabre o projeto) + setinha de download do entregável */
.li-prj { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.prj-file { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; padding: 16px 14px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 14px; cursor: pointer; color: var(--ink); transition: background .16s, border-color .16s; }
.prj-file:hover { background: rgba(124,92,255,.18); border-color: var(--accent); }
.prj-ic { position: relative; display: inline-grid; place-items: center; color: var(--accent-ink); }
.prj-ic svg { width: 40px; height: 48px; display: block; }
.prj-tag { position: absolute; bottom: 7px; left: 0; right: 0; text-align: center; font-size: 9px; font-weight: 900; letter-spacing: .5px; color: var(--accent-ink); }
.prj-name { font-size: 12.5px; font-weight: 800; }
.prj-dl { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid var(--line); color: #fff; cursor: pointer; transition: background .16s, border-color .16s; }
.prj-dl:hover { background: rgba(124,92,255,.25); border-color: var(--accent); }
.lightbox-close { position: fixed; top: 20px; right: 24px; z-index: 81; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; border: none; border-radius: 999px; width: 46px; height: 46px; cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,.24); }
.lightbox-actions { display: flex; align-items: center; gap: 10px; }
.lightbox-actions a, .lightbox-actions button { display: inline-flex; align-items: center; gap: 7px; color: #fff; background: rgba(255,255,255,.14); padding: 9px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; text-decoration: none; border: none; cursor: pointer; }
.lightbox-actions a:hover, .lightbox-actions button:hover { background: var(--accent); }
.lightbox-actions button.lb-enhance { background: var(--accent); }
.lightbox-actions button.lb-enhance:hover { filter: brightness(1.12); }
.lightbox-counter { color: #8b90a0; font-size: 12px; font-weight: 600; }
.lightbox-nav { position: fixed; left: 50%; transform: translateX(-50%); z-index: 81; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 999px; border: none; background: rgba(255,255,255,.12); color: #fff; cursor: pointer; }
.lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-nav:disabled { opacity: .25; cursor: default; }
.lightbox-nav.prev { top: 18px; } .lightbox-nav.next { bottom: 18px; }
.lightbox-nav .ic { width: 24px; height: 24px; }

/* link de download direto no card */
/* chips quebram em várias linhas — sem barra de rolagem nenhuma */

/* toast */
.toast { position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%) translateY(20px); background: rgba(22,24,32,.95); backdrop-filter: var(--glass); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 13px 22px; font-size: 13.5px; font-weight: 600; opacity: 0; pointer-events: none; transition: .26s cubic-bezier(.2,.7,.2,1); z-index: 95; max-width: 90vw; box-shadow: var(--shadow); }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { border-color: rgba(255,90,110,.5); }


/* console de erros */
.debug-fab { position: fixed; bottom: 22px; right: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 8px; background: rgba(22,24,32,.9); backdrop-filter: var(--glass); color: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 11px 16px; font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow); }
.debug-fab:hover { background: rgba(124,92,255,.4); }
.debug-badge { background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; }
.debug { position: fixed; bottom: 22px; right: 22px; z-index: 61; width: min(560px, 92vw); background: rgba(16,18,26,.95); backdrop-filter: var(--glass); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.debug-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; }
.debug-actions { display: flex; gap: 6px; }
.debug-actions button { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 9px; padding: 6px 11px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); }
.debug-actions button:hover { background: var(--card-2); }
#debugLog { width: 100%; height: 240px; border: none; resize: vertical; font-family: ui-monospace, 'Menlo', monospace; font-size: 12px; line-height: 1.5; padding: 14px 16px; color: #cdd2de; background: rgba(0,0,0,.3); }
#debugLog:focus { box-shadow: none; }

@keyframes spin { to { transform: rotate(360deg); } }

/* Botão universal de retrair/expandir para textareas grandes */
.ta-exp { position: relative; display: block; }
.ta-exp > textarea { display: block; width: 100%; box-sizing: border-box; transition: height .16s ease; }
.ta-exp.open > textarea { height: 340px !important; max-height: 60vh; }
/* dentro dos cards de prompt (flex) o wrapper assume o papel de preencher a altura */
.s-prompt .field > .ta-exp { flex: 1 1 auto; min-height: 0; display: flex; }
.s-prompt .field > .ta-exp > textarea { flex: 1 1 auto; min-height: 84px; }
/* vídeo: a textarea fica dentro do .prompt-wrap → o .ta-exp também precisa esticar p/ o expander funcionar */
.prompt-wrap > .ta-exp { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.prompt-wrap > .ta-exp > textarea { flex: 1 1 auto; min-height: 84px; }
.ta-exp-btn {
  position: absolute; right: 6px; bottom: 6px; z-index: 3;
  width: 22px; height: 22px; padding: 0; line-height: 20px; text-align: center;
  border: 1px solid rgba(255,255,255,.14); border-radius: 6px;
  background: rgba(8,10,15,.55); backdrop-filter: blur(6px);
  color: var(--faint); font-size: 12px; cursor: pointer;
  opacity: .55; transition: opacity .14s ease, color .14s ease, border-color .14s ease;
}
.ta-exp:hover .ta-exp-btn { opacity: 1; }
.ta-exp-btn:hover { color: var(--ink); border-color: var(--accent); }

/* Miniatura 3D na galeria + visualizador no lightbox */
.tile-3d { position: relative; width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 120% at 50% 0%, #171a22 0%, #0c0d12 100%); }
/* girar o objeto não deve selecionar texto/interface */
.tile-3d, .tile-3d-mv, .tile-3d-badge { user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.tile-3d img { width: 100%; height: 100%; object-fit: cover; }
/* placeholder quando o modelo 3D não tem poster (ex.: animação sem render de capa) */
.tile-3d-ph { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(205,211,223,.5); }
.tile-3d-ph .ic { width: 34px; height: 34px; }
.tile-3d-mv { width: 100%; height: 100%; --poster-color: transparent; background: transparent; cursor: grab; }
/* na visão lista, o quadro 3D acompanha a miniatura pequena */
.gallery-col.mode-list .tile .media .tile-3d { aspect-ratio: auto; height: 100%; }
.tile-3d-mv:active { cursor: grabbing; }
.tile-3d-badge { position: absolute; left: 8px; bottom: 8px; z-index: 2; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(8,10,15,.62); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14); color: #cdd3df; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.tile-3d-badge:hover { border-color: var(--accent); color: #fff; }
.tile-3d-badge .ic { width: 13px; height: 13px; }
.lb-3d { width: 100%; height: 86vh; max-height: 90vh; background: #0c0d12; border-radius: 12px; --poster-color: transparent; user-select: none; -webkit-user-select: none; }
.lb-3d-host { width: 100%; min-height: 86vh; display: grid; place-items: center; position: relative; }
/* menu de download com escolha de formato */
.dl-menu { position: fixed; z-index: 2147483000; background: rgba(20,22,30,.98); backdrop-filter: var(--glass); border: 1px solid var(--line); border-radius: 11px; padding: 5px; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 210px; }
.dl-menu button { text-align: left; background: none; border: none; color: var(--ink); font-family: var(--sans); font-size: 13px; font-weight: 600; padding: 9px 11px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.dl-menu button:hover { background: var(--accent-soft); color: var(--accent-ink); }
/* popup de ajustes da reconstrução do splat */
.mesh-cfg-back { position: fixed; inset: 0; z-index: 2147483001; display: grid; place-items: center; background: rgba(6,7,11,.6); backdrop-filter: blur(4px); }
.mesh-cfg { width: min(420px, 92vw); background: rgba(20,22,30,.98); border: 1px solid var(--line); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); }
.mesh-cfg .mc-title { font-family: var(--serif); font-weight: 800; font-size: 17px; margin-bottom: 14px; }
.mesh-cfg .mc-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.mesh-cfg .mc-row > span { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.mesh-cfg .mc-row > small { font-size: 11px; color: var(--muted); }
.mesh-cfg .mc-row input[type=range] { width: 100%; }
.mesh-cfg .mc-acts { display: flex; gap: 10px; margin-top: 6px; }
.mesh-cfg .mc-acts button { flex: 1; }
/* viewer de Gaussian splat (canvas WebGL) — touch-action:none é essencial pros controles de ponteiro (rotacionar/zoom) */
.splat-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 12px; background: #0c0d12; touch-action: none; cursor: grab; }
.splat-canvas:active { cursor: grabbing; }
.splat-loading { position: absolute; top: 10px; left: 12px; pointer-events: none; z-index: 2; }

/* ===== Xadrez suave atrás de qualquer coisa transparente (PNG, 3D, etc.) ===== */
.checker-bg, 
.tile .media:has(> img),
.gallery-col.mode-list .tile .media:has(> img),
.s-preview:has(img),
.tile-3d,
.lb-left:has(model-viewer),
.lb-3d {
  background-color: #c4c9d0;
  background-image:
    linear-gradient(45deg, #aeb4bd 25%, transparent 25%, transparent 75%, #aeb4bd 75%),
    linear-gradient(45deg, #aeb4bd 25%, transparent 25%, transparent 75%, #aeb4bd 75%);
  background-size: 22px 22px;
  background-position: 0 0, 11px 11px;
}
/* a mídia em si fica transparente para o xadrez aparecer só onde há alpha */
.tile .media > img,
.s-preview img,
.s-preview[data-cbg] video,
.tile-3d img { background: transparent; }
/* enquanto a miniatura (lazy) NÃO carregou: esqueleto ESCURO e sólido (nada de branco piscando ao rolar).
   Fundo escuro na própria mídia (img/video) evita o "flash branco" do Safari antes de decodificar. */
.gallery-col:not(.mode-list) .tile:not(.media-loaded) .media { min-height: 120px; background: #14161d !important; background-image: none !important; }
.tile { background: #14161d; }
.tile img, .tile video, .tile .media { background-color: #14161d; }
.tile:not(.media-loaded) .badge,
.tile:not(.media-loaded) .tdur,
.tile:not(.media-loaded) .dlcheck,
.tile:not(.media-loaded) .tile-actions { opacity: 0 !important; pointer-events: none; }
.tile .badge, .tile .tdur, .tile .dlcheck, .tile .tile-actions { transition: opacity .18s ease; }

/* fundo da área transparente do canvas de imagem — ciclável (xadrez/preto/verde/azul).
   #iPreview leva a cor; a mídia (img/ref-canvas/ref-cell) é transparente e deixa passar. */
/* o fundo de transparência escolhido vale em TODAS as abas (qualquer .s-preview com imagem) */
.s-preview[data-cbg="checker"]:has(img), .s-preview[data-cbg="checker"]:has(video), .lb-cbg[data-cbg="checker"], #segResult[data-cbg="checker"] {
  background-color: #c4c9d0;
  background-image:
    linear-gradient(45deg, #aeb4bd 25%, transparent 25%, transparent 75%, #aeb4bd 75%),
    linear-gradient(45deg, #aeb4bd 25%, transparent 25%, transparent 75%, #aeb4bd 75%);
  background-size: 22px 22px; background-position: 0 0, 11px 11px;
}
.s-preview[data-cbg="white"]:has(img), .s-preview[data-cbg="white"]:has(video), .lb-cbg[data-cbg="white"], #segResult[data-cbg="white"] { background: #fff; }
.s-preview[data-cbg="black"]:has(img), .s-preview[data-cbg="black"]:has(video), .lb-cbg[data-cbg="black"], #segResult[data-cbg="black"] { background: #000; }
.s-preview[data-cbg="custom"]:has(img), .s-preview[data-cbg="custom"]:has(video), .lb-cbg[data-cbg="custom"], #segResult[data-cbg="custom"] { background: var(--cbg, #888); }
/* wrapper do lightbox: fundo só atrás da imagem (encolhe ao conteúdo). A imagem
   fica transparente p/ o alpha revelar o fundo escolhido no canvas. */
.lb-cbg { display: inline-block; line-height: 0; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.lb-cbg img { display: block; max-width: 64vw; max-height: 80vh; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; }
/* miniatura do botão de ciclo reflete o modo atual */
/* swatch de fundo — controle independente do toolset (imagem e vídeo), sempre visível */
.canvas-bg { grid-area: 1 / 1; align-self: end; justify-self: end; margin: 12px; z-index: 8;
  width: 34px; height: 34px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(0,0,0,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.canvas-bg:hover { border-color: var(--accent); }
.cbg-sw { display: inline-block; width: 18px; height: 18px; border-radius: 5px; border: 1px solid rgba(255,255,255,.5); box-sizing: border-box; }
.cbg-sw[data-m="checker"] { background: #c4c9d0; background-image: linear-gradient(45deg,#8b93a0 25%,transparent 25%,transparent 75%,#8b93a0 75%), linear-gradient(45deg,#8b93a0 25%,transparent 25%,transparent 75%,#8b93a0 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; }
.cbg-sw[data-m="white"] { background: #fff; }
.cbg-sw[data-m="black"] { background: #000; }
.cbg-sw[data-m="custom"] { background: var(--cbg, #888); }
/* swatch do mini-photoshop (posicionado dentro do #segStage, que é position:relative) */
.canvas-bg-seg { position: absolute; right: 12px; bottom: 12px; z-index: 8; }
/* popup de fundo da transparência (xadrez/branco/preto + paleta + cor personalizada) */
/* faixa HORIZONTAL que "sai" à esquerda do quadradinho (drop retrátil, direita→esquerda) */
.cbg-pop { position: fixed; z-index: 90; background: var(--card); border: 1px solid var(--line-2); border-radius: 12px; padding: 7px 9px; box-shadow: 0 14px 40px rgba(0,0,0,.55); display: flex; flex-direction: row; align-items: center; gap: 8px; transform-origin: right center; animation: cbgSlide .2s cubic-bezier(.87,0,.13,1); }
@keyframes cbgSlide { from { opacity: 0; transform: translateX(12px) scaleX(.55); } to { opacity: 1; transform: none; } }
.cbg-row, .cbg-pal { display: flex; gap: 6px; flex-wrap: nowrap; align-items: center; max-width: none; }
.cbg-pal { border-left: 1px solid var(--line); padding-left: 8px; }
.cbg-opt { padding: 3px; border: 1.5px solid transparent; border-radius: 8px; background: transparent; cursor: pointer; line-height: 0; }
.cbg-opt:hover { background: rgba(255,255,255,.08); }
.cbg-opt.on { border-color: var(--accent); }
.cbg-opt .cbg-sw { width: 22px; height: 22px; }
.cbg-add { position: relative; width: 28px; height: 28px; display: grid; place-items: center; border: 1.5px dashed var(--line-2); border-radius: 8px; cursor: pointer; color: var(--muted); font-size: 16px; font-weight: 700; }
.cbg-add:hover { border-color: var(--accent); color: var(--ink); }
.cbg-add input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tile-3d, .tile-3d-mv, .lb-3d { --poster-color: transparent; }

/* destaque ao arrastar arquivos sobre um "+" de referência */
.ref-tile.tile-drop { border-color: var(--rt) !important; box-shadow: 0 0 0 3px var(--rt-soft); }
.ref-tile.tile-drop .ref-plus { color: var(--rt); }

/* toggle Imagem/Texto no módulo 3D */
.d3-modes { display: flex; gap: 6px; justify-content: center; margin: 0 auto 12px; }
.d3-mode { padding: 7px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.d3-mode:hover { color: var(--ink); }
.d3-mode.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }

/* Campo da URL do pod Flux no painel de administração */
.adm-podflux, .adm-podvol { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pf-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #d9534f; margin-left: 4px; vertical-align: middle; }
.pf-dot.on { background: #35c46a; }
.pf-dot.init { background: #f5c451; }

/* ID do pod no status (o Flux usa este pod) */
.pod-id { font-family: var(--mono, monospace); font-size: 11px; color: var(--muted); background: rgba(255,255,255,.05); padding: 1px 6px; border-radius: 5px; }

/* Botão de microfone (ditado por voz) nos campos de prompt */
.ta-mic { position: absolute; right: 6px; bottom: 6px; z-index: 3; width: 22px; height: 22px; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.14); border-radius: 6px; background: rgba(8,10,15,.55); backdrop-filter: blur(6px); color: var(--faint); cursor: pointer; opacity: .55; transition: opacity .14s, color .14s, border-color .14s; }
.ta-exp:hover .ta-mic { opacity: 1; }
.ta-mic:hover { color: var(--ink); border-color: var(--accent); }
.ta-mic .ic { width: 13px; height: 13px; }
.ta-mic.rec { opacity: 1; color: #fff; background: #e0343f; border-color: #e0343f; animation: micPulse 1s ease-in-out infinite; }
.ta-mic.busy { opacity: 1; color: var(--accent); border-color: var(--accent); animation: micBusyPulse 1s ease-in-out infinite; }   /* pulsa (sem girar) */
@keyframes micBusyPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes micPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(224,52,63,.5); } 50% { box-shadow: 0 0 0 5px rgba(224,52,63,0); } }

/* SFX: scrub fina e alinhada com as tracks das stems (offset = 34 lbl +8 +22 auto +8) */
.son-timeline.son-tl-sfx { height: 12px; margin-left: 80px; }
.son-timeline.son-tl-sfx .son-playhead { box-shadow: 0 0 5px var(--accent); }
/* links de download das stems em WAV */
.son-stem-dl { display: inline-block; margin: 2px 4px 0 0; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--line-2); background: var(--card); color: var(--accent-ink); font-size: 11px; font-weight: 700; text-decoration: none; }
.son-stem-dl:hover { border-color: var(--accent); color: var(--ink); }
/* editor de sonorização em foco: esconde galeria/fila -> timeline bem maior */
body.son-wide .gallery, body.son-wide .queue-panel { display: none; }
body.son-wide #tab-audio.tab.active { max-width: none; }

/* ===== Meshy 3D: campo checkbox + biblioteca de animações ===== */
.field.chk { flex-direction: row; align-items: center; gap: 7px; }
.field.chk input { width: 16px; height: 16px; accent-color: var(--accent); }
/* Biblioteca de animações (Meshy) — vive na Galeria › Biblioteca › Animações */
.anim-lib { display: flex; flex-direction: column; height: 100%; min-height: 0; }
/* só ocupa espaço quando a sub-aba Meshy está ativa; hidden -> some (não vaza nas outras abas) */
#animView:not([hidden]) { height: 100%; display: flex; flex-direction: column; min-height: 0; }
#animView[hidden] { display: none !important; }
#animView .anim-list { flex: 1 1 auto; min-height: 0; }
.anim-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; flex: 0 0 auto; }
.anim-bar strong { flex: 1 1 100%; font-size: 13px; color: var(--ink); }   /* título ocupa a 1ª linha; busca+categorias ficam lado a lado embaixo */
/* busca + categorias no padrão da interface: fundo OPACO escuro (o translúcido deixava o
   controle nativo branco vazar em input[type=search]), appearance none, mais baixos. */
.anim-bar input[type=search], .anim-bar select#animCat {
  -webkit-appearance: none; appearance: none; color-scheme: dark;
  background-color: #191b23; border: 1px solid var(--line); color: var(--ink);
  border-radius: 8px; padding: 7px 12px; font-size: 13px; font-weight: 500; height: 34px;
}
.anim-bar input[type=search] { flex: 1 1 120px; min-width: 0; }
/* largura FIXA: senão o select cresce com as categorias (labels longas) e quebra p/ baixo */
.anim-bar select#animCat { flex: 0 0 140px; width: 140px; padding-right: 30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.anim-count { font-size: 12px; color: var(--muted); font-weight: 700; }
.anim-clear { background: transparent; border: 1px solid var(--line-2); color: var(--ink); border-radius: 8px; padding: 6px 10px; cursor: pointer; font-size: 12px; }
.anim-clear:hover { border-color: var(--accent); }
/* mini-canvas: gif grande ocupando a largura toda, em cima */
.anim-stage { flex: 0 0 auto; height: 34vh; min-height: 200px; width: 100%; margin-bottom: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: #0c0d12; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
.anim-stage img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.anim-stage .anim-stage-empty { color: var(--muted); font-size: 12.5px; text-align: center; padding: 0 24px; line-height: 1.5; }
.anim-stage .anim-stage-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
/* mosaico de thumbnails: quadrados de altura FIXA (não empilham/esticam) */
.anim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); grid-auto-rows: 76px; gap: 8px; overflow-y: auto; padding-right: 4px; align-content: start; }
.anim-tile { position: relative; height: 76px; border: 2px solid transparent; border-radius: 9px; overflow: hidden; cursor: pointer; background: #15161c; }
.anim-tile img { width: 100%; height: 100%; object-fit: cover; display: block; background: #15161c; }
.anim-tile .anim-name { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; line-height: 1.15; padding: 3px 4px; background: linear-gradient(transparent, rgba(0,0,0,.82)); color: #fff; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anim-tile.noimg::before { content: '▶'; position: absolute; inset: 0; display: grid; place-items: center; color: #4a4d59; font-size: 20px; }
.anim-tile.sel { border-color: var(--accent); }
.anim-tile.preview { border-color: var(--accent-soft); }
.anim-tile .anim-pick { position: absolute; top: 4px; right: 4px; width: 18px; height: 18px; border-radius: 50%; background: rgba(0,0,0,.5); color: #fff; display: none; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; }
.anim-tile.sel .anim-pick { display: flex; background: var(--accent); }

/* adicionar por ID (mood laranja da aba 3D) */
.anim-idbar { display: flex; gap: 8px; margin-bottom: 10px; flex: 0 0 auto; }
.anim-idbar input { flex: 1; min-width: 120px; background: var(--card); border: 1px solid var(--line-2); color: var(--ink); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.anim-idbar button { flex: 0 0 auto; background: rgba(255,150,60,.16); border: 1px solid rgba(255,150,60,.5); color: rgba(255,190,130,.98); border-radius: 8px; padding: 7px 12px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.anim-idbar button:hover { background: rgba(255,150,60,.26); }

/* biblioteca como LISTA (678 GIFs não carregam como thumbnails) — só o preview grande roda o GIF */
.anim-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; padding-right: 4px; align-content: start; flex: 1 1 auto; min-height: 0; }
.anim-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--card); cursor: pointer; }
.anim-row:hover { border-color: rgba(255,150,60,.5); }
.anim-row.preview { border-color: rgba(255,150,60,.6); }
.anim-row.sel { border-color: #ff9a3c; background: rgba(255,150,60,.12); }
.anim-rn { display: flex; flex-direction: column; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
.anim-rn b { font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anim-rn em { font-style: normal; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anim-rid { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: rgba(255,185,120,.98); background: rgba(255,150,60,.14); border-radius: 6px; padding: 2px 7px; font-variant-numeric: tabular-nums; }

/* Visualizador de SVG (vetor do Recraft) — xadrez de transparência + escala nítida */
.media.svg { background:
  repeating-conic-gradient(#20222b 0% 25%, #171922 0% 50%) 0 / 20px 20px; position: relative; }
.media.svg img { width: 100%; height: 100%; object-fit: contain; }
.media.svg::after { content: "SVG"; position: absolute; left: 6px; bottom: 6px; font-size: 9px; font-weight: 800;
  letter-spacing: .5px; color: #fff; background: rgba(0,0,0,.55); padding: 2px 6px; border-radius: 6px; pointer-events: none; }
.lb-svg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; border-radius: 12px; overflow: hidden;
  background: repeating-conic-gradient(#20222b 0% 25%, #171922 0% 50%) 0 / 28px 28px; }
.lb-svg img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }

/* Sonorizar SFX — seletor Stems / Por efeito */
.son-sfxmode { display: flex; gap: 6px; margin-bottom: 10px; }
.son-sfxmode .asub { flex: 1; padding: 8px 10px; font-size: 12.5px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--muted); }
.son-sfxmode .asub.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
.son-sfxmode .asub:hover { border-color: var(--accent); }

/* Descrição — lightbox simples (tipo de descrição p/ a imagem do canvas) */
.desc-lb { position: fixed; inset: 0; z-index: 3000; display: none; align-items: center; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(3px); }
.desc-lb-card { position: relative; width: min(440px, 92vw); background: var(--panel, #14151c); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5); }
.desc-lb-x { position: absolute; top: 12px; right: 12px; width: 26px; height: 26px; padding: 0; border: none; background: transparent; color: var(--muted); cursor: pointer; }
.desc-lb-x:hover { color: var(--ink); }
.desc-lb-title { font-size: 16px; font-weight: 800; color: var(--ink); }
.desc-lb-sub { font-size: 12.5px; color: var(--muted); margin: 2px 0 14px; }
.desc-lb-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.desc-lb-types button { padding: 10px; font-size: 13px; font-weight: 700; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); }
.desc-lb-types button:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.desc-lb-types button.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); }
/* checkbox JSON (via Gemini) — não é mais um tipo de análise */
.desc-lb-json { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 700; color: var(--ink); cursor: pointer; user-select: none; }
.desc-lb-json input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.desc-lb-json span { color: var(--muted); font-weight: 600; }
.desc-lb-json b { color: var(--accent-ink); }
/* JSON ligado: motor/tipos ficam irrelevantes (Gemini estruturado) → esmaece */
.desc-lb-card.json-on #descLbEng, .desc-lb-card.json-on #descLbTypes { opacity: .38; pointer-events: none; }
.desc-lb-out { width: 100%; resize: vertical; background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; }
.desc-lb-acts { display: flex; justify-content: flex-end; margin-top: 10px; }
.desc-lb-copy { padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer; border: none; border-radius: 9px; background: var(--accent); color: #fff; }
.desc-lb-copy:disabled { opacity: .45; cursor: default; }
.desc-lb-hint { margin-top: 8px; }

/* aba 3D compartilha o MESMO layout das outras (mesma largura e galeria).
   Os params do 3D quebram linha (flex-wrap) para caber em 1280px. */
body.theme-3d .queue-panel { display: none; }

/* Chuva 3D: expande escondendo galeria/fila (igual upscale/sonorizar) */
body.rain-full .gallery, body.rain-full .queue-panel { display: none; }
body.rain-full #tab-3d.tab.active, body.rain-full #tab-chuva.tab.active { max-width: none; }
/* Chuva 3D como App: o #rainWrap ocupa a aba inteira */
#tab-chuva.tab.active { max-width: none; }
#tab-chuva .rain-wrap { display: flex; }
/* Chuva 3D (Rain Simulator embutido) — ocupa toda a área da aba, no mood AIHUB */
.rain-wrap { display: none; flex-direction: column; gap: 10px; height: calc(100vh - 130px); min-height: 560px; }
.rain-wrap .rain-top { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.rain-back { background: var(--card); border: 1px solid var(--line); color: var(--ink); border-radius: 9px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer; }
.rain-back:hover { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-soft); }
.rain-title { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.rain-title-app { font-size: 14px; color: var(--ink); font-weight: 800; letter-spacing: .12em; }
.rain-wrap iframe { flex: 1 1 auto; width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #0a0b11; display: block; }

/* card de parâmetros do 3D: campos COMPACTOS p/ caber horizontalmente (Meshy/Tripo);
   só quebra linha em telas bem estreitas, como rede de segurança (nunca corta) */
#tab-3d .s-params { flex-wrap: wrap; white-space: normal; align-items: center; row-gap: 10px; column-gap: 8px; }
#tab-3d .s-params .field { margin-bottom: 0; gap: 4px; }
#tab-3d .s-params .field > span { font-size: 11px; }
/* params do 3D SEM borda, iguais às demais abas (só modelo + submodelo têm caixa).
   Os títulos (rótulos) garantem a legibilidade que antes vinha da borda. */
#tab-3d .s-params .field select, #tab-3d .s-params .field input:not([type=checkbox]):not([type=range]) {
  -webkit-appearance: none; appearance: none;
  border: none; background-color: transparent; background-image: none;
  border-radius: 0; color: var(--ink); min-width: 0; text-align: center; text-align-last: center;
  padding: 4px 4px; font-size: 12.5px; cursor: pointer; font-weight: 700;
}
#tab-3d .s-params .field select:hover, #tab-3d .s-params .field input:hover { color: var(--accent-ink); }
#tab-3d .s-params .field input[type=range] { min-width: 108px; padding: 0; background: none; border: none; }
/* checkbox alinhado verticalmente com os selects (linha dos controles), não flutuando no topo */
#tab-3d .s-params .field.chk { align-self: auto; padding-bottom: 0; }
#tab-3d .s-params #d3RigH { width: 88px; min-width: 0; padding-right: 11px; }

/* ===== Pod ADM: dropdown enxuto ===== */
.pod-adm { display: flex; flex-direction: column; gap: 8px; }
.pod-nrow { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; padding: 8px 10px; cursor: pointer; color: var(--ink); text-align: left; width: 100%; }
.pod-nrow:hover { border-color: var(--accent); }
.pod-nrow strong { font-size: 13px; }
.pod-nstate { margin-left: auto; font-size: 11px; color: var(--muted); }
.pod-line { display: flex; align-items: center; gap: 8px; font-size: 12px; margin: 0; }
.pod-line .pod-k { color: var(--muted); min-width: 52px; }
.pod-line select.pod-select { flex: 1; margin: 0; min-width: 0; }
.pod-gpu-btn { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 10px; color: var(--ink); cursor: pointer; font-size: 12px; }
.pod-gpu-btn:hover { border-color: var(--accent); }
.pod-gpu-btn .cx { color: var(--muted); }
#podVolSel:disabled { opacity: .55; cursor: not-allowed; }
#podTerminate { width: 100%; margin-top: 2px; }

/* ===== Canvas da imagem: refs subdivididas com @Image ===== */
.ref-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: grid; grid-auto-rows: 1fr; gap: 4px; background: transparent; }
.ref-canvas.rc-1 { grid-template-columns: 1fr; }
.ref-canvas.rc-2 { grid-template-columns: 1fr 1fr; }
.ref-canvas.rc-3, .ref-canvas.rc-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.ref-cell { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; background: transparent; }
.ref-cell img, .ref-cell video { width: 100%; height: 100%; object-fit: contain; }
.ref-tag { position: absolute; left: 8px; bottom: 8px; font-size: 12px; font-weight: 800; color: #fff; background: rgba(0,0,0,.6); border: 1px solid var(--accent); border-radius: 7px; padding: 3px 9px; cursor: pointer; letter-spacing: .3px; }
.ref-tag:hover { background: var(--accent); }

/* ===== Player de vídeo (canvas + lightbox): mudo + barra mood + grab frame ===== */
.vplayer { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.vplayer video { width: 100%; height: 100%; object-fit: contain; display: block; cursor: pointer; }
.vp-mute { position: absolute; top: 10px; right: 52px; width: 34px; height: 34px; border-radius: 9px; border: none; background: rgba(0,0,0,.5); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 3; }
.vp-mute svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vp-mute .spk-wave { opacity: 0; }
.vp-mute.on { color: var(--accent); } .vp-mute.on .spk-wave { opacity: 1; }
.vp-mute:hover { background: rgba(0,0,0,.75); }
.vp-bar { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: linear-gradient(transparent, rgba(0,0,0,.72)); opacity: 0; transition: opacity .18s; z-index: 3; }
.vplayer:hover .vp-bar, .vplayer.paused .vp-bar { opacity: 1; }
.vp-play { width: 26px; height: 26px; flex: 0 0 auto; border: none; background: transparent; cursor: pointer; position: relative; }
.vp-play::before { content: ''; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 13px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.vplayer:not(.paused) .vp-play::before { border: none; width: 12px; height: 14px; border-left: 4px solid #fff; border-right: 4px solid #fff; }
.vp-scrub { flex: 1; height: 6px; background: rgba(255,255,255,.28); border-radius: 4px; cursor: pointer; position: relative; }
.vp-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); border-radius: 4px; }
.vp-scrub::after { content: ''; position: absolute; top: 50%; left: var(--pos, 0); }
.vp-time { font-size: 11px; color: #eaeaea; font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 74px; text-align: right; }
.vp-grab { width: 30px; height: 30px; flex: 0 0 auto; border: none; background: rgba(255,255,255,.12); border-radius: 8px; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vp-grab svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vp-grab:hover { background: var(--accent); }

/* thumbnail de vídeo carregado num ref-tile "+" (v2v) */
.ref-tile.has-vid { position: relative; }
.ref-tile.has-vid .ref-plus { opacity: 0; }
.ref-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; pointer-events: none; z-index: 0; }
/* thumb de ref de áudio = waveform (mini, não-interativo) */
.ref-wave { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; pointer-events: none; z-index: 0; background: rgba(53,196,106,.08); }
.ref-tile.has-audio .ref-plus { display: none; }
.ref-tile.has-vid .vimg-del { z-index: 2; }

/* Matte: log da instalação local */
.matte-log { max-height: 220px; overflow: auto; background: #0c0d12; border: 1px solid var(--line-2); border-radius: 10px; padding: 10px 12px; font-family: var(--mono, monospace); font-size: 11px; line-height: 1.5; color: #c7c9d1; white-space: pre-wrap; margin-top: 10px; }

/* Uploads: botão de extrair mídia de documento */
.up-extract { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.up-extract button { flex: 1; }

/* Matte: player dos frames usa o MESMO .vplayer do vídeo (barra idêntica); só a mídia é um <img> */
.ma-vplayer .ma-frameimg { width: 100%; height: 100%; object-fit: contain; display: block; background: #0c0d12; }
/* Matte: barra de progresso da extração no lugar do modelo */
/* barra de progresso com a contagem de frames ACOPLADA dentro dela (não flutua por cima) */
.ma-params .ma-prog { position: relative; width: 100%; height: 30px; border-radius: 9px; background: rgba(255,255,255,.08); overflow: hidden; }
.ma-params .ma-prog > i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent-soft); box-shadow: inset -1px 0 0 var(--accent); transition: width .25s ease; }
.ma-prog-lbl { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; font-size: 12.5px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }

/* Transcrição: waveform do áudio carregado */
.ts-wave { margin: 0 0 16px; background: var(--card); border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 10px; }
.ts-wave .wave { height: 54px; }

/* Galeria › aba Uploads */
.uploads-view { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 14px; }
/* drop de mídia no canvas (Finder/galeria → ref) */
.s-stage.canvas-drop { outline: 2px dashed var(--accent); outline-offset: -6px; }
/* (sem overlay escuro no arrasto — só o contorno tracejado acima) */
.s-stage { position: relative; }
/* color picker (Telas): swatch = só a cor + campo hex editável */
.color-field { display: inline-flex; align-items: center; gap: 8px; }
.color-field input[type=color] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--line-2); border-radius: 8px; background: none; cursor: pointer; }
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.color-field input[type=color]::-webkit-color-swatch { border: none; border-radius: 5px; }
.color-hex { width: 82px; background: var(--card); border: 1px solid var(--line-2); color: var(--ink); border-radius: 8px; padding: 6px 8px; font-size: 12.5px; font-family: ui-monospace, monospace; text-transform: uppercase; }
/* Telas: quadrado da cor 2x maior */
.sc-color-big input[type=color] { width: 64px; height: 40px; border-radius: 10px; }
/* Telas: valor HEX maior, centralizado logo abaixo do título */
#scColorHex { font-size: 17px; font-weight: 700; text-align: center; width: 112px; padding: 8px 10px; }
/* Telas: seletor de tipo de marcador (3 SVGs) — substitui o checkbox */
.sc-markers { display: inline-flex; gap: 6px; }
.sc-mk { width: 34px; height: 34px; display: grid; place-items: center; padding: 5px; cursor: pointer;
  border-radius: 9px; border: 1.5px solid var(--line-2); background: rgba(255,255,255,.05); transition: border-color .14s, background .14s; }
.sc-mk svg { width: 100%; height: 100%; }
.sc-mk:hover { border-color: var(--accent-soft); }
.sc-mk.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Projeção 2.5D */
.proj-wrap { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - 190px); min-height: 420px; }
.proj-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#pjFrame { flex: 1 1 auto; width: 100%; border: 1px solid var(--line-2); border-radius: 14px; background: #0c0d12; min-height: 0; }
.envato-bar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
/* sem backdrop-filter + fundo opaco: o Safari pinta o backdrop de branco dentro da view que rola */
.envato-bar input[type=search], .envato-bar select {
  backdrop-filter: none; -webkit-backdrop-filter: none; background-color: rgba(18,20,28,.96);
}
.envato-bar input[type=search] { flex: 1; min-width: 120px; border: 1px solid var(--line-2); color: var(--ink); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.env-tile .env-open { display: grid; place-items: center; text-decoration: none; font-size: 13px; }
.uploads-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.up-tile { position: relative; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; background: var(--card); cursor: pointer; }
.up-tile:hover { border-color: var(--accent); }
.up-th { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; background: #15161c; }
.up-th img { width: 100%; height: 100%; object-fit: cover; }
.up-kind { font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; color: #fff; padding: 4px 9px; border-radius: 6px; background: var(--accent); }
.up-kind.up-audio { background: #3a7d5c; } .up-kind.up-video { background: #7c5cff; } .up-kind.up-file { background: #555b68; }
.up-name { font-size: 10px; color: var(--muted); padding: 4px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; font-size: 11px; line-height: 1; opacity: 0; transition: opacity .15s; }
.up-tile:hover .up-del { opacity: 1; }

/* Seed Audio → vídeo: card em bloco (não herda o layout em linha do .s-prompt) */
.a-video-box { display: flex; flex-direction: column; gap: 12px; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; padding: 16px; }
.a-video-box .field { margin: 0; }
.a-video-box .gen-bar { margin: 0; }


/* Seed Audio: velocidade/volume/pitch juntos numa linha à direita, abaixo dos demais */
/* sliders (velocidade/volume/pitch) fluem INLINE na fileira de params (não como um bloco que quebra sozinho) */
.a-svp { display: contents; }
.a-svp .field { margin: 0; flex: 0 0 auto; }
.a-svp .field input[type=range] { width: 116px; min-width: 116px; }

/* Tripo Multiview: mini-tiles das vistas extras */
.tri-mv { display: flex; gap: 6px; }
.tri-mv .ref-tile.mini { width: 52px; height: 52px; flex: 0 0 auto; }

/* Lucy 2.5 Realtime (WebRTC): câmera + saída editada ao vivo, lado a lado */
.lucy-panel { display: flex; gap: 12px; align-items: stretch; padding: 12px; }
.lucy-panel[hidden] { display: none !important; }
.lucy-vid { position: relative; flex: 1 1 0; min-width: 0; border-radius: 12px; overflow: hidden; background: #0a0a0c; border: 1px solid var(--line); display: flex; }
.lucy-vid video { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16 / 9; }
.lucy-panel.mirror .lucy-vid video { transform: scaleX(-1); }   /* espelha câmera + resultado */
/* botão Mirror: canto inferior direito da janela da câmera, aparece só no hover */
.lucy-mirror { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: none; border-radius: 9px; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .16s ease, background .16s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lucy-vid:hover .lucy-mirror { opacity: 1; }
.lucy-mirror:hover { background: rgba(0,0,0,.75); }
.lucy-mirror.on { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lucy-mirror svg { width: 17px; height: 17px; }
/* botão Picture-in-Picture (destaca cada janela p/ flutuar / outro monitor) — canto inferior ESQUERDO */
.lucy-pip { position: absolute; left: 8px; bottom: 8px; z-index: 3; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: none; border-radius: 9px; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .16s ease, background .16s ease; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.lucy-vid:hover .lucy-pip { opacity: 1; }
.lucy-pip:hover { background: rgba(0,0,0,.75); }
.lucy-pip.on { color: var(--accent-ink); background: var(--accent-soft); box-shadow: inset 0 0 0 1.5px var(--accent); }
.lucy-pip svg { width: 17px; height: 17px; }
.lucy-status { position: absolute; bottom: 8px; right: 8px; z-index: 2; font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #cfcfd6; }
/* botão "Conectar" ao vivo pulsa em vermelho */
#vGenerate.lucy-live { background: #c0392b; border-color: #c0392b; color: #fff; }
#vGenerate.lucy-live:hover { background: #a93226; }
/* Lucy conectado: brilho suave pulsante (rosa do tema Controle) */
@keyframes lucyGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(236,90,158,.0), 0 0 16px 2px rgba(236,90,158,.35); }
  50%     { box-shadow: 0 0 0 3px rgba(236,90,158,.18), 0 0 30px 8px rgba(236,90,158,.75); }
}
#cLucyBtn.lucy-live { background: #ec5a9e; border-color: #ec5a9e; color: #fff; animation: lucyGlow 1.9s ease-in-out infinite; }
#cLucyBtn.lucy-live:hover { background: #e0468f; }
/* botão de tempo limite de conexão */
.lucy-limit { flex: 0 0 auto; height: 52px; padding: 0 14px; border-radius: 12px; cursor: pointer; white-space: nowrap;
  background: var(--panel2, rgba(255,255,255,.05)); color: var(--muted); font-size: 13px; font-weight: 600;
  border: 1px solid rgba(255,255,255,.12); transition: color .15s, border-color .15s, background .15s; }
.lucy-limit:hover { color: #fff; border-color: rgba(236,90,158,.5); background: rgba(236,90,158,.12); }
/* chip de custo em modo taxímetro (contando enquanto conectado) */
.cost-chip.metering { color: #ffd9ec; box-shadow: inset 0 0 0 1px rgba(236,90,158,.45); font-variant-numeric: tabular-nums; }
.cost-chip.metering::before { animation: lucyGlow 1.9s ease-in-out infinite; border-radius: 50%; }
/* ===== Card de modelo (lightbox bento: imagem 9:16 + texto = card 4:3) ===== */
.mcard-back { position: fixed; inset: 0; z-index: 95; display: none; place-items: center; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; }   /* popover ancorado — NÃO embaça a tela */
.mcard-back.open { display: grid; }
.mcard { position: relative; display: flex; height: min(66vh, 520px); aspect-ratio: 4 / 3; max-width: 94vw; background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); animation: mcardIn .22s cubic-bezier(.16,1,.3,1); }
@keyframes mcardIn { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
.mcard-img { flex: 0 0 auto; height: 100%; aspect-ratio: 9 / 16; background-size: cover; background-position: center; background-color: #0c0d12; }
.mcard-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 24px 26px; gap: 14px; overflow: auto; }
.mcard-head { display: flex; align-items: center; gap: 11px; }
.mcard-ic { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
.mcard-head strong { font-family: var(--serif); font-size: 22px; font-weight: 800; letter-spacing: -.3px; }
.mcard-desc { color: var(--ink); font-size: 14.5px; line-height: 1.62; margin: 0; }
/* seção "Variantes" do card — cada submodelo + pra que serve */
.mcard-vars { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.mcard-vars-t { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); margin-bottom: 2px; }
.mcv-row { display: grid; grid-template-columns: 128px 1fr; gap: 12px; align-items: baseline; font-size: 13px; line-height: 1.45; }
.mcv-row b { color: var(--accent-ink); font-weight: 800; }
.mcv-row span { color: var(--ink); }
.mcv-row.on { background: var(--accent-soft); border-radius: 8px; padding: 4px 8px; margin: -4px -8px; }
.mcv-row.on b::after { content: ' ·  atual'; color: var(--accent-ink); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; }
@media (max-width: 560px) { .mcv-row { grid-template-columns: 1fr; gap: 2px; } }
.mcard-x { position: absolute; top: 10px; right: 12px; z-index: 2; border: none; background: rgba(0,0,0,.42); color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 14px; line-height: 1; }
.mcard-x:hover { background: rgba(0,0,0,.68); }
.model-ic { cursor: default; pointer-events: none; }   /* cards de modelo descontinuados: ícone é só decorativo */

/* ===== Dropdown custom animado (modelos + submodelos) — reveal em exponential ease, fundo desfocado ===== */
/* dropdown NORMAL: o backdrop só captura o clique-fora — sem escurecer nem embaçar a tela */
.fd-backdrop { position: fixed; inset: 0; z-index: 120; opacity: 0;
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transition: opacity .36s cubic-bezier(.87,0,.13,1); }
.fd-backdrop.open { opacity: 1; }
.fd-panel { position: fixed; z-index: 121; min-width: 160px; max-height: 62vh; overflow: hidden;   /* sem barra por padrão (evita flicker no Safari); só rola quando .fd-scroll */
  padding: 6px; border-radius: 15px; border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, #1c1e2a, #12141c);   /* opaco: nada de blur no próprio painel */
  box-shadow: 0 26px 64px rgba(0,0,0,.58), inset 0 0 0 1px rgba(255,255,255,.05);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  transform-origin: var(--fd-origin, bottom center); opacity: 0; transform: translateY(-8px);
  transition: opacity .18s cubic-bezier(.16,1,.3,1), transform .28s cubic-bezier(.16,1,.3,1); }
.fd-panel.up { transform: translateY(12px); }   /* abrindo pra cima → sobe pro lugar (sem scale: evita flash da barra no Safari) */
.fd-panel.open { opacity: 1; transform: translateY(0); }
.fd-opt { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 11px;
  font-size: 14px; font-weight: 650; color: var(--ink); cursor: pointer; white-space: nowrap; user-select: none;
  opacity: 0; transform: translateY(7px);
  transition: opacity .2s cubic-bezier(.16,1,.3,1), transform .3s cubic-bezier(.16,1,.3,1), background .12s, color .12s; }
.fd-panel.open .fd-opt { opacity: 1; transform: translateY(0); }
.fd-opt:hover, .fd-opt.hl { background: var(--accent-soft); color: var(--accent-ink); }
.fd-opt.sel { background: rgba(255,255,255,.06); }
.fd-opt.sel::after { content: '✓'; margin-left: auto; padding-left: 14px; color: var(--accent); font-weight: 800; }
.fd-opt .fd-ic { width: 22px; height: 22px; border-radius: 6px; object-fit: cover; flex: 0 0 auto; background: rgba(255,255,255,.06); }
.fd-opt .fd-lb { text-transform: capitalize; }
/* cabeçalho: TÍTULO do parâmetro no topo do dropdown (fica fixo ao rolar) */
.fd-head { position: sticky; top: 0; z-index: 2; padding: 5px 12px 7px; margin: -2px -2px 4px;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--muted);
  text-align: center;   /* título centralizado no topo do card flutuante */
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, rgba(28,30,42,.99), rgba(24,26,36,.96)); }
.fd-head:empty { display: none; }
/* listas longas (+10 itens) rolam com a scrollbar da UI — o overflow é ligado por JS só APÓS a
   animação de entrada, senão o Safari pisca uma barra feia no primeiro frame */
.fd-panel.fd-scroll { scrollbar-width: thin; scrollbar-color: var(--accent-soft) transparent; }
.fd-panel::-webkit-scrollbar { width: 8px; }
.fd-panel::-webkit-scrollbar-track { background: transparent; margin: 6px 0; }
.fd-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.fd-panel::-webkit-scrollbar-thumb:hover { background: var(--accent-soft); background-clip: padding-box; }
.fd-panel.fd-scroll { padding-right: 3px; }   /* respiro p/ a barra quando há rolagem */

/* ===== Canvas do Seed Audio: 1 waveform por referência (igual ao canvas de imagem) ===== */
.aref-canvas { display: flex; flex-direction: column; justify-content: flex-end; gap: 12px; width: 100%; height: 100%; padding: 16px 18px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--accent-soft) transparent; }
.aref-canvas::-webkit-scrollbar { width: 8px; }
.aref-canvas::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.aref-wave-item { position: relative; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); }
.aref-wave-item .wave { height: 72px; }
.aref-wave-lb { position: absolute; top: 7px; left: 9px; z-index: 4; border: none; cursor: pointer;
  font-size: 11px; font-weight: 800; letter-spacing: .3px; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-ink); transition: background .14s, color .14s; }
.aref-wave-lb:hover { background: var(--accent); color: #fff; }

/* ---- App Separate (fal-ai/sam-audio/separate): saídas isolado + restante ---- */
.sep-results { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.sep-out { display: flex; align-items: center; gap: 10px; }
.sep-out-lbl { flex: 0 0 66px; font-size: 11px; font-weight: 800; letter-spacing: .3px;
  text-transform: uppercase; color: var(--accent-ink, #35c46a); }
.sep-out audio { flex: 1 1 auto; height: 34px; }

/* ---- Upscale: entradas separadas imagem (azul) / vídeo (roxo) ---- */
.up-inputs { display: flex; gap: 14px; align-items: flex-start; }
.up-in.up-in-img { --up-c: #2f8fff; }
.up-in.up-in-vid { --up-c: #7c5cff; }
.up-in { border-color: color-mix(in srgb, var(--up-c) 60%, var(--line)) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--up-c) 30%, transparent); }
.up-in .ref-plus { color: var(--up-c); }
.up-in-img + .ref-cap, .ref-cap-wrap:has(.up-in-img) .ref-cap { color: #2f8fff; }
.ref-cap-wrap:has(.up-in-vid) .ref-cap { color: #7c5cff; }
/* uma entrada carregada → a outra fica esmaecida e inerte */
.ref-tile.up-locked { opacity: .3; filter: grayscale(1); pointer-events: none; }

/* Transcrição: rodapé de exportadores (SRT/VTT/TXT/AE/Copiar) */
.ts-exports { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; justify-content: flex-end; }

/* Lucy: nada de "Esvaziar o visualizador" — esconde o x quando o painel da câmera está ativo */
.s-stage:has(.lucy-panel:not([hidden])) > .preview-clear { display: none !important; }

/* App FF (ffmpeg): seletor de modo por ícone + panes */
/* Cabeça de modelo nos APPS de tela cheia (Upscale, Segmentar…).
   O relocateModel() move logo+select pra .play-model-head em TODO .studio, mas as
   regras que posicionam o ícone eram :not(.up-active) — nos apps o <img> ficava
   solto numa linha acima do nome. Aqui vai o mesmo desenho, sem aquele escopo. */
body.up-active .studio > .play-model-head { position: relative; display: block; margin-bottom: 6px; line-height: 0; }
body.up-active .studio > .play-model-head > .model-select {
  width: 100%; max-width: none; font-size: 22.5px; font-weight: 700; line-height: 1.1;
  height: auto; min-height: 0; padding: 4px 0 4px 54px; background: transparent; background-image: none;
  border: 0; box-shadow: none; border-radius: 0; color: var(--ink); -webkit-appearance: none; appearance: none; text-transform: none;
}
body.up-active .studio > .play-model-head > .model-select:hover { border: 0; box-shadow: none; }
body.up-active .studio > .play-model-head > .model-ic {
  /* !important porque o JS grava position:relative INLINE no <img> */
  position: absolute !important; left: 4px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; object-fit: contain; margin: 0; z-index: 2;
}

/* FF — mesma anatomia do Upscale: palco grande com as refs por cima, controles no rodapé. */
.ff-studio .s-preview { display: grid; place-items: center; }
.ff-studio .s-preview video, .ff-studio .s-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.ff-studio .s-preview audio { position: relative; width: min(80%, 480px); }
.ff-inputs .ff-in-vid { --up-c: #7c5cff; }
.ff-inputs .ff-in-aud { --up-c: #2fbf71; }
.ff-inputs .ff-in-srt { --up-c: #e0a33a; }
.ref-cap-wrap:has(.ff-in-vid) .ref-cap { color: #7c5cff; }
.ref-cap-wrap:has(.ff-in-aud) .ref-cap { color: #2fbf71; }
.ref-cap-wrap:has(.ff-in-srt) .ref-cap { color: #e0a33a; }
/* ref que o modo atual não aceita: SOME (só a mídia aceita fica à vista) */
.ff-inputs .ref-cap-wrap.ff-off { display: none !important; }
/* modos: ícone + rótulo */
/* os 4 modos ficam SEMPRE na mesma linha: a barra cresce pra caber, em vez de
   espremê-los em coluna (flex:1 1 100% dava 100% da largura do próprio conteúdo). */
.ff-modes { display: flex; gap: 8px; flex-wrap: nowrap; flex: 0 0 auto; }
.ff-mode { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 12px; cursor: pointer; transition: .15s; font: inherit; }
.ff-mode span { font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.ff-mode:hover { color: var(--ink); border-color: var(--accent-soft); }
.ff-mode.on { color: #fff; background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.ff-mode svg { width: 18px; height: 18px; flex: 0 0 auto; }
.ff-params { flex-wrap: wrap !important; overflow: visible !important; white-space: normal !important; row-gap: 10px; align-items: center; }
/* A BARRA INFERIOR TEM SEMPRE A MESMA ALTURA, em qualquer módulo.
   Antes só a casca (.up-controls) estava travada; o card de parâmetros por dentro
   variava (66 · 78 · 87px) e era ele que o olho vê mudando de tamanho.
   Agora o card reserva a altura do maior módulo (Cortar, com a régua) e o conteúdo
   fica centrado — módulos com menos controles só sobra ar, não encolhem a barra. */
#tab-ff .up-controls { min-height: 161px; align-content: flex-start; }
.ff-params { min-height: 88px; height: 88px; align-content: center; box-sizing: border-box; }
.ff-params .ff-p-trim { flex: 1 1 260px; min-width: 220px; margin-bottom: 0; }
.ff-params .ff-p-trim .trim-track { height: 38px; }
/* a régua do Cortar é o módulo mais alto: some com a margem das labels pra caber
   na mesma altura dos outros sem esticar a barra */
.ff-params .ff-p-trim .trim-labels { margin-top: 3px; }
/* refs do FF: hover-only, como no Upscale (pedido: "só aparecem no hover") */
.ff-result { margin-top: 14px; }
.ff-result video, .ff-result img { border-radius: 10px; display: block; max-width: 100%; }
.ff-result audio { width: 100%; }

/* Meshy anim: chips dos Animation Action Ids (ao lado de Altura) */
.anim-ids { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 30px; max-width: 320px; }
.anim-ids-empty { font-size: 11.5px; color: var(--muted); }
.anim-id-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: rgba(255,190,130,.98); background: rgba(255,150,60,.16); border: 1px solid rgba(255,150,60,.5); border-radius: 999px; padding: 3px 4px 3px 9px; font-variant-numeric: tabular-nums; }
.anim-id-x { border: none; background: rgba(255,150,60,.2); color: rgba(255,200,150,.98); width: 16px; height: 16px; border-radius: 50%; cursor: pointer; font-size: 13px; line-height: 1; display: grid; place-items: center; }
.anim-id-x:hover { background: #ff9a3c; color: #1a1205; }

/* Fatiador: grade de recortes */
.fat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; margin-top: 14px; }
.fat-cell { position: relative; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0c0d12; cursor: pointer; aspect-ratio: 1; display: grid; place-items: center; }
.fat-cell img { width: 100%; height: 100%; object-fit: contain; }
.fat-cell:hover { border-color: var(--accent); }
.fat-lbl { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 7px; font-size: 10.5px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Lightbox de preços do fal */
.fp-back { position: fixed; inset: 0; z-index: 120; background: rgba(6,7,10,.72); backdrop-filter: blur(6px); display: none; place-items: center; padding: 30px; }
.fp-back.open { display: grid; }
.fp-modal { width: min(920px, 96vw); max-height: 88vh; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line-2); border-radius: 16px; box-shadow: 0 30px 90px rgba(0,0,0,.6); overflow: hidden; }
.fp-top { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.fp-top strong { font-family: var(--serif); font-size: 15px; }
.fp-modes { display: flex; gap: 6px; margin-left: auto; }
.fp-mode { border: 1px solid var(--line-2); background: var(--card-2); color: var(--muted); border-radius: 9px; padding: 6px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.fp-mode.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.fp-x { border: none; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.fp-x:hover { background: var(--card-2); color: var(--ink); }
.fp-x .ic { width: 16px; height: 16px; }
.fp-body { overflow-y: auto; padding: 10px 16px 18px; }
.fp-group-h { font-family: var(--serif); font-weight: 800; font-size: 13px; color: var(--accent-ink, var(--ink)); text-transform: uppercase; letter-spacing: .05em; margin: 16px 0 6px; }
.fp-head, .fp-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 12px; align-items: center; padding: 7px 6px; }
.fp-head { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); border-bottom: 1px solid var(--line); }
.fp-head-top { background: var(--card); }
.fp-head span:last-child, .fp-row .fp-price { text-align: right; justify-self: end; }
.fp-row { border-bottom: 1px solid rgba(255,255,255,.05); font-size: 13px; }
.fp-row:hover { background: rgba(255,255,255,.03); }
.fp-ic { width: 22px; height: 22px; object-fit: contain; }
.fp-name { font-weight: 600; color: var(--ink); }
.fp-price { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* cor por provedor: fal = amarelo · Google = azul · pod/externo = cinza */
/* sub-linha de totais por duração (vídeo cobrado por segundo) */
.fp-durs { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 3px 6px 8px 38px; margin-top: -3px; border-bottom: 1px solid rgba(255,255,255,.05); }
.fp-durs span { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fp-durs b { color: var(--ink); font-weight: 700; margin-left: 1px; }
.fp-row.prov-fal .fp-price { color: #f2c31d; }
.fp-row.prov-google .fp-price { color: #4d9fff; }
.fp-row.prov-local .fp-price, .fp-row.prov-ext .fp-price { color: var(--muted); }

/* Projeção (App WebGL) — iframe em tela cheia, igual ao Chuva 3D */
body.proj-full .gallery, body.proj-full .queue-panel { display: none; }
body.proj-full #tab-projecao.tab.active { max-width: none; }
.proj-wrap { display: flex; flex-direction: column; gap: 0; height: calc(100vh - var(--topbar-h) - 16px); min-height: 560px; }
.proj-wrap .rain-top { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.proj-wrap iframe { flex: 1 1 auto; width: 100%; border: 1px solid var(--line); border-radius: 14px; background: #0a0b11; display: block; }

/* ===================== OUTFIT (troca de roupa) ===================== */
.of-params { display: block; }
.of-params .field-lbl { display: block; font-size: 12px; color: var(--muted); margin-bottom: 9px; }
.of-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.ref-tile.of-slot { position: relative; background-size: cover; background-position: center; }
.ref-tile.of-slot.has-img { border-color: var(--accent); }
.ref-tile.of-slot.has-img .ref-plus { display: none; }
.of-slot .of-del { position: absolute; top: 2px; right: 2px; display: none; place-items: center; width: 16px; height: 16px; padding: 0;
  border-radius: 50%; background: rgba(0,0,0,.6); border: 0; cursor: pointer; }
.of-slot.has-img .of-del { display: grid; }
.of-slot .of-del .ic { width: 10px; height: 10px; color: #fff; }

/* ===== Leap Motion (Controle) — preview ao vivo das mãos ===== */
#cLeapStage { position: relative; min-height: 380px; background: #0e1016; border-radius: 14px; overflow: hidden; }
#cLeapCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.leap-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 82%; text-align: center;
  color: rgba(255,255,255,.62); font-size: 13px; line-height: 1.5; pointer-events: none; z-index: 2; }
.leap-status.warn { color: #ffb4a2; }
#cLeapCanvas3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.leap-hud { position: absolute; left: 10px; top: 8px; z-index: 3; pointer-events: none;
  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: rgba(255,255,255,.6);
  background: rgba(0,0,0,.28); padding: 3px 7px; border-radius: 6px; }
.leap-split-line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.22);
  box-shadow: 0 0 8px rgba(0,0,0,.5); z-index: 3; pointer-events: none; display: none; }
/* Scail 2: TUDO numa linha só (junto do seletor) — selects em largura natural (encolhem se preciso),
   e os 4 campos numéricos (Passos/Guidance/Shift/Seed) bem apertados, pois têm nome e valor curtos */
#cMotionStudio .s-params { flex-wrap: nowrap !important; }
#cScailOpts { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: nowrap; gap: 4px 7px; align-items: flex-start; }
#cScailOpts .field { margin-bottom: 0; min-width: 0; gap: 3px; }
#cScailOpts .field > span { font-size: 9.5px; letter-spacing: .2px; }
#cScailOpts .field:has(select) { flex: 0 1 auto; }
#cScailOpts .field:has(select) > select { min-width: 0; padding-left: 6px; padding-right: 15px; }
#cScailOpts .field:has(input[type=number]) { flex: 0 0 auto; }
#cScailOpts .field:has(input[type=number]) > input { width: 34px; padding: 0 2px; text-align: center; }
/* botão Conectar/Desconectar no canto sup. direito do canvas */
.leap-conn { position: absolute; right: 10px; top: 8px; z-index: 4; cursor: pointer;
  font: 600 11px/1 ui-sans-serif, system-ui, sans-serif; color: #eaeaf0;
  background: rgba(0,0,0,.42); border: 1px solid rgba(255,255,255,.18); border-radius: 8px; padding: 6px 10px;
  transition: background .15s, border-color .15s; }
.leap-conn:hover { background: rgba(0,0,0,.6); border-color: rgba(255,255,255,.34); }
/* estado gravando no botão de baixo */
.gen-bar-btn.recording { background: #e23b3b; border-color: #e23b3b; animation: leapRecPulse 1.1s ease-in-out infinite; }
@keyframes leapRecPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(226,59,59,.5); } 50% { box-shadow: 0 0 0 6px rgba(226,59,59,0); } }

/* ============================================================
   MODO PLAYGROUND — switch no topbar + reflow (não-destrutivo)
   ============================================================ */
.lay-switch { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lay-switch .lay-opt { background: transparent; border: 0; color: var(--muted); font: 600 11px/1 ui-sans-serif, system-ui, sans-serif; padding: 6px 11px; cursor: pointer; transition: background .15s, color .15s; }
.lay-switch .lay-opt.active { background: var(--accent); color: #fff; }
.lay-switch .lay-opt:not(.active):hover { color: var(--ink); }

/* legenda dos tiles: escondida no Clássico */
.tile-cap { display: none; }
.tc-chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); white-space: nowrap; }
.tc-dim { color: var(--faint); }

/* Playground só nas abas de geração (fora Apps e ferramentas fullscreen) */
body.mode-play:not(.on-apps):not(.up-active) .workspace { max-width: none; align-items: stretch; }
body.mode-play:not(.on-apps):not(.up-active) .main { flex: 0 0 clamp(340px, 30vw, 460px) !important; overflow-y: auto; height: calc(100vh - var(--topbar-h)); }
body.mode-play:not(.on-apps):not(.up-active) .gallery { display: flex !important; flex: 1 1 auto !important; max-width: none !important; width: auto !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio { height: auto; min-height: calc(100vh - var(--topbar-h) - 30px); }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage { flex: 0 0 auto; max-height: 46vh; }

/* feed: uma coluna de cards grandes = mídia + legenda (prompt/recursos) */
body.mode-play .gallery-col.mode-col { display: flex !important; flex-direction: column !important; column-count: auto !important; gap: 14px !important; }
body.mode-play .gallery-col.mode-col .tile { display: grid !important; grid-template-columns: minmax(0, 46%) 1fr !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border: 1px solid var(--line) !important; border-radius: 14px !important; overflow: hidden; background: var(--panel); }
body.mode-play .gallery-col.mode-col .tile .media { position: relative; width: auto !important; height: auto !important; flex: none !important; aspect-ratio: 16 / 9; border-radius: 0 !important; }
body.mode-play .gallery-col.mode-col .tile .media img, body.mode-play .gallery-col.mode-col .tile .media video { width: 100% !important; height: 100% !important; object-fit: cover !important; }
body.mode-play .gallery-col.mode-col .tile .tile-cap { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; min-width: 0; }
body.mode-play .tc-prompt { font-size: 13.5px; line-height: 1.5; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
body.mode-play .tc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
body.mode-play .gallery-col.mode-col .tile .tile-actions { opacity: 1; }




/* ============================================================================
   PLAYGROUND — painel de params: UM parâmetro por linha (coluna).
   Containers dinâmicos = flex-column REAIS (respeitam [hidden]) — SEM display:contents
   (era o que bugava o gap no Safari). Controles em largura total → cabe o texto,
   acabam as reticências. Rótulo pequeno em cima. Base já está limpa (bloco único).
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params {
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
  align-items: stretch !important; align-content: normal !important; justify-content: flex-start !important;
  gap: 8px !important; height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; overflow: visible !important;
}
/* containers dinâmicos → coluna real, um campo por linha.
   GUARDA DE VISIBILIDADE: o app esconde campos por modelo com [hidden] E com
   style="display:none" (helpers show()) — o display:!important daqui NÃO pode
   ressuscitar nada escondido, senão todos os params de todos os modelos aparecem. */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params #iApiDims:not([hidden]):not([style*="display: none"]):not([style*="display:none"]),
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params #iRunpodFields:not([hidden]):not([style*="display: none"]):not([style*="display:none"]),
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .row:not([hidden]):not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important;
  gap: 8px !important; margin: 0 !important; padding: 0 !important; grid-template-columns: none !important; width: 100% !important;
}
/* par Largura/Altura continua lado a lado (2 relacionados, não é sujeira) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .dim-pair:not([hidden]):not([style*="display: none"]):not([style*="display:none"]) { display: flex !important; flex-direction: row !important; gap: 8px !important; width: 100% !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .dim-pair .field { flex: 1 1 0 !important; }
/* campo: rótulo em cima + controle full-width, altura natural.
   :not(.chk) — o CHECKBOX é a exceção universal da plataforma: caixinha à esquerda e
   rótulo À DIREITA, na mesma linha. Sem esse escape, esta regra (bem específica) vencia
   e jogava o texto pra baixo do checkbox em alguns painéis (ex.: Kling Motion no Controle). */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field:not(.chk):not([hidden]):not([style*="display: none"]):not([style*="display:none"]) {
  display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important;
  /* mata o CHIP do clássico (.field:has(>span) com flex-basis/width = --chip-w 118px):
     na COLUNA o flex-basis vira ALTURA — era o vão gigante entre os parâmetros */
  flex: 0 0 auto !important; min-width: 0 !important; max-width: none !important;
  width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  margin: 0 !important; padding: 0 !important; gap: 3px !important; border: 0 !important; overflow: visible !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field:not(.chk) > span {
  order: -1 !important; flex: none !important; width: auto !important; max-width: none !important; margin: 0 !important;
  font-size: 10px !important; font-weight: 600 !important; letter-spacing: .3px !important; text-transform: uppercase !important;
  color: var(--muted) !important; text-align: left !important; white-space: nowrap !important; overflow: visible !important; text-overflow: clip !important;
}
/* controles full-width → cabe o texto, sem reticências */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field > *:not(span),
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > select {
  width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; margin: 0 !important; text-overflow: clip !important;
}
/* pele flat + altura de controle uniforme */
body.mode-play:not(.on-apps):not(.up-active) .studio .node { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; border-radius: 0 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params select,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .dim-sel,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .model-select,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params input:not([type=checkbox]) {
  height: 32px !important; padding: 0 10px !important; font-size: 12.5px !important;
  background: #20222b !important; background-image: none !important; border: 1px solid var(--line) !important; border-radius: 7px !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  color: var(--ink) !important; text-transform: none !important; font-weight: 400 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .model-select { height: 36px !important; font-weight: 600 !important; }
/* textarea embutido mantém altura própria */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field > textarea { height: auto !important; min-height: 60px !important; padding: 8px 10px !important; }
/* checkbox-param: rótulo esq + toggle dir (não empilha) */
/* (consolidado no bloco final: [checkbox] Rótulo, à esquerda) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field.chk > input[type=checkbox] { width: 38px !important; height: 22px !important; flex: 0 0 auto !important; }
/* canvas: mesma altura em todas as abas */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage { flex: 0 0 auto !important; height: 240px !important; min-height: 240px !important; max-height: 240px !important; }

/* Playground: submodelo SEM título (imagem: #iNanoVer/#iKreaVer/… filhos diretos · vídeo: selects de modo
   dentro de .field sem <span>) = MESMA altura do chip de modelo (36px). Vence as bases (52px / 100%). */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > select.dim-sel,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field:not(:has(> span)) > select.dim-sel {
  height: 36px !important; min-height: 36px !important; max-height: 36px !important;
}

/* Playground: sem a barra de ferramentas vertical sobre o canvas (upscale, recortar, fundo, etc.) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage > .canvas-tools { display: none !important; }

/* Playground: prompt em COLUNA — prompt, negativo e card de LoRA cada um em SUA linha */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt {
  flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 8px !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt > .field { flex: 0 0 auto !important; width: 100% !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt .lora-card {
  width: 100% !important; max-width: none !important; min-width: 0 !important; flex: 0 0 auto !important; margin: 0 !important; align-items: flex-start !important;
}

/* Playground: barra inferior SEMPRE em uma linha (quantidade · custo · Gerar), flat */
body.mode-play:not(.on-apps):not(.up-active) .studio .gen-bar {
  flex-wrap: nowrap !important; gap: 8px !important; margin-top: 4px !important; padding: 0 !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .gen-qty { flex: 0 0 46px !important; width: 46px !important; height: 40px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .gen-bar .cost-chip { flex: 0 0 auto !important; height: 40px !important; padding: 0 12px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .gen-bar-btn { flex: 1 1 auto !important; min-width: 0 !important; height: 40px !important; }

/* Playground: barra (qtd/custo/Gerar) logo APÓS o canvas — depois vêm params e prompt */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage  { order: 0 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-gerar  { order: 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { order: 2 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt { order: 3 !important; }

/* Playground: slots "+" de LoRA com título "LoRA" em cima + centralizados no painel */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt .lora-card { align-items: center !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt .lora-card::before {
  content: "LoRA"; display: block; width: 100%; text-align: center;
  font-size: 10px; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt .lora-list { justify-content: center !important; width: 100% !important; }

/* Playground: título do MODELO 2x maior e SEM borda (cara de título); SUBMODELO um pouco maior, sem borda */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .model-select {
  font-size: 25px !important; font-weight: 700 !important; height: auto !important; padding: 2px 0 !important;
  background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: var(--ink) !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > select.dim-sel,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field:not(:has(> span)) > select.dim-sel {
  font-size: 15px !important; font-weight: 600 !important; height: auto !important; min-height: 0 !important; max-height: none !important; padding: 2px 0 !important;
  background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
}

/* Playground: logo do modelo à ESQUERDA do nome (ícone é irmão anterior ao select) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { position: relative !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > .model-ic {
  position: absolute !important; left: 0 !important; top: 3px !important;
  width: 30px !important; height: 30px !important; margin: 0 !important; padding: 0 !important; display: block !important; border-radius: 7px !important; object-fit: contain !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > .model-select { padding-left: 40px !important; }

/* Playground: nome do modelo a 70% (~17.5px) + logo centralizado verticalmente na linha do nome */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .model-select {
  font-size: 17.5px !important; height: 30px !important; line-height: 30px !important; padding: 0 0 0 38px !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > .model-ic {
  top: 7px !important; left: 3px !important; width: 24px !important; height: 24px !important; object-fit: contain !important;
}

/* Ajuste fino Playground: logo mais baixo · submodelo colado no modelo · borda só no hover */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > .model-ic { top: 10px !important; width: 22px !important; height: 22px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > select.dim-sel { margin-top: -5px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .model-select:hover,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > select.dim-sel:hover,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field:not(:has(> span)) > select.dim-sel:hover {
  box-shadow: inset 0 0 0 1px var(--line) !important; border-radius: 7px !important;
}

/* Playground: 20px abaixo dos parâmetros */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { padding-bottom: 20px !important; }
/* checkbox-params: checkbox À ESQUERDA do nome · nome MAIÚSCULO · tudo alinhado à esquerda */
/* (consolidado no bloco final) */

/* toggle de ÁUDIO (vídeo): só o alto-falante (bloco final) */
body.mode-play:not(.on-apps):not(.up-active) .studio #vDurRow .dim-pair { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
/* (removido: esticava o toggle de áudio em largura total — ele é só o ícone) */
/* (removido: bloco antigo que virava o toggle de áudio num checkbox "[■] ÁUDIO".
   O toggle de som é SEMPRE o ícone de alto-falante on/off — regra no bloco final.) */

/* Ajuste: nome do modelo 90% (22.5px) + ícone 5px mais baixo */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .model-select { font-size: 22.5px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > .model-ic { top: 15px !important; }

/* Playground: nome do submodelo a 12px do nome do modelo (gap 8px + 4px de margem) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > select.dim-sel { margin-top: 4px !important; }

/* Playground: submodelo a 4px do nome do modelo (gap 8px − 4px de margem) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > select.dim-sel { margin-top: -4px !important; }

/* Playground: box do modelo justo ao texto (2px de padding, altura natural) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .model-select {
  height: auto !important; min-height: 0 !important; line-height: 1.1 !important; padding: 2px 0 2px 38px !important;
}

/* Playground: logo do modelo 2x maior (44px), centralizado na linha do nome */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > .model-ic { width: 44px !important; height: 44px !important; top: -7px !important; left: 0 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .model-select { padding-left: 52px !important; }

/* ============================================================================
   Playground: MODELO (logo+nome) movido pra ANTES do canvas no stack (via JS).
   Header no fluxo normal (order:-1). Sem borda nem no hover. Submodelo fica na
   área de params como parâmetro NORMAL (box flat), centralizado.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head {
  order: -1 !important; position: relative !important; display: block !important; width: 100% !important; min-height: 44px !important; margin: 0 0 2px 0 !important; padding: 0 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select {
  width: 100% !important; font-size: 22.5px !important; font-weight: 700 !important; line-height: 1.1 !important;
  height: auto !important; min-height: 0 !important; padding: 4px 0 4px 54px !important;
  background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; color: var(--ink) !important;
  -webkit-appearance: none !important; appearance: none !important; text-transform: none !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select:hover { border: 0 !important; box-shadow: none !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-ic {
  position: absolute !important; left: 4px !important; top: 50% !important; transform: translateY(-50%) !important;
  width: 42px !important; height: 42px !important; object-fit: contain !important; margin: 0 !important; z-index: 2 !important;
}
/* submodelo = parâmetro NORMAL: box flat com borda, centralizado */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > select.dim-sel,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field:not(:has(> span)) > select.dim-sel {
  position: static !important; margin: 0 !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important;
  font-size: 12.5px !important; font-weight: 400 !important; text-align: center !important; text-align-last: center !important;
  background: #20222b !important; background-image: none !important; border: 1px solid var(--line) !important; border-radius: 7px !important; padding: 0 10px !important; box-shadow: none !important; width: 100% !important;
}

/* Playground: head vira COLUNA (nome do modelo + submodelo abaixo, antes do canvas) */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head { display: flex !important; flex-direction: column !important; gap: 5px !important; min-height: 0 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > select.dim-sel {
  width: 100% !important; height: 30px !important; min-height: 30px !important; max-height: 30px !important; margin: 0 !important;
  font-size: 12.5px !important; font-weight: 400 !important; text-align: center !important; text-align-last: center !important;
  background: #20222b !important; background-image: none !important; border: 1px solid var(--line) !important; border-radius: 7px !important; padding: 0 10px !important; box-shadow: none !important;
  -webkit-appearance: none !important; appearance: none !important;
}
/* logo 5px acima do centro da linha do nome */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-ic { top: 11px !important; transform: translateY(-50%) !important; }

/* Playground: título do modelo 3px acima (ícone fica onde está) */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select { margin-top: -3px !important; }

/* ===== Playground: prompt rich-text (thumbnail inline das refs @ImageN/@VideoN) ===== */
.rich-prompt { display: none; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt .rich-prompt {
  display: block !important; width: 100% !important; min-height: 60px !important; padding: 8px 10px !important;
  font-family: var(--sans); font-size: 13px !important; line-height: 1.55 !important; color: var(--ink) !important;
  background: #20222b !important; border: 1px solid var(--line) !important; border-radius: 7px !important;
  white-space: pre-wrap; overflow-wrap: anywhere; outline: none; box-shadow: none !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt .rich-prompt:focus { border-color: var(--accent) !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt .rich-prompt:empty:before { content: attr(data-ph); color: var(--muted); }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt #iPrompt,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt #vPrompt { display: none !important; }
/* chip: [thumb quadrado, altura da linha] @Image1 */
.rp-ref { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; }
.rp-thumb { width: 1.15em; height: 1.15em; border-radius: 3px; object-fit: cover; display: inline-block; vertical-align: middle; flex: 0 0 auto; background: rgba(255,255,255,.06); }
.rp-thumb-x { background: rgba(255,255,255,.14); }
.rp-tok { color: var(--accent-ink); font-weight: 600; }

/* Uploads: thumbs no padrão da galeria (mídia inteira, aspecto natural) — corrige os filetes verticais */
.up-th { aspect-ratio: auto !important; display: block !important; min-height: 54px; text-align: center; background: #15161c; }
.up-th img, .up-th video { width: 100% !important; height: auto !important; display: block; object-fit: contain; }
.up-th .up-kind { display: inline-block; margin: 16px 0; }

/* Playground feed: card VERTICAL — imagem centralizada em cima + faixa de infos (50px) embaixo; chips cinza */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile {
  display: flex !important; flex-direction: column !important; grid-template-columns: none !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .media {
  width: 100% !important; height: auto !important; aspect-ratio: auto !important;
  display: flex !important; align-items: center !important; justify-content: center !important; background: #0c0d12;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .media img,
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .media video {
  width: 100% !important; height: auto !important; max-height: 60vh !important; object-fit: contain !important; margin: 0 auto !important; display: block !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .tile-cap {
  height: 50px !important; min-height: 50px !important; max-height: 50px !important;
  flex-direction: row !important; align-items: center !important; gap: 8px !important; padding: 0 12px !important; overflow: hidden !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .tc-prompt {
  -webkit-line-clamp: 2 !important; font-size: 12px !important; line-height: 1.35 !important; flex: 1 1 auto !important; min-width: 0 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .tc-meta { margin-top: 0 !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; }
/* chip de info da geração: cinza normal (sem mood da aba) */
.tc-chip { background: #2a2d36 !important; }

/* Playground · MOSAICO (mode-grid): grade de quadrados IGUAIS, conteúdo ajustado (cover) */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important; column-count: auto !important; gap: 8px !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile {
  display: block !important; aspect-ratio: 1 / 1 !important; width: 100% !important; margin: 0 !important; break-inside: auto !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .media {
  width: 100% !important; height: 100% !important; aspect-ratio: auto !important; display: block !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .media img,
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .media video {
  width: 100% !important; height: 100% !important; object-fit: cover !important; max-height: none !important; margin: 0 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .tile-cap { display: none !important; }

/* Playground coluna: overlays de baixo ACIMA da faixa de info (sem sobrepor) + resumo em 1 linha + chips */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .tile-actions,
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .dlcheck { bottom: 58px !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .tile-cap {
  flex-direction: column !important; justify-content: center !important; gap: 3px !important; padding: 4px 12px !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .tc-prompt { -webkit-line-clamp: 1 !important; font-size: 11.5px !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .tc-meta { flex-wrap: nowrap !important; overflow: hidden !important; gap: 5px !important; }

/* Uploads como tiles da galeria: botão remover no hover */
.up-item .up-del { z-index: 4; }
.up-item:hover .up-del { opacity: 1; }


/* Tile processando: composição das refs (grid, como no canvas) desfocada sob o spinner */
.tile .media.proc .proc-refs { display: grid; gap: 2px; width: 100%; aspect-ratio: 4 / 3; }
.tile .media.proc .proc-refs.rc-2 { grid-template-columns: 1fr 1fr; }
.tile .media.proc .proc-refs.rc-3 { grid-template-columns: 1fr 1fr; }
.tile .media.proc .proc-refs.rc-3 img:first-child { grid-row: span 2; }
.tile .media.proc .proc-refs.rc-4 { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
.tile .media.proc .proc-refs img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; }

/* Playground: box de dropdown ao redor do MODELO no hover (deixa claro que dá pra trocar) */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head:hover > .model-select {
  box-shadow: inset 0 0 0 1px var(--line) !important; border-radius: 8px !important; background: rgba(255,255,255,.05) !important; cursor: pointer !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head::after {
  content: '▾'; position: absolute; right: 6px; top: 12px; font-size: 14px; color: var(--muted); opacity: 0; transition: opacity .15s; pointer-events: none; z-index: 3;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head:hover::after { opacity: .9; }

/* ===== Aba LOCAL (RunPod) — mood LIMA (cor mais distinta) ===== */
/* ===== aba POD: grade dos parâmetros expostos + presets ===== */
#pdParams { flex-wrap: wrap; row-gap: 10px; }
.pd-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; min-width: 0; }
.pd-preset-btns { display: flex; gap: 6px; align-items: center; }
/* parâmetro exposto mas ainda sem node do workflow */
.pd-nobind { color: #f5c451; font-size: 15px; line-height: 0; vertical-align: middle; }
#tab-pod .s-io .ref-group { display: flex; flex-wrap: wrap; gap: 8px; }
#tab-pod .s-io .ref-group:empty { display: none; }

/* ícone Local da galeria desabilitado (sem pod/ComfyUI) */
.gmain.gmain-off { opacity: .34; cursor: not-allowed; }
.gmain.gmain-off:hover { background: transparent; color: var(--muted); }

body.theme-local {
  --accent: #c2e812;
  --accent-soft: rgba(194, 232, 18, 0.18);
  --accent-ink: #e2f77e;
  --accent-glow: rgba(194, 232, 18, 0.42);
}
/* aba Local: cor normal quando inativa (o mood lima aparece só quando a aba está ativa) */

/* Tile: badge do canto = só o ÍCONE do tipo de mídia (sem modelo/duração) */
.tile .badge.badge-kind { padding: 4px !important; display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.tile .badge.badge-kind svg { width: 13px; height: 13px; display: block; }
/* Playground: logo do modelo a 75% do tamanho + SEM setinha de dropdown */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-ic { width: 31px !important; height: 31px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head::after { content: none !important; display: none !important; }

/* Galeria SEM cor por tipo: os ícones (modelo + mídia) já dizem tudo.
   Rodapé de parâmetros e sua borda ficam neutros em todos os tipos. */
.tile[data-kind]  .tile-cap { background: #23252d !important; background-image: none !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important; border-color: var(--line) !important; }
.tile[data-kind]  .badge-kind { color: var(--muted) !important; }

/* Mosaico: overlays MENORES pra caber no quadradinho sem vazar */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile-actions { gap: 3px !important; bottom: 6px !important; right: 6px !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile-actions button { width: 22px !important; height: 22px !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile-actions .ic,
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile-actions button svg { width: 12px !important; height: 12px !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .badge.badge-kind { padding: 3px !important; top: 5px !important; left: 5px !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .badge.badge-kind svg { width: 10px; height: 10px; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .dlcheck { width: 18px !important; height: 18px !important; bottom: 6px !important; left: 6px !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .tsel { width: 18px !important; height: 18px !important; top: 6px !important; right: 6px !important; }

/* Badge do tile: logo do modelo (mask tingido pela cor do tipo) + ícone do tipo, lado a lado */
.tile .badge.badge-kind { display: inline-flex !important; align-items: center; gap: 4px; padding: 4px 5px !important; line-height: 0; }
.tile .badge.badge-kind svg { width: 13px; height: 13px; display: block; }
.tile .badge.badge-kind .bk-model { width: 14px; height: 14px; display: inline-block; flex: 0 0 auto; background: currentColor; -webkit-mask: var(--mi) center/contain no-repeat; mask: var(--mi) center/contain no-repeat; }
/* mosaico: também encolhe o logo do modelo */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .badge.badge-kind .bk-model { width: 11px; height: 11px; }
/* modo LISTA: ícones maiores + centralizados verticalmente */
.gallery-col.mode-list .tile .badge.badge-kind { top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; left: 6px !important; padding: 5px 6px !important; }
.gallery-col.mode-list .tile .badge.badge-kind svg { width: 18px; height: 18px; }
.gallery-col.mode-list .tile .badge.badge-kind .bk-model { width: 19px; height: 19px; }

/* ===== APP RAIL — barra vertical de apps à direita (substitui a aba Apps) ===== */
.app-rail {
  position: fixed; right: 0; top: var(--topbar-h, 56px); bottom: 0; z-index: 200;
  width: 50px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 6px; overflow-y: auto; overflow-x: hidden;
  background: rgba(12,13,18,.9); border-left: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.app-rail::-webkit-scrollbar { width: 0; }
.app-rail-btn {
  width: 38px; height: 38px; border-radius: 10px; border: 1px solid transparent; background: transparent;
  display: grid; place-items: center; cursor: pointer; padding: 0; flex: 0 0 auto; color: #cfd3da; font-size: 17px; transition: background .14s, border-color .14s;
}
.app-rail-btn:hover { background: var(--accent-soft); border-color: var(--accent); }
.app-rail-btn img { width: 23px; height: 23px; object-fit: contain; }
/* abre espaço p/ a rail — conteúdo não passa por baixo */
.workspace { padding-right: 50px; }

/* Badge do tile: logo do modelo SEMPRE branco + ícones a 2.5× (feed/coluna) */
.tile .badge.badge-kind { padding: 5px 6px !important; gap: 5px !important; }
.tile .badge.badge-kind .bk-model { background: #fff !important; width: 34px !important; height: 34px !important; }
.tile .badge.badge-kind svg { width: 32px !important; height: 32px !important; }

/* App rail: card fancy com o NOME do app ao lado do ícone no hover */
.app-rail { overflow: visible !important; }
.app-rail-btn { position: relative; }
.app-rail-btn::after {
  content: attr(data-app); position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%) translateX(6px);
  background: linear-gradient(180deg, rgba(30,32,44,.98), rgba(20,22,30,.98)); color: var(--ink);
  border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 700; letter-spacing: .2px; white-space: nowrap;
  box-shadow: 0 14px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none; transition: opacity .14s ease, transform .22s cubic-bezier(.16,1,.3,1); z-index: 60;
}
.app-rail-btn::before {
  content: ''; position: absolute; right: calc(100% + 5px); top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: rgba(28,30,42,.98); opacity: 0; pointer-events: none; transition: opacity .14s; z-index: 60;
}
.app-rail-btn:hover::after { opacity: 1; transform: translateY(-50%) translateX(0); }
.app-rail-btn:hover::before { opacity: 1; }

/* Galeria: ícones (Galeria/Fila/Biblioteca) numa CAIXA à esquerda + sub-abas à direita, mesma linha */
.gallery-tabs { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; flex-wrap: nowrap !important; }
.gallery-tabs .gtab-row.gsub { margin-left: auto; justify-content: flex-end; }
.gallery-tabs .gmain-row { margin-bottom: 0 !important; flex: 0 0 auto; padding: 3px !important; background: var(--card-2); border: 1px solid var(--line); border-radius: 12px; }
.gallery-tabs .gtab-row.gsub { flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.gallery-tabs .gtab-row.gsub::-webkit-scrollbar { height: 0; }

/* Playground: quantidade + custo em cinza flat (sem o tint do mood) */
body.mode-play:not(.on-apps):not(.up-active) .studio .gen-qty,
body.mode-play:not(.on-apps):not(.up-active) .studio .gen-bar .cost-chip {
  background: #2a2d36 !important; background-image: none !important; border: 1px solid var(--line) !important; color: var(--ink) !important;
}

/* Modo LISTA: thumb à ESQUERDA, ícones (modelo+tipo) logo à direita dele (não mais sobrepostos) */
.gallery-col.mode-list .tile { align-items: center !important; gap: 10px !important; }
.gallery-col.mode-list .tile .media { order: 0 !important; }
.gallery-col.mode-list .tile .badge.badge-kind {
  position: static !important; transform: none !important; top: auto !important; left: auto !important; bottom: auto !important;
  order: 1 !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; padding: 0 !important; flex: 0 0 auto;
}
.gallery-col.mode-list .tile .tile-cap { order: 2 !important; }
.gallery-col.mode-list .tile-actions { order: 3 !important; margin-left: auto !important; }

/* Uploads: ações (baixar/apagar) sempre visíveis (como nas gerações, sem herdar) */
.up-item .tile-actions { opacity: 1 !important; }

/* App rail: ícone tingido na COR DO MOOD do tipo + separadores entre grupos */
.app-rail-btn[data-mood="image"] { --m: #2f8fff; }
.app-rail-btn[data-mood="video"] { --m: #7c5cff; }
.app-rail-btn[data-mood="audio"] { --m: #35c46a; }
.app-rail-btn[data-mood="3d"]    { --m: #ff8a2b; }
.app-rail-btn[data-mood="apps"]  { --m: #9aa2b2; }
.app-rail-btn .ari {
  width: 24px; height: 24px; display: block; background: var(--m, #cfd3da);
  -webkit-mask: var(--mi) center / contain no-repeat; mask: var(--mi) center / contain no-repeat;
}
.app-rail-btn:hover { background: color-mix(in srgb, var(--m, #888) 22%, transparent) !important; border-color: var(--m, var(--accent)) !important; }
.app-rail-sep { width: 26px; height: 1px; background: var(--line); margin: 5px 0; flex: 0 0 auto; border-radius: 1px; }
/* badge de "filmes novos" (frame.io não vistos) no app Doc */
/* badge do Frame.io: fica à ESQUERDA do ícone (o rail encosta na borda direita da tela) */
.app-rail-btn .ari-badge { position: absolute; top: -3px; left: -3px; right: auto; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: #e0463f; color: #fff; font-size: 10.5px; font-weight: 800; line-height: 17px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.5); z-index: 3; }
.app-rail-btn .ari-badge[hidden] { display: none; }

/* App rail: ícones NEUTROS em repouso, cor do mood só no HOVER (grupos mantidos) */
.app-rail-btn { color: #cfd3da; }
.app-rail-btn .ari { background: #cfd3da !important; }
.app-rail-btn:hover { color: var(--m, #cfd3da); }
.app-rail-btn:hover .ari { background: var(--m, #cfd3da) !important; }
.app-rail-btn .ari-svg { width: 24px; height: 24px; display: block; }

/* Apps abertos: sem galeria (o app ocupa o espaço) */
body.on-apps .gallery, body.on-apps .queue-panel { display: none !important; }
body.on-apps .main { flex: 1 1 auto !important; max-width: none !important; }

/* tooltip do app acima de tudo */
.app-rail-btn::after, .app-rail-btn::before { z-index: 210 !important; }

/* ============================================================================
   Playground: SEM canvas em nenhuma aba de modelo. Os refs viram um bloco SEMPRE
   visível no lugar do canvas: botão "+" no tamanho atual, e cada ref carregada
   cresce pra um QUADRADO ~metade da largura (2 por linha). Vídeo = thumb animado.
   Áudio = retângulo de largura total com o waveform.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-preview,
body.mode-play:not(.on-apps):not(.up-active) .studio .canvas-bg,
body.mode-play:not(.on-apps):not(.up-active) .studio .preview-clear { display: none !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage {
  display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  background: transparent !important; overflow: visible !important; border-radius: 0 !important; flex: 0 0 auto !important;
}
/* refs: bloco em fluxo, sempre visível, grid 2-up */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-group {
  position: static !important; opacity: 1 !important; pointer-events: auto !important;
  margin: 0 !important; width: 100% !important; max-width: none !important;
  display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-content: flex-start !important;
}
/* vazio (cap-wrap in/out etc.) = 1/4 · carregado = 1/2 */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap { flex: 0 0 calc(25% - 8px) !important; max-width: calc(25% - 8px) !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap:has(> .ref-tile.has-img),
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap:has(> .ref-tile.has-vid),
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap:has(> .ref-tile.has-file) { flex: 0 0 calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; }
/* botão de add = tamanho atual (60px). Ref carregada = quadrado ~metade (2 por linha) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-img,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-vid,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-file {
  width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; background-size: cover !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io > .ref-tile.has-img,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io > .ref-tile.has-vid,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io > .ref-tile.has-file { flex: 0 0 calc(50% - 5px) !important; width: calc(50% - 5px) !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-vid .ref-thumb {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 12px !important;
}
/* áudio carregado: retângulo de largura total com o waveform */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-audio {
  flex: 0 0 100% !important; width: 100% !important; height: 76px !important; aspect-ratio: auto !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-audio .ref-wave {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
}

/* ============================================================================
   Mosaico: FLEXBOX com tamanho por tipo — imagem/vídeo = quadrado atual · áudio =
   retângulo 2:1 (meia altura) · baixa-resolução = 3/linha · LoRA/doc não-visual =
   5/linha. Quebras (.grid-break) entre tipos → nunca mistura tamanhos na mesma linha.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid {
  display: flex !important; flex-wrap: wrap !important; align-content: flex-start !important; gap: 8px !important; grid-template-columns: none !important; column-count: auto !important;
}
.gallery-col.mode-grid .grid-break { flex: 0 0 100% !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; }
.gallery-col.mode-grid .tile { width: auto !important; margin: 0 !important; }
.gallery-col.mode-grid .tile.sz-std   { flex: 1 1 170px !important; max-width: none !important; aspect-ratio: 1 / 1 !important; }   /* preenche a linha */
.gallery-col.mode-grid .tile.sz-audio { flex: 1 1 220px !important; max-width: none !important; aspect-ratio: 2 / 1 !important; }
.gallery-col.mode-grid .tile.sz-lo    { flex: 0 0 calc(33.333% - 6px) !important; aspect-ratio: 1 / 1 !important; }
.gallery-col.mode-grid .tile.sz-doc   { flex: 0 0 calc(20% - 7px) !important; aspect-ratio: 1 / 1 !important; }

/* Áudio: modelo + submodelos PRIMEIRO no stack (a aba não usa o header movido) */
body.mode-play:not(.on-apps):not(.up-active) #tab-audio .studio .s-params { order: -1 !important; }
/* Refs: nunca passam de 350px vertical — rolam quando enchem (acomoda dinamicamente) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage {
  max-height: 350px !important; overflow-y: auto !important; overflow-x: hidden !important;
  scrollbar-width: thin; scrollbar-color: var(--accent-soft) transparent;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage::-webkit-scrollbar { width: 8px; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 8px; }

/* Refs carregadas SEMPRE metade da linha (nunca a área toda), mesmo dentro de grupos */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-img,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-vid,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-file {
  flex: 0 0 calc(50% - 5px) !important; width: calc(50% - 5px) !important; max-width: calc(50% - 5px) !important;
}
/* in/out (cap-wrap já ocupa 50% da linha): o tile preenche o cap-wrap */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap > .ref-tile.has-img,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap > .ref-tile.has-vid,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap > .ref-tile.has-file {
  flex: 1 1 auto !important; width: 100% !important; max-width: none !important;
}

/* Removido o teto de 350px dos refs (estava cortando elementos) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage { max-height: none !important; overflow: visible !important; }

/* Stack: refs vêm DEPOIS da linha do Gerar. Ordem: modelo → Gerar → refs → params → prompt */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-gerar { order: 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage { order: 2 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { order: 3 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt { order: 4 !important; }

/* Vídeo: submodelos (mode) logo após o modelo — sobe o s-params pra depois do header */
body.mode-play:not(.on-apps):not(.up-active) #tab-video .studio .s-params { order: 0 !important; }

/* ============================================================================
   Layout final do painel: (modelo+submodelo, topo fixo) // (params, meio rolável)
   // (Gerar, footer fixo). Separadores entre as seções.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head {
  position: static !important; z-index: 6 !important; order: -1 !important;
  background: var(--bg, #191b23) !important; padding-bottom: 4px !important; margin-bottom: 0 !important; border-bottom: 0 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { order: 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage  { order: 2 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt { order: 3 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-gerar {
  position: sticky !important; bottom: 0 !important; z-index: 6 !important; order: 20 !important;
  background: var(--bg, #191b23) !important; padding-top: 6px !important; margin-top: 0 !important; border-top: 0 !important;
}

/* ============================================================================
   Inputs de REF (hub inteiro): alinhados à esquerda · vazio = 1/4 (4 por linha) ·
   carregado (img/vídeo/arquivo) = 1/2 (2 por linha) · áudio mantém waveform ·
   TODO tile tem tag (overlay no rodapé). Tags via .rt-tag (JS).
   ============================================================================ */
.s-io, .ref-group, .a-refs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; align-content: flex-start; }

/* flex item = tile solto OU wrapper de caption. Vazio = 1/4 da linha. */
.s-io > .ref-tile, .s-io > .ref-cap-wrap,
.ref-group > .ref-tile, .ref-group > .ref-cap-wrap,
.a-refs > .ref-tile, .a-refs > .ref-cap-wrap {
  flex: 0 0 calc(25% - 6px) !important; max-width: calc(25% - 6px) !important; width: calc(25% - 6px) !important;
  height: auto !important; aspect-ratio: 1 / 1 !important;
}
/* wrapper de caption: o quadrado é o próprio tile (a antiga .ref-cap fica escondida) */
.s-io > .ref-cap-wrap, .ref-group > .ref-cap-wrap, .a-refs > .ref-cap-wrap { aspect-ratio: auto !important; }
.s-io > .ref-cap-wrap > .ref-tile, .ref-group > .ref-cap-wrap > .ref-tile, .a-refs > .ref-cap-wrap > .ref-tile {
  width: 100% !important; max-width: none !important; height: auto !important; aspect-ratio: 1 / 1 !important;
}

/* carregado (imagem/vídeo/arquivo) = 1/2 da linha. Áudio NÃO entra (waveform próprio). */
.s-io > .ref-tile.has-img, .s-io > .ref-tile.has-vid, .s-io > .ref-tile.has-file,
.ref-group > .ref-tile.has-img, .ref-group > .ref-tile.has-vid, .ref-group > .ref-tile.has-file,
.a-refs > .ref-tile.has-img, .a-refs > .ref-tile.has-vid, .a-refs > .ref-tile.has-file,
.s-io > .ref-cap-wrap:has(> .ref-tile.has-img), .s-io > .ref-cap-wrap:has(> .ref-tile.has-vid), .s-io > .ref-cap-wrap:has(> .ref-tile.has-file),
.ref-group > .ref-cap-wrap:has(> .ref-tile.has-img), .ref-group > .ref-cap-wrap:has(> .ref-tile.has-vid), .ref-group > .ref-cap-wrap:has(> .ref-tile.has-file),
.a-refs > .ref-cap-wrap:has(> .ref-tile.has-img), .a-refs > .ref-cap-wrap:has(> .ref-tile.has-vid), .a-refs > .ref-cap-wrap:has(> .ref-tile.has-file) {
  flex-basis: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; width: calc(50% - 4px) !important;
}

/* TAG em todo tile (rodapé). Some com a caption antiga (migrada p/ .rt-tag). */
.ref-cap { display: none !important; }
.ref-tile > .rt-tag {
  display: block !important; position: absolute; left: 0; right: 0; bottom: 0;
  font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase;
  text-align: center; padding: 6px 4px 8px; line-height: 1.1;
  background: rgba(20,22,30,.42); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); color: var(--rt-ink, #cfd3da);
  border-radius: 0 0 11px 11px; pointer-events: none; z-index: 4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ============================================================================
   Ordem final do stack: modelo (topo, sticky) → REFS logo abaixo do separador →
   params → prompt → Gerar (footer). Vale por ser o último bloco.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage  { order: 0 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { order: 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) #tab-video .studio .s-params { order: 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt { order: 2 !important; }

/* ============================================================================
   Refs NÃO crescem ao carregar — ficam do tamanho do quadrado de input (1/4).
   Ver maior = clicar no centro do thumb (borda continua selecionando o input).
   Painel sem separadores/espaçadores extras (mais compacto).
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-img,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-vid,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-file,
.s-io > .ref-tile.has-img, .s-io > .ref-tile.has-vid, .s-io > .ref-tile.has-file,
.ref-group > .ref-tile.has-img, .ref-group > .ref-tile.has-vid, .ref-group > .ref-tile.has-file,
.a-refs > .ref-tile.has-img, .a-refs > .ref-tile.has-vid, .a-refs > .ref-tile.has-file {
  flex: 0 0 calc(25% - 6px) !important; max-width: calc(25% - 6px) !important; width: calc(25% - 6px) !important; aspect-ratio: 1 / 1 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap:has(> .ref-tile.has-img),
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap:has(> .ref-tile.has-vid),
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap:has(> .ref-tile.has-file),
.s-io > .ref-cap-wrap:has(> .ref-tile.has-img), .s-io > .ref-cap-wrap:has(> .ref-tile.has-vid), .s-io > .ref-cap-wrap:has(> .ref-tile.has-file),
.ref-group > .ref-cap-wrap:has(> .ref-tile.has-img), .ref-group > .ref-cap-wrap:has(> .ref-tile.has-vid), .ref-group > .ref-cap-wrap:has(> .ref-tile.has-file) {
  flex: 0 0 calc(25% - 8px) !important; max-width: calc(25% - 8px) !important; width: calc(25% - 8px) !important;
}
/* thumb carregado: fundo cobre o quadradinho + cursor de "ampliar" no centro */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-img { background-size: cover !important; }
.ref-tile.has-img, .ref-tile.has-vid { cursor: zoom-in; }
/* painel compacto: menos gap entre as seções empilhadas */
body.mode-play:not(.on-apps):not(.up-active) .studio { gap: 6px !important; }

/* ============================================================================
   Todos os tiles de input de ref IGUAIS — 25% (menor, com folga pro gap) → 4 por
   linha independente do tipo (in/out/ref/áudio/carregado). Quadrados uniformes.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-group { gap: 8px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap,
.s-io > .ref-tile, .s-io > .ref-cap-wrap,
.ref-group > .ref-tile, .ref-group > .ref-cap-wrap,
.a-refs > .ref-tile, .a-refs > .ref-cap-wrap {
  flex: 0 0 calc(25% - 9px) !important; max-width: calc(25% - 9px) !important; width: calc(25% - 9px) !important;
  min-width: 0 !important; height: auto !important; aspect-ratio: 1 / 1 !important;
}
/* wrapper de caption: o tile preenche o wrapper (o quadrado é o tile) */
.s-io > .ref-cap-wrap, .ref-group > .ref-cap-wrap, .a-refs > .ref-cap-wrap { aspect-ratio: auto !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap > .ref-tile,
.s-io > .ref-cap-wrap > .ref-tile, .ref-group > .ref-cap-wrap > .ref-tile, .a-refs > .ref-cap-wrap > .ref-tile {
  flex: none !important; width: 100% !important; max-width: none !important; aspect-ratio: 1 / 1 !important;
}



/* ============================================================================
   APPS: refs SEMPRE no tamanho padrão (60px, igual ao Upscale). As regras
   proporcionais (25% da linha) são do Playground; nos apps o container ou é
   intrínseco (colapsa) ou é um painel largo (infla um quadradão).
   ============================================================================ */

#tab-matte .s-io > .ref-tile, #tab-matte .s-io > .ref-cap-wrap, #tab-matte .s-io .ref-cap-wrap > .ref-tile,
#tab-separate .a-refs > .ref-cap-wrap, #tab-separate .a-refs .ref-cap-wrap > .ref-tile,
#audioSonorize .a-refs > .ref-cap-wrap, #audioSonorize .a-refs .ref-cap-wrap > .ref-tile,
#tab-ff .s-io > .ref-cap-wrap, #tab-ff .s-io .ref-cap-wrap > .ref-tile {
  flex: 0 0 60px !important; width: 60px !important; max-width: 60px !important; min-width: 60px !important;
  height: 60px !important; min-height: 60px !important; aspect-ratio: auto !important;
}
#tab-matte .s-io > .ref-cap-wrap, #tab-separate .a-refs > .ref-cap-wrap, #audioSonorize .a-refs > .ref-cap-wrap, #tab-ff .s-io > .ref-cap-wrap {
  height: auto !important; min-height: 0 !important;   /* o wrap cresce pra caber a legenda */
}


/* Segmentar: o ref vive na LINHA DE CONTROLES (abaixo do canvas, à esquerda dos
   parâmetros), no scale padrão do Playground (~88px, como na aba Vídeo). */
.seg-controls > #segIo { position: static; grid-area: auto; margin: 0; flex: 0 0 auto; align-self: stretch; display: flex; align-items: center; opacity: 1 !important; pointer-events: auto !important; }
.seg-controls > #segIo > .ref-tile {
  flex: 0 0 88px !important; width: 88px !important; max-width: 88px !important; min-width: 88px !important;
  height: 88px !important; min-height: 88px !important; aspect-ratio: auto !important;
}

/* Matte: tela cheia como o Upscale (o canvas era um postal de 115px) */
body.up-active #tab-matte.tab.active { max-width: none; }

/* ============================================================
   CANVAS DE VÍDEO — medida FIXA 1350 × 590, fundo PRETO
   Vale pra todo app que põe VÍDEO num canvas: Matte, Sonorizar,
   Transcrição, FF e Upscale. Os palcos são itens de um flex column
   (.studio) com flex:1 1 auto, então normalmente esticam com a
   janela; aqui a medida é cravada.
   !important porque "#tab-matte .studio .s-stage" (1 id + 2 classes),
   "#sonPreview" e o .up-studio (altura em vh) já mandavam por
   especificidade/ordem.
   Fundo #000 puro: o padrão da casa é #0c0d12 (quase preto, azulado),
   e vídeo pede preto de verdade nas barras de letterbox.
   ============================================================ */
#maStage, #sonInStage, #tsStage,
#tab-ff .ff-studio > .s-stage,
#tab-upscale .up-studio > .s-stage {
  flex: 0 0 auto !important;
  /* 1350×590 sempre que cabe. Onde não cabe (o Sonorizar mora num .panel com 34px de
     padding; janela estreita), encolhe MANTENDO a proporção em vez de vazar pelo card —
     a medida fixa estourando o container era o canvas "quebrado". */
  width: min(1350px, 100%) !important; min-width: 0 !important; max-width: 1350px !important;
  height: auto !important; aspect-ratio: 1350 / 590; min-height: 0 !important; max-height: 590px !important;
  background: #000 !important;
}
/* o "+" de referência mora no canto superior ESQUERDO, com ou sem arquivo (a regra
   geral dos apps centralizava o tile enquanto o palco estava vazio) */
#maStage > .s-io, #sonInStage > .s-io, #tsStage > .s-io {
  align-self: start !important; justify-self: start !important;
  margin: 12px !important; justify-content: flex-start !important;
}
#maStage > .s-preview, #sonInStage > .s-preview, #tsStage > .s-preview,
#tab-ff .ff-studio > .s-stage > .s-preview,
#tab-upscale .up-studio > .s-stage > .s-preview {
  width: 100%; height: 100%; background: #000 !important;
}
/* Upscale e FF: o studio tinha altura em vh pro palco esticar; com o palco fixo,
   a altura passa a ser a soma das partes (palco + controles) */
#tab-upscale .up-studio, #tab-ff .ff-studio { height: auto !important; }
/* o vídeo se ajusta ao canvas fixo: a regra antiga media a altura em vh */
#sonInStage #sonPreview { width: 100% !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; object-fit: contain; background: #000; }

/* Sonorizar: o preview do pré-processamento no tamanho de canvas do Upscale */
#sonPreview { max-height: calc(100vh - var(--topbar-h) - 330px) !important; min-height: 320px; object-fit: contain; }

/* Stems: ref + prompt lado a lado (mesma linha, mesma altura) · parâmetros embaixo */
#tab-separate .sep-top { display: flex; gap: 14px; align-items: stretch; margin-bottom: 10px; }
#tab-separate .sep-top .a-refs { flex: 0 0 auto; margin-bottom: 0 !important; }
#tab-separate .sep-top .s-prompt { flex: 1 1 auto; min-width: 0; }
#tab-separate .sep-top .s-prompt .field { height: 100%; margin: 0; }
#tab-separate .sep-top .s-prompt textarea { height: 100%; min-height: 0; resize: none; }

/* ============================================================================
   Painel sem header/footer fixos. Stack normal (fluindo):
   modelo+submodelo (topo) → linha do Gerar → parâmetros → refs → prompt.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head { position: static !important; order: -1 !important; margin-bottom: 6px !important; padding-bottom: 0 !important; border-bottom: 0 !important; background: transparent !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-gerar { position: static !important; order: 0 !important; margin: 0 0 8px !important; padding-top: 0 !important; border-top: 0 !important; background: transparent !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { order: 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) #tab-video .studio .s-params { order: 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage  { order: 2 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt { order: 3 !important; }

/* submodelo (mode) do vídeo movido pra junto do modelo, no topo do header */
.play-model-head .play-sub-slot { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.play-model-head .play-sub-slot .field { margin: 0 !important; }

/* ============================================================================
   Refs dentro de um "canvas" (como o antigo): caixa com borda, fundo e cantos.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  background: rgba(8,10,15,.35) !important;
  padding: 12px !important;
  display: block !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage .s-io { margin: 0 !important; }

/* canvas de refs logo após modelo/submodelo e Gerar (antes dos params) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage  { order: 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { order: 2 !important; }
body.mode-play:not(.on-apps):not(.up-active) #tab-video .studio .s-params { order: 2 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt { order: 3 !important; }

/* ============================================================================
   Ícone do modelo: header volta a ser 'relative' (o ícone é absolute) e o logo
   passa a 100x100. Nome + submodelo à direita do logo.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head {
  position: relative !important; min-height: 100px !important; padding-left: 112px !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-ic {
  width: 100px !important; height: 100px !important; left: 4px !important; top: 0 !important; transform: none !important; object-fit: contain !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select { padding-left: 0 !important; }

/* logos do modelo 10px acima */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-ic { top: -10px !important; }

/* +3px de padding no box do modelo (aparece no hover) */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select { padding: 7px 3px 7px 3px !important; }

/* ============================================================================
   Administração: lightbox centralizado (não espremido na coluna esquerda).
   Fica abaixo da topbar pra a navegação continuar clicável.
   ============================================================================ */
#tab-admin.tab.active {
  position: fixed !important; top: var(--topbar-h, 56px) !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  z-index: 250 !important; max-width: none !important; margin: 0 !important;
  display: flex !important; flex-direction: column !important; align-items: center !important;
  background: rgba(6,8,12,.62) !important; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  padding: 34px 20px 48px !important; overflow: auto !important;
}
#tab-admin.tab.active > .tab-head,
#tab-admin.tab.active > .form-wrap { width: 100% !important; max-width: 860px !important; margin: 0 auto !important; }
#tab-admin.tab.active .panel {
  border: 1px solid var(--line) !important; border-radius: 14px !important; box-shadow: 0 24px 70px rgba(0,0,0,.55) !important;
}

/* ============================================================================
   RunPod manager como LIGHTBOX centralizado (maior) + mini browser de arquivos.
   ============================================================================ */
body.pod-open::before { content: ''; position: fixed; inset: 0; background: rgba(6,8,12,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 340; }
#podPop:not([hidden]), body.pod-open #podPop {
  position: fixed !important; top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important; width: min(720px, 94vw) !important; max-height: 82vh !important;
  overflow: auto !important; z-index: 360 !important; padding: 20px !important; display: block !important;
}
.pod-files { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.pod-files-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.pod-files-search { width: 100%; margin-bottom: 8px; }
.pod-files-body { max-height: 46vh; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.pf-cat { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; background: rgba(255,255,255,.02); }
.pf-cat > summary { cursor: pointer; font-weight: 700; font-size: 12px; color: var(--ink); list-style: none; }
.pf-cat > summary::-webkit-details-marker { display: none; }
.pf-count { color: var(--muted); font-weight: 600; margin-left: 4px; }
.pf-file { font-size: 11px; color: var(--muted); padding: 2px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, monospace; }
.pf-file:hover { color: var(--ink); background: rgba(255,255,255,.04); border-radius: 4px; }

/* ============================================================================
   LED do Pod: cinza=desligado · verde=ComfyUI ok · amarelo pisca=subindo ·
   vermelho pisca=Ready mas ComfyUI travado.
   ============================================================================ */
@keyframes podBlink { 0%,100% { opacity: 1; } 50% { opacity: .28; } }
.balchip .pdot.off, .pdot.off { background: #6a6f7c !important; box-shadow: none !important; }   /* desligado = CINZA (não mais vermelho) */
.balchip .pdot.boot, .pdot.boot { background: #f5c451 !important; box-shadow: 0 0 0 3px rgba(245,196,81,.2); animation: podBlink 1s ease-in-out infinite; }   /* subindo = AMARELO pisca */
.balchip .pdot.stuck, .pdot.stuck { background: #ff5a6e !important; box-shadow: 0 0 0 3px rgba(255,90,110,.22); animation: podBlink .8s ease-in-out infinite; }   /* travado = VERMELHO pisca */

/* ============================================================================
   RunPod: lightbox maior e completo — 2 colunas (gerenciamento | file browser).
   ============================================================================ */
#podPop:not([hidden]) { width: min(1040px, 95vw) !important; }
#podPop:not([hidden]) .pod-adm {
  display: grid !important; grid-template-columns: 320px 1fr; gap: 0 20px; align-items: start;
}
#podPop:not([hidden]) .pod-adm > .pod-lb-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
#podPop:not([hidden]) .pod-lb-head strong { font-family: var(--serif, inherit); font-size: 16px; letter-spacing: .02em; }
#podPop:not([hidden]) .pod-adm > :not(.pod-lb-head):not(.pod-files) { grid-column: 1; }
#podPop:not([hidden]) .pod-adm > .pod-files {
  grid-column: 2; grid-row: 2 / 100; margin: 0 !important; padding: 0 0 0 20px !important;
  border-top: 0 !important; border-left: 1px solid var(--line) !important; align-self: stretch;
}
#podPop:not([hidden]) .pod-files-body { max-height: 62vh !important; }
.pod-lb-x { background: transparent; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; line-height: 1; padding: 4px 6px; border-radius: 6px; }
.pod-lb-x:hover { color: var(--ink); background: rgba(255,255,255,.06); }
/* fora do lightbox (popover fechado) o header não aparece */
.pod-lb-head { display: none; }
#podPop:not([hidden]) .pod-lb-head { display: flex; }

/* ============================================================================
   RunPod lightbox: abas Gerenciar / Logs + painel de log em tempo real.
   ============================================================================ */
.pod-lb-tabs { display: flex; gap: 4px; }
.pod-lb-tab { background: transparent; border: 1px solid transparent; color: var(--muted); font-weight: 700; font-size: 12.5px; padding: 5px 12px; border-radius: 8px; cursor: pointer; }
.pod-lb-tab:hover { color: var(--ink); }
.pod-lb-tab.active { color: var(--ink); background: rgba(255,255,255,.06); border-color: var(--line); }
/* modo LOGS: some o grid de gerenciamento, painel de log ocupa tudo */
#podPop:not([hidden]) .pod-adm.show-logs { display: block !important; }
.pod-adm.show-logs > :not(.pod-lb-head):not(.pod-logs) { display: none !important; }
.pod-logs { margin-top: 12px; }
.pod-logs-bar { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.pl-src { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 700; font-size: 11.5px; padding: 4px 10px; border-radius: 7px; cursor: pointer; }
.pl-src.active { color: var(--ink); background: rgba(255,255,255,.06); }
.pl-follow { font-size: 11px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; }
.pod-logs-out {
  margin: 0; height: 62vh; overflow: auto; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.45; color: #cfd3da;
  background: #0b0d12; border: 1px solid var(--line); border-radius: 10px; padding: 12px;
}

/* mensagens/toasts sempre acima do blur dos lightboxes (backdrop 340 · modal 360) */
.toast { z-index: 1500 !important; }   /* acima de todos os lightboxes (pod 1320 · admin 1340 · dropdown 1400) */

/* crédito/saldo FAL: ícone oficial (PNG em public/icons/custo_FAL.png) */
.cost-chip.prov-fal::before, .balchip.prov-fal::before {
  background-image: url("icons/custo_FAL.png?v=3") !important;
}

/* Áudio (Seed): #aSeedRefsNode envolve uma LISTA (não um tile único) → ocupa a linha
   toda pros tiles internos ficarem 25% do painel (quadrados), não 25% de 25% (redondos). */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io > #aSeedRefsNode {
  flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; aspect-ratio: auto !important;
}
#aSeedRefsNode > #aRefList { width: 100% !important; }

/* placeholder de sub-aba do ADM (ex.: Frame.IO) */
.adm-placeholder { padding: 22px; border: 1px dashed var(--line); border-radius: 12px; background: rgba(255,255,255,.02); }
.adm-placeholder strong { font-family: var(--serif, inherit); font-size: 15px; display: block; margin-bottom: 6px; }

/* aba Frame.IO (ADM) — centralizada, largura razoável (não espremida na coluna) */
#tab-frameio.tab.active { max-width: 900px; margin-inline: auto; }

/* ============================================================================
   FRAME.IO (ADM) — review: árvore | player+timeline | comentários
   ============================================================================ */
#tab-frameio.tab.active { max-width: none !important; margin: 0 !important; }
/* Frame.IO integrado à galeria: árvore no painel esquerdo (.main), player+comentários na galeria */
body.on-frameio .main { padding: 0 !important; height: calc(100vh - var(--topbar-h)); overflow: hidden; }
body.on-frameio #tab-frameio.tab.active { position: static !important; max-width: none !important; margin: 0 !important; height: 100%; }
body.on-frameio #tab-frameio .fio-wrap { display: block !important; height: 100%; }
body.on-frameio #tab-frameio .fio-side { width: 100% !important; height: 100%; border-right: 0; }
/* sem player/comentários: o Doc inteiro fica numa janela só (a galeria não aparece).
   Especificidade precisa casar com a regra do modo Play (.mode-play:not(...) .main/.gallery). */
body.mode-play:not(.on-apps):not(.up-active).on-frameio .gallery { display: none !important; }
body.mode-play:not(.on-apps):not(.up-active).on-frameio .main { flex: 1 1 auto !important; max-width: none !important; }
.fio-wrap { display: block; height: calc(100vh - var(--topbar-h) - 8px); background: var(--bg); }
.fio-side { width: 100% !important; border-right: 0 !important; }
/* a lista é o conteúdo principal — largura toda, itens clicáveis (abrem no Frame.io) */
.fio-tree { max-width: 900px; }
.fio-node[data-kind="file"] .fio-row { cursor: alias; }
.fio-side, .fio-comments { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--line); padding: 12px; overflow: hidden; }
.fio-comments { border-right: 0; border-left: 1px solid var(--line); }
.fio-side-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--serif, inherit); font-size: 14px; margin-bottom: 10px; }
.fio-key { display: flex; gap: 6px; }
.fio-key .login-input { flex: 1; min-width: 0; }
.fio-tree { flex: 1 1 auto; overflow: auto; font-size: 12.5px; }
.fio-node > .fio-row { display: flex; align-items: center; gap: 5px; padding: 3px 4px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.fio-node > .fio-row:hover { background: rgba(255,255,255,.05); }
.fio-node.sel > .fio-row { background: var(--accent-soft); color: var(--accent-ink); }
.fio-tw { width: 22px; color: var(--muted); font-size: 20px; line-height: 1; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s ease; }
.fio-ico { flex: 0 0 auto; opacity: .85; }
.fio-nm { overflow: hidden; text-overflow: ellipsis; }
/* filme ainda não aberto: ponto e nome em destaque */
.fio-node.fio-unseen > .fio-row .fio-nm { color: #fff; font-weight: 700; }
.fio-node.fio-unseen > .fio-row .fio-nm::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: #e0463f; vertical-align: middle; }
.fio-kids { margin-left: 14px; border-left: 1px solid var(--line); }
/* centro */
.fio-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #000; }
.fio-player { flex: 1 1 auto; display: grid; place-items: center; min-height: 0; overflow: hidden; }
.fio-player video { max-width: 100%; max-height: 100%; background: #000; }
.fio-empty { color: var(--muted); font-size: 13px; padding: 20px; }
.fio-empty.warn { color: #ff9caa; }
.fio-transport { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #0c0e13; border-top: 1px solid var(--line); }
.fio-play { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.06); color: var(--ink); cursor: pointer; flex: 0 0 auto; }
.fio-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; min-width: 88px; }
.fio-timeline { position: relative; flex: 1 1 auto; height: 10px; background: rgba(255,255,255,.1); border-radius: 6px; cursor: pointer; }
.fio-tl-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent, #7c5cff); border-radius: 6px; }
.fio-tl-markers { position: absolute; inset: 0; pointer-events: none; }
.fio-marker { position: absolute; top: -3px; width: 4px; height: 16px; border-radius: 2px; background: #ffcc3b; transform: translateX(-50%); cursor: pointer; pointer-events: auto; box-shadow: 0 0 0 1px rgba(0,0,0,.4); }
.fio-marker:hover { background: #fff; }
/* comentários */
.fio-cc { font-size: 11px; color: var(--muted); }
.fio-comment-list { flex: 1 1 auto; overflow: auto; display: flex; flex-direction: column; gap: 8px; }
.fio-comment { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; cursor: pointer; background: rgba(255,255,255,.02); }
.fio-comment:hover { border-color: var(--accent-glow, rgba(255,255,255,.25)); }
.fio-c-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.fio-c-who { font-weight: 700; font-size: 12px; }
.fio-c-ts { font-size: 11px; color: var(--accent-ink, #9aa); font-variant-numeric: tabular-nums; }
.fio-c-text { font-size: 12.5px; color: var(--ink); line-height: 1.4; white-space: pre-wrap; word-break: break-word; }

/* modelo + submodelo + ícone inscritos num box (borda) com padding 3px */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head {
  border: 1px solid var(--line) !important; border-radius: 10px !important;
  padding: 3px !important; min-height: 106px !important; background: rgba(255,255,255,.02) !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-ic {
  left: 3px !important; top: 3px !important; transform: none !important; width: 100px !important; height: 100px !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select { padding-left: 0 !important; margin-left: 108px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head .play-sub-slot { margin-left: 108px !important; }

/* ============================================================================
   UI mais fina: header do modelo compacto (ícone pequeno acompanha o nome;
   modelo/submodelo = texto de parâmetro + ~3px). Refs = quadrados tracejados
   com "+" simples (estilo do print).
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head {
  border: 0 !important; background: transparent !important; padding: 0 !important;
  min-height: 0 !important; margin: 0 0 6px 0 !important; display: flex !important; flex-direction: column !important; gap: 3px !important; position: relative !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-ic {
  position: absolute !important; left: 0 !important; top: 1px !important; transform: none !important; width: 18px !important; height: 18px !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select {
  font-size: 15px !important; font-weight: 600 !important; line-height: 1.25 !important;
  padding: 0 0 0 24px !important; margin: 0 !important; min-height: 0 !important; height: auto !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head .play-sub-slot { margin: 0 0 0 24px !important; gap: 5px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head .play-sub-slot .field > select.dim-sel,
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > select.dim-sel {
  font-size: 12.5px !important; font-weight: 500 !important; height: 26px !important; min-height: 26px !important; max-height: 26px !important; padding: 0 8px !important;
}

/* inputs de ref: quadrado TRACEJADO com "+" simples centralizado (sem círculo) */
.ref-tile { border-style: dashed !important; border-width: 1.5px !important; }
.ref-tile .ref-plus {
  border: 0 !important; background: transparent !important; border-radius: 0 !important;
  width: auto !important; height: auto !important; font-size: 26px !important; font-weight: 300 !important; color: var(--rt-ink) !important;
}
.ref-tile .ref-plus:hover { background: transparent !important; opacity: .85; }

/* ============================================================================
   Ordem final (todas as abas): Gerar → modelo/submodelo → refs → params → prompt.
   Borda do modelo (box) com mais padding.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head {
  border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 8px !important; background: rgba(255,255,255,.02) !important; order: -1 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-ic { left: 8px !important; top: 9px !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-gerar { order: -2 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage  { order: 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { order: 2 !important; }
body.mode-play:not(.on-apps):not(.up-active) #tab-video .studio .s-params { order: 2 !important; }
body.mode-play:not(.on-apps):not(.up-active) #tab-audio .studio .s-params { order: 2 !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-prompt { order: 3 !important; }

/* aba Local: MiniComfy (params + canvas) num iframe atrás; galeria por cima. */
#localNodesView[hidden] { display: none; }
.local-frame { display: block; width: 100%; height: 100%; border: 0; background: #0b0d12; }
/* o botão Nodes no topo da galeria */
#gmNodes.active { color: var(--accent-ink); }

/* filtro de TIPO DE MÍDIA na galeria (chips) */
.kind-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.kind-bar[hidden] { display: none; }
.kind-chip { font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.03); color: var(--muted); cursor: pointer; }
.kind-chip:hover { color: var(--ink); }
.kind-chip.on { background: var(--accent-soft); border-color: var(--accent-glow); color: var(--accent-ink); }

/* Local: os dois painéis são SAGRADOS — a .main (params) e a galeria/nodes (direita)
   nunca mudam de tamanho. O MiniComfy é UM iframe (params+canvas), então ele fica
   ATRÁS cobrindo toda a .workspace: o #left (400px) cai exatamente sobre a .main e o
   canvas sobre a galeria. A .main fica transparente e sem eventos (os params atrás
   aparecem e ficam clicáveis); a galeria fica OPACA por cima (biblioteca). No modo
   Nodes a galeria fica transparente e revela o canvas. A .main nunca colapsa, então
   a barra da galeria segue a mesma largura das outras abas. */
#localNodesView { display: none; }
body.on-local .workspace { position: relative; }
body.on-local .main { background: transparent !important; pointer-events: none !important; }   /* SEM position/z-index: criar contexto de empilhamento aqui prenderia o lightbox de admin (fixed z-250) atrás da galeria. Largura = clamp() das outras abas; #left do iframe travado nessa medida via JS */
/* canvas de nodes removido: o iframe sobrevive só como PAINEL DE PARÂMETROS à esquerda
   (largura da .main, travada por JS). Sem o canvas, nada mais fica atrás da galeria. */
body.on-local #localNodesView { display: block; position: absolute; left: 0; top: 0; width: 100%; height: calc(100vh - var(--topbar-h)); z-index: 0; visibility: hidden; }
body.on-local.local-ready #localNodesView { visibility: visible; }   /* só aparece depois que o #left foi travado na largura da .main (sem flash/filete) */
body.on-local .gallery { z-index: 1; background: var(--bg) !important; border-left: 0 !important; }   /* mantém sticky; sem border-left — o divisor é a borda do #left (params), senão a linha da galeria (z-1) fica sobre o editor */

.nav-item .nav-dot { margin-left: 6px; margin-right: 0; vertical-align: middle; }

/* ===== Galeria da aba LOCAL (Recentes/Output/Input/Pastas do ComfyUI/pod) ===== */
#localGalleryView:not([hidden]) { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }   /* flex:1 preenche a galeria (não height:100%, que empurrava/comprimia) · :not([hidden]) evita vazar pras outras abas */
#localGalleryView .lg-crumbs:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }   /* :not([hidden]) — senão a barra vazia vira um divisor fantasma */
.lg-crumb { background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 2px 4px; border-radius: 6px; font-size: 12.5px; }
.lg-crumb:hover { background: rgba(255,255,255,.08); color: var(--ink); }
.lg-sep { opacity: .4; }
#localGalleryView .lg-body { flex: 1 1 auto; overflow-y: auto; padding: 12px; }
.lg-body.lg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; align-content: start; }
/* tile base — mesma borda/sombra das abas tradicionais (.tile) */
.lg-tile { position: relative; display: block; border-radius: 14px; overflow: hidden; background: #14161d; box-shadow: var(--shadow-soft); border: 1px solid rgba(255,255,255,.14); text-decoration: none; color: var(--ink); }
.lg-tile .lg-media { position: relative; width: 100%; display: block; background: #0c0d12; }
.lg-tile .lg-media img, .lg-tile .lg-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lg-fileico { width: 100%; height: 100%; display: grid; place-items: center; font-size: 30px; color: var(--muted); }
/* badge do tipo de mídia — mesma iconografia/estilo do badge-kind tradicional */
.lg-tile .lg-badge { position: absolute; top: 7px; left: 7px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: 4px; border-radius: 999px; background: rgba(10,11,15,.6); backdrop-filter: blur(4px); color: #fff; line-height: 0; }
.lg-tile .lg-badge svg { width: 14px; height: 14px; display: block; }
.lg-tile[data-kind] .lg-badge { color: var(--muted); }   /* galeria Local também neutra */
/* legenda (params usados) — mesmos chips das abas tradicionais; seed em destaque */
.lg-tile .lg-cap { display: flex; flex-direction: column; gap: 7px; padding: 9px 11px; }
.lg-cap .lg-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.lg-chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: #2a2d36; color: var(--muted); border: 1px solid var(--line); white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.lg-chip.seed { color: var(--accent-ink); border-color: var(--accent-glow); font-weight: 700; }
.lg-chip.dur { color: #ffd27a; border-color: rgba(255,196,81,.35); }
.lg-chip.lora { color: #c9b3ff; border-color: rgba(124,92,255,.35); }
.lg-fn { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-tile[data-kind] .lg-cap { background: #23252d; background-image: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.07); border-color: var(--line); }
/* GRID (mosaico): QUADRADO no tile (como o mode-grid tradicional) — no tile, não na
   mídia: com o aspect-ratio na mídia o grid fechava a linha antes de resolvê-lo e o
   tile colapsava numa tira. */
.lg-body.lg-media.lg-grid .lg-tile { aspect-ratio: 1 / 1; }
.lg-body.lg-media.lg-grid .lg-media { width: 100%; height: 100%; aspect-ratio: auto; }
.lg-body.lg-media.lg-grid .lg-fn { display: none; }
.lg-body.lg-media.lg-grid .lg-cap { display: none; }
/* ITEM GRANDE (um por linha): mídia grande + faixa de params embaixo */
.lg-body.lg-media.lg-col { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lg-body.lg-media.lg-col .lg-tile { flex: 0 0 auto; width: 100%; max-width: 860px; }
.lg-body.lg-media.lg-col .lg-media img, .lg-body.lg-media.lg-col .lg-media video { height: auto; max-height: 78vh; object-fit: contain; }
.lg-body.lg-media.lg-col .lg-media .lg-fileico { aspect-ratio: 16 / 10; height: auto; }
/* LISTA: linha com miniatura + params inline */
.lg-body.lg-media.lg-list { display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.lg-body.lg-media.lg-list .lg-tile { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: 10px; }
.lg-body.lg-media.lg-list .lg-tile:hover { border-color: var(--accent); }
.lg-body.lg-media.lg-list .lg-media { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 8px; overflow: hidden; }
.lg-body.lg-media.lg-list .lg-media .lg-fileico { font-size: 22px; }
/* badge ao LADO do thumb, como no mode-list tradicional (estático, transparente, 18/19px) */
.lg-body.lg-media.lg-list .lg-tile .lg-badge.badge-kind {
  position: static !important; order: 1; flex: 0 0 auto;
  background: transparent !important; backdrop-filter: none !important; box-shadow: none !important; padding: 0 !important;
}
.lg-body.lg-media.lg-list .lg-tile .lg-badge.badge-kind svg { width: 18px !important; height: 18px !important; }
.lg-body.lg-media.lg-list .lg-tile .lg-badge.badge-kind .bk-model { width: 19px !important; height: 19px !important; }
.lg-body.lg-media.lg-list .lg-media { order: 0; }
.lg-body.lg-media.lg-list .lg-fn-list { order: 2; }
.lg-body.lg-media.lg-list .lg-cap { order: 3; padding-right: 78px !important; }
.lg-body.lg-media.lg-list .lg-cap { flex: 1 1 auto; min-width: 0; padding: 0; gap: 4px; box-shadow: none !important; }
.lg-body.lg-media.lg-list .lg-cap .lg-meta { gap: 5px; }
.lg-body.lg-list { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.lg-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: transparent; border-radius: 8px; color: var(--ink); cursor: pointer; text-decoration: none; font-size: 13.5px; }
.lg-row:hover { background: rgba(255,255,255,.06); }
.lg-row .lg-ic { flex: 0 0 auto; width: 20px; text-align: center; }
.lg-row .lg-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-row .lg-sz { flex: 0 0 auto; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.lg-dir .lg-nm { font-weight: 600; }
/* mensagem de vazio/erro contida (não domina o painel largo da galeria Local) */
#localGalleryView .gallery-empty { max-width: 440px; margin: 24px auto 0; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.03); line-height: 1.5; }
/* na aba Local, a galeria não tem "Bibliotecas" (fal) */
body.on-local .gmain[data-gm="biblio"] { display: none !important; }
/* modo Nodes: a barra de cima da galeria FICA (Recentes/Output/etc + ícones); só o conteúdo some pra revelar o canvas */
#localGalBack { display: none !important; }   /* botão flutuante não é mais necessário (a barra volta) */

/* ===== Refs (Media) das abas clássicas iguais ao Local: MAIORES, 3 por linha, borda grossa ===== */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io > .ref-tile,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io > .ref-cap-wrap,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-group > .ref-tile,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-group > .ref-cap-wrap,
.a-refs > .ref-tile, .a-refs > .ref-cap-wrap {
  flex: 0 0 calc(33.333% - 7px) !important; max-width: calc(33.333% - 7px) !important; width: calc(33.333% - 7px) !important;
}
/* tile VAZIO (input de mídia) = borda grossa tracejada, como no Local */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile:not(.has-img):not(.has-vid):not(.has-file):not(.has-audio),
.a-refs .ref-tile:not(.has-img):not(.has-vid):not(.has-file):not(.has-audio) {
  border-width: 2px !important; border-style: dashed !important;
}
/* "+" = traço fino na cor do tipo (igual ao SVG do .mtile do Local) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile:not(.has-img):not(.has-vid):not(.has-file):not(.has-audio) .ref-plus {
  border: 0 !important; border-radius: 0 !important; font-size: 0 !important; color: transparent !important;
  width: 34% !important; height: 34% !important; background: var(--rt) !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='black' stroke-width='2.2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Ref carregado: o "+" some e a borda tracejada vira SÓLIDA (fina, cor do tipo) */
.ref-tile.has-img .ref-plus, .ref-tile.has-vid .ref-plus, .ref-tile.has-file .ref-plus, .ref-tile.has-audio .ref-plus { display: none !important; }
.ref-tile.has-img, .ref-tile.has-vid, .ref-tile.has-file, .ref-tile.has-audio { border-style: solid !important; border-width: 2px !important; border-color: var(--rt) !important; }

/* Ref carregado (imagem/vídeo): mostra o CONTEÚDO INTEIRO (contain), nunca corta — mesmo se for mais largo que o input */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-img,
.s-io .ref-tile.has-img, .ref-group .ref-tile.has-img, .a-refs .ref-tile.has-img {
  background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; background-color: rgba(0,0,0,.35) !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-vid .ref-thumb,
.ref-tile video.ref-thumb, .ref-tile img.ref-thumb {
  object-fit: contain !important; background: rgba(0,0,0,.35) !important;
}

/* ===== Lightboxes SEMPRE acima das janelas principais / filetes / divisores ===== */
.bg-menu { z-index: 1180 !important; }
.lightbox { z-index: 1200 !important; }
.modal { z-index: 1220 !important; }
.mcard-back { z-index: 1240 !important; }
.son-popover { z-index: 1260 !important; }
#tab-admin.tab.active { z-index: 1340 !important; pointer-events: auto !important; }   /* acima do pod (1300/1320); pe-auto: senão herda o none da .main na aba Local e as sub-abas não clicam */
body.pod-open::before { z-index: 1300 !important; }
#podPop:not([hidden]), body.pod-open #podPop { z-index: 1320 !important; }
.fd-backdrop { z-index: 1400 !important; }   /* dropdown de modelo acima de tudo (menos agente/login) */

/* ===== Ref inputs (abas tradicionais) = IDÊNTICOS aos media inputs do Local (.mtile) ===== */
/* cores por tipo iguais ao minicomfy */
.ref-tile.ref-t-image { --rt: #3b82f6; --rt-ink: #60a5fa; --rt-soft: rgba(59,130,246,.08); --rt-glow: #3b82f6; }
.ref-tile.ref-t-video { --rt: #a855f7; --rt-ink: #c084fc; --rt-soft: rgba(168,85,247,.08); --rt-glow: #a855f7; }
.ref-tile.ref-t-audio { --rt: #22c55e; --rt-ink: #4ade80; --rt-soft: rgba(34,197,94,.08); --rt-glow: #22c55e; }
/* tile: fundo tint do tipo (sem glass), borda 2px dashed, cantos 12, transição do mtile */
.s-io .ref-tile, .a-refs .ref-tile, .ref-group .ref-tile {
  background-color: var(--rt-soft) !important; background-image: none; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 2px dashed var(--rt) !important; border-radius: 12px !important;
  transition: transform .14s, box-shadow .14s, background .14s, border-color .14s !important;
}
/* hover (vazio) = sobe 1px + sombra + borda mais clara (igual ao .mtile) */
.s-io .ref-tile:not(.has-img):not(.has-vid):not(.has-file):not(.has-audio):hover,
.a-refs .ref-tile:not(.has-img):not(.has-vid):not(.has-file):not(.has-audio):hover,
.ref-group .ref-tile:not(.has-img):not(.has-vid):not(.has-file):not(.has-audio):hover {
  transform: translateY(-1px) !important; box-shadow: 0 6px 18px rgba(0,0,0,.33) !important; border-color: var(--rt-ink) !important;
}
/* carregado = borda sólida + fundo escuro + anel interno (igual .mtile.filled::after) */
.s-io .ref-tile.has-img, .s-io .ref-tile.has-vid, .s-io .ref-tile.has-file, .s-io .ref-tile.has-audio,
.a-refs .ref-tile.has-img, .a-refs .ref-tile.has-vid, .a-refs .ref-tile.has-file, .a-refs .ref-tile.has-audio,
.ref-group .ref-tile.has-img, .ref-group .ref-tile.has-vid, .ref-group .ref-tile.has-file, .ref-group .ref-tile.has-audio {
  border: 2px solid var(--rt) !important; background-color: #0b0e13 !important; box-shadow: inset 0 0 0 2px var(--rt) !important;
}

/* Gerenciador do RunPod como aba do ADM (o #podAdm é movido pra cá) */
#admRunpodPanel .pod-adm { display: grid !important; grid-template-columns: minmax(320px, 380px) 1fr; gap: 0 24px; align-items: start; }
#admRunpodPanel .pod-adm > .pod-lb-head { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
#admRunpodPanel .pod-adm > :not(.pod-lb-head):not(.pod-files) { grid-column: 1; }
#admRunpodPanel .pod-adm > .pod-files { grid-column: 2; grid-row: 2 / 100; padding-left: 24px; border-left: 1px solid var(--line); align-self: stretch; margin-top: 0; border-top: 0; }
#admRunpodPanel .pod-lb-x { display: none !important; }
#admRunpodPanel .pod-adm.show-logs { display: block !important; }
#admRunpodPanel .pod-adm.show-logs > :not(.pod-lb-head):not(.pod-logs) { display: none !important; }
#admRunpodPanel .pod-files-body { max-height: 52vh !important; }
.pod-actrow { display: flex; gap: 8px; margin-top: 6px; }
.pod-actrow .btn-primary.sm { flex: 1; }

/* ===== Gerenciador do RunPod (menu Pods / Storage / Templates) ===== */
.rpm { display: grid; grid-template-columns: 160px 1fr; min-height: 58vh; }
.rpm-nav { display: flex; flex-direction: column; gap: 4px; padding-right: 16px; border-right: 1px solid var(--line); }
.rpm-nav .rpm-tab { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 0; background: transparent; color: var(--muted); font-family: var(--sans); font-weight: 700; font-size: 13.5px; border-radius: 10px; cursor: pointer; text-align: left; }
.rpm-nav .rpm-tab svg { width: 17px; height: 17px; flex: 0 0 auto; }
.rpm-nav .rpm-tab:hover { background: rgba(255,255,255,.05); color: var(--ink); }
.rpm-nav .rpm-tab.on { background: var(--accent-soft); color: var(--accent-ink); }
.rpm-body { padding-left: 20px; min-width: 0; }
.rpm-h { font-family: var(--serif, inherit); font-size: 14px; font-weight: 800; margin: 0 0 10px; }
.rpm-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.rpm-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.02); }
.rpm-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rpm-row-main b { font-size: 13.5px; }
.rpm-sub { font-size: 12px; color: var(--muted); }
.rpm-badge { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--accent-ink); background: var(--accent-soft); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }
.rpm-row-act { flex: 0 0 auto; display: flex; gap: 6px; }
.rpm-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgba(255,255,255,.02); }
.rpm-card .rpm-h { margin-bottom: 8px; }
.rpm-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rpm-form .login-input, .rpm-form .dim-sel { flex: 1 1 auto; min-width: 120px; }
.rpm-form .login-input[type=number] { flex: 0 0 90px; min-width: 0; }
/* painel Pods = coluna única de controles (os Arquivos foram pra o item "Arquivos") */
#rpmPods .pod-adm { display: block !important; max-width: 460px; }
#rpmFiles .pod-files { margin-top: 0; border-top: 0; padding-top: 0; }
#rpmFiles .pod-files-body { max-height: 60vh; }

/* ===== Picker de GPU (lista alfabética com barrinha de disponibilidade) ===== */
.pod-gpu-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; text-align: left; }
.pod-gpu-chev { color: var(--muted); font-size: 11px; }
.pod-gpu-list { margin: 4px 0 2px; max-height: 340px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(0,0,0,.28); }
.gpu-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-bottom: 1px solid rgba(255,255,255,.05); background: transparent; color: var(--ink); cursor: pointer; text-align: left; font-size: 13px; }
.gpu-row:last-child { border-bottom: 0; }
.gpu-row:hover { background: rgba(255,255,255,.06); }
.gpu-row.gpu-off { opacity: .55; }
.gpu-row.picked { background: rgba(120,170,255,.12); box-shadow: inset 2px 0 0 var(--accent, #7aa9ff); }
.gpu-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.gpu-meta { flex: 0 0 auto; color: var(--muted); font-size: 11.5px; }
.gpu-fav { flex: 0 0 auto; background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--muted); opacity: .6; padding: 2px 4px; line-height: 1; }
.gpu-fav:hover { opacity: 1; }
.gpu-fav.on { color: #f5c04a; opacity: 1; }
.pod-gpu-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.gpu-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--ink); font-size: 12px; cursor: pointer; }
.gpu-chip:hover { background: rgba(255,255,255,.08); }
.gpu-chip.on { border-color: var(--accent, #7aa9ff); background: rgba(120,170,255,.16); font-weight: 600; }
.pod-gpu-note { font-size: 11.5px; color: var(--muted); margin: 2px 0 6px; }
.pod-fav { flex: 0 0 auto; background: none; border: 0; cursor: pointer; font-size: 14px; color: var(--muted); opacity: .6; padding: 2px 4px; line-height: 1; }
.pod-fav:hover { opacity: 1; }
.pod-fav.on { color: #f5c04a; opacity: 1; }
.gpu-bar { flex: 0 0 auto; display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; width: 16px; }
.gpu-bar i { width: 4px; height: 6px; border-radius: 1px; background: rgba(255,255,255,.16); }
.gpu-bar i:nth-child(2) { height: 10px; }
.gpu-bar i:nth-child(3) { height: 14px; }
.gpu-bar.l1 i.on { background: #ff8a3d; }
.gpu-bar.l2 i.on { background: #f5c451; }
.gpu-bar.l3 i.on { background: #38d39b; }
.gpu-bar.l0 i { background: rgba(255,90,110,.4); }

/* Pods (gerenciador ADM): mais respiro entre linhas e ID sem truncar */
#rpmPods .pod-adm .pod-line, #rpmPods .pod-adm .pod-nrow { margin-bottom: 10px; }
#rpmPods .pod-gpu-line { margin-top: 8px; }
#rpmPods .pod-id { flex: 1 1 auto; min-width: 0; word-break: break-all; }

/* Barra de progresso na Fila do Local */
/* Fila: barra de topo + botões de parar/excluir */
.lg-qbar { display: flex; align-items: center; gap: 10px; padding: 4px 6px 10px; }
.lg-qbar .lg-qcount { font-size: 12px; color: var(--muted); font-weight: 600; }
.lg-qclear { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 9px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #ff8f88; background: rgba(224,70,63,.12); border: 1px solid rgba(224,70,63,.35); }
.lg-qclear:hover { background: rgba(224,70,63,.22); color: #fff; }
.lg-qclear svg { width: 14px; height: 14px; }
.lg-qbtn { flex: 0 0 auto; width: 28px; height: 28px; display: grid; place-items: center; padding: 0; border-radius: 8px; cursor: pointer; color: var(--muted); background: transparent; border: 1px solid var(--line); }
.lg-qbtn svg { width: 14px; height: 14px; }
.lg-qbtn.stop:hover { color: #fff; background: #e0463f; border-color: #e0463f; }
.lg-qbtn.del:hover { color: #fff; background: #e0463f; border-color: #e0463f; }
.lg-queue .lg-row { cursor: default; }
.lg-qitem { padding: 4px 4px 10px; }
.lg-prog { height: 6px; border-radius: 4px; background: rgba(255,255,255,.10); overflow: hidden; margin: 2px 10px 0; }
.lg-prog > i { display: block; height: 100%; background: #38d39b; border-radius: 4px; transition: width .3s ease; }
.lg-prog.indet > i { width: 30% !important; animation: lgIndet 1.1s ease-in-out infinite; }
@keyframes lgIndet { 0% { margin-left: -30%; } 100% { margin-left: 100%; } }

/* chip de créditos do RunPod (topbar) + countdown */
.balchip.prov-runpod { }
#rpCreditRate { font-style: normal; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
#rpCreditRate.burn { color: #f5c451; }

/* aviso de GPU indisponível + migrar (painel Pods) */
.pod-gpu-warn { display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 10px 12px; border: 1px solid rgba(245,196,81,.45); background: rgba(245,196,81,.12); border-radius: 10px; font-size: 12.5px; color: #f5c451; }
.pod-gpu-warn[hidden] { display: none; }
.pod-gpu-warn .pgw-msg { flex: 1 1 auto; min-width: 0; }
.pod-gpu-warn .btn-primary.sm { flex: 0 0 auto; }

/* saída do diagnóstico RunPod (painel Pods) */
.pod-diag { display: block; white-space: pre-wrap; word-break: break-word; font: 11.5px/1.5 ui-monospace, Menlo, monospace; background: rgba(0,0,0,.28); border: 1px solid var(--stroke, rgba(255,255,255,.1)); border-radius: 10px; padding: 10px 12px; margin: 8px 0 0; max-height: 260px; overflow: auto; color: #cfd6e4; }
.pod-diag[hidden] { display: none; }

/* preview ao vivo da geração na fila Local (ModelPreviewOverride / latent preview) */
.lg-qprev { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: 10px; margin: 0 0 8px; background: #0c0e13; border: 1px solid var(--stroke, rgba(255,255,255,.1)); }

/* barra de status do pod (fase ao vivo) */
.pod-status { display: flex; align-items: center; gap: 8px; margin: 8px 0; padding: 8px 11px; border-radius: 10px; font-size: 12.5px; border: 1px solid var(--stroke, rgba(255,255,255,.1)); background: rgba(255,255,255,.04); }
.pod-status .ps-dot { flex: 0 0 auto; }
.pod-status .ps-msg { flex: 1 1 auto; min-width: 0; color: var(--ink); }
.pod-status .ps-bar { flex: 0 0 78px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
.pod-status .ps-bar i { display: block; height: 100%; background: var(--accent, #6ea8fe); border-radius: 3px; transition: width .4s ease; }
.pod-status .ps-bar.indet i { width: 40% !important; position: absolute; animation: psIndet 1.1s ease-in-out infinite; }
@keyframes psIndet { 0% { left: -40%; } 100% { left: 100%; } }
.pod-status[data-cls="on"] { border-color: rgba(56,211,155,.4); background: rgba(56,211,155,.10); }
.pod-status[data-cls="on"] .ps-dot { background: #38d39b; }
.pod-status[data-cls="mid"] { border-color: rgba(245,196,81,.4); background: rgba(245,196,81,.10); }
.pod-status[data-cls="mid"] .ps-dot { background: #f5c451; }
.pod-status[data-cls="err"] { border-color: rgba(255,107,107,.45); background: rgba(255,107,107,.10); }
.pod-status[data-cls="err"] .ps-dot { background: #ff6b6b; }
.pod-status[data-cls="off"] .ps-dot { background: #8a93a6; }
/* seção avançada do painel Pods */
.pod-adv { margin: 8px 0 4px; border: 1px solid var(--stroke, rgba(255,255,255,.1)); border-radius: 10px; padding: 0 10px; }
.pod-adv > summary { cursor: pointer; padding: 8px 2px; font-size: 12.5px; color: var(--muted); list-style: none; }
.pod-adv > summary::-webkit-details-marker { display: none; }
.pod-adv > summary::before { content: "▸ "; }
.pod-adv[open] > summary::before { content: "▾ "; }
.pod-adv[open] { padding-bottom: 10px; }

/* ===== Aba Doc (Projetos / Frame.io / Outros) ===== */
/* Doc não usa galeria: esconde e deixa o painel do Doc ocupar a largura (só no on-doc;
   o Frame.io usa on-frameio e mantém a galeria). Especificidade casa com 2557/2558. */
body.mode-play:not(.on-apps):not(.up-active).on-doc .gallery { display: none !important; }
body.mode-play:not(.on-apps):not(.up-active).on-doc .main { flex: 1 1 auto !important; max-width: none !important; }
body.on-doc #tab-frameio.tab.active, body.on-frameio #tab-frameio.tab.active { display: flex !important; flex-direction: column; height: 100%; max-width: none !important; margin: 0 !important; position: static !important; }
#tab-frameio .doc-nav { flex: 0 0 auto; display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
#tab-frameio .doc-tab { background: none; border: 0; color: var(--muted); padding: 7px 14px; border-radius: 9px; cursor: pointer; font-size: 13.5px; }
#tab-frameio .doc-tab:hover { color: var(--ink); background: rgba(255,255,255,.06); }
#tab-frameio .doc-tab.on { color: var(--ink); background: rgba(255,255,255,.10); }
#tab-frameio .doc-body { flex: 1 1 auto; min-height: 0; overflow: auto; }
body.on-frameio #tab-frameio .doc-body { overflow: hidden; }
#tab-frameio .doc-sec { height: 100%; }
.doc-placeholder { color: var(--muted); padding: 24px; font-size: 13.5px; }
.proj-root { padding: 18px 22px; }
.proj-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.proj-head h2 { margin: 0; font-size: 18px; }
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.proj-card { text-align: left; background: rgba(255,255,255,.04); border: 1px solid var(--line, rgba(255,255,255,.1)); border-radius: 14px; padding: 16px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; min-height: 84px; }
.proj-card:hover { border-color: var(--accent); background: rgba(255,255,255,.07); }
.proj-card .pc-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.proj-card .pc-meta { font-size: 12px; color: var(--muted); }
.proj-detail { height: 100%; display: flex; flex-direction: column; }
.pd-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); }
.pd-name { flex: 1; background: transparent; border: 1px solid transparent; color: var(--ink); font-size: 17px; font-weight: 600; padding: 6px 8px; border-radius: 8px; }
.pd-name:hover, .pd-name:focus { border-color: var(--line, rgba(255,255,255,.15)); background: rgba(255,255,255,.04); outline: none; }
.pd-body { flex: 1; display: grid; grid-template-columns: minmax(280px, 340px) 1fr; min-height: 0; }
.pd-links { border-right: 1px solid var(--line, rgba(255,255,255,.08)); padding: 14px; overflow: auto; }
.pd-h { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 8px; }
.pl-table { width: 100%; border-collapse: collapse; }
.pl-table td { padding: 7px 6px; border-bottom: 1px solid var(--line, rgba(255,255,255,.06)); font-size: 13px; vertical-align: middle; }
.pl-table .pl-nm { color: var(--ink); font-weight: 500; white-space: nowrap; }
.pl-table .pl-url a { color: var(--accent, #6ea8fe); text-decoration: none; }
.pl-table .pl-url a:hover { text-decoration: underline; }
.pl-table .pl-del button { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.pl-table .pl-del button:hover { color: #ff6b6b; background: rgba(255,107,107,.12); }
.pl-add { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.pl-add .login-input { flex: 1; min-width: 90px; }
.pd-canvas-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.pd-canvas-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line, rgba(255,255,255,.06)); }
.pd-canvas { position: relative; flex: 1; overflow: auto; min-height: 300px; background: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px) 0 0 / 22px 22px; }
.pc-item { position: absolute; background: #1b2130; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; padding: 8px 26px 8px 10px; font-size: 12.5px; color: var(--ink); cursor: grab; max-width: 240px; box-shadow: 0 4px 14px rgba(0,0,0,.3); user-select: none; }
.pc-item:active { cursor: grabbing; }
.pc-item.pc-note { background: #2a2616; border-color: rgba(245,196,81,.4); }
.pc-item.pc-note span { display: inline-block; min-width: 30px; white-space: pre-wrap; word-break: break-word; }
.pc-item.editing { cursor: text; box-shadow: 0 0 0 2px var(--accent, #6ea8fe); }
.pc-item.editing span { outline: none; cursor: text; }
.pc-item [contenteditable="true"] { outline: none; cursor: text; user-select: text; }
.pc-item a { color: var(--accent, #6ea8fe); text-decoration: none; }
.pc-item .pc-x { position: absolute; top: 2px; right: 2px; background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 11px; padding: 2px 5px; border-radius: 5px; }
.pc-item .pc-x:hover { color: #ff6b6b; }

/* ============================================================================
   CONSOLIDAÇÃO FINAL do cabeçalho do modelo (todas as abas) — ÚLTIMA PALAVRA.
   Uma linha: ícone + nome. Sem altura fixa, sem absolute, sem truncar
   (correção definitiva do "Seed Audio 1.0" cortado / atrás do blur).
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head {
  position: static !important; z-index: 7 !important; order: -1 !important;   /* rola junto — sem sticky */
  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important;
  height: auto !important; min-height: 44px !important; overflow: visible !important;   /* altura PADRÃO — igual em todas as abas (Áudio vinha mais baixo) */
  box-sizing: border-box !important;
  background: var(--bg) !important; border: 1px solid var(--line) !important; border-radius: 10px !important;
  padding: 7px 10px !important; margin: 0 0 6px 0 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-ic {
  position: static !important; transform: none !important; width: 18px !important; height: 18px !important;
  margin: 0 !important; flex: 0 0 auto !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select {
  position: static !important; flex: 1 1 auto !important; width: auto !important; margin: 0 !important;
  padding: 0 !important; height: auto !important; min-height: 0 !important; max-height: none !important;
  line-height: 1.35 !important; font-size: 15px !important; font-weight: 600 !important;
  overflow: visible !important; white-space: nowrap !important; text-overflow: ellipsis !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; color: var(--ink) !important;
  -webkit-appearance: none !important; appearance: none !important;
}
/* Treinamento usa o MESMO box do modelo das outras abas (a "barra clara" era o tr-zip-prog, já corrigido) */
/* hover do modelo: sem sub-box (o box é o próprio cabeçalho) */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select:hover,
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head > .model-select:focus,
body.mode-play:not(.on-apps):not(.up-active) .studio .play-model-head:hover > .model-select {
  background: transparent !important; background-image: none !important;
  border: 0 !important; box-shadow: none !important; outline: none !important;
}
/* ===== Inputs de REF: idênticos em TODOS os modelos/abas =====
   Qualquer variante (a-el-media, of-slot, up-in, d3-*, seg…) usa a mesma
   caixa: 60×60, mesmo raio, mesma borda tracejada e o mesmo "+". */
/* ATENÇÃO: NÃO usar `display` aqui. O JS esconde os inputs incompatíveis com
   style.display='none' (inline), e um `display:...!important` anularia isso —
   fazendo TODO modelo mostrar TODOS os inputs. Só tamanho/forma. */
.ref-tile, .ref-tile.a-el-media, .ref-tile.of-slot, .ref-tile.up-in {
  width: 60px !important; height: 60px !important; min-width: 60px !important; min-height: 60px !important;
  border-radius: 12px !important; box-sizing: border-box !important;
  place-items: center; background-size: cover !important; background-position: center !important;
}
.ref-tile[style*="display: none"], .ref-tile[style*="display:none"] { display: none !important; }
/* grupos de refs (frame in/out, listas etc.): inline none SEMPRE vence os display:flex!important
   do modo Play — senão, no 1º acesso à aba, aparecem os inputs de TODOS os modos */
.ref-group[style*="display: none"], .ref-group[style*="display:none"] { display: none !important; }
.ref-tile .ref-plus { font-size: 26px !important; font-weight: 300 !important; }
/* tile sem classe de tipo: cai no cinza neutro (nunca no accent da aba) */
.ref-tile:not(.ref-t-image):not(.ref-t-video):not(.ref-t-audio):not(.ref-t-3d):not(.ref-t-zip) {
  --rt: #8a90a0; --rt-ink: rgba(205,210,220,.95); --rt-soft: rgba(138,144,160,.20); --rt-glow: rgba(138,144,160,.5);
}
/* checkboxes: respiro vertical em relação ao parâmetro de cima (estavam colados) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field.chk,
.studio .s-params .field.chk,
.s-params .field.chk { margin-top: 12px !important; padding-top: 2px !important; row-gap: 6px !important; }
.s-params .field.chk + .field.chk { margin-top: 8px !important; }   /* entre checkboxes, um respiro menor */
/* log de Erros: deslocado da rail de apps (50px) pra não ficar escondido atrás dela */
.debug-fab { right: 64px !important; }
.debug { right: 64px !important; }
/* modal do MiniComfy (ex.: "Mapear parâmetros") aberto: iframe sobe acima da galeria (senão os
   ícones Galeria/Fila/Nodes, que ficam numa camada própria, desenhavam por cima do modal). */
body.local-modal-open #localNodesView { z-index: 2 !important; }
/* Terminal do pod (Local · ADM): só a janela preta, ocupando tudo */
.lg-body.lg-webterm { display: block; padding: 0 !important; height: 100%; overflow: hidden; background: #000; }
.lg-wt-frame { display: block; width: 100%; height: 100%; border: 0; background: #000; }
/* App LLM (chat Gemini) */
.llm-wrap { display: flex; flex-direction: column; height: calc(100vh - var(--topbar-h) - 120px); min-height: 380px; }
.llm-top { display: flex; align-items: center; gap: 10px; padding: 0 2px 8px; border-bottom: 1px solid var(--line-2); margin-bottom: 8px; }
.llm-tokens { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.llm-top .btn-ghost { margin-left: auto; }
.llm-bar textarea { flex: 1 1 auto; resize: none; background: #20222b; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); font-family: var(--sans); font-size: 13.5px; line-height: 1.5; padding: 10px 12px; max-height: 200px; }
.llm-bar textarea:focus { outline: none; border-color: var(--accent); }
.llm-attbtn { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 17px; }
.llm-attbtn:hover { color: var(--ink); border-color: var(--accent); }
/* LLM: caixa larga (cresce pra baixo) + ações embaixo */
.llm-bar { display: block !important; padding: 8px 0 0 !important; }
.llm-bar textarea { width: 100%; display: block; min-height: 76px; max-height: 420px; overflow-y: auto; }
.llm-actions { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.llm-actions .btn-primary { margin-left: auto; min-width: 120px; }
.llm-attbtn { flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.llm-attbtn svg { width: 17px; height: 17px; }
.llm-attbtn:hover { color: var(--ink); border-color: var(--accent); }
.llm-att-file { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-size: 12px; color: var(--ink); max-width: 220px; }
.llm-att-file .llm-att-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.llm-att-file button { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 0 2px; }
.llm-att-file button:hover { color: #ff6b6b; }
/* tooltip dos apps (elemento no body — a rail tem backdrop-filter e prendia o ::after) */
.app-rail-btn::after, .app-rail-btn::before { content: none !important; }   /* aposenta o tooltip via pseudo-elemento */
.rail-tip {
  position: fixed; z-index: 2147483000; pointer-events: none; opacity: 0; transform: translateX(6px);
  padding: 7px 12px; border-radius: 10px; white-space: nowrap;
  background: linear-gradient(180deg, rgba(30,32,44,.98), rgba(20,22,30,.98)); color: var(--ink);
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 14px 34px rgba(0,0,0,.55);
  font-family: var(--sans); font-size: 12px; font-weight: 700; letter-spacing: .2px;
  transition: opacity .14s ease, transform .22s cubic-bezier(.16,1,.3,1);
}
.rail-tip.on { opacity: 1; transform: translateX(0); }
/* Local: a .main fica com pointer-events:none (pro canvas do iframe receber o mouse), mas a rail de
   apps mora dentro dela e herdava o bloqueio — clique atravessava pro canvas (cursor de mão). */
body.on-local .app-rail, body.on-local .app-rail * { pointer-events: auto !important; }
body.on-local .app-rail { z-index: 300 !important; }
/* status do pod: estado de atenção (ex.: aguardando o RunPod alocar a GPU) */
.pod-status[data-cls="warn"] { border-color: rgba(245,196,81,.45); background: rgba(245,196,81,.10); }
.pod-status[data-cls="warn"] .ps-dot { background: #f5c451; }
/* aviso de GPU: bloco no fluxo normal do painel (nunca flutuando/sobrepondo) */
.pod-gpu-warn { position: static !important; width: 100% !important; box-sizing: border-box !important;
  flex-wrap: wrap; row-gap: 8px; line-height: 1.4; }
.pod-gpu-warn .pgw-msg { overflow-wrap: anywhere; }
.pod-gpu-warn .btn-primary.sm { white-space: nowrap; }
/* migrar de servidor (regiões com estoque) */
.pod-regions { margin: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.pod-regions[hidden] { display: none; }
.pr-row { border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px; background: rgba(255,255,255,.02); }
.pr-h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin-bottom: 7px; }
.pr-h .pr-n { margin-left: auto; color: var(--muted); font-size: 11.5px; }
.pr-vol { font-size: 10.5px; font-weight: 700; color: #86e3a6; border: 1px solid rgba(53,196,106,.4); border-radius: 999px; padding: 1px 7px; }
.pr-novol { font-size: 10.5px; font-weight: 700; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; }
.pr-gpus { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-gpu { font-size: 12px; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.pr-gpu:hover { border-color: var(--accent); background: var(--card-2); }
.pr-gpu:disabled { opacity: .5; cursor: default; }
/* nome do arquivo: só na LISTA (nunca flutuando sobre a mídia) */
.lg-fn-list { display: none; }
.lg-body.lg-media.lg-list .lg-fn-list { display: block; flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--ink); }
/* chip de seed clicável (copia) */
.lg-chip.lg-copy { cursor: pointer; }
.lg-chip.lg-copy:hover { border-color: var(--accent); color: var(--accent-ink); }
.lg-chip.lg-copy.copied { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
/* ============================================================================
   MOSAICO (mode-grid) — correção de conflito: um bloco antigo (grid) forçava
   .tile{width:100%} com especificidade maior que o bloco novo (flex+sz-*), então
   cada tile ocupava a linha inteira. Aqui a regra flex vira a definitiva.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile {
  width: auto !important; aspect-ratio: auto !important; break-inside: auto !important; margin: 0 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile.sz-std   { flex: 1 1 170px !important; max-width: none !important; aspect-ratio: 1 / 1 !important; }   /* PREENCHE a linha */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile.sz-audio { flex: 1 1 220px !important; max-width: none !important; aspect-ratio: 2 / 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile.sz-lo    { flex: 0 0 calc(33.333% - 6px) !important; aspect-ratio: 1 / 1 !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile.sz-doc   { flex: 0 0 calc(20% - 7px) !important; aspect-ratio: 1 / 1 !important; }
/* tile sem classe de tamanho: quadrado padrão (não estica a linha) */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile:not(.sz-std):not(.sz-audio):not(.sz-lo):not(.sz-doc) {
  flex: 1 1 170px !important; max-width: none !important; aspect-ratio: 1 / 1 !important;
}
/* conta (e-mail/usuário) dona da credencial, ao lado do nome da key */
.adm-key-name .adm-key-acc { display: block; font-size: 11px; font-weight: 500; color: var(--muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* galeria Local: tiles de "gerando" / "na fila" (espelha o comportamento das abas tradicionais) */
.lg-tile.lg-proc { border-style: dashed; background: #14161d; }
.lg-tile.lg-proc .lg-media { position: relative; display: grid; place-items: center; min-height: 120px; background: #0c0d12; }
.lg-tile.lg-proc .lg-proc-prev { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: blur(1px); }
.lg-tile.lg-proc .lg-spin { position: relative; z-index: 2; width: 26px; height: 26px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--accent); animation: lgSpin .9s linear infinite; }
@keyframes lgSpin { to { transform: rotate(360deg); } }
.lg-tile.lg-pending .lg-queue-n { font-size: 18px; font-weight: 800; color: var(--muted); }
.lg-body.lg-media.lg-grid .lg-tile.lg-proc .lg-cap { display: flex; padding: 6px 8px; }
/* Terminal do pod: placeholder atrás do iframe (aparece se o web terminal não estiver de pé) */
.lg-body.lg-webterm { position: relative; }
.lg-wt-ph { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; color: var(--muted); }
.lg-wt-ph-t { font-size: 15px; font-weight: 700; color: var(--ink); }
.lg-wt-ph-d { font-size: 12.5px; line-height: 1.6; max-width: 420px; }
.lg-wt-ph-b { font-size: 12.5px; font-weight: 700; color: var(--accent-ink); border: 1px solid var(--accent-glow); border-radius: 9px; padding: 7px 14px; text-decoration: none; }
.lg-wt-ph-b:hover { background: var(--accent-soft); }
.lg-wt-frame { position: relative; z-index: 1; }
/* abas do Local sem pod: mensagem simples */
.gallery-empty.lg-off { font-size: 14px; font-weight: 600; color: var(--muted); padding: 44px 12px; }
/* TERMINAL sem pod / não iniciado: fundo preto com "salva-hub" na fonte do terminal */
.lg-term-off {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; background: #000;
  font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  font-size: 15px; letter-spacing: .06em; color: #5f6a7d; user-select: none;
}
/* ============================================================================
   GALERIA NEUTRA: não segue o mood da aba (azul/roxo/verde/lima…).
   Redefinindo as variáveis de accent DENTRO da galeria, tudo que herda delas
   (chips, bordas, seleção, hovers) passa a usar o cinza neutro do hub.
   Exceção: os ref-tiles seguem o color-code por TIPO de mídia (regra própria).
   ============================================================================ */
.gallery, .queue-panel {
  --accent: #8a90a0;
  --accent-soft: rgba(138, 144, 160, 0.18);
  --accent-ink: #cdd3df;
  --accent-glow: rgba(138, 144, 160, 0.42);
}
/* modelo sem inputs: sem área de refs; sem refs E sem mídia: sem palco (nada de caixa vazia) */
body.mode-play:not(.on-apps):not(.up-active) .studio.no-refs .s-io { display: none !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-stage.stage-empty { display: none !important; }
/* limite de referências: "2/4 imagens" ao lado do grupo de tiles */
.ref-cap-count { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 800; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted); opacity: .75; }
.ref-cap-count.full { color: var(--accent-ink); opacity: 1; }
/* ============================================================================
   DROPDOWN CUSTOM acima de TUDO. Estava em z-index 120/121, abaixo da rail de
   apps (200), do lightbox (1200) e do card de modelo (1240) — por isso não dava
   pra passar o mouse nem clicar nos itens: outro elemento cobria o painel.
   ============================================================================ */
.fd-backdrop { z-index: 2147483200 !important; pointer-events: auto !important; }
.fd-panel { z-index: 2147483210 !important; pointer-events: auto !important; }
.fd-panel .fd-opt { pointer-events: auto !important; }
/* card do modelo: overlay nunca captura clique (só o card em si) */
.mcard-back { pointer-events: none !important; }
.mcard-back .mcard { pointer-events: auto !important; }
/* ============================================================================
   CHECKBOXES (todos os modelos): rótulo à DIREITA, na MESMA linha do checkbox.
   Antes o título ficava acima e centralizado (herança do layout de "chip").
   Exceção: o de som na geração de vídeo, que é só o ícone de alto-falante.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field.chk,
.s-params .field.chk {
  flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
  gap: 8px !important; flex-wrap: nowrap !important; width: auto !important; flex-basis: auto !important; max-width: none !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field.chk > span,
.s-params .field.chk > span {
  order: 2 !important; text-align: left !important; text-transform: none !important;
  font-size: 12px !important; letter-spacing: 0 !important; font-weight: 500 !important;
  color: var(--muted) !important; white-space: nowrap !important; margin: 0 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field.chk > input[type=checkbox],
.s-params .field.chk > input[type=checkbox] { order: 1 !important; margin: 0 !important; flex: 0 0 auto !important; }
/* som do vídeo: só o ícone (sem rótulo), alinhado com os demais controles */
#vAudioField { align-self: center !important; margin-bottom: 0 !important; }
/* 3D na galeria: tile SEMPRE quadrado (não estica) + turntable por cima do poster */
.tile-3d { aspect-ratio: 1 / 1 !important; max-height: 320px; overflow: hidden; }
.gallery-col.mode-col .tile-3d { aspect-ratio: 16 / 10 !important; max-height: 260px; }
.tile-3d img { width: 100% !important; height: 100% !important; object-fit: contain !important; }
.tile-3d model-viewer.tile-3d-mv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; background: transparent; }
.tile-3d.spinning > img { opacity: 0; transition: opacity .25s ease; }   /* o giro substitui o poster */
.tile-3d .tile-3d-badge { z-index: 2; }
/* ============================================================================
   ÁUDIO na galeria: card baixo (como o 3D). O waveform não precisa de altura —
   ele é legível numa faixa, e a leitura completa fica no lightbox.
   ============================================================================ */
.media.audio { padding: 10px 12px !important; }
.tile .media.audio { max-height: 132px; overflow: hidden; }
.tile .media.audio .wave { height: 56px !important; min-height: 0 !important; }
.tile .audio-card { gap: 6px !important; }
.tile .audio-card .audio-ic { width: 22px !important; height: 22px !important; }
/* coluna (item grande): faixa mais larga, ainda baixa */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile[data-kind="audio"] .media,
.gallery-col.mode-col .tile .media.audio { aspect-ratio: auto !important; height: auto !important; max-height: 120px !important; }
.gallery-col.mode-col .tile .media.audio .wave { height: 64px !important; }
/* mosaico: mantém o 2:1 e encolhe o waveform pra caber sem esticar */
.gallery-col.mode-grid .tile.sz-audio .media.audio { max-height: 100% !important; padding: 8px 10px !important; }
.gallery-col.mode-grid .tile.sz-audio .wave { height: 44px !important; }
/* ============================================================================
   CHECKBOXES — REFORÇO FINAL com especificidade nível-ID e cobertura de TODOS
   os label.field.chk (alguns vivem fora de .s-params, ex.: linhas .row do 3D).
   Layout: [switch] Rótulo, lado a lado, à esquerda.
   ============================================================================ */
#app label.field.chk, .tab label.field.chk, label.field.chk,
/* checkbox: caixinha + rótulo lado a lado, colados à ESQUERDA do slot, e o slot vale 1/3
   do painel — logo, no máximo 3 por linha (o container quebra sozinho a partir do 4º). */
#tab-3d .s-params .field.chk, #tab-image .s-params .field.chk, #tab-video .s-params .field.chk, #tab-audio .s-params .field.chk {
  display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important;
  gap: 8px !important; flex-wrap: nowrap !important;
  width: calc(33.333% - 8px) !important; flex: 0 0 calc(33.333% - 8px) !important; max-width: calc(33.333% - 8px) !important;
}
#app label.field.chk > span, .tab label.field.chk > span, label.field.chk > span {
  order: 2 !important; text-align: left !important; text-transform: none !important;
  font-size: 12px !important; letter-spacing: 0 !important; font-weight: 500 !important;
  color: var(--muted) !important; white-space: nowrap !important; margin: 0 !important; display: inline !important;
}
#app label.field.chk > input[type=checkbox], .tab label.field.chk > input[type=checkbox], label.field.chk > input[type=checkbox] {
  order: 1 !important; margin: 0 !important; flex: 0 0 auto !important;
}
/* som do vídeo: SÓ o ícone de alto-falante (nunca vira linha com texto) */
#vAudioField, body.mode-play #vAudioField, .studio #vAudioField {
  display: inline-flex !important; width: auto !important; flex: 0 0 auto !important;
  flex-direction: row !important; align-items: center !important; gap: 0 !important; margin: 0 !important; padding: 0 !important;
}
#vAudioField .spk-ico { width: 30px !important; height: 30px !important; display: block !important; }
#vAudioField span:not(.spk-ico) { display: none !important; }
/* sentinela de versão (lida pelo app.js pra logar qual CSS chegou no navegador) */
body::after { content: "css-v450"; display: none; }
/* Áudio: respiro entre o prompt e o rodapé (Gerar) — estava colado */
body.mode-play:not(.on-apps):not(.up-active) #tab-audio .studio .s-prompt { margin-bottom: 14px !important; padding-bottom: 4px !important; }
/* abas do canvas de vídeo (Refs · Frames) — overlay no topo do palco */
.stage-tabs { grid-area: 1 / 1; align-self: start; justify-self: center; margin-top: 10px; z-index: 8;
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px;
  background: rgba(10,11,15,.72); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.stage-tabs .st-tab { border: 0; background: transparent; color: var(--muted); font-family: var(--sans);
  font-size: 12px; font-weight: 700; padding: 6px 14px; border-radius: 8px; cursor: pointer; }
.stage-tabs .st-tab:hover { color: var(--ink); }
.stage-tabs .st-tab.on { background: var(--accent); color: #fff; }
/* abas do canvas: coladas no TOPO, texto caixa alta */
.stage-tabs { margin-top: 0 !important; border-radius: 0 0 11px 11px !important; border-top: 0 !important; }
.stage-tabs .st-tab { text-transform: uppercase; letter-spacing: .4px; }
/* REFS/FRAMES: barra colada no topo do BOX do canvas, ocupando a borda (menor) */
.stage-tabs {
  align-self: start !important; justify-self: stretch !important; margin: 0 !important;
  width: 100%; gap: 0 !important; padding: 0 !important;   /* SEM display forçado — o JS esconde nos modelos sem Refs/Frames */
  border-radius: 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(10,11,15,.85) !important;
}
.stage-tabs .st-tab { flex: 1 1 0; padding: 5px 10px !important; font-size: 10.5px !important; border-radius: 0 !important; }
.stage-tabs .st-tab.on { background: rgba(255,255,255,.08) !important; color: var(--accent-ink) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
/* áudio na galeria: dobro da altura anterior */
.tile .media.audio { max-height: 264px !important; }
.tile .media.audio .wave { height: 112px !important; }
.gallery-col.mode-col .tile .media.audio { max-height: 240px !important; }
.gallery-col.mode-col .tile .media.audio .wave { height: 128px !important; }
.gallery-col.mode-grid .tile.sz-audio .wave { height: 88px !important; }
.stage-tabs { order: -1 !important; position: relative; }   /* sempre 1ª no fluxo do palco */
/* REFS/FRAMES: sem caixa — só o texto; ativa = sublinhado; respiro maior até os tiles */
.stage-tabs {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  justify-self: start !important; width: auto !important; gap: 18px !important;
  padding: 10px 14px 0 !important; margin-bottom: 14px !important;
}
.stage-tabs .st-tab { flex: 0 0 auto !important; padding: 4px 2px !important; background: transparent !important; box-shadow: none !important; }
.stage-tabs .st-tab.on { background: transparent !important; color: var(--accent-ink) !important; box-shadow: inset 0 -2px 0 var(--accent) !important; }
.stage-tabs .st-tab:hover { color: var(--ink) !important; }
/* tiles descem um pouco (respiro extra sob as abas) */
#tab-video .s-stage > .s-io { margin-top: 14px !important; }
/* abas REFS/FRAMES centralizadas no topo do canvas */
.stage-tabs { justify-self: center !important; padding: 10px 0 0 !important; }
/* (frames voltaram ao alinhamento padrão à esquerda) */
/* faixa de SUBMODELOS: entre o modelo e o canvas */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-sub-row {
  order: 0 !important; display: flex; flex-direction: column; gap: 6px; margin: 0 0 6px;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .play-sub-row > select.dim-sel,
body.mode-play:not(.on-apps):not(.up-active) .studio .play-sub-row .field > select.dim-sel { width: 100%; }
body.mode-play:not(.on-apps):not(.up-active) .studio .play-sub-row .field { margin: 0 !important; }
.play-sub-row:empty { display: none !important; }
/* abas REFS/FRAMES centradas; inputs de ref alinhados à ESQUERDA (padrão) */
.stage-tabs { justify-self: center !important; align-self: start !important; margin-left: auto !important; margin-right: auto !important; }

/* barra escondida pelo JS vence qualquer regra */
.stage-tabs[style*="display: none"], .stage-tabs[style*="display:none"] { display: none !important; }
/* contador escondido via [hidden] tem que sumir MESMO (o display:inline-block anulava o atributo) */
.ref-cap-count[hidden] { display: none !important; }
/* REFS/FRAMES: textos centralizados no canvas */
.stage-tabs { width: 100% !important; justify-content: center !important; justify-self: stretch !important; }
/* checkboxes: até 3 por linha, encostados à ESQUERDA, menos respiro vertical */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params { flex-wrap: wrap !important; }
#app label.field.chk, .tab label.field.chk, label.field.chk {
  flex: 0 0 auto !important; width: calc(33.333% - 6px) !important; max-width: calc(33.333% - 6px) !important;
  margin-top: 6px !important; padding-top: 0 !important;
  justify-content: flex-start !important;      /* caixinha+rótulo colados na esquerda do slot */
}
#app label.field.chk > span, .tab label.field.chk > span, label.field.chk > span { text-align: left !important; }
.s-params .field.chk + .field.chk { margin-top: 6px !important; }
/* ============================================================================
   CHECKBOXES 3-POR-LINHA (de verdade): o s-params é COLUNA no layout atual —
   50% de largura não cria colunas. Troco container (e .row) pra linha+quebra:
   todo campo ocupa 100% (um por linha), EXCETO checkbox = 1/3 (tres por linha, alinhados a esquerda).
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > .row,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > div[id] {
  flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important;
  gap: 6px 8px !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > *,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > .row > *,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params > div[id] > * {
  flex: 0 0 100%; min-width: 0;
}
/* ============================================================================
   GRADE DE CHECKBOXES — os containers de parâmetro são COLUNA (cada campo numa
   linha, por design do painel estreito), então um checkbox sozinho ficava no meio.
   O JS junta os checkboxes de cada container num .chk-grid, e aqui essa grade vira
   linha com quebra: sempre encostados à ESQUERDA e no máximo 3 por linha.
   ============================================================================ */
.chk-grid {
  display: flex !important; flex-direction: row !important; flex-wrap: wrap !important;
  justify-content: flex-start !important; align-items: center !important;
  gap: 6px 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
.chk-grid:empty { display: none !important; }
.chk-grid > label.field.chk {
  flex: 0 0 calc(33.333% - 6px) !important; width: calc(33.333% - 6px) !important; max-width: calc(33.333% - 6px) !important;
  margin: 0 !important; justify-content: flex-start !important;
}
/* a fileira de checkboxes nunca centraliza — começa na esquerda e quebra em 3 por linha */
#app .s-params, .tab .s-params,
#app .s-params .row, .tab .s-params .row { justify-content: flex-start; }
/* checkbox escondido por modelo (style/hidden) NUNCA é ressuscitado pelo display:flex do layout */
label.field.chk[style*="display: none"], label.field.chk[style*="display:none"], label.field.chk[hidden] { display: none !important; }
/* guarda reforçada (especificidade acima de qualquer regra de layout dos checkboxes).
   ATENÇÃO à especificidade: as regras que forçam `display:flex !important` nos checkboxes
   têm ID no seletor (#tab-audio/#tab-image/#tab-video/#tab-3d/#app). Uma guarda SEM id perde
   pra elas e o checkbox ressuscita — era o que fazia Loop/Instrumental/Limpar-ruído
   aparecerem em TODOS os submodelos do ElevenLabs. Por isso a guarda repete os mesmos ids. */
html body label.field.chk[style*="display: none"], html body label.field.chk[style*="display:none"], html body label.field.chk[hidden],
html body #app .field.chk[style*="display: none"], html body #app .field.chk[style*="display:none"], html body #app .field.chk[hidden],
html body #tab-3d .field.chk[style*="display: none"], html body #tab-3d .field.chk[style*="display:none"], html body #tab-3d .field.chk[hidden],
html body #tab-audio .field.chk[style*="display: none"], html body #tab-audio .field.chk[style*="display:none"], html body #tab-audio .field.chk[hidden],
html body #tab-image .field.chk[style*="display: none"], html body #tab-image .field.chk[style*="display:none"], html body #tab-image .field.chk[hidden],
html body #tab-video .field.chk[style*="display: none"], html body #tab-video .field.chk[style*="display:none"], html body #tab-video .field.chk[hidden] { display: none !important; }
/* vídeo: a faixa de submodo não existe — as abas do canvas substituem TODOS os modos */
#tab-video .play-sub-row { display: none !important; }

/* ---------- @menções: mini-dropdown de refs no prompt ---------- */
#atMenu{position:absolute;z-index:2147483300;min-width:190px;max-width:280px;max-height:236px;overflow:auto;background:#16181d;border:1px solid #2a2e37;border-radius:10px;padding:4px;box-shadow:0 12px 32px rgba(0,0,0,.55);font-size:12.5px}
#atMenu .at-it{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:7px;cursor:pointer;color:#cfd3da;white-space:nowrap}
#atMenu .at-it.on,#atMenu .at-it:hover{background:#242a34;color:#fff}
#atMenu .at-th{width:26px;height:26px;border-radius:6px;background-size:cover;background-position:center;flex:none;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;background-color:#0d0f13}
#atMenu video.at-th{pointer-events:none}
#atMenu .at-th-ico{font-size:13px;color:#8a90a0}
#atMenu .at-tok{margin-left:auto;padding-left:14px;color:#7c8494;font-size:11px}
#atMenu .at-empty{padding:8px 10px;color:#7c8494}
/* contador do tile de áudio: EMBAIXO do tile, alinhado à esquerda. Ancorado por
   posição absoluta (não mexe na grade) + margem no tile reserva a altura (nada sobrepõe). */
.ref-tile > .ref-cap-count.in-tile{display:inline-block;position:absolute;left:2px;top:calc(100% + 9px);bottom:auto;margin:0;white-space:nowrap;pointer-events:none;z-index:3}
.ref-tile:has(> .ref-cap-count.in-tile:not([hidden])){margin-bottom:24px}
/* contador dentro de wrapper centrado (ex.: vozes do Seed Audio): alinha à esquerda */
.ref-cap-wrap > .ref-cap-count{align-self:flex-start}

/* ============================================================================
   GALERIA NEUTRA — ÚLTIMA PALAVRA. Os itens não carregam cor de tipo de mídia
   nem o mood da aba: só os ÍCONES (modelo + tipo) identificam. Rodapé de
   parâmetros, borda do card e chips ficam sempre neutros.
   ============================================================================ */
.gallery .tile, .gallery-col .tile, .gallery-grid .tile,
.lg-tile { border-color: var(--line) !important; }
.gallery .tile:hover, .gallery-col .tile:hover, .lg-tile:hover,
.lg-body.lg-media.lg-list .lg-tile:hover { border-color: rgba(255,255,255,.26) !important; }
.tile.sel { box-shadow: 0 0 0 3px rgba(255,255,255,.42) !important; }
.tile.sel .tsel { background: #e9ecf3 !important; border-color: #e9ecf3 !important; }
.tile.sel .tsel::after { border-left-color: #14161d !important; border-bottom-color: #14161d !important; }
/* fundo do CARD sólido neutro: var(--panel) embute o tint do mood e vazava como
   um filete colorido em volta da mídia/rodapé */
.gallery .tile, .gallery-col .tile, .gallery-grid .tile, .lg-tile { background: #14161d !important; background-image: none !important; }
/* rodapé de parâmetros (+ borda) neutro em TODOS os tipos e abas.
   NÃO usar var(--panel-2): ela embute o tint do accent do mood (rodapé saía roxo no Vídeo). */
.tile .tile-cap, .lg-tile .lg-cap {
  background: #23252d !important; background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07) !important;
  border-color: var(--line) !important;
}
.lg-body.lg-media.lg-list .lg-cap { background: transparent !important; box-shadow: none !important; }
/* chips do rodapé: sem destaque colorido (seed/duração/lora) */
.tc-chip, .lg-chip,
.tc-chip.seed, .tc-chip.dur, .tc-chip.lora,
.lg-chip.seed, .lg-chip.dur, .lg-chip.lora {
  color: var(--muted) !important; border-color: var(--line) !important;
  background: #2a2d36 !important; background-image: none !important;
}
/* waveform do áudio: fundo neutro (era verde) */
.tile .media.audio, .lg-tile .lg-media.audio { background: #14161d !important; }
/* ícones do card: cinza neutro (o logo do modelo mantém suas cores próprias) */
.tile .badge-kind, .lg-tile .lg-badge { color: var(--muted) !important; }

/* Rodapé do tile: mostra o MÁXIMO de parâmetros — chips quebram em várias linhas
   (antes era uma faixa de 50px com nowrap, que cortava quase tudo). */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .tile-cap {
  height: auto !important; min-height: 50px !important; max-height: none !important;
  flex-direction: column !important; align-items: flex-start !important; justify-content: center !important;
  gap: 5px !important; padding: 8px 12px !important; overflow: hidden !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-col .tile .tc-meta {
  flex-wrap: wrap !important; overflow: visible !important; gap: 5px !important; width: 100% !important;
}
.tile .tc-meta { flex-wrap: wrap !important; }
.tile .tc-chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* modo lista: mantém uma linha só (o card é baixinho) */
.gallery-col.mode-list .tile .tc-meta { flex-wrap: nowrap !important; overflow: hidden !important; }

/* 3D no lightbox: arrastar pra girar não pode selecionar os textos ao redor.
   (a seleção nasce fora do model-viewer, então a trava tem de valer no lightbox todo
   enquanto o botão está pressionado — body.rot3d é ligado no pointerdown) */
body.rot3d, body.rot3d * { user-select: none !important; -webkit-user-select: none !important; }
body.rot3d { cursor: grabbing !important; }

/* tempo da geração sempre à direita (galeria tradicional e Local) */
.tc-meta .tc-chip.dur, .lg-meta .lg-chip.dur { margin-left: auto !important; order: 99 !important; }

/* ===== Doc: Projetos e Frame.io dividem a mesma tela (um de cada lado) ===== */
.proj-cols { display: grid; grid-template-columns: 2fr 1fr; gap: 0; height: 100%; min-height: 0; }   /* Projetos 2/3 (canvas respira) · Frame.io 1/3 */
.proj-cols > .proj-root { min-width: 0; overflow: auto; }
.proj-cols > .proj-fio { min-width: 0; min-height: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; }
.proj-cols .fio-wrap { height: 100% !important; min-height: 0; }
.proj-cols .fio-side { height: 100%; padding: 14px 16px; }
.proj-cols .fio-tree { max-width: none; flex: 1 1 auto; min-height: 0; overflow: auto; }
#docProjetos { height: 100%; min-height: 0; }
@media (max-width: 820px) { .proj-cols { grid-template-columns: 1fr; } .proj-cols > .proj-fio { border-left: 0; border-top: 1px solid var(--line); } }

/* Doc: sem sub-abas — a tela já é Projetos + Frame.io lado a lado */
#tab-frameio .doc-nav { display: none !important; }
/* miniatura do filme na lista do Frame.io (quando o token tem escopo de mídia) */
.fio-ico.fio-thumb { width: 46px; height: 26px; border-radius: 5px; overflow: hidden; background: #0c0d12; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--line); }
.fio-ico.fio-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fio-node[data-kind="file"] .fio-row { align-items: center; gap: 8px; }

/* ===== Frame.io: barra única (logo · token · salvar · recarregar) ===== */
.fio-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: nowrap !important; }   /* SEMPRE uma linha só */
.fio-bar .fio-logo { width: clamp(96px, 22%, 192px); height: auto; aspect-ratio: 1 / 1; object-fit: contain; flex: 0 1 auto; border-radius: 14px; }
.fio-bar #fioKey { flex: 1 1 60px; min-width: 0; height: 34px; padding: 0 10px; font-size: 12.5px; }
.fio-bar .btn-ghost.sm, .fio-bar #fioReload { height: 34px; }
.fio-bar .btn-ghost.sm { flex: 0 0 auto; white-space: nowrap; padding: 0 10px; font-size: 12px; }
#fioKeyHint[hidden] { display: none !important; }
/* ===== ícones dos nós: customizáveis (clique) ===== */
.fio-ico { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; cursor: pointer; border-radius: 5px; }
.fio-ico:hover { outline: 1px solid var(--line); outline-offset: 1px; }
.fio-ico img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px; }
.fio-ico.fio-thumb { width: 46px; height: 26px; overflow: hidden; background: #0c0d12; border: 1px solid var(--line); }
/* pasta-mãe: colorbar 46×46 */
.fio-ico.fio-cb-box { width: 46px; height: 46px; overflow: hidden; border: 1px solid var(--line); background: #0c0d12; }
.fio-ico.fio-cb-box .fio-cb { width: 100%; height: 100%; display: block; }
.fio-node.fio-account > .fio-row { align-items: center; gap: 10px; min-height: 50px; }

/* badge de filmes não vistos direto na pasta (sem precisar abrir) */
.fio-badge { flex: 0 0 auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px;
  background: #e0463f; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.fio-badge.cmt { background: #2f8fff; margin-left: auto; }        /* comentários novos = azul */
.fio-badge.unseen { background: #e0463f; }                        /* filmes não vistos = vermelho */
.fio-badge.cmt + .fio-badge.unseen { margin-left: 4px; }
.fio-row > .fio-badge:not(.cmt):first-of-type { margin-left: auto; }
/* sino: escolhe quais pastas notificam */
.fio-bell { flex: 0 0 auto; margin-left: auto; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); font-size: 12px; line-height: 1; cursor: pointer; opacity: .35; filter: grayscale(1); }
.fio-bell:hover { opacity: .8; background: rgba(255,255,255,.08); }
.fio-bell.on { opacity: 1; filter: none; }
.fio-bell + .fio-badge { margin-left: 4px !important; }
.fio-row { display: flex; align-items: center; gap: 8px; }

/* seta de pasta (Frame.io): maior e girando ao abrir */
.fio-node > .fio-kids:not([hidden]) { display: block; }
.fio-node:has(> .fio-kids:not([hidden])) > .fio-row > .fio-tw { transform: rotate(90deg); }

/* Frame.io: barra colada no topo do painel, logo centrado na vertical da linha */
.proj-cols .fio-side { padding-top: 10px !important; justify-content: flex-start; }
.fio-bar { align-items: center !important; margin-top: 0 !important; }
.fio-bar .fio-logo { align-self: center; }
/* lista de "não vistos" (antes do filtro) */
.fio-new { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.03); overflow: hidden; }
.fio-new-head { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12.5px; border-bottom: 1px solid var(--line); }
.fio-new-n { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; background: #e0463f; color: #fff; font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.fio-new-list { max-height: 190px; overflow: auto; padding: 4px; }
.fio-new-it { display: flex; align-items: center; gap: 8px; padding: 4px 6px; border-radius: 7px; cursor: alias; color: var(--ink); font-size: 12.5px; }
.fio-new-it:hover { background: rgba(255,255,255,.07); }
.fio-new-it .fio-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Chip de projeto: fundo preto + imagem do projeto a 30% (ou colorbar desfocado) */
.proj-card { position: relative; overflow: hidden; background: #000 !important; isolation: isolate; }
.proj-card > .pc-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .30; pointer-events: none; }
.proj-card > .pc-bg.pc-bg-cb { filter: none; transform: none; opacity: .15; }   /* colorbar: nítido e mais discreto */
.proj-card > .pc-name, .proj-card > .pc-meta { position: relative; z-index: 1; }

/* ===== escolher a capa do projeto (imagens coletadas dos links) ===== */
.cover-back { position: fixed; inset: 0; z-index: 2147483250; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); display: grid; place-items: center; }
.cover-pick { width: min(760px, 92vw); max-height: 82vh; display: flex; flex-direction: column; background: #14161d; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.cover-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 700; }
.cover-grid { flex: 1 1 auto; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 12px; }
.cover-opt { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 16 / 10; }
.cover-opt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-opt span { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 7px; font-size: 11px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.8)); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-opt:hover { border-color: rgba(255,255,255,.4); }
.cover-opt.on { outline: 2px solid var(--accent); outline-offset: -2px; }
.cover-pick-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }

/* Doc: Frame.io e Projetos começam a 24px da barra de cima */
.proj-cols .fio-side { padding-top: 24px !important; }
.proj-cols > .proj-root { padding-top: 24px !important; }
.proj-cols .proj-root > .proj-root, .proj-cols .proj-detail { padding-top: 0 !important; }
.proj-cols .proj-head { margin-top: 0 !important; }
.proj-cols .fio-bar { margin-top: 0 !important; }
/* zera o respiro do container (o 24px vem só das colunas) */
body.on-doc .main, body.on-frameio .main { padding-top: 0 !important; }
body.on-doc #tab-frameio .doc-body, body.on-frameio #tab-frameio .doc-body { padding-top: 0 !important; }
/* barra do Frame.io: tudo centrado na mesma linha (o input herdava margin-bottom) e logo maior */
.fio-bar > * { margin: 0 !important; align-self: center !important; }
.fio-bar .fio-logo { width: clamp(120px, 30%, 220px) !important; }
/* o token nunca some: encolhe o logo antes de espremer o campo */
.fio-bar #fioKey { flex: 1 1 auto !important; min-width: 90px !important; }
.fio-bar .fio-logo { min-width: 96px; }
/* botões só-ícone da barra do Frame.io (check duplo, recarregar) */
.fio-bar .btn-ghost.ic-only { width: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.fio-bar .btn-ghost.ic-only svg { width: 17px; height: 17px; display: block; }
/* botão de baixar o arquivo do Frame.io (aparece no hover da linha) */
.fio-dl { flex: 0 0 auto; margin-left: auto; width: 24px; height: 22px; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted); font-size: 14px; line-height: 1; cursor: pointer; opacity: 0; transition: opacity .12s; }
.fio-node:hover .fio-dl, .fio-new-it:hover .fio-dl, .fio-dl:focus { opacity: .85; }
.fio-dl:hover { color: var(--ink); background: rgba(255,255,255,.10); opacity: 1; }
.fio-dl:disabled { opacity: .5; cursor: default; }
/* sino ativo em branco (o emoji amarelo virava destaque demais) */
.fio-bell.on { opacity: 1; filter: grayscale(1) brightness(2.4); color: #fff; }
/* ⤓ à esquerda do ícone (não empurra mais o nome pra direita) */
.fio-dl { margin-left: 0 !important; margin-right: 2px; }

/* árvore do Frame.io: sem os riscos de indentação e com fonte um pouco maior */
.proj-cols .fio-kids { border-left: 0 !important; margin-left: 20px !important; }
.proj-cols .fio-tree { font-size: 13.5px !important; }
.proj-cols .fio-nm { font-size: 13.5px; }
.proj-cols .fio-new-it { font-size: 13.5px; }
.proj-cols .fio-new-head { font-size: 13.5px; }
.proj-cols .fio-side .hint { font-size: 12.5px; }
/* box de "não vistos" sempre visível (mesmo vazio), acima do filtrar */
.fio-new[hidden] { display: block !important; }
.fio-new-empty { padding: 12px 10px; color: var(--muted); font-size: 12.5px; text-align: center; }
/* arquivos de mídia: ícone não é clicável (não há troca de ícone) */
.fio-node[data-kind="file"] .fio-ico { cursor: inherit; }
.fio-node[data-kind="file"] .fio-ico:hover { outline: none; }
/* Frame.io: primeira linha a 26px do topo (a coluna de Projetos segue igual) */
.proj-cols .fio-side { padding-top: 26px !important; }
/* Frame.io: painel inteiro 40px mais alto */
.proj-cols .proj-fio { margin-top: -30px; }
/* Projetos: Capa e Excluir viram ícones brancos */
.pd-head .btn-ghost.pd-ic { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.pd-head .btn-ghost.pd-ic svg { width: 17px; height: 17px; display: block; }
.pd-head .btn-ghost.pd-ic:hover { background: rgba(255,255,255,.12); color: #fff; }
.pd-head .btn-ghost.pd-ic#projDel:hover { color: #ff6b6b; }
/* box "não vistos": sem cabeçalho/contador — só a lista (ou o aviso de vazio) */
.fio-new-head, .fio-new-n { display: none !important; }
.fio-new-list { padding: 6px; }
/* coluna da hora na lista de filmes novos */
.fio-new-it { gap: 8px; }
.fio-new-it .fio-nm { flex: 1 1 auto; min-width: 0; }
.fio-when { flex: 0 0 auto; margin-left: auto; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* badge azul de comentários não é mais usado */
.fio-badge.cmt { display: none !important; }

/* ===== varinha mágica das janelas de prompt (nunca cobre o texto) ===== */
.ta-exp, .prompt-wrap { position: relative; }
.ta-wand { position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(18,20,27,.86); color: var(--muted);
  backdrop-filter: blur(4px); transition: color .14s, border-color .14s, background .14s; }
.ta-wand svg { width: 15px; height: 15px; display: block; }
.ta-wand:hover { color: #fff; border-color: rgba(255,255,255,.34); background: rgba(30,34,45,.94); }
.ta-wand.done { color: var(--accent-ink); border-color: var(--accent-glow); }
.ta-wand.busy { opacity: .7; animation: wandPulse .9s ease-in-out infinite; }
@keyframes wandPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }
/* reserva o canto pro botão: o texto nunca passa por baixo dele */
.ta-exp > textarea, .prompt-wrap > textarea, .s-prompt textarea { padding-right: 44px !important; padding-bottom: 30px !important; }

.s-prompt textarea, .ta-exp > textarea, .prompt-wrap > textarea { resize: none; }
/* a varinha ocupa o canto de baixo; o mic (whisper) fica acima dela, sem colisão */
.ta-wand { right: 8px; bottom: 8px; }
.ta-exp > .ta-mic, .prompt-wrap > .ta-mic, .pw-pos .ta-mic { right: 8px !important; bottom: 42px !important; top: auto !important; }

/* ===== ícones do prompt FORA da caixa: barra embaixo, alinhada à direita ===== */
.ta-tools { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 6px 0 0; flex: 0 0 auto; }
.ta-tools .ta-wand, .ta-tools .ta-mic {
  position: static !important; right: auto !important; bottom: auto !important; top: auto !important;
  width: 28px; height: 28px; opacity: 1; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--muted); cursor: pointer;
}
.ta-tools .ta-wand svg, .ta-tools .ta-mic .ic { width: 15px; height: 15px; display: block; }
.ta-tools .ta-wand:hover, .ta-tools .ta-mic:hover { color: #fff; border-color: rgba(255,255,255,.34); background: var(--card-2); }
.ta-tools .ta-wand.done { color: var(--accent-ink); border-color: var(--accent-glow); }
/* o texto volta a usar a caixa inteira (nada de ícone por cima) */
.ta-exp > textarea, .prompt-wrap > textarea, .s-prompt textarea { padding-right: 12px !important; padding-bottom: 10px !important; }



/* painel do @ ancorado na caixa de prompt (nunca solto na tela) */
#atMenu { position: absolute !important; }
.ta-exp, .prompt-wrap, .s-prompt .field { overflow: visible !important; }

/* o card do prompt não pode recortar o painel do @ (.node tem overflow:hidden) */
.node.s-prompt, .s-prompt, .pw-pos, .s-prompt .field.pw-pos { overflow: visible !important; }
#atMenu { z-index: 2147483300 !important; }

/* Áudio: 20px vazios depois dos ícones do box de prompt — e só isso */
#tab-audio .s-prompt .ta-tools { margin-bottom: 20px !important; }

/* ===== botão de projeto da varinha (ta-tools) ===== */
.ta-tools .ta-proj { width: 40px; height: 28px; padding: 2px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); cursor: pointer; overflow: hidden; }
.ta-tools .ta-proj img { width: 100%; height: 100%; object-fit: cover; border-radius: 5px; opacity: .5; }
.ta-tools .ta-proj:hover img { opacity: .85; }
.ta-tools .ta-proj.on { border-color: var(--accent-glow); }
.ta-tools .ta-proj.on img { opacity: 1; }
/* dropdown de projetos */
.ta-proj-pick { position: fixed; z-index: 2147483310; min-width: 220px; max-width: 300px; max-height: 260px; overflow: auto;
  background: #16181d; border: 1px solid #2a2e37; border-radius: 10px; padding: 4px; box-shadow: 0 12px 32px rgba(0,0,0,.55); }
.tpp-it { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 8px; border: 0; border-radius: 7px;
  background: transparent; color: #cfd3da; font-size: 12.5px; cursor: pointer; text-align: left; }
.tpp-it:hover { background: #242a34; color: #fff; }
.tpp-it.on { color: var(--accent-ink); }
.tpp-it img { width: 40px; height: 24px; object-fit: cover; border-radius: 5px; flex: 0 0 auto; background: #000; }
.tpp-it .tpp-none { width: 40px; height: 24px; display: inline-flex; align-items: center; justify-content: center; color: #7c8494; border: 1px dashed #2a2e37; border-radius: 5px; flex: 0 0 auto; }
.tpp-empty { padding: 8px 10px; color: #7c8494; font-size: 12px; }

/* ===== highlight dos @tokens no prompt (backdrop atrás da textarea) ===== */
.ta-hl { position: absolute; top: 0; left: 0; z-index: 0; overflow: hidden; pointer-events: none;
  white-space: pre-wrap; overflow-wrap: break-word; color: transparent; }
textarea.hl-live { position: relative; z-index: 1; background: transparent !important; }
.ta-hl .hl-tok { border-radius: 6px; color: transparent; }
.ta-hl .hl-image { background: rgba(47,143,255,.28); box-shadow: 0 0 0 1px rgba(47,143,255,.55); }
.ta-hl .hl-video { background: rgba(124,92,255,.28); box-shadow: 0 0 0 1px rgba(124,92,255,.55); }
.ta-hl .hl-audio { background: rgba(53,196,106,.28); box-shadow: 0 0 0 1px rgba(53,196,106,.55); }

/* ===== box de justificativa da varinha (projeto → prompt automático) ===== */
.wand-why { position: fixed; z-index: 2147483320; width: min(300px, 78vw); max-height: 46vh;
  display: flex; flex-direction: column; background: #16181d; border: 1px solid var(--accent-glow);
  border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.6); overflow: hidden; }
.wand-why .ww-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .3px; color: var(--accent-ink); border-bottom: 1px solid var(--line); }
.wand-why .ww-x { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.wand-why .ww-x:hover { color: #fff; background: rgba(255,255,255,.1); }
.wand-why .ww-body { padding: 10px 12px; font-size: 12.5px; line-height: 1.55; color: #cfd3da; overflow: auto; }

/* waveform preenche o tile de áudio (quadrado 1/4) com um respiro */
.ref-tile.has-audio canvas.ref-wave { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); pointer-events: none; }
.ref-tile.has-audio .ref-plus { display: none; }

/* ============================================================================
   INPUT DE ÁUDIO CANÔNICO — a UI da aba Áudio vale em TODA a plataforma
   (Seedance 2.5, LTX a2v, H3 ref…): 3 por linha, quadrado, vazio OU carregado.
   Nunca muda de tamanho ao carregar; o waveform preenche o quadrado.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.ref-t-audio,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.ref-t-audio.has-audio,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.ref-t-audio.has-file {
  flex: 0 0 calc(33.333% - 7px) !important; width: calc(33.333% - 7px) !important; max-width: calc(33.333% - 7px) !important;
  height: auto !important; aspect-ratio: 1 / 1 !important;
}
.s-io .ref-tile.ref-t-audio canvas.ref-wave { position: absolute !important; inset: 8px !important; width: calc(100% - 16px) !important; height: calc(100% - 16px) !important; }

/* ============================================================================
   REGRA UNIVERSAL DOS INPUT REFS — TODAS as abas, TODOS os tipos de mídia:
   o box NUNCA muda de tamanho entre vazio e carregado. Padrão: 3 por linha,
   quadrado 1:1 (o mesmo da aba Áudio). Vale para imagem, vídeo, áudio e 3D.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-img,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-vid,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-file,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-tile.has-audio,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io > .ref-tile.has-img,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io > .ref-tile.has-vid,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io > .ref-tile.has-file {
  flex: 0 0 calc(33.333% - 7px) !important; width: calc(33.333% - 7px) !important; max-width: calc(33.333% - 7px) !important;
  height: auto !important; aspect-ratio: 1 / 1 !important; background-size: cover !important;
}
/* wrappers (frame in/out etc.): mesma coluna de 1/3, carregados ou não */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap:has(> .ref-tile.has-img),
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap:has(> .ref-tile.has-vid),
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap:has(> .ref-tile.has-file) {
  flex: 0 0 calc(33.333% - 7px) !important; width: calc(33.333% - 7px) !important; max-width: calc(33.333% - 7px) !important;
  aspect-ratio: auto !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap > .ref-tile,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap > .ref-tile.has-img,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap > .ref-tile.has-vid,
body.mode-play:not(.on-apps):not(.up-active) .studio .s-io .ref-cap-wrap > .ref-tile.has-file {
  flex: none !important; width: 100% !important; max-width: none !important; aspect-ratio: 1 / 1 !important; height: auto !important;
}

/* turntable 3D dentro do input ref: o modelo gira preenchendo o quadrado */
.ref-tile .ref-3d-turn { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.ref-tile .ref-3d-turn model-viewer, .ref-tile .ref-3d-turn .tile-3d-mv { width: 100%; height: 100%; background: transparent; }
.ref-tile.has-file:has(> .ref-3d-turn) > span:not(.ref-plus) { display: none; }   /* sem o ✓ por cima do giro */

/* Sonorização: chip do MODELO que será usado (pré-anúncio) */
.son-engine { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--ink); }
.son-engine img { width: 16px; height: 16px; border-radius: 4px; object-fit: contain; }

/* balão de fala da varinha: rabinho apontando pra ela */
.wand-why { overflow: visible; }
.wand-why .ww-head, .wand-why .ww-body { position: relative; z-index: 1; }
.wand-why .ww-tail { position: absolute; width: 12px; height: 12px; background: #16181d; transform: rotate(45deg); z-index: 0; }
.wand-why.ww-right .ww-tail { left: -6px; border-left: 1px solid var(--accent-glow); border-bottom: 1px solid var(--accent-glow); }
.wand-why.ww-left .ww-tail { right: -6px; border-right: 1px solid var(--accent-glow); border-top: 1px solid var(--accent-glow); }

/* ===== Projeto: links ocupam a LINHA INTEIRA; canvas vem ABAIXO (sem divisão vertical) ===== */
.pd-body { display: flex !important; flex-direction: column !important; grid-template-columns: none !important; overflow: auto; }
.pd-links { border-right: 0 !important; border-bottom: 1px solid var(--line, rgba(255,255,255,.08)); width: 100%; flex: 0 0 auto; max-height: none; overflow: visible !important; }   /* cresce à vontade — o scroll é da janela */
.pd-canvas-wrap { flex: 1 1 auto; min-height: 320px; }
/* botão de estratégia (destaca do resto do cabeçalho) */
.pd-strategy { color: var(--accent-ink) !important; border-color: var(--accent-glow) !important; white-space: nowrap; }
/* modal da estratégia */
.proj-strat-back { position: fixed; inset: 0; z-index: 2147483330; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); display: grid; place-items: center; }
.proj-strat { width: min(680px, 92vw); max-height: 80vh; display: flex; flex-direction: column; background: #14161d; border: 1px solid var(--accent-glow); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.proj-strat .ps-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-weight: 700; color: var(--accent-ink); }
.proj-strat .ps-acts { display: flex; gap: 6px; }
.proj-strat .ps-body { padding: 14px 16px; font-size: 13.5px; line-height: 1.6; color: #d6dae2; overflow: auto; white-space: pre-wrap; }

/* links coletados nunca têm scroll próprio: expandem e a PÁGINA rola */
.pd-links { overflow: visible !important; max-height: none !important; height: auto !important; }
.pd-body { overflow: visible !important; }
.proj-detail { overflow: visible; }
body.on-doc #tab-frameio .doc-body { overflow: auto; }   /* o scroll vive aqui (janela do Doc) */

/* canvas do projeto: drop de arquivos + itens de imagem/arquivo */
.pd-canvas.pc-dropping { outline: 2px dashed var(--accent); outline-offset: -6px; background: rgba(124,92,255,.06); }
.pc-item.pc-img { padding: 4px; }
.pc-item .pc-img { display: block; max-width: 200px; max-height: 160px; border-radius: 8px; pointer-events: none; }
.pc-item .pc-file { display: inline-flex; align-items: center; gap: 6px; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; font-size: 12.5px; }

/* Treinamento: MESMA distância modelo→conteúdo das outras abas (12px = só o gap do flex;
   o .play-sub-row vazio no meio dobrava o gap e o margin do head somava mais 6) */
#tab-train .studio > .play-sub-row { display: none !important; }
body.mode-play:not(.on-apps):not(.up-active) #tab-train .studio .play-model-head { margin-bottom: 6px !important; }   /* gap do flex aqui é 6 → 6+6 = 12, igual às outras */

/* ============================================================================
   MOSAICO da galeria tradicional = CLONE da galeria Local (que funciona):
   CSS Grid uniforme, N por linha, células quadradas, mídia em cover.
   Aposenta o flex por tipos (sz-*) que deixava 1 thumb por linha.
   ============================================================================ */
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid {
  display: grid !important; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
  gap: 10px !important; align-content: start !important; column-count: auto !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .grid-break { display: none !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile,
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile.sz-std,
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile.sz-audio,
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile.sz-lo,
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile.sz-doc {
  display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important;
  aspect-ratio: 1 / 1 !important; break-inside: auto !important; flex: none !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .media {
  width: 100% !important; height: 100% !important; max-height: none !important; aspect-ratio: auto !important; display: block !important; overflow: hidden;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .media img,
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .media video {
  width: 100% !important; height: 100% !important; object-fit: cover !important; max-height: none !important; margin: 0 !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .media.audio {
  display: grid !important; place-items: center !important; padding: 10px !important; height: 100% !important; max-height: none !important;
}
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .media.audio .wave { width: 100% !important; height: 56px !important; }
body.mode-play:not(.on-apps):not(.up-active) .gallery-col.mode-grid .tile .tile-cap { display: none !important; }

/* detalhe do projeto: o cabeçalho é o CARD do projeto (mesma capa do chip da galeria) */
.pd-head.pd-card { position: relative; overflow: hidden; isolation: isolate; background: #000 !important;
  border-radius: 14px; padding: 14px; margin: 0 0 12px; min-height: 74px; }
.pd-head.pd-card > .pc-bg { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; opacity: .30; pointer-events: none; }
.pd-head.pd-card > .pc-bg.pc-bg-cb { opacity: .15; filter: none; transform: none; }
.pd-head.pd-card > *:not(.pc-bg) { position: relative; z-index: 1; }

/* badge do app Doc: por CIMA do ícone (o overflow:hidden do botão cortava o canto) */
.app-rail-btn:has(> .ari-badge:not([hidden])) { overflow: visible !important; }
.app-rail-btn .ari-badge { z-index: 5; }

/* ===== Civitai no modal de LoRA ===== */
.cvt-wrap { margin: 12px 0 4px; border-top: 1px solid var(--line); padding-top: 12px; }
.cvt-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.cvt-logo { width: 22px; height: 22px; border-radius: 5px; object-fit: contain; }
.cvt-bar .dim-sel { height: 32px; max-width: 200px; min-width: 130px; text-overflow: ellipsis; }
.cvt-grid { max-height: 300px; overflow: auto; }
.cvt-batch { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.cvt-card { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #0c0d12; cursor: pointer; aspect-ratio: 3 / 4; }
.cvt-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cvt-card .cvt-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--muted); font-size: 12px; }
.cvt-card .cvt-nm { position: absolute; left: 0; right: 0; bottom: 16px; padding: 2px 7px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.85)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.cvt-card .cvt-base { position: absolute; left: 0; right: 0; bottom: 0; padding: 1px 7px 4px; font-size: 10px; color: #9aa2b1; background: rgba(0,0,0,.85); text-align: left; }
.cvt-card:hover { border-color: var(--accent); }
.cvt-sfw { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); white-space: nowrap; cursor: pointer; }
.cvt-sfw input { accent-color: var(--accent); }
/* com o modal largo, a grade da Civitai aproveita: cards maiores e mais altos */
.cvt-batch { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
.cvt-grid { max-height: 380px; }

/* modal de LoRA: corpo rola e as ações (Aplicar/OK) ficam SEMPRE visíveis no rodapé
   (a galeria Civitai empurrava o botão pra fora do card) */
.lora-modal-card { max-height: 88vh; overflow: auto; display: flex; flex-direction: column; }
.lora-modal-card > .modal-head { position: sticky; top: 0; z-index: 3; background: var(--card, #14161d); }
/* ações (upload + Aplicar) ficam ANTES da galeria Civitai, logo abaixo dos campos */
.lora-modal-card > .lora-actions {
  position: static; margin: 12px 0 0; z-index: 3;
  background: transparent; border-top: 0; padding: 0;
  display: flex; align-items: center; gap: 10px;
}
.lora-modal-card > .lora-actions .lora-apply { margin-left: auto; }

/* dropdown: rótulo nunca cortado (painel acompanha o item mais largo) */
.fd-panel .fd-opt { white-space: nowrap; }
.fd-panel .fd-lb { overflow: visible; text-overflow: clip; }
/* cabeçalho de grupo dentro do dropdown custom (optgroup) */
.fd-panel .fd-group { padding: 8px 12px 3px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint, #7c8494); pointer-events: none; }
.fd-panel .fd-group:first-of-type { padding-top: 4px; }

/* card "novo projeto": vazio, "+" central e borda pontilhada (igual aos input refs) */
.proj-card.proj-new {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: transparent !important; border: 2px dashed var(--line) !important; box-shadow: none;
  color: var(--muted); cursor: pointer; min-height: 96px;
}
.proj-card.proj-new .ref-plus { font-size: 26px; font-weight: 300; line-height: 1; color: var(--muted); }
.proj-card.proj-new .pn-lb { font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.proj-card.proj-new:hover { border-color: var(--accent) !important; color: var(--accent-ink); }
.proj-card.proj-new:hover .ref-plus { color: var(--accent-ink); }
/* baixar pasta inteira (.zip) — aparece junto do apagar */
.folder-item .fzip { border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 3px 4px; border-radius: 6px; opacity: 0; transition: opacity .12s; }
.folder-item:hover .fzip, .folder-item.active .fzip { opacity: .8; }
.folder-item .fzip:hover { color: #fff; background: rgba(255,255,255,.1); opacity: 1; }
.folder-item .fzip .ic { width: 14px; height: 14px; }
.folder-item .fzip:disabled { opacity: .4; cursor: default; }

/* Projetos: coluna de data/hora do link coletado */
.pl-ts { font-size: 11px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* chip de arquivo no canvas: nome longo comprime ANTES do fim do box */
.pc-item .pc-file { max-width: 220px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.pc-item .pc-file .pcf-ico { flex: 0 0 auto; }
.pc-item .pc-file .pcf-nm { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* modal "baixar assets do canvas" */
.cvdl-back { position: fixed; inset: 0; z-index: 2147483330; background: rgba(0,0,0,.6); backdrop-filter: blur(3px); display: grid; place-items: center; }
.cvdl { width: min(460px, 92vw); max-height: 78vh; display: flex; flex-direction: column; background: #14161d; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.cvdl-h { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; font-weight: 700; border-bottom: 1px solid var(--line); }
.cvdl-list { flex: 1 1 auto; overflow: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.cvdl-it { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; font-size: 13px; cursor: pointer; }
.cvdl-it:hover { background: rgba(255,255,255,.06); }
.cvdl-it input { accent-color: var(--accent); }
.cvdl-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cvdl-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); }

/* ===== agente de briefing ===== */
.pd-brief { color: var(--accent-ink) !important; border-color: var(--accent-glow) !important; white-space: nowrap; }
.brief-back { position: fixed; inset: 0; z-index: 2147483330; background: rgba(0,0,0,.62); backdrop-filter: blur(3px); display: grid; place-items: center; }
.brief { width: min(620px, 92vw); display: flex; flex-direction: column; background: #14161d; border: 1px solid var(--accent-glow); border-radius: 14px; overflow: hidden; }
.brief-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 700; color: var(--accent-ink); border-bottom: 1px solid var(--line); }
.brief textarea { min-height: 220px; max-height: 50vh; resize: vertical; margin: 12px 14px 0; background: #202127; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; color: var(--ink); font-size: 13px; line-height: 1.55; }
.brief-f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px 12px; }
/* chip ⤓ (asset do briefing) no canvas */
.pc-item .pc-dl { text-decoration: none; color: var(--ink); }
.pc-item .pc-dl .pcf-ico { color: var(--accent-ink); font-weight: 800; }
.pc-item .pc-dl:hover .pcf-nm { color: var(--accent-ink); }

/* ============================================================================
   INTEGRIDADE — personagem (.shchar) + QC. Layout PRÓPRIO: os cards do hub
   (.s-params) são uma faixa de chips de altura fixa e não servem pra formulário —
   usar eles aqui foi o que deixou a aba ilegível na primeira versão.
   ============================================================================ */
#tab-integridade .form-wrap { max-width: 900px; }
.ig-subtabs { display: flex; gap: 6px; margin: 0 0 14px; }
.ig-sub { padding: 7px 18px; border-radius: 9px; border: 1px solid var(--line); background: #14161c; color: var(--mut);
  font-size: 12.5px; font-weight: 600; cursor: pointer; }
.ig-sub:hover { color: var(--txt); }
.ig-sub.on { border-color: var(--accent, #7aa9ff); color: #fff; background: rgba(120,170,255,.14); }
.ig-pane[hidden] { display: none !important; }

/* barra do arquivo */
.ig-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ig-name { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #12141a; color: var(--txt); font-size: 14px; font-weight: 600; }
.ig-name:focus { outline: none; border-color: var(--accent, #7aa9ff); }

/* passos */
.ig-step { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; background: #101218; }
.ig-step > h3 { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 13px; font-weight: 700;
  letter-spacing: .3px; color: var(--txt); }
.ig-step > h3 i { display: flex; align-items: center; justify-content: center; width: 21px; height: 21px; flex: none;
  border-radius: 50%; background: var(--accent, #7aa9ff); color: #0b0d12; font-size: 11px; font-weight: 800; font-style: normal; }
.ig-lbl { font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: var(--mut); display: block; }
.ig-tip { margin: 7px 0 0; font-size: 11.5px; color: var(--mut); line-height: 1.45; }

/* 1 · identidade */
.ig-ident { display: flex; gap: 16px; align-items: flex-start; }
.ig-photo { position: relative; flex: none; width: 132px; height: 176px; border-radius: 12px; cursor: pointer;
  border: 1px dashed var(--line); background: #0b0c10 center/cover no-repeat;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.ig-photo:hover { border-color: var(--accent, #7aa9ff); }
.ig-photo.has { border-style: solid; }
.ig-photo.has .ig-photo-plus, .ig-photo.has .ig-photo-cap { display: none; }
.ig-photo-plus { font-size: 26px; color: var(--mut); line-height: 1; }
.ig-photo-cap { font-size: 10.5px; color: var(--mut); text-transform: uppercase; letter-spacing: .4px; }
.ig-ident-fields { flex: 1; min-width: 0; }
.ig-ident-fields textarea { width: 100%; margin-top: 6px; padding: 10px 12px; border-radius: 10px; resize: vertical;
  border: 1px solid var(--line); background: #0d0f14; color: var(--txt); font-size: 12.5px; line-height: 1.5; font-family: inherit; }
.ig-ident-fields textarea:focus { outline: none; border-color: var(--accent, #7aa9ff); }

/* 2 · gerar */
.ig-gen { display: flex; gap: 10px; flex-wrap: wrap; }
.ig-card-btn { flex: 1 1 220px; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 13px 15px; border-radius: 11px; border: 1px solid var(--line); background: #14161d; color: var(--txt); cursor: pointer; }
.ig-card-btn:hover { border-color: var(--accent, #7aa9ff); background: rgba(120,170,255,.09); }
.ig-card-btn:disabled { opacity: .55; cursor: default; }
.ig-card-btn b { font-size: 13px; }
.ig-card-btn span { font-size: 11.5px; color: var(--mut); line-height: 1.4; }
.ig-parts { margin-top: 14px; }
.ig-parts-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ig-parts-head .ig-lbl { flex: 1; }
.ig-parts-head select { height: 32px; border-radius: 9px; border: 1px solid var(--line); background: #14161c; color: var(--txt); font-size: 12px; padding: 0 8px; }
.ig-parts-list { display: flex; flex-wrap: wrap; gap: 8px; }
.ig-parts-list:empty::after { content: 'Nenhuma peça — o personagem sai como está na foto base.'; font-size: 11.5px; color: var(--mut); }
.ig-part { position: relative; width: 84px; }
.ig-part label { display: block; width: 84px; height: 84px; border-radius: 10px; cursor: pointer;
  border: 1px dashed var(--line); background: #0b0c10 center/cover no-repeat;
  display: flex; align-items: center; justify-content: center; color: var(--mut); font-size: 20px; }
.ig-part label.has { border-style: solid; }
.ig-part label.has span { display: none; }
.ig-part b { display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600; color: var(--mut); text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ig-part > button { position: absolute; top: -5px; right: -5px; width: 18px; height: 18px; border-radius: 50%; border: 0;
  background: #333; color: #ddd; font-size: 10px; line-height: 1; cursor: pointer; padding: 0; }
.ig-extra { width: 100%; margin-top: 14px; height: 36px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: #0d0f14; color: var(--txt); font-size: 12.5px; }
.ig-extra:focus { outline: none; border-color: var(--accent, #7aa9ff); }
.ig-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.ig-actions .hint { margin: 0; }

/* 3 · resultado + referências */
.ig-result { display: flex; gap: 16px; align-items: flex-start; }
.ig-preview { flex: 1; min-height: 190px; border-radius: 12px; border: 1px solid var(--line); background: #0b0c10;
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ig-preview img { max-width: 100%; max-height: 320px; object-fit: contain; display: block; }
.ig-empty { font-size: 12px; color: var(--mut); }
.ig-refs { flex: none; width: 250px; }
.ig-shots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ig-shots:empty::after { content: 'A foto base e o que você gerar entram aqui.'; font-size: 11.5px; color: var(--mut); }
.ig-shot { position: relative; width: 68px; height: 68px; }
.ig-shot img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--line);
  background: #0b0c10; cursor: pointer; display: block; }
.ig-shot button { position: absolute; top: -5px; right: -5px; width: 17px; height: 17px; border-radius: 50%;
  border: 0; background: #333; color: #ddd; font-size: 9px; line-height: 1; cursor: pointer; padding: 0; }

/* laudo do QC */
.ig-laudo { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid var(--line); background: #12141a; }
.ig-laudo.ig-ok { border-color: #2e7d52; background: rgba(46,125,82,.12); }
.ig-laudo.ig-warn { border-color: #9a7b28; background: rgba(154,123,40,.12); }
.ig-laudo.ig-bad { border-color: #a33e3e; background: rgba(163,62,62,.12); }
.ig-score { display: flex; align-items: baseline; gap: 2px; }
.ig-score b { font-size: 34px; font-weight: 800; line-height: 1; }
.ig-score span { font-size: 12px; color: var(--mut); }
.ig-verd { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ig-verd b { font-size: 12px; letter-spacing: .6px; }
.ig-verd span { font-size: 12.5px; color: var(--mut); }
.ig-itens { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ig-item { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 9px;
  background: #101218; border-left: 3px solid var(--line); }
.ig-item b { font-size: 12px; }
.ig-item span { font-size: 12px; color: var(--mut); }
.ig-item.ig-ok { border-left-color: #2e7d52; }
.ig-item.ig-warn { border-left-color: #9a7b28; }
.ig-item.ig-bad { border-left-color: #a33e3e; }
/* card de app com ícone SVG (sem PNG próprio) */
.tl-card.tl-svg { display: flex; align-items: center; justify-content: center; color: var(--mut); }
.tl-card.tl-svg svg { width: 46%; height: 46%; }

/* LoRAs da fal.ai no modal de LoRA */
.fal-lora-wrap { margin: 10px 0 0; border-top: 1px solid var(--line); padding-top: 10px; }
.fal-lora-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fal-lora-bar b { font-size: 12px; letter-spacing: .3px; }
.fal-lora-bar .hint { flex: 1; margin: 0; }
.fal-lora-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow-y: auto; }
.fal-lora { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line); background: #14161c; color: var(--txt); cursor: pointer; }
.fal-lora:hover { border-color: var(--accent, #7aa9ff); background: rgba(120,170,255,.10); }
.fal-lora b { font-size: 12px; }
.fal-lora span { font-size: 10.5px; color: var(--mut); }

/* ADM · Arquivos (storage local) */
.st-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; background: #101218; }
.st-tip { margin: 6px 0 10px; font-size: 11.5px; color: var(--mut); line-height: 1.5; }
.st-row { display: flex; align-items: center; gap: 8px; }
.st-row .hint { flex: 1; margin: 0; }
.st-tree { margin: 10px 0 0; font-size: 11px; color: var(--mut); font-family: ui-monospace, monospace; word-break: break-all; }

/* ---------- Duração = BARRA CHEIA (não um fio) ---------- */
/* O <select> original fica no DOM (fonte da verdade pro resto do app), só invisível. */
select.dur-src { display: none !important; }
/* a barra ocupa TODA a largura do slot do parâmetro (nada de chip estreito) */
.s-params .field:has(> .dur-bar) { --chip-w: 100%; flex: 1 1 100% !important; width: 100% !important; min-width: 120px !important; max-width: none !important; }
.dur-bar { position: relative; display: block; width: 100%; height: 32px; }
.dur-bar > input[type=range] {
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: 0; width: 100% !important; max-width: none !important; height: 100% !important;
  margin: 0; padding: 0 !important; cursor: ew-resize; border-radius: 10px;
  border: 1px solid var(--line) !important;
  background-color: #20222b !important;
  /* preenchimento = overlay claro sobre o mesmo fundo dos outros parâmetros (sem cor de mood) */
  background-image: linear-gradient(90deg, rgba(255,255,255,.09) 0 var(--pct, 0%), transparent var(--pct, 0%) 100%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-position: 0 0 !important;
}
.dur-bar > input[type=range]:hover { border-color: var(--accent-soft) !important; }
.dur-bar > input[type=range]:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 1px; }
/* sem "bolinha": quem marca a posição é a própria faixa preenchida */
.dur-bar > input[type=range]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.dur-bar > input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 3px; height: 32px; border: none; border-radius: 2px; background: rgba(255,255,255,.85); }
.dur-bar > input[type=range]::-moz-range-track { height: 100%; background: transparent; }
.dur-bar > input[type=range]::-moz-range-thumb { width: 3px; height: 32px; border: none; border-radius: 2px; background: rgba(255,255,255,.85); }
.dur-bar > input[type=range]:disabled { opacity: .45; cursor: default; }
.dur-bar > input[type=range]:disabled::-webkit-slider-thumb { opacity: 0; }
/* o número fica DENTRO da barra, centralizado, e não atrapalha o arraste */
.dur-val {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  pointer-events: none; font-size: 12px; font-weight: 800; letter-spacing: .3px;
  color: var(--ink); text-shadow: 0 1px 2px rgba(0,0,0,.55); white-space: nowrap;
}

/* ---------- Pod: preset compacto com salvar/apagar ao lado ---------- */
.s-params .field:has(> .pd-preset-wrap) { --chip-w: 168px; }
.pd-preset-wrap { display: flex; align-items: center; gap: 4px; width: 100%; min-width: 0; }
.pd-preset-wrap > select#pdPreset {
  flex: 1 1 0; min-width: 0 !important; width: auto !important; max-width: none !important;
  overflow: hidden; text-overflow: ellipsis;
}
.pd-pbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,.05); color: var(--muted);
}
.pd-pbtn:hover:not(:disabled) { color: var(--accent-ink); border-color: var(--accent-soft); background: var(--accent-soft); }
.pd-pbtn:disabled { opacity: .35; cursor: default; }

/* mode-play repinta TODO input do .s-params (background-image:none !important) — a barra
   precisa do mesmo prefixo pra manter o preenchimento. */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .dur-bar > input[type=range],
.s-params .dur-bar > input[type=range] {
  height: 100% !important; padding: 0 !important; border-radius: 10px !important;
  background-color: #20222b !important;
  background-image: linear-gradient(90deg, rgba(255,255,255,.09) 0 var(--pct, 0%), transparent var(--pct, 0%) 100%) !important;
  background-repeat: no-repeat !important; background-size: 100% 100% !important; background-position: 0 0 !important;
  border: 1px solid var(--line) !important;
}
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .field:has(> .dur-bar) { flex: 1 1 100% !important; width: 100% !important; }
/* o wrapper do preset é flex mesmo dentro do mode-play (que achata os filhos do .field) */
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .pd-preset-wrap,
.s-params .pd-preset-wrap { display: flex !important; align-items: center; gap: 4px; width: 100% !important; min-width: 0; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .pd-preset-wrap > select#pdPreset,
.s-params .pd-preset-wrap > select#pdPreset { flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important; }
body.mode-play:not(.on-apps):not(.up-active) .studio .s-params .pd-preset-wrap > .pd-pbtn {
  flex: 0 0 26px !important; width: 26px !important; height: 26px !important; padding: 0 !important; border-radius: 8px !important; background: rgba(255,255,255,.05) !important; }
.s-params .dur-val, .dur-val { text-transform: none !important; }
/* Pod: os rótulos das opções já vêm prontos do manifesto (sRGB, H.264, 8 bits) — nada de capitalize */
#pdFields select, #pdFields .dim-sel, #pdParams select { text-transform: none !important; }
/* Pod: a linha de Preset mora na faixa logo abaixo do nome do modelo */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-sub-row > #pdPresetRow { width: 100% !important; flex: 0 0 auto !important; max-width: none !important; gap: 4px; }
body.mode-play:not(.on-apps):not(.up-active) .studio .play-sub-row > #pdPresetRow > span:first-child { align-self: flex-start; }

/* Galeria Local: badge = MESMA iconografia e MESMAS medidas do .badge-kind tradicional
   (logo do modelo — aqui o ComfyUI, sempre branco — + ícone do tipo, lado a lado).
   Os números vêm de ".tile .badge.badge-kind" (ícones a 2.5×, logo branco). */
.lg-tile .lg-badge.badge-kind { display: inline-flex !important; align-items: center; justify-content: center; line-height: 0; padding: 5px 6px !important; gap: 5px !important; }
.lg-tile .lg-badge.badge-kind svg { width: 32px !important; height: 32px !important; display: block; }
.lg-tile .lg-badge.badge-kind .bk-model {
  width: 34px !important; height: 34px !important; display: inline-block; flex: 0 0 auto; background: #fff !important;
  -webkit-mask: var(--mi) center/contain no-repeat; mask: var(--mi) center/contain no-repeat;
}
/* mosaico: só a caixa encolhe, como no .gallery-col.mode-grid */
.lg-body.lg-media.lg-grid .lg-tile .lg-badge.badge-kind { padding: 3px !important; top: 5px; left: 5px; }

/* ---------- Galeria Local: ações no tile (baixar · apagar/cancelar) ---------- */
/* dentro do .lg-media (position:relative) — canto inferior direito do THUMB, sem cobrir a legenda */
.lg-tile .lg-media .lg-actions, .lg-tile .lg-actions { position: absolute; bottom: 8px; right: 8px; z-index: 4; display: flex; gap: 6px; opacity: 0; transition: opacity .18s ease; }
.lg-tile:hover .lg-actions, .lg-tile:focus-within .lg-actions { opacity: 1; }
.lg-body.lg-media.lg-col .lg-tile .lg-actions, .lg-body.lg-media.lg-list .lg-tile .lg-actions { opacity: 1; }
.lg-tile .lg-actions button { width: 30px; height: 30px; border-radius: 999px; border: none; background: rgba(10,11,15,.55); color: #fff; cursor: pointer; backdrop-filter: blur(4px); display: grid; place-items: center; padding: 0; }
.lg-tile .lg-actions button:hover { background: var(--accent); }
.lg-tile .lg-actions .tdel:hover { background: #e0463f; }
.lg-tile .lg-actions .ic, .lg-tile .lg-actions svg { width: 16px; height: 16px; }
/* tile em andamento: o cancelar fica sempre visível (não depende de hover) */
.lg-tile.lg-proc .lg-actions { opacity: 1; }
.lg-body.lg-media.lg-list .lg-tile:not(.lg-proc) .lg-media { position: static; }   /* âncora das ações passa a ser o tile */
.lg-body.lg-media.lg-list .lg-tile .lg-actions { top: 50%; bottom: auto; transform: translateY(-50%); right: 8px; }
/* ícone Fila marcado enquanto a fila do pod está aberta */
.gmain.gmain-qon { color: var(--accent); background: var(--accent-soft); }

/* ---------- Aba Pod: nome do workflow compacto + pod ao lado ---------- */
/* o chip do modelo encolhe pro mesmo tamanho do chip de preset */
body.mode-play:not(.on-apps):not(.up-active) #tab-pod .studio .play-model-head { gap: 6px; }
/* só a LARGURA encolhe — fonte e altura seguem o padrão das abas tradicionais */
body.mode-play:not(.on-apps):not(.up-active) #tab-pod .studio .play-model-head > select.model-select.pd-wf {
  flex: 1 1 0 !important; width: auto !important; min-width: 0 !important; max-width: none !important;
}
/* seletor de POD: dimensionado pra um nome de 5 caracteres (+ bolinha de status) */
.pd-pod { position: relative; flex: 0 0 auto; }
.pd-pod-btn {
  display: inline-flex; align-items: center; gap: 6px; width: 96px; height: 32px; padding: 0 8px;
  border-radius: 8px; border: 1px solid var(--line); background: #20222b; cursor: pointer;
  font-size: 12.5px; font-weight: 800; letter-spacing: .4px; line-height: 1; color: var(--ink);
  overflow: hidden; white-space: nowrap;
}
.pd-pod-btn:hover:not(:disabled) { border-color: var(--accent-soft); }
.pd-pod-btn:disabled { opacity: .5; cursor: default; }
.pd-pod-nm { overflow: hidden; text-overflow: ellipsis; }
/* nome do pod: só os 2 primeiros caracteres em azul; o resto branco */
.pd-pod-nm i, .pd-pod-rn i { font-style: normal; }
.pn-a { color: #4aa3ff; }
.pn-c { color: #eef0f6; }
.pd-pod-list {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 80; min-width: 190px; max-height: 260px; overflow: auto;
  padding: 5px; border-radius: 10px; border: 1px solid var(--line); background: #1b1d25; box-shadow: var(--shadow);
}
.pd-pod-row {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px;
  background: transparent; color: var(--ink); cursor: pointer; font-size: 12.5px; font-weight: 800; text-align: left;
}
.pd-pod-row:hover { background: rgba(255,255,255,.06); }
.pd-pod-row.picked { background: var(--accent-soft); }
.pd-pod-rs { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: none; }
/* medidor de uso da VRAM: quanto daquele pod já está ocupado */
.pd-pod-row .pd-vram { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pd-vram-bar { display: block; width: 46px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; }
.pd-vram-bar > i { display: block; height: 100%; border-radius: 999px; background: currentColor; transition: width .25s ease; }
.pd-vram > b { font-size: 10.5px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 30px; text-align: right; }
.pd-vram.lv-baixo { color: #35c46a; }
.pd-vram.lv-medio { color: #f2c31d; }
.pd-vram.lv-alto  { color: #e0463f; }
.pd-vram-off { color: var(--faint); font-size: 11px; font-weight: 700; }
/* linha de preset sem rótulo: o wrapper ocupa a faixa inteira abaixo do modelo */
body.mode-play:not(.on-apps):not(.up-active) .studio .play-sub-row > #pdPresetRow { padding: 0 !important; }
#tab-pod .studio > .play-sub-row { display: flex !important; }
/* preset com a MESMA altura do chip do modelo (a faixa de submodelo engordava pra 46px) */
body.mode-play:not(.on-apps):not(.up-active) #tab-pod .studio .play-sub-row #pdPreset {
  height: 32px !important; padding: 0 28px 0 10px !important; font-size: 12.5px !important; border-radius: 8px !important;
  background-position: right 9px center !important;
}
/* cabeçalho da lista de pods (mesmo visual do título do dropdown custom) */
.pd-pod-head { padding: 6px 9px 8px; font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 800; }
/* Checkpoint / Turbo LoRA: nomes de arquivo são longos — chip mais largo */
.s-params .field.wide:has(> span) { flex: 1 1 220px !important; width: auto !important; min-width: 200px !important; max-width: none !important; }
/* wrapper dos tiles de processo da galeria Local: transparente pro layout (grid segue) */
.lg-body > .lg-proc-wrap { display: contents; }
/* Frame.io: âncora-cobertura — o item inteiro é um LINK REAL (navegação nativa, Safari não
   bloqueia). Botões (baixar/sino) ficam por cima e continuam clicáveis. */
.fio-row, .fio-new-it { position: relative; }
a.fio-cover { position: absolute; inset: 0; z-index: 1; }
.fio-row .fio-dl, .fio-new-it .fio-dl, .fio-row .fio-bell { position: relative; z-index: 2; }   /* ícone/thumb ficam SOB a âncora: clicar neles também abre o filme */

/* ---------- Segmentar: SEM cor de mood — chips e ferramentas sempre CINZA ---------- */
/* Redefinir as variáveis de accent dentro do app neutraliza tudo que as usa
   (ferramentas .seg-t, chips, gizmo, barras, popups), em qualquer tema de aba. */
#tab-segment {
  --accent: #8a90a0;
  --accent-soft: rgba(160, 166, 181, .16);
  --accent-ink: #ced3de;
  --accent-glow: rgba(160, 166, 181, .30);
  /* --panel* são MONTADOS com var(--accent-soft) no :root, e a substituição
     acontece LÁ (com o azul do body) — redefinir só o --accent-soft não muda o
     fundo. Redeclarando aqui, o gradiente é recalculado com o cinza acima:
     barra de ferramentas, barra de gerar e chip de custo saem neutros. */
  --panel: linear-gradient(var(--accent-soft), var(--accent-soft)), #23252d;
  --panel-2: linear-gradient(var(--accent-soft), var(--accent-soft)), #2a2d36;
  --panel-hi: linear-gradient(var(--accent-soft), var(--accent-soft)), #313540;
}

/* ---------- ADM › Modelos: varredura hub × fal ---------- */
.fs-bar { flex-wrap: wrap; gap: 8px; }
.fs-sum { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fs-chip { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: #20222b; border: 1px solid #2c2f3a; color: #cfd4df; }
.fs-chip em { font-style: normal; font-weight: 600; opacity: .72; margin-left: 3px; }
.fs-chip.st-atualizar { border-color: #6b5a1f; color: #ffd76a; }
.fs-chip.st-depreciado, .fs-chip.st-sumiu { border-color: #6b2828; color: #ff9c9c; }
.fs-chip.st-velho { border-color: #4a3d5e; color: #cbb0ff; }
.fs-chip.st-ok { border-color: #2b4a34; color: #98e0ae; }
.fs-chip.st-novidades { border-color: #23485c; color: #8ed3ff; }
.fs-grp { margin: 10px 0 0; border: 1px solid #262a34; border-radius: 10px; background: #14161d; overflow: hidden; }
.fs-grp > summary { cursor: pointer; padding: 9px 12px; font-size: 12px; font-weight: 800; letter-spacing: .3px; color: #cfd4df; background: #191c24; }
.fs-grp > summary b { color: var(--accent, #8ed3ff); margin-left: 4px; }
.fs-row { padding: 9px 12px; border-top: 1px solid #21242d; }
.fs-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fs-head b { font-size: 13px; }
.fs-head code { font-size: 10.5px; color: #8b93a4; background: #1b1e26; padding: 2px 5px; border-radius: 5px; }
.fs-aba { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #9aa2b4; background: #1e212a; border-radius: 4px; padding: 3px 6px; }
.fs-st { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 2px 7px; border-radius: 999px; background: #20222b; color: #aab2c2; }
.st-atualizar .fs-st { background: #3a2f10; color: #ffd76a; }
.st-depreciado .fs-st, .st-sumiu .fs-st { background: #3a1c1c; color: #ff9c9c; }
.st-velho .fs-st { background: #2b2440; color: #cbb0ff; }
.st-ok .fs-st { background: #16301f; color: #98e0ae; }
.fs-cols { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.fs-col { min-width: 260px; flex: 1 1 300px; }
.fs-lbl { display: block; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: #6f778a; margin-bottom: 3px; }
.fs-ep { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 2px 0; }
.fs-ep a { color: #b9c2d4; text-decoration: none; word-break: break-all; }
.fs-ep a:hover { color: var(--accent, #8ed3ff); text-decoration: underline; }
.fs-ep > span { color: #7d859a; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fs-ep.fs-new a { color: #ffd76a; }
.fs-x { color: #ff9c9c; font-weight: 800; }
.fs-dim { color: #6f778a; }
.fs-fam { margin-top: 5px; }
.fs-fam > summary { cursor: pointer; font-size: 10.5px; color: #7d859a; }
.fs-oc { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; font-size: 11px; color: #cfd4df; cursor: pointer; }
.fs-oc input { width: 14px; height: 14px; accent-color: #ff9c9c; }
.fs-save { display: flex; align-items: center; gap: 12px; justify-content: flex-end; margin-top: 12px; }
.fs-row.st-nov .fs-head b { color: #8ed3ff; }
/* o painel do ADM estica filhos (regra antiga de .st-card): fixa o nosso layout */
#admModelosPanel .fs-row { display: block !important; }
#admModelosPanel .fs-bar > * { flex: 0 0 auto; width: auto; }
#admModelosPanel .fs-bar .hint { flex: 1 1 auto; text-align: right; }
/* barra da varredura: controles numa linha, carimbo do catálogo na linha de baixo */
#admModelosPanel .fs-bar .hint { flex: 1 1 100%; text-align: right; margin-top: 2px; }

/* ---------- galeria: mídia quebrada (arquivo sumido) fica oculta ---------- */
/* Não vira "?" nem espaço morto no mosaico — o tile some do fluxo. A entrada
   continua no histórico; se o arquivo voltar, o tile volta no próximo render. */
.tile.tile-quebrado, .lg-tile.tile-quebrado { display: none !important; }

/* Pods com nome longo (a RunPod renomeia pra "…-migration" ao migrar): o chip
   é de 5 caracteres, então o nome corta com reticências e o menu não estica. */
.pd-pod-list { max-width: 280px; }
.pd-pod-row .pd-pod-rn { min-width: 0; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* .studio é flex: com z-index, o .play-model-head (item flex) VIRA contexto de
   empilhamento e prende o dropdown de pods no z:7 dele — a barra de modos
   (.stage-tabs, z:8) cobria os pods a partir do 2º. Sobe o cabeçalho da aba Pod. */
/* (o z:7 lá em cima é !important, então aqui também precisa ser) */
#tab-pod .play-model-head { z-index: 20 !important; }
/* A bolinha de status é item de um flex (chip e linhas do menu): sem travar o
   tamanho, ela encolhe e vira oval quando o nome do pod é longo. O nome é quem
   cede espaço (min-width:0 + reticências), nunca o status. */
.pd-pod-btn .pdot, .pd-pod-row .pdot { flex: 0 0 9px; width: 9px; height: 9px; }
.pd-pod-btn .pd-pod-nm { flex: 1 1 auto; min-width: 0; }

/* ---------- Segmentar: o chip do app também é CINZA ---------- */
/* O lançador (rail à direita e card da grade de apps) pegava a cor pelo
   data-mood="image" e saía azul. O app é cinza em qualquer aba — mesmo tom do
   --accent que o #tab-segment já usa —, então a cor vem daqui, não do mood. */
.tool-launch[data-tool="segment"],
.app-rail-btn[data-tool="segment"] {
  --m: #8a90a0;
  --am-ink: #ced3de;
  --am-b: rgba(160, 166, 181, .5);
  --am-g: rgba(160, 166, 181, .3);
}

/* ---------- palco de entrada dos apps ("pre-canvas") ---------- */
/* Mesmo comportamento do "+" das abas de vídeo/áudio: enquanto não há arquivo o
   tile fica GRANDE e CENTRALIZADO no palco; quando o arquivo entra, ele passa a
   morar no canvas e o tile encolhe pro canto (não cobre a mídia). */
.app-stage { min-height: 240px; }
#tab-separate .app-stage { min-height: 200px; }
/* O sistema geral de refs mede o tile em % da linha (!important), então quem
   define o tamanho aqui é a LARGURA do .s-io — e o tile segue. */
.app-stage > .s-io { align-self: center !important; justify-self: center !important; margin: 0 !important; width: 116px !important; justify-content: center !important; }
.app-stage > .s-io > .ref-cap-wrap { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
.app-stage > .s-io .ref-plus { font-size: 30px; }
#sonInStage > .s-io { width: 244px !important; }                                    /* dois tiles: vídeo + áudio ref */
#sonInStage > .s-io > .ref-cap-wrap { flex: 0 0 calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; width: calc(50% - 4px) !important; }
/* com arquivo: o tile volta pro canto de cima e encolhe (não cobre a mídia) */
.app-stage.has-file > .s-io { align-self: start !important; justify-self: start !important; margin: 12px !important; width: 68px !important; justify-content: flex-start !important; }
#sonInStage.has-file > .s-io { width: 148px !important; }
.app-stage.has-file > .s-io .ref-plus { font-size: 20px; }
/* mídia hospedada no palco */
.app-stage .s-preview .pc-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.app-stage .s-preview .pc-wave { width: min(84%, 520px); }
.app-stage .s-preview .pc-wave .wave { height: 88px; }
.app-stage .s-preview > video[hidden] { display: none !important; }
/* Stems: palco em cima (largura toda) e o prompt embaixo — waveform respira */
#tab-separate .sep-top { flex-direction: column; }
#tab-separate .sep-top .s-prompt { width: 100%; }
/* Matte tem regra própria de 60px por ID (vence por especificidade): repete o
   seletor com o ID pro palco valer também lá. */
#tab-matte .app-stage > .s-io > .ref-cap-wrap,
#tab-matte .app-stage > .s-io > .ref-tile,
#tab-matte .app-stage > .s-io .ref-cap-wrap > .ref-tile { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; min-width: 0 !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
#tab-matte .app-stage > .s-io { width: 116px !important; }
#tab-matte .app-stage.has-file > .s-io { width: 68px !important; }
/* Nos canvases do hub o "+" só aparece no hover. Num app cujo primeiro passo É
   carregar o arquivo, o palco VAZIO mostra o "+" sempre; com arquivo, volta a
   regra da casa (aparece no hover, sem cobrir a mídia). */
.app-stage:not(.has-file) > .s-io { opacity: 1 !important; pointer-events: auto !important; }
/* Segmentar: o chip de ref também não herda mood. O tint do tile vem das
   variáveis --rt* por tipo de mídia (imagem=azul); dentro da aba elas viram
   cinza, então borda, glow, "+" e a tag REF saem neutros. */
#tab-segment .ref-tile {
  --rt: #8a90a0;
  --rt-ink: #ced3de;
  --rt-soft: rgba(160, 166, 181, .10);
  --rt-glow: rgba(160, 166, 181, .55);
}

/* ---------- Matte e Isolar: ref no canto, X fora do canvas ---------- */
/* Nesses dois o palco é o próprio trabalho: o "+" fica no canto superior
   ESQUERDO e, com o arquivo carregado, ele SOME — quem remove é o X, que mora
   FORA do canvas (canto superior direito) e devolve o canvas vazio. */
.palco-wrap { position: relative; padding-top: 32px; }   /* faixa reservada pro X (fora do canvas) */
.palco-wrap > .s-stage { width: 100%; }
.palco-x {
  position: absolute; top: 0; right: 0; width: 26px; height: 26px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1px solid var(--line); background: #20222b; color: var(--muted);
  cursor: pointer; z-index: 9; transition: .15s;
}
.palco-x:hover { color: #ff9c9c; border-color: rgba(255, 156, 156, .5); background: #2a2d36; }
.palco-x svg { width: 14px; height: 14px; }
.palco-x[hidden] { display: none !important; }
/* vazio: "+" no canto superior esquerdo (sem centralizar) */
#maStage:not(.has-file) > .s-io,
#sepStage:not(.has-file) > .s-io { align-self: start !important; justify-self: start !important; margin: 12px !important; }
/* carregado: o "+" sai de cena — a mídia fica limpa e quem manda é o X */
#maStage.has-file > .s-io,
#sepStage.has-file > .s-io { display: none !important; }
/* Isolar: o waveform ocupa o canvas INTEIRO */
#sepStage .s-preview .pc-wave { width: 100% !important; height: 100% !important; display: grid; place-items: center; padding: 0 14px; box-sizing: border-box; }
#sepStage .s-preview .pc-wave .wave { width: 100%; height: 76%; }
/* Transcrição: canvas no mesmo padrão do Isolar — "+" no canto superior
   esquerdo, escondido quando há arquivo (quem remove é o X fora do canvas),
   e a waveform ocupando o canvas inteiro. */
#tsStage:not(.has-file) > .s-io { align-self: start !important; justify-self: start !important; margin: 12px !important; }
#tsStage.has-file > .s-io { display: none !important; }
#tsStage .s-preview .preview-audio { width: 100% !important; height: 100%; display: grid; place-items: center; padding: 0 14px; box-sizing: border-box; }
#tsStage .s-preview .preview-audio .wave { width: 100%; height: 76%; }

/* ---------- um X só ---------- */
/* Os palcos herdam o X de limpar DENTRO do canvas (.preview-clear, que aparece
   no hover). Onde existe o X de fora (.palco-wrap), esse de dentro é redundante
   e some — a ação é a mesma, e duas cruzinhas no mesmo canto confundem. */
.palco-wrap > .s-stage > .preview-clear { display: none !important; }

/* Matte: canvas 16:9 (mesma largura, altura pela proporção) */
#tab-matte .studio #maStage { aspect-ratio: 16 / 9; height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; }

/* ============================================================
   SPLASH DOS APPS
   Na PRIMEIRA abertura de cada app na sessão. Formato PÔSTER: a
   arte quadrada sangra o card INTEIRO e a identidade (ícone, nome,
   crédito) mora numa faixa escura no rodapé, sobre a própria arte.
   A primeira versão era duas colunas — arte de um lado, painel do
   outro — e o painel virava um vazio preto do tamanho da arte, com
   um degradê morrendo no meio do card. Aqui não existe área vazia:
   todo pixel do card é arte ou identidade.
   ============================================================ */
.app-splash {
  position: fixed; inset: 0; z-index: 2147483350; display: grid; place-items: center;
  background: rgba(7, 8, 12, .68);
  backdrop-filter: blur(13px) saturate(115%); -webkit-backdrop-filter: blur(13px) saturate(115%);
  opacity: 0; transition: opacity .2s ease; cursor: pointer;
}
.app-splash.in { opacity: 1; }
/* prefixo spl- (o as- já é da aba Assets: .as-card lá é column e vazava pra cá) */
.app-splash .spl-card {
  position: relative; width: min(430px, 82vw, 76vh); aspect-ratio: 1 / 1;
  border-radius: 22px; overflow: hidden;
  background: #0e1014; border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 46px 120px rgba(0, 0, 0, .72), 0 0 110px -34px var(--spl-m, #6a7180);
  transform: scale(.955) translateY(10px); opacity: 0;
  transition: transform .44s cubic-bezier(.16, .84, .26, 1), opacity .3s ease;
}
.app-splash.in .spl-card { transform: none; opacity: 1; }
/* véu de cima: só o necessário pro wordmark não sumir em arte clara */
.app-splash .spl-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 76px; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 7, 10, .5), transparent);
}
/* arte do app: sangra o card inteiro, com um respiro de zoom lento */
.app-splash .spl-art-wrap { position: absolute; inset: 0; overflow: hidden; background: #07080b; }
.app-splash .spl-art { width: 100%; height: 100%; object-fit: cover; display: block; animation: splKen 7s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes splKen { from { transform: scale(1.06); } to { transform: scale(1); } }
/* véu de baixo: escurece SÓ a faixa da identidade (nada de degradê no meio da arte) */
.app-splash .spl-art-wrap::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(7, 8, 11, .95) 0%, rgba(7, 8, 11, .88) 12%, rgba(7, 8, 11, .55) 22%, rgba(7, 8, 11, .12) 30%, transparent 38%);
}
/* faixa de identidade, sobre a arte */
.app-splash .spl-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0 22px 22px; }
.app-splash .spl-wm { position: absolute; top: 18px; right: 20px; z-index: 4; height: 17px; width: auto; opacity: .7; }
.app-splash .spl-row { display: flex; align-items: center; gap: 13px; }
.app-splash .spl-ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); backdrop-filter: blur(6px);
}
.app-splash .spl-ico .ari {
  width: 25px; height: 25px; display: block; background: #fff !important;
  -webkit-mask: var(--mi) center / contain no-repeat; mask: var(--mi) center / contain no-repeat;
}
.app-splash .spl-ico .ari-svg { width: 24px; height: 24px; display: block; color: #fff; }
.app-splash .spl-ico .ari-badge { display: none !important; }
.app-splash .spl-name { font-size: 26px; font-weight: 800; letter-spacing: -.5px; line-height: 1.04; color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); }
.app-splash .spl-by {
  margin-top: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: rgba(255, 255, 255, .46);
}
/* barra de carga: fio no mood do app, colado na borda de baixo do card */
.app-splash .spl-bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  height: 3px; background: rgba(255, 255, 255, .1); overflow: hidden;
}
.app-splash .spl-bar i {
  display: block; height: 100%; width: 4%;
  background: var(--spl-m, #6a7180); box-shadow: 0 0 12px var(--spl-m, #6a7180);
  animation: splLoad 1.75s cubic-bezier(.3, .72, .28, 1) forwards;
}
@keyframes splLoad { to { width: 100%; } }
@media (max-width: 620px) {
  .app-splash .spl-card { width: min(320px, 86vw); }
  .app-splash .spl-info { padding: 0 18px 20px; }
  .app-splash .spl-name { font-size: 22px; }
  .app-splash .spl-wm { height: 14px; top: 15px; right: 16px; }
}

/* ---------- Upscale: X pra descarregar a mídia do comparador ---------- */
/* Mídia que entra pela galeria/canvas não passa pelo "+" do tile, então não havia
   nenhum "×" pra tirar ela de lá — nem a fonte, nem o resultado gerado. Esse X mora
   no canto do comparador e zera tudo (entradas, resultado e os dois lados). */
.up-x {
  position: absolute; top: 10px; right: 10px; z-index: 12; width: 28px; height: 28px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--line); background: rgba(24, 26, 33, .82); color: var(--muted);
  cursor: pointer; transition: .15s; backdrop-filter: blur(6px);
}
.up-x:hover { color: #ff9c9c; border-color: rgba(255, 156, 156, .55); background: rgba(42, 45, 54, .92); }
.up-x svg { width: 15px; height: 15px; }
.up-x[hidden] { display: none !important; }