/* Fábrica de Roteiros — app (páginas do site, futuro PWA) */
:root{
  --carvao:#141414; --grafite:#1C1C1C; --grafite2:#262626; --linha:#333; --aco:#8C8780;
  --brasa:#FF4D1A; --brasa-e:#D63A0C; --brasa-c:#FFE2D6; --cal:#F4F1EA; --ok:#2FBF71; --alerta:#FFB020;
  --topo:env(safe-area-inset-top,0px); --base:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#0B0B0B;overflow:hidden;overscroll-behavior:none}
body{color:var(--cal);font-family:"Archivo",system-ui,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}
img,video{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
#grao{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:200;opacity:.04;image-rendering:pixelated}

/* moldura: no celular ocupa tudo; no computador vira um aparelho no centro */
.moldura{position:fixed;inset:0;display:flex;justify-content:center;align-items:center;gap:80px;background:radial-gradient(ellipse at 30% 20%,rgba(255,77,26,.10),transparent 55%),#0B0B0B}
.lado{display:none}
.app{position:relative;width:100%;height:100%;background:var(--carvao);overflow:hidden}
@media (min-width:760px){
  .lado{display:flex;flex-direction:column;gap:22px;width:240px}
  .lado img{width:200px}
  .app{width:410px;height:min(880px,calc(100% - 48px));border-radius:44px;box-shadow:0 0 0 10px #1a1a1a,0 0 0 11px #2a2a2a,0 50px 120px rgba(0,0,0,.6)}
}

/* tipografia e utilidades */
.mono{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--aco)}
.brasa{color:var(--brasa)!important}
.t1{font-stretch:118%;font-weight:820;text-transform:uppercase;font-size:30px;line-height:.98;letter-spacing:-.015em}
.t2{font-stretch:118%;font-weight:800;text-transform:uppercase;font-size:17px;line-height:1.08;letter-spacing:-.005em}
.txt{color:#CFCAC1;font-size:15.5px}
.peq{font-size:13px;color:var(--aco);line-height:1.4}
.dente{display:inline-block;width:0;height:0;border-left:9px solid var(--brasa);border-top:6px solid transparent;border-bottom:6px solid transparent;flex:none}
.serr{height:9px;width:70px;background:linear-gradient(135deg,var(--brasa) 50%,transparent 50%) 0 0/13px 9px repeat-x;transform:scaleX(-1)}
.ic{display:inline-block;width:22px;height:22px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat;flex:none}

/* tela */
.tela{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--carvao)}
.rola{flex:1;overflow-y:auto;overflow-x:hidden;padding:calc(18px + var(--topo)) 20px 28px;display:flex;flex-direction:column;gap:14px;scrollbar-width:none}
.rola::-webkit-scrollbar{display:none}
.barra-topo{display:flex;align-items:center;justify-content:space-between;min-height:40px}
.redondo{width:40px;height:40px;border-radius:20px;background:var(--grafite);border:1px solid var(--linha);display:flex;align-items:center;justify-content:center;font-size:18px}
.passos{display:flex;gap:5px}
.passos i{width:26px;height:4px;border-radius:2px;background:var(--linha)}
.passos i.on{background:var(--brasa)}

/* botões */
.btn{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:6px;background:var(--brasa);color:var(--carvao);font-weight:700;font-size:16px;width:100%;transition:transform .15s,background .2s}
.btn:active{transform:scale(.98);background:var(--brasa-e)}
.btn.escuro{background:var(--carvao);color:var(--cal)}
.btn.linha{background:transparent;border:1.5px solid var(--linha);color:var(--cal)}
.pe{padding:12px 20px calc(16px + var(--base));background:linear-gradient(180deg,rgba(20,20,20,0),var(--carvao) 30%)}

/* campos */
.campo{display:block;background:var(--grafite);border:1.5px solid var(--linha);border-radius:8px;padding:9px 14px;transition:border-color .2s}
.campo:focus-within{border-color:var(--brasa)}
.campo .mono{font-size:9.5px}
.campo input{display:block;width:100%;background:none;border:0;outline:0;font-size:16px;margin-top:3px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{height:36px;padding:0 14px;border-radius:18px;border:1.5px solid var(--linha);font-size:14px;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.chip.on{background:var(--brasa);border-color:var(--brasa);color:var(--carvao);font-weight:600}

/* cartões */
.card{background:var(--grafite);border:1px solid var(--linha);border-radius:12px;padding:14px 16px}
.escolha{display:flex;align-items:center;gap:14px;padding:12px;border-radius:12px;border:1.5px solid var(--linha);background:var(--grafite);text-align:left;transition:all .2s}
.escolha img{width:64px;height:64px;border-radius:8px;object-fit:cover;flex:none;filter:saturate(.8)}
.escolha .radio{width:22px;height:22px;border-radius:11px;border:2px solid var(--linha);margin-left:auto;flex:none;transition:all .2s}
.escolha.on{border-color:var(--brasa);background:#22150f}
.escolha.on .radio{border:7px solid var(--brasa)}
.escolha.on img{filter:none}

/* navegação de baixo */
.nav{display:flex;justify-content:space-around;padding:10px 6px calc(10px + var(--base));border-top:1px solid #262626;background:rgba(20,20,20,.94);backdrop-filter:blur(12px)}
.nav a{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--aco);font-family:"JetBrains Mono";font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:4px 10px}
.nav a.on{color:var(--brasa)}

/* ENTRAR */
.entrar{justify-content:flex-end}
.entrar video,.entrar .fundo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.entrar .tinta{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.35),rgba(20,20,20,0) 22%,rgba(20,20,20,.25) 40%,rgba(20,20,20,.9) 66%,var(--carvao) 88%)}
.entrar .conteudo{position:relative;padding:0 22px calc(26px + var(--base));display:flex;flex-direction:column;gap:12px}
.entrar .logo{position:absolute;top:calc(26px + var(--topo));left:22px;width:150px}
.entrar h1{font-stretch:118%;font-weight:840;text-transform:uppercase;font-size:40px;line-height:.92;letter-spacing:-.02em;margin-bottom:8px}
.beta{align-self:flex-start;padding:5px 10px;border-radius:4px;background:rgba(255,77,26,.15);color:var(--brasa)}

/* INÍCIO */
.ola{display:flex;align-items:center;justify-content:space-between}
.ola img{width:34px}
.resumo{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.resumo div{background:var(--grafite);border:1px solid var(--linha);border-radius:10px;padding:12px}
.resumo b{display:block;font-stretch:118%;font-weight:840;font-size:28px;line-height:1}
.lote-card{position:relative;border-radius:14px;overflow:hidden;min-height:170px;display:flex;flex-direction:column;justify-content:flex-end;padding:16px}
.lote-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lote-card:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,20,.1),rgba(20,20,20,.92))}
.lote-card>*{position:relative;z-index:1}
.item{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;background:var(--grafite);border:1px solid var(--linha)}
.item .th{width:52px;height:52px;border-radius:8px;overflow:hidden;flex:none;position:relative}
.item .th img{width:100%;height:100%;object-fit:cover}
.item .th .ic{position:absolute;inset:0;margin:auto;color:#fff;width:18px;height:18px}
.estado{margin-left:auto;padding:4px 8px;border-radius:4px;font-family:"JetBrains Mono";font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--linha);color:var(--aco);flex:none}
.estado.pronto{color:var(--brasa);border-color:#5a2a18}
.estado.postado{color:var(--ok);border-color:#1f5a3a}

/* LINHA */
.linha-tela{background:#0F0F0F}
.linha-tela .midia{position:relative;height:38%;flex:none;overflow:hidden}
.linha-tela .midia video{width:100%;height:100%;object-fit:cover}
.linha-tela .midia:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.2),#0F0F0F)}
.contador{font-stretch:118%;font-weight:840;font-size:52px;line-height:.9;font-variant-numeric:tabular-nums}
.esteira{height:14px;border-radius:3px;background:repeating-linear-gradient(90deg,#262626 0 14px,#1a1a1a 14px 28px);overflow:hidden}
.esteira i{display:block;height:100%;width:0;background:linear-gradient(135deg,var(--brasa) 50%,#b8360f 50%) 0 0/14px 14px;box-shadow:0 0 18px rgba(255,77,26,.5)}
.etapa{display:flex;gap:12px;align-items:flex-start;opacity:.35;transition:opacity .4s}
.etapa .n{width:28px;height:28px;border-radius:14px;border:1.5px solid var(--linha);display:flex;align-items:center;justify-content:center;font-family:"JetBrains Mono";font-size:11px;font-weight:700;color:var(--aco);flex:none;transition:all .3s}
.etapa.run{opacity:1}.etapa.run .n{background:var(--brasa);border-color:var(--brasa);color:var(--carvao)}
.etapa.ok{opacity:1}.etapa.ok .n{background:var(--ok);border-color:var(--ok);color:var(--carvao)}
.etapa b{display:block;font-weight:600;font-size:15px}
.reprov{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.reprov span{font-family:"JetBrains Mono";font-size:10px;letter-spacing:.06em;padding:4px 7px;border-radius:4px;border:1px solid var(--linha);color:var(--aco)}
.reprov span.ok{color:var(--ok);border-color:#1f5a3a}

/* RELATÓRIO */
.teto{border-radius:14px;padding:18px;background:var(--brasa);color:var(--carvao)}
.teto .mono{color:#5A1E08}
.teto .num{font-stretch:118%;font-weight:840;font-size:72px;line-height:.85}
.tipo{display:flex;flex-direction:column;gap:6px}
.tipo .lin{display:flex;justify-content:space-between;font-size:14px}
.tipo .b{height:8px;border-radius:4px;background:#262626;overflow:hidden}
.tipo .b i{display:block;height:100%;width:0;background:var(--brasa)}

/* ABERTURAS */
.abertura{display:flex;flex-direction:column;gap:8px}
.abertura .cab{display:flex;justify-content:space-between}
.slot{background:var(--brasa-c);color:#8A2A08;border-radius:4px;padding:0 5px;font-weight:600}
.fill{color:var(--brasa);font-weight:600}
.vira{font-size:15.5px;line-height:1.5}

/* ROTEIRO */
.etq{position:relative;display:flex;background:var(--brasa);color:var(--carvao);border-radius:10px;margin-bottom:12px}
.etq:before,.etq:after{content:"";position:absolute;top:50%;width:18px;height:18px;border-radius:9px;background:var(--carvao);transform:translateY(-50%)}
.etq:before{left:-9px}.etq:after{right:-9px}
.etq .c1{flex:1;padding:14px 16px 18px}
.etq .c1 .mono{color:#5A1E08;font-size:9.5px}
.etq .c1 b{display:block;font-stretch:118%;font-weight:840;text-transform:uppercase;font-size:20px;line-height:1;margin:6px 0}
.etq .c2{width:80px;border-left:2px dashed #A8320C;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.etq .c2 img{width:34px}
.etq .c2 .mono{color:#5A1E08;font-size:9px}
.carimbo{position:absolute;right:14px;bottom:-12px;padding:5px 10px;border:3px solid var(--carvao);border-radius:5px;font-family:"JetBrains Mono";font-weight:700;font-size:12px;letter-spacing:.18em;background:rgba(255,77,26,.95);transform:rotate(-10deg)}
.tela-texto{background:var(--cal);color:var(--carvao);border-radius:10px;padding:14px;font-weight:700;font-size:18px;line-height:1.25}
.tela-texto small{display:block;font-weight:400;font-size:13px;margin-top:4px}
.bloco{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #232323}
.bloco b{font-family:"JetBrains Mono";font-size:11px;color:var(--brasa);width:54px;flex:none;padding-top:3px}
.bloco span{font-size:15.5px;line-height:1.45}
.bloco em{font-style:normal;font-weight:700;color:#fff}
.origem{display:flex;flex-direction:column;gap:6px}
.origem div{display:flex;justify-content:space-between;font-size:13px;color:#BDB7AD;border-bottom:1px dashed #2a2a2a;padding-bottom:6px}

/* GRAVAR */
.gravar{background:#000}
.gravar video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gravar video.espelho{transform:scaleX(-1)}
.gravar .topo-g{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:calc(16px + var(--topo)) 16px 0}
.pilula{display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);padding:7px 12px;border-radius:16px;font-family:"JetBrains Mono";font-size:11px;letter-spacing:.1em;color:#fff}
.pilula i{width:9px;height:9px;border-radius:5px;background:#666}
.gravando .pilula i{background:#FF3B30;animation:pisca 1s infinite}
@keyframes pisca{50%{opacity:.3}}
.prompter{position:relative;z-index:2;margin:14px 14px 0;height:44%;border-radius:14px;background:rgba(10,10,10,.55);backdrop-filter:blur(8px);overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 18%,#000 70%,transparent);mask:linear-gradient(transparent,#000 18%,#000 70%,transparent)}
.prompter-texto{padding:120px 18px 200px;font-size:25px;line-height:1.4;font-weight:600;color:#fff}
.prompter-texto p{margin-bottom:18px;opacity:.45;transition:opacity .3s}
.prompter-texto p.agora{opacity:1}
.prompter-texto p b{display:block;font-family:"JetBrains Mono";font-size:10px;letter-spacing:.14em;color:var(--brasa);margin-bottom:4px}
.controles{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 18px calc(24px + var(--base));display:flex;flex-direction:column;gap:16px}
.ajustes{display:flex;justify-content:center;gap:8px}
.ajustes button{background:rgba(0,0,0,.5);backdrop-filter:blur(10px);padding:7px 12px;border-radius:16px;font-size:12px;color:#fff}
.botoes{display:flex;justify-content:space-around;align-items:center}
.rec{width:78px;height:78px;border-radius:39px;border:5px solid #fff;display:flex;align-items:center;justify-content:center}
.rec i{width:58px;height:58px;border-radius:29px;background:#FF3B30;transition:all .25s}
.gravando .rec i{width:28px;height:28px;border-radius:6px}
.lateral{width:48px;height:48px;border-radius:24px;background:rgba(0,0,0,.5);backdrop-filter:blur(10px);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.aviso-cam{position:relative;z-index:2;margin:10px 14px 0;font-size:12.5px;color:#ddd;background:rgba(0,0,0,.5);padding:8px 12px;border-radius:8px}

/* aviso flutuante */
.toast{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);z-index:50;background:var(--cal);color:var(--carvao);padding:10px 16px;border-radius:8px;font-weight:600;font-size:14px;opacity:0;pointer-events:none;white-space:nowrap}

/* cortina de transição com a serrilha */
.cortina{position:absolute;inset:0;z-index:100;background:var(--brasa);pointer-events:none;visibility:hidden}
.cortina:before{content:"";position:absolute;left:0;right:0;top:-12px;height:13px;background:linear-gradient(135deg,transparent 50%,var(--brasa) 50%) 0 0/18px 13px repeat-x}
.cortina img{position:absolute;inset:0;margin:auto;width:90px}