/* FITA WEB — identidade SPEC §6: fita gaffer neon sobre fundo quase preto. */
:root {
  --bg: #0E0E0E;
  --bg-2: #151514;
  --card: #1A1A19;
  --linha: #2A2A28;
  --ink: #F2F0EA;
  --ink-2: #B4B1A8;
  --ink-3: #7E7B74;
  --preto: #0E0E0E;

  --rosa: #FF2E88; --amarelo: #F4FF1F; --laranja: #FF7A1A; --verde: #3DFF5A;
  --azul: #2F6BFF; --roxo: #9D5CFF; --branco: #F2F0EA; --cinza: #9A9A9A;

  --ok: #3DFF5A; --alerta: #F4FF1F; --perigo: #FF4D3D;

  --f-display: "Bagel Fat One", "Arial Black", system-ui, sans-serif;
  --f-texto: "Archivo", "Inter Tight", system-ui, -apple-system, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --f-pinga: "Rubik Wet Paint", var(--f-display);

  --nav-h: 68px;
  --gutter: 16px;
  --ruido: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg); }
body {
  font-family: var(--f-texto); font-size: 16px; line-height: 1.45;
  background: var(--bg); color: var(--ink); min-height: 100dvh;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);
  overflow-x: hidden;
}
/* grão de papel/cartaz por cima de tudo */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 999;
  background-image: var(--ruido); opacity: .07; mix-blend-mode: overlay;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--amarelo); outline-offset: 2px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.escondido { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* =================== A FITA =================== */
.fita-sombra { filter: drop-shadow(0 2px 0 rgba(0,0,0,.55)) drop-shadow(0 10px 16px rgba(0,0,0,.5)); }
.fita {
  --c: var(--rosa);
  --rot: 0deg;
  position: relative; isolation: isolate;
  background: var(--c); color: var(--preto);
  transform: rotate(var(--rot));
  clip-path: var(--serra, none);
  padding: 10px 22px;
}
/* trama do tecido + grão */
.fita::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    var(--ruido),
    repeating-linear-gradient(0deg, rgba(0,0,0,.07) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 4px);
  mix-blend-mode: multiply; opacity: .3;
}
/* brilho de fita plástica e um vinco */
.fita::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(var(--vinco, 97deg), transparent 0 calc(var(--vx, 63%) - 1px), rgba(0,0,0,.16) calc(var(--vx, 63%) - 1px) var(--vx, 63%), rgba(255,255,255,.28) var(--vx, 63%) calc(var(--vx, 63%) + 1px), transparent calc(var(--vx, 63%) + 1px)),
    linear-gradient(176deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 28%, transparent 46%, rgba(0,0,0,.10) 100%);
}
.fita[data-cor="rosa"] { --c: var(--rosa); }
.fita[data-cor="amarelo"] { --c: var(--amarelo); }
.fita[data-cor="laranja"] { --c: var(--laranja); }
.fita[data-cor="verde"] { --c: var(--verde); }
.fita[data-cor="azul"] { --c: var(--azul); }
.fita[data-cor="roxo"] { --c: var(--roxo); }
.fita[data-cor="branco"] { --c: var(--branco); }
.fita[data-cor="cinza"] { --c: var(--cinza); }
/* azul e roxo são escuros demais pra texto preto: texto claro */
.fita[data-cor="azul"], .fita[data-cor="roxo"] { color: #fff; }

/* animação "colando": curta, uma vez */
@keyframes colar { from { transform: rotate(calc(var(--rot) - 4deg)) scale(1.06); opacity: .2; } to { transform: rotate(var(--rot)) scale(1); opacity: 1; } }
.cola { animation: colar 120ms ease-out both; }
@media (prefers-reduced-motion: reduce) { .cola { animation: none; } }

/* etiqueta de rolo: MIMESE × FGF0T */
.etiqueta {
  --c: var(--branco);
  font-family: var(--f-mono); font-weight: 800; font-size: 10.5px; letter-spacing: .14em;
  padding: 5px 14px; white-space: nowrap; color: var(--preto);
}

/* fita de perigo (alerta) */
.fita.perigo {
  --c: var(--amarelo);
  background: repeating-linear-gradient(-45deg, var(--amarelo) 0 14px, var(--preto) 14px 28px);
  color: var(--preto);
}
.fita.perigo .miolo { background: var(--amarelo); padding: 2px 10px; display: inline-block; }

/* =================== CABEÇALHO =================== */
.topo {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(env(safe-area-inset-top) + 14px) var(--gutter) 12px;
  max-width: 1440px; margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); min-width: 0; }
.logo .marca { position: relative; font-family: var(--f-display); font-size: 34px; line-height: .9; letter-spacing: -.01em; }
.logo .marca .faixa {
  position: absolute; left: -8px; right: -10px; top: 46%; height: 14px; z-index: -1;
  background: var(--rosa); transform: rotate(-4deg); opacity: .95;
}
.logo .ev { min-width: 0; }
.logo .ev b { display: block; font-weight: 800; font-size: 14px; font-stretch: 85%; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo .ev span { font-size: 12px; color: var(--ink-2); }
.topo-dir { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.quem {
  border: 1px solid var(--linha); background: var(--bg-2); border-radius: 999px;
  padding: 0 14px; min-height: 40px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px;
  max-width: 44vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.quem i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--ink-3)); flex-shrink: 0; }
.etiqueta-topo { position: absolute; right: var(--gutter); top: calc(env(safe-area-inset-top) + 60px); z-index: 2; pointer-events: none; }
.conexao { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); display: flex; align-items: center; gap: 6px; }
.conexao::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.conexao.off { color: var(--alerta); }
.conexao.off::before { background: var(--alerta); box-shadow: none; }

/* =================== NAVEGAÇÃO =================== */
.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: flex; justify-content: space-around;
  background: rgba(14,14,14,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--linha);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.nav button {
  flex: 1; max-width: 120px; min-height: 52px; background: none; border: 0; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--ink-3); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; position: relative;
}
.nav svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nav button[aria-current="page"] { color: var(--ink); }
.nav button[aria-current="page"]::before {
  content: ""; position: absolute; top: -7px; left: 22%; right: 22%; height: 5px; background: var(--amarelo); transform: rotate(-2deg);
}
.nav .badge { position: absolute; top: 4px; right: calc(50% - 22px); min-width: 18px; height: 18px; border-radius: 9px; background: var(--perigo); color: #fff; font-size: 10.5px; display: grid; place-items: center; padding: 0 5px; font-family: var(--f-mono); }

/* =================== ESTRUTURA =================== */
main { max-width: 1440px; margin: 0 auto; padding: 4px var(--gutter) 0; }
.tela { display: none; }
.tela.ativa { display: block; }
.titulo-tela { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 18px 0 14px; flex-wrap: wrap; }
.titulo-tela h1 { font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 8vw, 46px); line-height: .95; letter-spacing: -.01em; }
.titulo-tela .sub { color: var(--ink-2); font-size: 13px; }
h2.secao {
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2);
  margin: 30px 0 12px; display: flex; align-items: center; gap: 10px;
}
h2.secao::after { content: ""; flex: 1; height: 1px; background: var(--linha); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linha); background: var(--bg-2);
  font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.chip i { width: 9px; height: 9px; border-radius: 2px; background: var(--c); transform: rotate(-8deg); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--preto); border-color: var(--ink); }
.chip .mono { font-weight: 600; opacity: .7; font-size: 12px; }

.vazio { border: 1.5px dashed var(--linha); border-radius: 14px; padding: 22px 18px; color: var(--ink-2); text-align: center; font-size: 14px; }

/* botões */
.btn {
  min-height: 48px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--linha);
  background: var(--bg-2); font-weight: 800; font-size: 14px; letter-spacing: .02em;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(.98); }
.btn.claro { background: var(--ink); color: var(--preto); border-color: var(--ink); }
.btn.perigo { border-color: rgba(255,77,61,.5); color: #FF8A7E; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-fita { border: 0; background: none; padding: 0; width: 100%; text-align: left; }
.btn-fita .fita { padding: 18px 26px; }

/* =================== PAINEL =================== */
.resumo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 8px; }
.num { background: var(--bg-2); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 14px; }
.num b { font-family: var(--f-mono); font-size: 28px; font-weight: 800; display: block; line-height: 1.1; }
.num span { display: block; line-height: 1.3; margin-top: 4px; font-size: 11.5px; color: var(--ink-2); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.num.destaque { border-color: rgba(61,255,90,.45); }
.num.destaque b { color: var(--verde); }
.num.ruim b { color: var(--alerta); }

.grade-palcos { display: grid; grid-template-columns: 1fr; gap: 26px 22px; padding: 10px 2px 14px; }
.palco { position: relative; }
.palco .fita { padding: 16px 24px 16px 26px; min-height: 132px; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: center; }
.palco .sigla { font-family: var(--f-display); font-size: 54px; line-height: .85; grid-row: span 2; letter-spacing: -.02em; }
.palco .nome { font-weight: 900; font-stretch: 80%; font-size: 17px; text-transform: uppercase; letter-spacing: .02em; line-height: 1.1; }
.palco .vm { font-size: 13.5px; font-weight: 600; opacity: .85; }
.palco .dados { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-family: var(--f-mono); font-size: 12.5px; font-weight: 600; }
.palco .dados b { font-weight: 800; }
.palco .st { grid-column: 1 / -1; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 800; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.palco .st i { width: 10px; height: 10px; border: 2px solid currentColor; border-radius: 50%; }
.palco .st.verificado i { background: currentColor; }
.palco .alerta-wrap { position: absolute; left: -6px; right: 12%; bottom: -18px; z-index: 3; }
.palco .fita.alerta-fita {
  display: block; min-height: 0; padding: 7px 14px; line-height: 1.1;
  font-family: var(--f-pinga); font-size: 17px; letter-spacing: .02em; text-transform: uppercase; text-align: center;
}
.palco.alertado .fita:not(.alerta-fita) { padding-bottom: 38px; }

.linha-tempo { background: var(--bg-2); border: 1px solid var(--linha); border-radius: 14px; padding: 12px 12px 8px; }
.lt-linha { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 8px; height: 30px; }
.lt-linha .s { font-family: var(--f-mono); font-size: 11.5px; font-weight: 800; color: var(--ink-2); }
.lt-trilho { position: relative; height: 100%; border-bottom: 1px dashed var(--linha); }
.lt-prog { position: absolute; top: 9px; height: 12px; background: rgba(242,240,234,.08); border-radius: 2px; }
.lt-prog.prio { background: rgba(242,240,234,.18); }
.lt-cartao { position: absolute; top: 4px; width: 14px; height: 22px; margin-left: -7px; background: var(--c); border: 0; transform: rotate(-6deg); clip-path: polygon(0 8%, 100% 0, 92% 100%, 6% 94%); }
.lt-cartao.sem-entrega { background: transparent; outline: 2px solid var(--c); }
.lt-agora { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--perigo); }
.lt-horas { display: grid; grid-template-columns: 46px 1fr; gap: 8px; }
.lt-horas div { position: relative; height: 18px; }
.lt-horas div span { position: absolute; transform: translateX(-50%); font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-3); top: 4px; }

.pode-devolver .fita { padding: 14px 22px; }

/* =================== CARTÕES =================== */
.filtros { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.filtros .rolar { overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
.filtros .rolar::-webkit-scrollbar { display: none; }
.filtros .rolar .chips { flex-wrap: nowrap; }
.lista-cartoes { display: flex; flex-direction: column; gap: 10px; }
.cartao {
  position: relative; background: var(--card); border: 1px solid var(--linha); border-radius: 14px; overflow: hidden;
  display: grid; grid-template-columns: 58px 1fr; min-height: 84px;
}
.cartao > .lado { position: relative; display: grid; place-items: center; padding: 0; transform: none; clip-path: var(--serra-v); }
.cartao > .lado b { font-family: var(--f-display); font-size: 18px; writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .02em; }
.cartao .corpo { position: relative; padding: 12px 14px; min-width: 0; text-align: left; background: none; border: 0; width: 100%; }
.cartao .l1 { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cartao .l1 strong { font-size: 17px; font-weight: 900; font-stretch: 90%; }
.cartao .l1 .hora { font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); white-space: nowrap; }
.cartao .l2 { font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); margin-top: 6px; display: flex; flex-wrap: wrap; gap: 2px 12px; }
.pilula {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px 4px 8px; border-radius: 6px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; border: 1px solid currentColor;
}
.pilula::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.s-com_videomaker { color: var(--ink-2); }
.s-na_house { color: #8FB4FF; }
.s-copiando { color: var(--laranja); }
.s-verificado { color: var(--verde); }
.s-com_editor { color: #C7A6FF; }
.s-devolvido { color: var(--ink-3); }
.s-erro, .s-incompleto { color: var(--perigo); }
.cartao .detalhe { grid-column: 1 / -1; border-top: 1px solid var(--linha); padding: 14px; display: none; }
.cartao.aberto .detalhe { display: block; }
.detalhe dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.detalhe dt { color: var(--ink-3); font-weight: 700; }
.detalhe dd { font-family: var(--f-mono); word-break: break-all; }
.detalhe .hist { margin-top: 12px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); display: flex; flex-direction: column; gap: 4px; }
.detalhe .acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.detalhe select { min-height: 48px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--linha); padding: 0 12px; }
.atravessa { display: block; position: absolute; left: -70px; right: -10px; top: 50%; --rot: -3deg; z-index: 2; pointer-events: none; text-align: center; font-family: var(--f-display); font-size: 20px; padding: 6px; opacity: .97; }
.cartao.verificado { border-color: rgba(61,255,90,.5); }
.cartao.verificado .corpo { padding-bottom: 62px; }
.cartao.verificado .atravessa { top: auto; bottom: 6px; }

/* =================== MEU PALCO =================== */
.meu-topo { padding: 6px 2px 4px; }
.meu-topo .fita { padding: 18px 26px; }
.meu-topo .sigla { font-family: var(--f-display); font-size: 64px; line-height: .85; }
.meu-topo .nome { font-weight: 900; font-stretch: 80%; font-size: 18px; text-transform: uppercase; }
.meu-topo .pref { font-family: var(--f-mono); font-weight: 800; font-size: 13px; margin-top: 6px; }
.entreguei { margin: 26px 0 6px; }
.entreguei .fita { font-family: var(--f-display); font-size: 30px; line-height: 1; padding: 22px 26px; text-align: center; }
.entreguei .fita small { display: block; font-family: var(--f-mono); font-size: 12.5px; font-weight: 800; margin-top: 8px; letter-spacing: .04em; }
.agora-card { background: var(--card); border: 1px solid var(--linha); border-radius: 16px; padding: 16px; position: relative; overflow: hidden; }
.agora-card .q { font-family: var(--f-mono); font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--amarelo); text-transform: uppercase; }
.agora-card h3 { font-size: 22px; font-weight: 900; font-stretch: 85%; line-height: 1.15; margin-top: 6px; }
.agora-card p { color: var(--ink-2); margin-top: 4px; font-size: 14px; }
.agora-card .h { font-family: var(--f-mono); font-size: 26px; font-weight: 800; margin-top: 10px; }

.checklist { display: flex; flex-direction: column; gap: 8px; }
.ck {
  display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 12px 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--linha); text-align: left; width: 100%;
}
.ck .caixa { width: 28px; height: 28px; border-radius: 6px; border: 2px solid var(--ink-3); flex-shrink: 0; display: grid; place-items: center; transform: rotate(-3deg); }
.ck .caixa svg { width: 18px; height: 18px; stroke: var(--preto); stroke-width: 3.5; fill: none; opacity: 0; }
.ck[aria-checked="true"] .caixa { background: var(--verde); border-color: var(--verde); }
.ck[aria-checked="true"] .caixa svg { opacity: 1; }
.ck[aria-checked="true"] .t { color: var(--ink-2); }
.ck .t { font-size: 15px; font-weight: 600; }
.ck .t b { font-family: var(--f-mono); background: var(--ink); color: var(--preto); padding: 1px 6px; border-radius: 4px; }

/* =================== PROGRAMAÇÃO =================== */
.prog { display: flex; flex-direction: column; gap: 2px; }
.prog-item { display: grid; grid-template-columns: 62px 1fr; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--linha); position: relative; }
.prog-item .hh { font-family: var(--f-mono); font-weight: 800; font-size: 15px; line-height: 1.2; }
.prog-item .hh small { display: block; color: var(--ink-3); font-weight: 600; font-size: 12px; }
.prog-item h4 { font-size: 15.5px; font-weight: 800; line-height: 1.3; }
.prog-item .pp { color: var(--ink-2); font-size: 13.5px; margin-top: 2px; }
.tag-palco { display: inline-block; margin-top: 7px; font-size: 11px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; padding: 3px 10px; --rot: -1.5deg; }
.prio-tag { display: inline-block; font-family: var(--f-mono); font-size: 10.5px; font-weight: 800; color: var(--preto); background: var(--amarelo); padding: 2px 6px; margin-right: 6px; vertical-align: 2px; }
.prog-item.passou { opacity: .45; }
.prog-item.agora { background: linear-gradient(90deg, rgba(244,255,31,.08), transparent 70%); }
.prog-item.agora::before { content: "AGORA"; position: absolute; right: 4px; top: 12px; font-family: var(--f-mono); font-size: 10.5px; font-weight: 800; color: var(--amarelo); }
.prog-colunas { display: grid; gap: 22px; }

/* =================== MAPA =================== */
.mapa { position: relative; border-radius: 14px; overflow: hidden; background: var(--bg-2); border: 1px solid var(--linha); }
.mapa img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.pino { position: absolute; transform: translate(-50%, -100%); border: 0; background: none; padding: 0; z-index: 2; }
.pino .fita { padding: 6px 12px; font-family: var(--f-display); font-size: 15px; --rot: -4deg; }
.pino::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 10px; background: var(--ink); transform: translateX(-50%); }
.pino.meu .fita { font-size: 20px; padding: 8px 16px; }
.sem-planta { aspect-ratio: 4 / 3; display: grid; place-items: center; padding: 20px; border: 1.5px dashed var(--linha); border-radius: 14px; position: relative; overflow: hidden; }
.sem-planta .fita { font-family: var(--f-display); font-size: clamp(20px, 5vw, 30px); --rot: -4deg; padding: 12px 26px; text-align: center; }
.sem-planta p { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--ink-3); font-size: 13px; }
.mapa-info { margin-top: 12px; }

/* =================== AJUSTES =================== */
.form { display: flex; flex-direction: column; gap: 14px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo > span { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.campo small { color: var(--ink-3); font-size: 12.5px; }
input[type=text], input[type=number], input[type=password], select, textarea {
  width: 100%; min-height: 48px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--linha); padding: 10px 14px; font-size: 16px;
}
textarea { min-height: 160px; font-family: var(--f-mono); font-size: 13px; line-height: 1.5; resize: vertical; }
.tabela-ed { display: flex; flex-direction: column; gap: 10px; }
.linha-ed { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; background: var(--card); border: 1px solid var(--linha); border-radius: 14px; padding: 12px; position: relative; }
.linha-ed .campo > span { font-size: 10.5px; }
.linha-ed input, .linha-ed select { min-height: 44px; font-size: 15px; padding: 8px 10px; }
.linha-ed .tirar { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border-radius: 10px; border: 0; background: none; color: var(--ink-3); font-size: 22px; }
.linha-ed .cor-amostra { height: 8px; grid-column: 1 / -1; background: var(--c); transform: rotate(-.6deg); }
.barra-salvar {
  position: sticky; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 10px); z-index: 20; margin-top: 22px;
  display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(26,26,25,.96); border: 1px solid var(--linha);
}
.barra-salvar .msg { flex: 1; font-size: 13px; color: var(--ink-2); }
.msg.erro { color: #FF8A7E; }
.msg.ok { color: var(--verde); }
.pre-prog { margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.pre-prog ul { margin: 6px 0 0 18px; }
.mapa-ed .mapa { cursor: crosshair; }

/* =================== ENTRADA / FOLHAS =================== */
.entrada { position: fixed; inset: 0; z-index: 200; background: var(--bg); overflow-y: auto; padding: calc(env(safe-area-inset-top) + 28px) var(--gutter) 40px; }
.entrada::after { content: ""; position: fixed; inset: 0; background-image: var(--ruido); opacity: .08; pointer-events: none; mix-blend-mode: overlay; }
.entrada-in { max-width: 440px; margin: 0 auto; position: relative; }
.entrada .grande { font-family: var(--f-display); font-size: clamp(88px, 30vw, 140px); line-height: .8; letter-spacing: -.03em; position: relative; display: inline-block; margin: 18px 0 6px; }
.entrada .grande .f1 { position: absolute; left: -24px; right: -30px; top: 38%; height: 30px; z-index: -1; transform: rotate(-5deg); }
.entrada .grande .f2 { position: absolute; left: 30%; right: -46px; top: 62%; height: 18px; z-index: -1; transform: rotate(7deg); }
.entrada .lead { color: var(--ink-2); margin: 18px 0 22px; font-size: 15px; max-width: 34ch; }
.perfis { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 8px; }
.perfis .btn-fita .fita { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 24px; }
.perfis .btn-fita b { font-family: var(--f-display); font-weight: 400; font-size: 26px; line-height: 1; }
.perfis .btn-fita span { font-size: 12.5px; font-weight: 700; text-align: right; }
.perfis .btn-fita[aria-pressed="false"] .fita { filter: saturate(.25) brightness(.55); }
.erro-login { color: #FF8A7E; font-weight: 700; font-size: 14px; min-height: 20px; margin-top: 10px; }
.entrada .etq { position: absolute; right: 0; top: 6px; }

.folha-fundo { position: fixed; inset: 0; z-index: 150; background: rgba(0,0,0,.62); display: flex; align-items: flex-end; justify-content: center; }
.folha { width: 100%; max-width: 520px; background: var(--bg-2); border-top: 1px solid var(--linha); border-radius: 20px 20px 0 0; padding: 22px var(--gutter) calc(22px + env(safe-area-inset-bottom)); }
.folha h3 { font-family: var(--f-display); font-weight: 400; font-size: 28px; line-height: 1; }
.folha p { color: var(--ink-2); margin: 10px 0 18px; }
.folha .acoes { display: flex; gap: 10px; }
.folha .acoes .btn { flex: 1; }

.aviso-off { background: rgba(244,255,31,.1); border: 1px solid rgba(244,255,31,.35); color: var(--alerta); border-radius: 12px; padding: 10px 14px; font-size: 13px; margin: 6px 0 4px; }
.toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 18px); transform: translateX(-50%); z-index: 300; background: var(--ink); color: var(--preto); font-weight: 800; padding: 12px 18px; border-radius: 12px; font-size: 14px; max-width: calc(100% - 32px); box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* =================== TELAS MAIORES =================== */
@media (min-width: 640px) {
  .resumo { grid-template-columns: repeat(4, 1fr); }
  .grade-palcos { grid-template-columns: repeat(2, 1fr); }
  .linha-ed.vm { grid-template-columns: repeat(3, 1fr); }
  .linha-ed.pl { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  body { padding-bottom: 40px; }
  .nav { position: sticky; top: 0; bottom: auto; justify-content: flex-start; gap: 4px; padding: 6px var(--gutter); border-top: 0; border-bottom: 1px solid var(--linha); }
  .nav button { flex: 0 0 auto; max-width: none; flex-direction: row; gap: 8px; padding: 0 16px; font-size: 12.5px; }
  .nav button[aria-current="page"]::before { top: auto; bottom: -7px; }
  .barra-salvar { bottom: 16px; }
  .toast { bottom: 28px; }
  .grade-palcos { grid-template-columns: repeat(3, 1fr); gap: 34px 28px; }
  .prog-colunas.multi { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .meu-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 0 36px; align-items: start; }
  .lista-cartoes.pode-devolver { display: grid; grid-template-columns: repeat(3, 1fr); }
  .nav .badge { position: static; margin-left: 2px; }
  .cartoes-grid .lista-cartoes { display: grid; grid-template-columns: repeat(2, 1fr); align-items: start; }
  .etiqueta-topo { top: 22px; right: 240px; }
}
/* TV da house: ?tv=1 */
body.tv .nav, body.tv .quem { display: none; }
body.tv { padding-bottom: 20px; }
body.tv main, body.tv .topo { max-width: none; }
@media (min-width: 1600px) {
  body.tv .palco .sigla { font-size: 84px; }
  body.tv .palco .nome { font-size: 24px; }
  body.tv .palco .dados { font-size: 17px; }
  body.tv .palco .fita:not(.alerta-fita) { min-height: 190px; }
  body.tv .palco .fita.alerta-fita { font-size: 24px; }
  body.tv .num b { font-size: 44px; }
}
.prog-item.agora h4 { padding-right: 52px; }