[hidden] { display: none !important; }
:root {
  --fundo: #111015; --cartao: #1b1a21; --linha: #2c2a34; --texto: #f1eee8; --mut: #a19ca8; --pri: #ff7a2f; --pri-t: #1a0d04;
  --ok: #4ccb8a; --erro: #ff6b6b; --alerta: #ffcf5a; --raio: 14px;
  color-scheme: dark;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0 0 .6rem; }
h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); letter-spacing: -.02em; }
h2 { font-size: 1.15rem; }
h3 { font-size: .95rem; margin-top: 1rem; color: var(--mut); font-weight: 600; }
p { margin: 0 0 .6rem; text-wrap: pretty; }
.mut { color: var(--mut); }
.peq { font-size: .85rem; }
.tnum { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--pri); outline-offset: 2px; }
#app { max-width: 1180px; margin: 0 auto; padding: 1rem 1.25rem 4rem; outline: none; }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1.25rem; border-bottom: 1px solid var(--linha); position: sticky; top: 0; background: color-mix(in srgb, var(--fundo) 92%, transparent); backdrop-filter: blur(8px); z-index: 5; }
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.marca span { display: flex; flex-direction: column; }
.marca small { color: var(--mut); font-size: .75rem; }
.conta-topo { display: flex; gap: .6rem 1rem; font-size: .8rem; flex-wrap: wrap; justify-content: flex-end; align-items: center; min-width: 0; }
.conta-topo .emp { font-weight: 600; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta-topo .btn { min-height: 36px; padding: .35rem .7rem; font-size: .8rem; }

.hero { padding: 1.5rem 0 1rem; max-width: 760px; }
.cartao, .passo { background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: 1.25rem; margin-bottom: 1rem; }
.estreito { max-width: 440px; margin: 3rem auto; }
.campo { display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; color: var(--mut); flex: 1; min-width: 0; }
.campo.check { flex-direction: row; align-items: center; gap: .5rem; color: var(--texto); flex: 0 0 auto; }
input, textarea, select { font: inherit; color: var(--texto); background: #121117; border: 1px solid var(--linha); border-radius: 10px; padding: .6rem .7rem; width: 100%; min-height: 44px; }
textarea { resize: vertical; line-height: 1.45; }
input[type=range] { padding: 0; min-height: 32px; accent-color: var(--pri); }
input[type=checkbox] { width: 20px; min-height: 20px; accent-color: var(--pri); }
.linha { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; margin: .5rem 0; }
.btn { font: inherit; font-weight: 600; border-radius: 10px; padding: .6rem 1rem; min-height: 44px; border: 1px solid var(--linha); background: #24222b; color: var(--texto); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; transition: background .15s, transform .1s; }
.btn:hover:not(:disabled) { background: #2d2b35; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.pri { background: var(--pri); color: var(--pri-t); border-color: var(--pri); }
.btn.pri:hover:not(:disabled) { background: #ff8c4a; }
.btn.ok { background: var(--ok); color: #04170d; border-color: var(--ok); }
.btn.grande { padding: .75rem 1.4rem; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn[aria-busy=true] { cursor: progress; }
.btn.fant { background: transparent; }
.btn.fant:hover:not(:disabled) { background: #24222b; }
.btn.perigo { color: var(--erro); border-color: #5d2a2a; }
.porta { text-align: center; display: grid; justify-items: center; gap: .3rem; }
.porta .linha { justify-content: center; }
.empresas { display: grid; gap: .5rem; width: 100%; margin-top: .4rem; }
.vazio-lista { grid-column: 1 / -1; border: 1px dashed var(--linha); border-radius: var(--raio); padding: 1.5rem; text-align: center; }
.vazio-lista h3 { color: var(--texto); margin-top: 0; }
.aviso-cap { background: #1d2230; border: 1px solid #2f3a55; color: #cfe0ff; border-radius: 10px; padding: .6rem .8rem; margin: .6rem 0; }
.esqueleto { background: linear-gradient(90deg, #1f1e25 0%, #2a2831 50%, #1f1e25 100%); background-size: 200% 100%; animation: brilho 1.4s ease-in-out infinite; border-radius: 10px; min-height: 44px; }
.mini.esqueleto { min-height: 170px; border: 0; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.link { background: none; border: 0; color: var(--pri); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; min-height: 0; }
.link.perigo { color: var(--erro); }
.selo { display: inline-block; font-size: .8rem; background: #2b2232; border: 1px solid #47355a; color: #e3cdfa; padding: .2rem .6rem; border-radius: 99px; }

.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .8rem; }
.mini { display: flex; flex-direction: column; gap: .35rem; background: var(--cartao); border: 1px solid var(--linha); border-radius: var(--raio); padding: .6rem; text-decoration: none; font-size: .85rem; }
.mini:hover { border-color: #47434f; }
.mini img, .vazio-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: #26242c; }
.mini span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.migalha { font-size: .85rem; color: var(--mut); margin: .2rem 0 1rem; }
.migalha a { color: var(--mut); }
.passo h2 { display: flex; align-items: center; gap: .6rem; }
.num { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #2a2832; font-size: .85rem; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.passo.feito .num { background: var(--ok); color: #04170d; }
.passo.inativo { opacity: .55; }
.desc { white-space: pre-wrap; }
.duas { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1.25rem; align-items: start; }
.vid { width: 100%; aspect-ratio: 16/9; background: #0b0a0e; border-radius: 10px; display: block; object-fit: contain; }
.vid.vazio { display: grid; place-items: center; color: var(--mut); font-size: .9rem; border: 1px dashed var(--linha); text-align: center; padding: 1rem; }
.vid.velho { opacity: .6; }
.objs { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; max-height: 260px; overflow: auto; }
.objs li { display: grid; grid-template-columns: 16px 1fr; column-gap: .55rem; align-items: center; font-size: .9rem; }
.objs i { width: 16px; height: 16px; border-radius: 4px; grid-row: span 2; border: 1px solid #0006; }
.objs small { grid-column: 2; font-size: .78rem; }
.tempo { padding-left: 1.1rem; margin: 0; font-size: .88rem; display: grid; gap: .25rem; }
.nota { margin-top: 1rem; }
.alerta { background: #2a2414; border: 1px solid #5c4b17; color: #f6e2a8; border-radius: 10px; padding: .7rem .9rem; margin-top: .6rem; font-size: .9rem; }
.alerta ul { margin: .3rem 0 0; padding-left: 1.1rem; }
.ok { color: var(--ok); }
.erro { background: #2c1717; border: 1px solid #5d2a2a; color: #ffc9c9; border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1rem; }
p.erro { margin: .5rem 0; }
.status { display: flex; align-items: center; gap: .6rem; background: #1d2230; border: 1px solid #2f3a55; color: #cfe0ff; border-radius: 10px; padding: .7rem .9rem; margin-bottom: 1rem; position: sticky; top: 64px; z-index: 4; }
.giro { width: 16px; height: 16px; border: 2px solid #cfe0ff55; border-top-color: #cfe0ff; border-radius: 50%; animation: gira 0.9s linear infinite; flex: 0 0 auto; }
@keyframes gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .giro, .esqueleto { animation: none; } .btn { transition: none; } }

.presets { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.chip { font: inherit; font-size: .9rem; min-height: 40px; padding: .4rem .9rem; border-radius: 99px; border: 1px solid var(--linha); background: #1f1e25; color: var(--texto); cursor: pointer; }
.chip[aria-pressed=true] { background: var(--pri); color: var(--pri-t); border-color: var(--pri); font-weight: 600; }
.chip.cel { border-style: dashed; }
.chip:disabled { opacity: .5; cursor: not-allowed; }
.campo output { color: var(--texto); font-variant-numeric: tabular-nums; }
.celbox { display: grid; grid-template-columns: 180px 1fr; gap: 1rem; background: #16151b; border: 1px solid var(--linha); border-radius: 12px; padding: 1rem; margin-top: .6rem; }
.qr { background: #fff; border-radius: 10px; padding: 6px; align-self: start; }
.qr svg { width: 100%; height: auto; display: block; }
.celbox ol { padding-left: 1.1rem; margin: 0 0 .5rem; font-size: .9rem; }

.refs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .8rem; }
.ref { margin: 0; background: #16151b; border: 1px solid var(--linha); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.ref img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #0d0c10; }
.ref figcaption { padding: .5rem; display: grid; gap: .4rem; }
.ref figcaption input, .ref figcaption select { min-height: 38px; padding: .4rem .5rem; font-size: .85rem; }
.ref.novo { border-style: dashed; align-items: center; justify-content: center; min-height: 190px; cursor: pointer; gap: .3rem; text-align: center; padding: 1rem; }
.ref.novo:hover { border-color: var(--pri); }

.custo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; background: #1f1a14; border: 1px solid #4a3622; border-radius: 12px; padding: 1rem 1.1rem; margin-top: .6rem; }
.custo > div { display: flex; flex-direction: column; }
.custo b { font-size: 1.6rem; letter-spacing: -.01em; }
.custo.alto { background: #2c1717; border-color: #5d2a2a; }
.toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: #26242c; border: 1px solid var(--linha); padding: .7rem 1rem; border-radius: 10px; z-index: 20; max-width: min(92vw, 520px); box-shadow: 0 8px 30px #0008; }
.toast.erro { background: #3a1c1c; border-color: #6a2b2b; margin: 0; }
.toast.ok { background: #143022; border-color: #23573c; }

@media (max-width: 820px) {
  .duas { grid-template-columns: 1fr; }
  .celbox { grid-template-columns: 1fr; }
  .qr { max-width: 200px; }
  .status { top: 58px; }
}
@media (max-width: 480px) {
  #app { padding: .75rem .8rem 3rem; }
  .cartao, .passo { padding: 1rem; }
  .marca small { display: none; }
  .conta-topo { gap: .4rem; font-size: .72rem; }
  .conta-topo .emp { max-width: 14ch; }
  .linha > .btn { flex: 1 1 100%; }
}

/* celular */
body.cel { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.cel-topo { display: flex; align-items: center; gap: .5rem; padding: .5rem .8rem; font-size: .9rem; }
.cel-topo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cel-palco { flex: 1; display: grid; place-items: center; background: #000; min-height: 0; touch-action: none; }
.cel-palco canvas { display: block; }
body.gravando .cel-palco { box-shadow: inset 0 0 0 3px var(--erro); }
.cel-painel { padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom)); background: var(--cartao); border-top: 1px solid var(--linha); }
.cel-progresso { height: 4px; background: #2a2832; border-radius: 4px; overflow: hidden; margin-bottom: .5rem; }
.cel-progresso i { display: block; height: 100%; width: 0; background: var(--pri); }
.cel-linha { display: flex; gap: .5rem; align-items: center; justify-content: space-between; margin: .35rem 0; }
.cel-zoom { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--mut); }
.cel-zoom input { flex: 1; }
.seg { display: inline-flex; border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.seg button { font: inherit; font-size: .85rem; background: #1f1e25; color: var(--texto); border: 0; padding: .5rem .8rem; min-height: 40px; cursor: pointer; }
.seg button[aria-pressed=true] { background: var(--pri); color: var(--pri-t); font-weight: 600; }
.aviso { font-size: .85rem; margin: .2rem 0; }
.aviso.erro { padding: .4rem .6rem; margin: .2rem 0; }
.aviso.ok { color: var(--ok); }
.dica { font-size: .75rem; margin: .3rem 0 0; }

/* Auditoria BaitaOS 13/10/2026 (celular): sem "elástico" no iPhone e campo com 16 px no toque (o iOS não dá zoom ao digitar). */
html, body { overscroll-behavior: none; }
@media (pointer: coarse), (max-width: 767px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select { font-size: max(16px, 1em) !important; }
}