@font-face { font-family: "Inter"; font-weight: 500; src: url(../vendor/fonts/inter-latin-500-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; src: url(../vendor/fonts/inter-latin-700-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 800; src: url(../vendor/fonts/inter-latin-800-normal.woff2) format("woff2"); font-display: swap; }
:root {
  --bg: #0a0b0f; --s1: #111318; --s2: #171a21; --s3: #1f232c; --s4: #282d38; --line: #22262f; --line2: #30353f;
  --txt: #eef0f4; --mut: #979dad; --dim: #646a79;
  --acc: #ff5d73; --acc2: #ffc65c; --ok: #45d08c; --grad: linear-gradient(135deg, #ff5d73 0%, #ff8f5c 55%, #ffc65c 100%);
  --r: 16px; --r2: 11px;
  /* velhos nomes, ainda usados por partes desenhadas pelo código */
  --panel: var(--s1); --panel2: var(--s2);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--txt); font: 500 14px/1.5 "Inter", system-ui, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
body { overflow: hidden; }
::selection { background: #ff5d7366; }
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 8px; } ::-webkit-scrollbar-track { background: transparent; }
h2 { font-size: 15px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 4px; }
h3 { font-size: 17px; font-weight: 800; letter-spacing: -.01em; margin: 0 0 12px; }
.ic { flex: none; display: block; }

/* ---------- a tela do editor: tudo cabe na janela, cada parte rola por dentro ---------- */
.app { height: 100vh; height: 100dvh; display: grid; grid-template-columns: 76px 340px minmax(0, 1fr) 330px; grid-template-rows: 56px minmax(0, 1fr) auto;
  grid-template-areas: "top top top top" "rail panel stage props" "rail dock dock dock"; }

/* barra de cima */
.top { grid-area: top; display: flex; align-items: center; gap: 14px; padding: 0 14px 0 18px; border-bottom: 1px solid var(--line); background: var(--bg); min-width: 0; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; }
.brand b span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mark { display: inline-flex; gap: 3px; align-items: flex-end; height: 20px; }
.mark i { width: 5px; border-radius: 3px; background: var(--grad); }
.mark i:nth-child(1) { height: 11px; } .mark i:nth-child(2) { height: 20px; } .mark i:nth-child(3) { height: 15px; }
.ptitle { flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: 13.5px; color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unl { font-size: 11.5px; font-weight: 700; color: var(--acc2); background: #ffc65c12; border: 1px solid #ffc65c33; border-radius: 999px; padding: 4px 11px; white-space: nowrap; }
.top-right { display: flex; gap: 8px; align-items: center; }
#btnExport { padding: 9px 16px; }

/* ferramentas (coluna de ícones) */
.rail { grid-area: rail; display: flex; flex-direction: column; align-items: stretch; gap: 2px; padding: 10px 6px; border-right: 1px solid var(--line); background: var(--bg); overflow-y: auto; }
.rail button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 2px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--mut); font: 700 10.5px/1.15 "Inter", sans-serif; cursor: pointer; text-align: center; transition: background .12s, color .12s; }
.rail button:hover { color: var(--txt); background: var(--s2); }
.rail button.on { color: var(--txt); background: var(--s3); }
.rail button.on::before { content: ""; position: absolute; left: -6px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }
.rail button.hot .ic { color: var(--acc); }
.rail button.hot.on .ic { color: var(--acc2); }

/* painel da ferramenta */
.panel { grid-area: panel; display: flex; flex-direction: column; min-height: 0; background: var(--s1); border-right: 1px solid var(--line); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 10px; }
.panel-head b { font-size: 16px; font-weight: 800; letter-spacing: -.015em; }
.pclose { display: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--s3); color: var(--txt); cursor: pointer; align-items: center; justify-content: center; }
.panel-body { flex: 1; min-height: 0; overflow-y: auto; padding: 2px 18px 22px; }
.tool { display: none; flex-direction: column; }
.tool.on { display: flex; }
.tool > .lbl:first-child, .tool > .row2:first-child .lbl { margin-top: 2px; }

/* centro: o vídeo */
.stage { grid-area: stage; display: flex; flex-direction: column; align-items: center; min-height: 0; min-width: 0; padding: 18px 18px 10px; gap: 10px;
  background: radial-gradient(700px 420px at 50% 35%, #ffffff07, transparent 70%); }
.phonebox { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; container-type: size; }
.phone { position: relative; height: min(100cqh, calc(100cqw * var(--arh, 1.7778))); aspect-ratio: var(--ar, 9 / 16); border-radius: 22px; overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px #ffffff14, 0 30px 80px #000c; }
.phone canvas { width: 100%; height: 100%; display: block; }
.veil { position: absolute; inset: 0; background: #0a0b0feb; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; padding: 20px; backdrop-filter: blur(6px); }
.veil.on { display: flex; }
.spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid #ffffff1f; border-top-color: var(--acc2); animation: sp .9s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.bar { width: 62%; height: 5px; background: #ffffff1c; border-radius: 3px; overflow: hidden; } .bar i { display: block; height: 100%; width: 0; background: var(--grad); transition: width .2s; }
.bar.big { width: 100%; height: 8px; border-radius: 5px; margin: 6px 0 4px; }
.emptymsg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 30px; color: var(--mut); font-size: 15px; line-height: 1.5; background: radial-gradient(420px 300px at 50% 30%, #2a1f4a66, transparent 70%), linear-gradient(160deg, #171a27, #0e1017); }
.transport { display: flex; align-items: center; gap: 12px; width: min(100%, 540px); flex: none; }
.playbtn { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--txt); color: #0b0c12; cursor: pointer; display: grid; place-items: center; flex: none; transition: transform .1s, background .12s; }
.playbtn:hover { background: #fff; } .playbtn:active { transform: scale(.95); }
.time { font-variant-numeric: tabular-nums; font-size: 12px; font-weight: 700; color: var(--mut); white-space: nowrap; }
#scrub { flex: 1; }

/* à direita: propriedades do que está escolhido */
.props { grid-area: props; display: flex; flex-direction: column; min-height: 0; background: var(--s1); border-left: 1px solid var(--line); }
.props .insp { flex: 1; min-height: 0; position: relative; padding: 0; background: none; border: 0; border-radius: 0; }
.props .insp > .in { position: absolute; inset: 0; overflow-y: auto; padding: 0 18px 20px; }
.projinfo { flex: 1; min-height: 0; overflow-y: auto; padding: 0 18px 20px; }
.props:has(#tlInsp:not([hidden])) .projinfo { display: none; }
.pi-row { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pi-row span { color: var(--mut); } .pi-row b { font-weight: 700; text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pi-add { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 16px 0 6px; }
.pi-add button { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 4px; border-radius: 12px; border: 1px solid var(--line); background: var(--s2); color: var(--txt); font: 700 12px "Inter", sans-serif; cursor: pointer; }
.pi-add button:hover { border-color: var(--line2); background: var(--s3); }

/* embaixo: a linha do tempo */
.dock { grid-area: dock; min-width: 0; border-top: 1px solid var(--line); background: var(--s1); }

/* ---------- campos ---------- */
.lbl { display: block; font-size: 12px; font-weight: 700; color: var(--mut); margin: 16px 0 7px; }
.lbl b { color: var(--txt); }
.hint { font-size: 12px; color: var(--mut); margin: 8px 0 0; line-height: 1.5; }
.hint.lead { margin: 0 0 12px; font-size: 13px; }
.hint.ok { color: var(--ok); }
.hint.note { background: #ffc65c0d; border: 1px solid #ffc65c2b; border-radius: 10px; padding: 9px 11px; color: #d9c79a; }
textarea, input[type=text], input[type=password], input[type=number], select { width: 100%; background: var(--s2); color: var(--txt); border: 1px solid var(--line); border-radius: var(--r2); padding: 10px 12px; font: inherit; outline: none; transition: border-color .15s, box-shadow .15s; }
textarea { resize: vertical; min-height: 46px; line-height: 1.45; }
textarea::placeholder, input::placeholder { color: var(--dim); }
textarea:focus, input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, select:focus { border-color: #ffc65c99; box-shadow: 0 0 0 3px #ffc65c1a; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23979dad' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
input[type=range] { width: 100%; accent-color: var(--acc); height: 22px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rowbtn { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.rowbtn.end { justify-content: flex-end; }
.check { display: flex; align-items: center; gap: 9px; margin-top: 14px; font-size: 13px; cursor: pointer; }
.check input { width: 17px; height: 17px; accent-color: var(--acc); }

/* botões */
.btn { appearance: none; border: 1px solid var(--line2); background: var(--s2); color: var(--txt); font: inherit; font-weight: 700; padding: 10px 16px; border-radius: var(--r2); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; justify-content: center; transition: border-color .15s, background .15s, transform .08s, box-shadow .15s, filter .15s; }
.btn:hover { border-color: #4a5060; background: var(--s3); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: default; }
.btn.primary { background: var(--grad); border-color: transparent; color: #230b10; box-shadow: 0 8px 24px #ff5d7330; }
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 10px 30px #ff5d7348; }
.btn.primary:disabled { box-shadow: none; filter: grayscale(.5); }
.btn.ok { background: var(--ok); border-color: transparent; color: #06220f; box-shadow: 0 8px 24px #45d08c33; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--mut); } .btn.ghost:hover { color: var(--txt); background: var(--s2); }
.btn.small { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn.big { padding: 13px 22px; font-size: 15px; border-radius: 13px; }
.btn.wide { width: 100%; margin-top: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid var(--line); background: var(--s2); color: var(--mut); font: inherit; font-weight: 700; font-size: 13px; padding: 6px 12px; border-radius: 999px; cursor: pointer; transition: all .15s; }
.chips button:hover { color: var(--txt); border-color: var(--line2); }
.chips button.on { background: var(--txt); color: #0b0c12; border-color: transparent; }
.seg { display: inline-flex; gap: 2px; border: 1px solid var(--line); border-radius: var(--r2); padding: 3px; background: var(--s2); }
.seg button { border: 0; border-radius: 8px; background: transparent; color: var(--mut); font: inherit; font-weight: 700; font-size: 12.5px; padding: 6px 10px; cursor: pointer; white-space: nowrap; transition: all .15s; }
.seg button:hover { color: var(--txt); }
.seg button.on { background: var(--s4); color: var(--txt); box-shadow: 0 1px 0 #ffffff14 inset; }
.seg.wide { display: flex; flex-wrap: wrap; } .seg.wide button { flex: 1 1 auto; padding: 7px 6px; }
.seg.mini button { padding: 4px 8px; font-size: 11.5px; }
.seg.path { margin-bottom: 4px; } .seg.path button { padding: 9px 6px; font-size: 13px; }
details.more { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
details.more > summary, dialog details > summary { cursor: pointer; font-weight: 700; font-size: 13px; color: var(--mut); list-style: none; display: flex; align-items: center; gap: 8px; }
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid var(--mut); border-bottom: 2px solid var(--mut); transform: rotate(-45deg); transition: transform .15s; flex: none; }
details.more[open] > summary::before { transform: rotate(45deg); }
dialog details { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.warns { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12px; color: var(--acc2); }
.warns li { padding: 4px 0 4px 18px; position: relative; } .warns li::before { content: "!"; position: absolute; left: 4px; font-weight: 800; }

/* criar: os dois caminhos e os dois passos da IA */
.grp { display: none; flex-direction: column; }
#tab-create[data-path="idea"] .grp[data-path="idea"], #tab-create[data-path="rec"] .grp[data-path="rec"] { display: flex; }
.drop { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; padding: 20px 14px; border: 1.5px dashed var(--line2); border-radius: 14px; background: var(--s2); cursor: pointer; text-align: center; transition: border-color .15s; }
.drop:hover { border-color: var(--acc2); } .drop b { font-size: 14px; } .drop .hint { margin: 0; }
/* site em nuvem (sem o servidor local): avisos próprios; some o que ainda depende do servidor */
.cloudonly { display: none; } .app.cloud .cloudonly { display: block; } .app.cloud #btnGen, .app.cloud #btnAi { display: none; }
/* gravar agora com a câmera da frente: só em aparelho de toque */
.drop.camnow { display: none; border-style: solid; border-color: #ff5d7366; background: linear-gradient(160deg, #ff5d7318, #ffc65c10); }
.drop.camnow .ic { color: var(--acc); }
@media (pointer: coarse) { .drop.camnow { display: flex; } }
.ai-step { margin-top: 18px; padding-top: 6px; border-top: 1px solid var(--line); display: flex; flex-direction: column; }
.stephead { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: 13px; font-weight: 800; }
.stephead .num { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; background: var(--s4); color: var(--acc2); flex: none; }
.stephead + .btn.wide { margin-top: 10px; } .stephead + textarea { margin-top: 10px; }
.optnote { margin: 12px 0 0; font-weight: 700; color: var(--txt); } #tab-create[data-path="idea"] .optnote { display: none; }
#tab-create[data-path="rec"] #btnMake { background: var(--s3); color: var(--txt); box-shadow: none; border: 1px solid var(--line2); font-size: 14px; padding: 11px 16px; }

/* ferramentas: botões grandes de pôr coisa */
.bigadd { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; text-align: left; width: 100%; margin-top: 12px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--s2); color: var(--txt); font: inherit; cursor: pointer; transition: border-color .15s, background .15s; }
.bigadd:hover { border-color: var(--line2); background: var(--s3); }
.bigadd .ic { grid-row: 1 / span 2; color: var(--acc2); }
.bigadd b { font-size: 14px; } .bigadd span { font-size: 12px; color: var(--mut); line-height: 1.4; }
.tool > .bigadd:first-child { margin-top: 2px; }
/* texto: um cartão por estilo, já no jeito em que vai aparecer */
.tpresets { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; border: 1px solid var(--line); background: linear-gradient(160deg, #3a4a6b, #22283a 60%, #1a1d29); cursor: pointer; overflow: hidden; display: grid; place-items: center; padding: 10px; color: #fff; transition: transform .12s, border-color .15s; }
.tp:hover { transform: translateY(-2px); border-color: var(--acc2); }
.tp small { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 6px; font: 700 11px "Inter", sans-serif; color: #fff; background: linear-gradient(180deg, transparent, #000a); }
.tp .s { line-height: 1.05; text-align: center; transform: translateY(-6px); }
.tp-bold .s { font: 900 19px "Montserrat", "Inter", sans-serif; -webkit-text-stroke: 4px #0d0f18; paint-order: stroke fill; }
.tp-box .s { font: 800 17px "Inter", sans-serif; background: #ffd166; color: #0d0f18; padding: 7px 11px; border-radius: 9px; }
.tp-neon .s { font: 700 22px "Space Grotesk", "Inter", sans-serif; color: #fff; text-shadow: 0 0 8px #4fc3f7, 0 0 18px #4fc3f7, 0 0 30px #4fc3f7; }
.tp-tag .s { text-align: left; font: 800 15px "Inter", sans-serif; background: #0d0f18e6; padding: 6px 12px 6px 14px; border-radius: 8px; border-left: 4px solid #ffd166; } .tp-tag .s em { display: block; font-style: normal; font-size: 11px; color: #ffd166; }
.tp-serif .s { font: 400 25px "DM Serif Display", Georgia, serif; text-shadow: 0 2px 8px #0009; }
.tp-hand .s { font: 700 30px "Caveat", cursive; color: #ffe81f; text-shadow: 0 2px 6px #0009; }

/* modelos, marca, estilos, elenco */
.tpllist { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; } .tpllist .btn { text-align: left; justify-content: flex-start; white-space: normal; line-height: 1.3; padding: 10px 14px; }
.brandkit { flex-wrap: wrap; margin-top: 0; } .brandkit input[type=color] { width: 42px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 9px; background: none; cursor: pointer; }
.styles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.styles .grp { display: block; grid-column: 1 / -1; margin: 12px 0 0; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--dim); }
.styles .grp:first-child { margin-top: 0; }
.styles button { position: relative; border: 0; background: var(--s2); border-radius: 12px; padding: 0; cursor: pointer; color: #fff; font: inherit; overflow: hidden; outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s, transform .12s; }
.styles button:hover { transform: translateY(-2px); }
.styles button.on { outline-color: var(--acc2); }
.styles canvas { width: 100%; aspect-ratio: var(--ar, 9 / 16); display: block; background: #0d0f17; }
.styles button span { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 6px 6px; font-size: 11.5px; font-weight: 800; text-align: center; background: linear-gradient(180deg, transparent, #000c 62%); text-shadow: 0 1px 2px #000; }
.castlist { display: flex; flex-direction: column; gap: 6px; }
.castlist .it { display: flex; align-items: center; gap: 10px; background: var(--s2); border: 1px solid var(--line); border-radius: var(--r2); padding: 8px 10px 8px 14px; }
.castlist .it span { flex: 1; font-weight: 700; text-transform: capitalize; }
.camctl .lbl { color: var(--acc2); }

/* janelas */
dialog { background: var(--s1); color: var(--txt); border: 1px solid var(--line2); border-radius: 22px; padding: 24px; width: min(94vw, 660px); max-height: 92vh; box-shadow: 0 40px 120px #000c; }
dialog::backdrop { background: #05060acc; backdrop-filter: blur(4px); }
#dlgExport { width: min(94vw, 460px); }
#dlgExport .post { margin-top: 6px; } #dlgExport .post .lbl { margin-top: 18px; }
.charwrap { display: grid; grid-template-columns: 220px 1fr; gap: 18px; }
.charwrap canvas { width: 220px; height: 318px; border-radius: 14px; background: #e9e4d6; }
.charform { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; align-content: start; }
.sw { display: flex; flex-wrap: wrap; gap: 5px; }
.sw button { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #0006; cursor: pointer; padding: 0; }
.sw button.on { outline: 2px solid var(--acc2); outline-offset: 2px; }
.full { grid-column: 1 / -1; }

/* editor do roteiro */
.ed-scene { border: 1px solid var(--line); border-radius: 14px; padding: 12px; margin-bottom: 12px; background: #0e1015; }
.ed-head { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.ed-head b { grid-column: 1 / -1; font-size: 11px; color: var(--acc2); letter-spacing: .09em; text-transform: uppercase; }
.ed-beat { border: 1px solid var(--line); border-radius: var(--r2); padding: 10px; margin-bottom: 8px; background: var(--s1); transition: border-color .15s; }
.ed-beat.cur { border-color: var(--acc2); box-shadow: 0 0 0 3px #ffc65c14; }
.ed-beat .n { font-size: 11px; font-weight: 800; color: var(--mut); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.ed-beat .n span:first-child { color: var(--acc2); }
.ed-beat textarea, .ed-beat input, .ed-beat select, .ed-head select { padding: 7px 9px; font-size: 13px; margin-top: 6px; border-radius: 9px; }
.ed-beat select, .ed-head select { padding-right: 28px; background-position: right 9px center; }
.ed-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ed-row3 { display: grid; grid-template-columns: 62px 1fr 1fr 1.1fr; gap: 5px; align-items: center; }
.ed-row3 small { color: var(--mut); font-weight: 700; text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; }
.ed-tools { display: flex; gap: 4px; }
.ed-tools button { border: 1px solid var(--line); background: transparent; color: var(--mut); border-radius: 7px; font-size: 11px; padding: 3px 7px; cursor: pointer; }
.ed-tools button:hover { color: var(--txt); border-color: var(--line2); }
.ed-side { font-size: 11px; font-weight: 800; color: var(--mut); margin: 8px 0 0; }
.ed-media { margin-top: 7px; flex-wrap: wrap; align-items: center; }
.ed-media .btn.small { padding: 4px 10px; font-size: 11.5px; border-style: dashed; }
.ed-media small { color: var(--dim); font-size: 11px; flex-basis: 100%; }
.ed-media .ed-start { font-size: 11.5px; color: var(--mut); font-weight: 700; padding: 0 2px; }
#editor > .hint.note { margin: 0 0 12px; }

/* ---------- linha do tempo com faixas ---------- */
.tlwrap { width: 100%; user-select: none; -webkit-user-select: none; }
.tl-tools { display: flex; align-items: center; gap: 2px; padding: 5px 10px; border-bottom: 1px solid var(--line); }
.tl-tools .sep { width: 1px; height: 18px; background: var(--line2); margin: 0 6px; }
.tl-tools .grow { flex: 1; }
.tl-tools .savemsg { margin: 0 8px 0 0; font-size: 11.5px; color: var(--dim); white-space: nowrap; }
.tb { appearance: none; border: 1px solid transparent; background: transparent; color: var(--mut); font: inherit; font-weight: 700; font-size: 13px; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 9px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .12s, color .12s; }
.tb:hover:not(:disabled) { background: var(--s3); color: var(--txt); }
.tb:disabled { opacity: .35; cursor: default; }
.tb.txt { color: var(--txt); font-size: 12.5px; } .tb.txt .ic { color: var(--acc2); }
.tb.on { color: var(--acc2); }
.tl-zoom { display: flex; align-items: center; gap: 2px; } .tl-zoom input { width: 92px; height: 18px; }
.tl-body { position: relative; display: grid; grid-template-columns: 112px 1fr; max-height: 240px; overflow-y: auto; background: #0c0d11; }
.tl-heads { border-right: 1px solid var(--line); background: var(--s1); }
.tl-heads .head { display: flex; align-items: center; gap: 7px; padding: 0 6px 0 10px; border-bottom: 1px solid #ffffff08; font-size: 11px; font-weight: 800; color: var(--mut); }
.tl-heads .head .ic { color: var(--dim); }
.tl-heads .head .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-heads .head .add { border: 1px solid var(--line2); background: transparent; color: var(--mut); width: 22px; height: 22px; border-radius: 7px; font: 800 14px/1 Inter, sans-serif; cursor: pointer; padding: 0; flex: none; } .tl-heads .head .add:hover { color: var(--acc2); border-color: var(--acc2); }
.tl-scroll { overflow-x: auto; overflow-y: hidden; touch-action: pan-y; position: relative; }
.tl-content { position: relative; min-width: 100%; }
.tl-content .row { position: relative; border-bottom: 1px solid #ffffff08; }
.tl-content .r-ruler { background: var(--s1); cursor: text; }
.tl-content .r-scenes { background: #ffffff04; }
.ruler-c, .wave-c { position: sticky; left: 0; display: block; pointer-events: none; }
.tl-content .el { position: absolute; border-radius: 7px; overflow: hidden; white-space: nowrap; font-size: 11px; font-weight: 700; color: #fff; cursor: grab; box-sizing: border-box; border: 1px solid #00000066; }
.tl-content .el .lb { position: relative; display: block; padding: 0 8px; line-height: 1.2; top: 50%; transform: translateY(-50%); pointer-events: none; text-shadow: 0 1px 2px #000c; overflow: hidden; text-overflow: ellipsis; }
.tl-content .el.sel { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #ffc65c99; z-index: 2; }
.tl-content .el.drag { opacity: .4; } .tl-content .el.grab { cursor: grabbing; opacity: .9; }
.tl-content .el .hl, .tl-content .el .hr { position: absolute; top: 0; bottom: 0; width: 9px; cursor: ew-resize; z-index: 1; }
.tl-content .el .hl { left: 0; } .tl-content .el .hr { right: 0; }
.tl-content .el.sel .hl, .tl-content .el.sel .hr, .tl-content .el:hover .hl, .tl-content .el:hover .hr { background: #ffffffd0; }
.tl-content .el.sel .hl::after, .tl-content .el.sel .hr::after { content: ""; position: absolute; left: 3.5px; top: 35%; bottom: 35%; width: 2px; border-radius: 1px; background: #0b0c12; }
.tl-content .k-text { background: linear-gradient(180deg, color-mix(in srgb, var(--c, #ffd166) 70%, #1a1d2a), color-mix(in srgb, var(--c, #ffd166) 45%, #12141c)); }
.tl-content .k-media { background: #2e3d6b center/auto 100% repeat-x; }
.tl-content .k-media::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 40%, #000a); pointer-events: none; }
.tl-content .k-audio { background: linear-gradient(180deg, #1f8f6c, #136a4f); } .tl-content .k-audio .cw { position: absolute; left: 0; top: 4px; width: 100%; height: calc(100% - 8px); pointer-events: none; }
.tl-content .beat { background: #1c2236 left center/auto 100% repeat-x; border-top: 3px solid #4f7cf6; }
.tl-content .beat::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0000 30%, #000b); pointer-events: none; }
.tl-content .beat .lb { top: auto; transform: none; position: absolute; left: 0; right: 0; bottom: 4px; }
.tl-content .beat.k-text { border-top-color: #ef9a3c; } .tl-content .beat.k-photo { border-top-color: #25b383; } .tl-content .beat.k-cam { border-top-color: #b860e0; } .tl-content .beat.k-map { border-top-color: #2bb0c9; } .tl-content .beat.k-outro { border-top-color: #6b7088; cursor: default; filter: saturate(.5); }
.tl-content .trm { position: absolute; top: 50%; width: 11px; height: 11px; margin: -5px 0 0 -6px; background: #fff; border: 2px solid #0b0c12; transform: rotate(45deg); border-radius: 2px; z-index: 3; pointer-events: none; box-shadow: 0 0 0 1px #ffffff40; }
.tl-content .scmark { position: absolute; top: 0; height: 3px; background: #ffffff30; } .tl-content .scmark.odd { background: #ffffff16; }
.tl-content .cam { background: linear-gradient(180deg, #8d4fc9, #6d34a6); cursor: default; } .tl-content .cam .cut { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ffffff70; }
.tl-content .endm { position: absolute; top: 0; bottom: 0; width: 1px; background: #ffffff26; pointer-events: none; }
.tl-content .ph, .tl-body > .phc { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px #0008; pointer-events: none; z-index: 5; }
.tl-content .ph i, .tl-body > .phc i { position: absolute; top: 0; left: -6px; width: 14px; height: 14px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 55%, 50% 100%, 0 55%); }
.tl-content .snapl { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #ff5dcf; box-shadow: 0 0 8px #ff5dcf; pointer-events: none; z-index: 4; }
.tl-content .ins { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: var(--acc2); pointer-events: none; z-index: 4; }
.tlwrap.empty .tl-body { min-height: 60px; }

/* propriedades da camada ou do trecho escolhido */
.insp .ih { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; }
.insp .ih > b { font-size: 13.5px; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.insp .itime { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--mut); font-weight: 700; }
.insp .itime input { width: 64px; padding: 6px 7px; font-size: 12.5px; }
.insp textarea { margin-top: 12px; font-size: 15px; font-weight: 700; }
.insp .igrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.insp .if .lbl { margin: 14px 0 7px; }
.insp .if input[type=range] + b { font-size: 11.5px; color: var(--mut); }
.insp .sw { align-items: center; gap: 7px; } .insp .sw button { width: 26px; height: 26px; } .insp .sw input[type=color] { width: 32px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: none; cursor: pointer; }
.insp .in > .hint { margin-top: 14px; }

/* ---------- telas médias: colunas mais estreitas ---------- */
@media (max-width: 1360px) { .app { grid-template-columns: 72px 300px minmax(0, 1fr) 290px; } .unl { display: none; } }
@media (max-width: 1100px) { .app { grid-template-columns: 70px 280px minmax(0, 1fr) 260px; } .tb.txt span { display: none; } .tl-zoom input { width: 60px; } }

/* ---------- celular (e tablet em pé): prévia em cima, linha do tempo, barra de ferramentas embaixo;
   tocar numa ferramenta sobe um painel no lugar da linha do tempo, com a prévia ainda à vista ---------- */
@media (max-width: 899px) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: 50px minmax(0, 1fr) auto 64px; grid-template-areas: "top" "stage" "dock" "rail"; }
  .top { gap: 10px; padding: 0 10px 0 14px; padding-top: env(safe-area-inset-top); }
  .brand b { display: none; } .ptitle { text-align: left; font-size: 13px; color: var(--txt); }
  .unl, #btnAi span, #uiLang { display: none; }
  #btnAi { padding: 7px 9px; } #btnExport { padding: 8px 13px; font-size: 13.5px; }
  .rail { flex-direction: row; gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail button { flex: 0 0 auto; min-width: 66px; padding: 7px 4px 5px; font-size: 10.5px; }
  .rail button.on::before { left: 18px; right: 18px; top: -4px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  .panel, .props { display: none; }
  .app.sheet, .app.msel { grid-template-rows: 50px minmax(0, 1fr) min(52dvh, 470px); grid-template-areas: "top" "stage" "sheet"; }
  .app.sheet .dock, .app.sheet .rail, .app.msel .dock, .app.msel .rail { display: none; }
  .app.sheet .panel { display: flex; grid-area: sheet; border: 0; border-top: 1px solid var(--line2); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px #0009; animation: up .18s ease-out; }
  .app.msel:not(.sheet) .props { display: flex; grid-area: sheet; border: 0; border-top: 1px solid var(--line2); border-radius: 20px 20px 0 0; box-shadow: 0 -18px 40px #0009; animation: up .18s ease-out; }
  .pclose { display: flex; }
  .panel-head { padding: 12px 14px 8px 18px; }
  .panel-body { padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
  .stage { padding: 10px 10px 6px; gap: 8px; background: none; }
  .phone { border-radius: 16px; }
  .transport { gap: 10px; } .playbtn { width: 38px; height: 38px; }
  .tl-tools { padding: 3px 6px; } .tl-tools .sep { margin: 0 3px; }
  .hide-m, .tl-zoom input, .tl-tools .savemsg { display: none; }
  .tl-body { grid-template-columns: 38px 1fr; max-height: 34dvh; }
  .tl-heads .head { padding: 0; justify-content: center; } .tl-heads .head .nm, .tl-heads .head .add { display: none; }
  .tl-scroll { touch-action: pan-x; }
  .tl-content .el.sel { touch-action: none; }
  .tl-content .el .hl, .tl-content .el .hr { width: 16px; }
  .styles { grid-template-columns: repeat(4, 1fr); }
  .tpresets { grid-template-columns: repeat(3, 1fr); }
  .charwrap { grid-template-columns: 1fr; } .charwrap canvas { margin: 0 auto; }
  dialog { padding: 20px; border-radius: 20px; }
}
@media (max-width: 420px) { .styles { grid-template-columns: repeat(3, 1fr); } .tpresets { grid-template-columns: 1fr 1fr; } .row2 { gap: 8px; } }
@media (min-width: 900px) and (max-height: 820px) { .tl-body { max-height: 190px; } .stage { padding-top: 12px; } }
@keyframes up { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }