/* KingKong studio — interface, sem interferir no tamanho do roteiro. */
:root{--preto:#0c0d0f;--carvao:#17191d;--grafite:#303238;--cinza:#a0a3ad;--branco:#f4f3ef;--accent:#dbcba7;--fonte:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
body{font-family:var(--fonte)}
button,a,input,textarea,select{transition:background .18s,border-color .18s,box-shadow .18s}
button{min-height:48px;border-radius:12px;font-weight:500}
button:hover{border-color:#62636b}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--accent)}
.brandmark{display:inline-grid;place-items:center;width:34px;height:34px;border:1px solid #45413a;border-radius:10px;color:var(--accent);font-size:12px;font-weight:800;letter-spacing:-.05em;margin-right:10px;vertical-align:middle}
/* Página inicial */
body.home{min-height:100dvh;height:auto;background:radial-gradient(ellipse at 75% 35%,#24232155,transparent 55%),var(--preto);padding:0}
.home-shell{max-width:1160px;margin:auto;padding:30px 40px;width:100%}
.home-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff12;padding-bottom:24px;font-size:13px;letter-spacing:.01em}
.home-header .edition{color:var(--cinza);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.home-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:80px;align-items:center;min-height:70vh;padding:65px 0}
.home h1{font-size:clamp(42px,5vw,68px);line-height:1.07;letter-spacing:-.055em;font-weight:600;margin:22px 0}
.home h1 span{color:var(--accent)}
.home .intro{font-size:16px;line-height:1.7;color:var(--cinza);max-width:390px;margin-bottom:32px}
.home .actions{display:grid;gap:12px}
.home .opcao{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 22px;border:1px solid var(--grafite);border-radius:14px;background:#151619;color:var(--branco);text-decoration:none}
.home .opcao strong{display:block;font-size:15px;font-weight:600;margin-bottom:6px}
.home .opcao small{display:block;font-size:12px;line-height:1.5;color:var(--cinza)}
.home .opcao.principal{background:var(--branco);color:#18191b;border-color:var(--branco)}
.home .opcao.principal small{color:#5b5b60}
.home .opcao:hover{transform:translateY(-1px);border-color:var(--accent)}
.home .arrow{font-size:24px;font-weight:300}
.preview{border:1px solid #ffffff20;background:#101113;border-radius:20px;box-shadow:0 32px 80px #0005;overflow:hidden;transform:rotate(-2deg)}
.preview-top{display:flex;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #ffffff12;font-size:10px;letter-spacing:.12em;color:var(--cinza)}
.preview-copy{position:relative;padding:30px 28px;font-size:clamp(22px,2.8vw,34px);line-height:1.5;font-weight:500;letter-spacing:-.03em}
.preview-copy p{margin:0}.preview-copy .muted{color:#696b72}.preview-copy .reading{color:var(--branco);border-left:2px solid var(--accent);padding-left:16px;margin:15px 0 15px -18px}
.preview-foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #ffffff12;padding:18px 22px;font-size:11px;color:var(--cinza)}
.preview-foot span:last-child{color:var(--accent)}
.home-footer{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #ffffff12;padding-top:22px;color:var(--cinza);font-size:11px;line-height:1.6}
/* Controle remoto */
body.remote{background:#0c0d0f}
.remote header{padding:18px max(22px,calc((100vw - 600px)/2));min-height:80px;background:#101113;border-color:#ffffff0c;gap:12px}
.remote header .marca{font-size:16px;font-weight:600;letter-spacing:-.03em}
.remote header #sala{font-size:11px;font-variant-numeric:tabular-nums;max-width:45%;overflow-wrap:anywhere;color:var(--accent)}
.remote main{padding:28px 22px 32px}
.remote .aba{max-width:520px}
.remote #titulo{font-size:25px;font-weight:500;letter-spacing:-.04em;margin:10px 0 16px;overflow-wrap:anywhere}
.remote #trilho{margin-bottom:24px;height:24px}.remote #trilho div{height:4px}.remote #barraProgresso{background:var(--accent)}
.remote #trilho{cursor:default;margin-bottom:8px}
.remote #previaTexto{padding:20px 22px;border:1px solid #ffffff2c;border-radius:18px;background:#111216;min-height:clamp(220px,34dvh,370px);max-height:clamp(220px,38dvh,420px);overflow-y:auto;overscroll-behavior:contain}
.remote #previaTexto .eyebrow{font-size:11px}.remote #previaTexto p{font-size:clamp(19px,4.6vw,24px);line-height:1.55;margin:14px 0 0;overflow-wrap:anywhere}
.remote #prevAntes,.remote #prevDepois{color:#8d9098}.remote #prevAgora{font-weight:650;color:var(--branco);background:#dbcba722;border-radius:3px}
.remote #btnVoz{width:100%;min-height:58px;margin:12px 0 0;background:#25231d;border-color:#a68d59;color:#fff;font-size:17px;font-weight:650}.remote #btnVoz.ouvindo{background:#6a2c2c;border-color:#d58484}
.remote #statusVoz{min-height:30px;margin:7px 3px 0;color:#aaa7a0;font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.remote .voltar-ponto{width:100%;min-height:48px;margin:10px 0 0;background:#24231f;border-color:#7f7155;color:var(--branco);font-size:15px}.remote .voltar-ponto:disabled{opacity:.42}
.remote #ajusteFino{touch-action:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:8px;height:clamp(112px,20dvh,190px);padding:14px;margin:10px 0 14px;border:1px solid #ffffff25;border-radius:18px;background:repeating-linear-gradient(0deg,transparent 0 12px,#ffffff08 12px 13px),#1b1c20;color:var(--accent);text-align:center;cursor:ns-resize}
.remote #ajusteFino strong{font-size:15px;color:#fff;font-weight:600}.remote #ajusteFino small{font-size:11px;color:var(--cinza)}.remote #ajusteFino span{font-size:15px;line-height:1}
.remote .remoto{gap:10px}
.remote .remoto{grid-template-columns:1fr 1fr}
.remote .remoto .segurar{min-height:62px}
.remote .compartilhar-remoto{width:100%;margin:12px 0 4px;background:transparent;color:var(--accent);border-color:#ffffff22;font-size:13px}
.modal-compartilhar[hidden]{display:none!important}.modal-compartilhar{position:fixed;inset:0;z-index:8;display:grid;place-items:center;padding:18px;background:#000c}.modal-compartilhar .caixa{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,380px);padding:24px;background:#191a1e;border:1px solid #ffffff26;border-radius:20px;text-align:center}.modal-compartilhar h2{font-size:22px;margin:0}.modal-compartilhar p{font-size:13px;color:var(--cinza);margin:0}.modal-compartilhar img{width:min(55dvh,210px);aspect-ratio:1;background:white;padding:10px;border-radius:12px}.modal-compartilhar button{width:100%}
.remote .remoto button{font-size:14px;padding:16px;background:#181a1e;border-color:#ffffff0c}
.remote .remoto button:hover{border-color:#ffffff30}
.remote #btnPlay{font-size:23px;font-weight:600;letter-spacing:-.03em;padding:26px;background:var(--branco);color:#141518;border-radius:16px;min-height:94px}
.remote #btnPlay.tocando{background:#b82d29;color:#fff}
.remote .segurar{color:#d5d5d8}
.remote .vel{background:#121316;border:1px solid #ffffff0c;border-radius:14px;padding:12px;gap:16px;margin:8px 0}
.remote .vel strong{font-size:27px;font-weight:500}.remote .vel small{font-size:11px}
.remote .vel button{font-size:22px;background:#202226}
.remote #btnAnterior,.remote #btnProximo{background:transparent;color:var(--cinza);font-size:12px}
.remote nav{background:#111215;border-color:#ffffff10;max-width:100%;padding-top:6px}
.remote nav button{font-size:12px;padding:16px 4px;position:relative;background:none!important}
.remote nav button.ativa{color:var(--accent)}
.remote nav button.ativa:before{content:'';position:absolute;top:0;left:calc(50% - 10px);height:2px;width:20px;background:var(--accent);border-radius:2px}
.remote .lista li{background:#15171a;border-color:#ffffff0c;border-radius:16px;padding:20px}
.remote .lista li.atual{border-color:#9b8f744f}.remote .lista h3{font-weight:500;letter-spacing:-.02em}
.remote .lista p{margin-top:8px;line-height:1.6}.remote .lista .acoes{flex-wrap:wrap}
.remote .lista .acoes button{min-height:40px;font-size:12px}
.remote #btnNovo{background:var(--branco);color:#141518;font-size:14px;font-weight:600}
.remote .biblioteca-cabecalho{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.remote .biblioteca-cabecalho h2{font-size:clamp(25px,5vw,34px);font-weight:600;letter-spacing:-.04em;margin:0}
.remote #btnNovo{width:auto;white-space:nowrap;padding:10px 18px}
.remote #buscarRoteiro{width:100%;font-size:16px;min-height:48px;padding:12px 16px;margin-bottom:18px;border-radius:13px;background:#1d1e22;border:1px solid #ffffff18}
.remote .lista{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:14px}
.remote .lista li{display:flex;flex-direction:column;min-height:210px;margin:0}
.remote .lista li p{flex:1;-webkit-line-clamp:4}
.remote .lista .acoes{margin-top:auto}.remote .lista .acoes button{padding:9px}
.remote #exportar,.remote #importar{font-size:12px;flex:1;background:transparent}
.remote .ajuste{padding:20px 0;border-color:#ffffff0c;font-size:14px}.remote .ajuste input[type=range]{accent-color:var(--accent);height:28px}
.remote .chave{font-size:14px;border-color:#ffffff0c;padding:20px 0;gap:15px}.remote .chave input{accent-color:var(--accent)}
.remote #editor{max-width:720px;margin:auto;padding:24px;z-index:5;box-shadow:0 0 0 100vw #0009}
.remote #editor input,.remote #editor textarea{border-color:#ffffff14;background:#15171a;border-radius:12px}.remote #editor .linha button{font-size:13px;padding:12px 8px}
.remote #editor{width:100%;max-width:none;gap:12px;padding:max(12px,env(safe-area-inset-top)) max(14px,calc((100vw - 820px)/2)) max(12px,env(safe-area-inset-bottom))}
.remote #editor .editor-topo{display:flex;align-items:center;justify-content:space-between;gap:8px}.remote #editor .editor-topo strong{font-size:15px;white-space:nowrap}
.remote #editor .editor-topo button{padding:10px 12px;font-size:13px;white-space:nowrap}
.remote #editor textarea{font-size:clamp(22px,3vw,32px);line-height:1.45;background:#050505;color:#fff;min-height:0}
.remote #editor input{font-size:19px;background:#101114}
.remote #editor .linha button{min-height:48px}
.remote #entrar{background:radial-gradient(ellipse at top,#28272177,transparent 70%),var(--preto);z-index:6}
.remote #entrar .caixa{max-width:370px}.remote #entrar h1{font-size:30px;font-weight:500;letter-spacing:-.04em;margin:20px 0 12px}
.remote #entrar p{font-size:14px;line-height:1.7}.remote #entrar input{font-size:25px;letter-spacing:.12em;padding:19px 12px;border-color:#ffffff20;background:#17191c}
.remote #entrar button{font-size:14px;padding:17px}.remote #erroEntrar{font-size:13px}
/* Leitura permanece preta para o espelho físico */
body.display{background:#000}
.display #barra{gap:14px;padding:18px 24px;font-size:12px}.display #barra button{font-size:12px;background:#16171bec;border-color:#ffffff18;border-radius:10px}
.display #pareamento{background:radial-gradient(ellipse at top,#29272166,transparent 65%),#0c0d0f}
.display #pareamento .caixa{width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center}
.display #pareamento h1{font-size:24px;letter-spacing:-.04em;font-weight:600;margin:20px 0 12px}
.display #pareamento p{font-size:14px;line-height:1.7;max-width:320px}
.display #pareamento{overflow-y:auto;padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom))}
.display #pareamento .caixa{gap:12px}
.display .acao-controle{display:grid;place-items:center;min-height:52px;width:100%;padding:12px 16px;border-radius:12px;background:var(--branco);color:#17191c;text-decoration:none;font-size:15px;font-weight:600}
.display #compartilharControle{width:100%;background:#202126;border-color:#ffffff24;font-size:14px}
.display #qr{width:clamp(120px,22dvh,190px);border-radius:18px;padding:12px;background:#fff}
.display #codigo{font-size:clamp(22px,6vw,30px);letter-spacing:.1em;font-weight:500;color:var(--accent);margin:4px 0;overflow-wrap:anywhere}
.display #link{font-size:11px;max-width:320px}.display #btnFechar{font-size:13px;background:transparent}
.display #barra{flex-wrap:wrap;justify-content:center}.display #barra #status{flex:1;min-width:95px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.display #barra #btnSubir,.display #barra #btnDescer{min-width:52px;font-size:24px;padding:5px 12px}
.display #barra #btnPlayTela{background:var(--branco);color:#141518;font-weight:700;min-width:88px}
.display #barra #btnQr{white-space:nowrap}
@media(max-width:580px){.display #barra{gap:6px;padding:10px 10px max(10px,env(safe-area-inset-bottom))}.display #barra #status{order:5;flex-basis:100%;max-width:none;text-align:center}.display #barra .espaco{display:none}.display #barra button{min-height:44px}.display #barra #btnQr{font-size:11px}.display #barra #btnCheia{display:none}.remote .lista{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.remote .lista li{min-height:190px;padding:14px}.remote .lista .acoes{gap:5px}.remote .lista .acoes button{font-size:11px;min-height:38px;padding:5px}.remote .lista .acoes .apagar{margin-left:0}}
@media(min-width:760px){.remote nav{padding-left:calc((100% - 560px)/2);padding-right:calc((100% - 560px)/2)}}
@media(max-width:700px){.home-shell{padding:24px}.home-grid{grid-template-columns:1fr;gap:40px;padding:44px 0}.home .preview{transform:none}.home-header .edition{font-size:9px}.home h1{font-size:48px}.home-footer{flex-direction:column;gap:6px}.display #barra{padding:12px;gap:8px}.display #barra button{padding:10px;font-size:11px}.display #status{max-width:40%;font-size:10px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}.home .opcao:hover{transform:none}}

.logo-frame{display:inline-block;position:relative;width:150px;aspect-ratio:1260/371;overflow:hidden;vertical-align:middle;flex-shrink:0}
.logo-frame img{position:absolute;width:119.04762%;max-width:none;height:auto;left:-9.60317%;top:-143.93531%}
.remote header .logo-frame{width:114px}.remote #entrar .logo-frame{width:170px}.display #pareamento .logo-frame{width:175px}