/* Capacita · treino da equipe pelo WhatsApp. App Stars Ventures. */
:root {
  --marca: #0E7C66; --marca-2: #13997E; --marca-e: #0A5E4D; --marca-f: #E3F4EF;
  --roxo: #4F25FF; --roxo-f: #EEE9FF;
  --sol: #FFC233; --sol-f: #FFF5D6; --sol-e: #8A5A00;
  --verm: #C8324B; --verm-f: #FDE8EC;
  --azul: #2563EB; --azul-f: #E6EEFE;
  --tinta: #14211D; --tinta-2: #3A4A45; --cinza: #5E6E69; --linha: #E2E8E5; --fundo: #F6F7F5; --card: #FFFFFF; --apagado: #EEF1EF;
  --bolha-eu: #D9FDD3; --bolha-ele: #FFFFFF; --papel: #EFEAE2;
  --raio: 16px; --raio-p: 10px;
  --sombra: 0 1px 2px rgba(20,33,29,.05), 0 8px 24px rgba(20,33,29,.06);
  --fonte: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --marca: #2BC4A0; --marca-2: #3CD6B1; --marca-e: #1E9D80; --marca-f: #133A32;
    --roxo: #9D86FF; --roxo-f: #26204A; --sol: #FFC94D; --sol-f: #3A3115; --sol-e: #FFD777;
    --verm: #FF7A90; --verm-f: #3D1C24; --azul: #7AA7FF; --azul-f: #1A2744;
    --tinta: #E8EEEC; --tinta-2: #C3CECA; --cinza: #95A39F; --linha: #26332F; --fundo: #0D1412; --card: #141E1B; --apagado: #1B2724;
    --bolha-eu: #134D37; --bolha-ele: #1E2B28; --papel: #0F1715;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);
    color-scheme: dark;
  }
}
* { box-sizing: border-box }
html, body { margin: 0; background: var(--fundo); color: var(--tinta); font: 15px/1.5 var(--fonte); -webkit-font-smoothing: antialiased }
a { color: var(--marca); text-decoration: none } a:hover { text-decoration: underline }
button, input, textarea, select { font: inherit; color: inherit }
button { cursor: pointer }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--marca) 55%, transparent); outline-offset: 2px; border-radius: 8px }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.015em }
h1 { font-size: 26px; font-weight: 750 } h2 { font-size: 19px; font-weight: 700 } h3 { font-size: 15px; font-weight: 700 }
p { margin: 0 }
.mudo { color: var(--cinza) } .peq { font-size: 13px } .num { font-variant-numeric: tabular-nums }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.pular { position: absolute; left: -999px; top: 8px; background: var(--card); padding: 8px 12px; border-radius: 8px; z-index: 50 } .pular:focus { left: 8px }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* botões */
.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: 12px; padding: 10px 16px; min-height: 44px; font-weight: 650; background: var(--marca); color: #fff; transition: transform .08s, filter .15s, background .15s; white-space: nowrap }
@media (prefers-color-scheme: dark) { .bt { color: #062019 } }
.bt:hover { filter: brightness(1.07) } .bt:active { transform: scale(.98) }
.bt.sec { background: var(--card); color: var(--tinta); border-color: var(--linha) }
.bt.sec:hover { background: var(--apagado); filter: none }
.bt.fant { background: transparent; color: var(--marca); border-color: transparent; padding: 8px 10px }
.bt.fant:hover { background: var(--marca-f); filter: none }
.bt.perigo { background: var(--card); color: var(--verm); border-color: color-mix(in srgb, var(--verm) 35%, transparent) }
.bt.peq { min-height: 36px; padding: 6px 12px; font-size: 13.5px; border-radius: 10px }
.bt[disabled] { opacity: .55; cursor: not-allowed; filter: none }
.bt .ic { width: 18px; height: 18px }

/* campos */
.campo { width: 100%; border: 1px solid var(--linha); border-radius: 12px; padding: 11px 13px; background: var(--card); min-height: 44px; outline: none; transition: border-color .15s, box-shadow .15s }
.campo:focus { border-color: var(--marca-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 18%, transparent) }
textarea.campo { resize: vertical; min-height: 110px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px }
label.rot { display: block; font-weight: 650; font-size: 13.5px; margin: 14px 0 6px }
.dica { font-size: 12.5px; color: var(--cinza); margin-top: 5px }
.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px }
.dias { display: flex; flex-wrap: wrap; gap: 6px }
.dias label { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; font-weight: 600; font-size: 13px; background: var(--card) }
.dias input { position: absolute; opacity: 0; pointer-events: none }
.dias input:checked + span { color: var(--marca) } .dias label:has(input:checked) { border-color: var(--marca); background: var(--marca-f) }
.dias label:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--marca) 55%, transparent) }

/* estrutura */
.casca { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh }
.lado { position: sticky; top: 0; height: 100vh; padding: 18px 14px; border-right: 1px solid var(--linha); background: var(--card); display: flex; flex-direction: column; gap: 4px }
.logo { display: flex; align-items: center; gap: 10px; padding: 4px 8px 16px; font-weight: 800; font-size: 18px; letter-spacing: -.02em }
.logo img { width: 30px; height: 30px }
.nav a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; color: var(--tinta-2); font-weight: 560; min-height: 42px; text-decoration: none }
.nav a:hover { background: var(--apagado) }
.nav a[aria-current="page"] { background: var(--marca-f); color: var(--marca); font-weight: 700 }
.nav .ic { width: 18px; height: 18px; flex: none }
.lado .rodape { margin-top: auto; font-size: 12.5px; color: var(--cinza); padding: 8px }
.lado .rodape button { margin-top: 6px }
main { padding: 26px 32px 64px; max-width: 1180px; width: 100%; min-width: 0 }
.topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap }
.topo .sub { margin-top: 4px; color: var(--cinza) }
.faixa-demo { display: flex; gap: 10px; align-items: center; background: var(--sol-f); color: var(--sol-e); border: 1px solid color-mix(in srgb, var(--sol) 45%, transparent); border-radius: 12px; padding: 10px 14px; margin-bottom: 18px; font-size: 13.5px; font-weight: 560 }
.faixa-demo .ic { flex: none; width: 18px; height: 18px }
.barra-mobile { display: none }

.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 18px; box-shadow: var(--sombra) }
.card + .card { margin-top: 16px }
.card h2 + p, .card h3 + p { margin-top: 4px }
.cab-card { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap }
.grade { display: grid; gap: 16px }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)) }
.g-painel { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) }

/* indicadores */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px }
.kpi { background: var(--card); border: 1px solid var(--linha); border-radius: 14px; padding: 14px 16px; box-shadow: var(--sombra); min-width: 0 }
.kpi .v { font-size: 30px; font-weight: 780; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; margin-top: 6px }
.kpi .r { font-size: 12.5px; color: var(--cinza); font-weight: 560 }
.kpi .d { font-size: 12px; color: var(--cinza); margin-top: 4px }
.kpi.alerta .v { color: var(--verm) }
.kpi.destaque { background: linear-gradient(135deg, var(--marca), var(--marca-e)); border-color: transparent; color: #fff }
.kpi.destaque .r, .kpi.destaque .d { color: rgba(255,255,255,.85) }
@media (prefers-color-scheme: dark) { .kpi.destaque { color: #062019 } .kpi.destaque .r, .kpi.destaque .d { color: rgba(6,32,25,.8) } }

/* gráfico */
.grafico { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding-top: 8px }
.grafico .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; height: 100% ; justify-content: flex-end; cursor: default }
.grafico .barra { width: 100%; max-width: 28px; border-radius: 6px 6px 3px 3px; background: var(--marca); height: 0; transition: height .6s cubic-bezier(.2,.8,.2,1); min-height: 3px; position: relative }
.grafico .barra.zero { background: var(--apagado) }
.grafico .col span { font-size: 10.5px; color: var(--cinza) }
.grafico .col:hover .barra, .grafico .col:focus .barra { background: var(--marca-2) }
.grafico-info { min-height: 20px; font-size: 13px; color: var(--tinta-2); margin-top: 8px }

/* listas */
.lista { list-style: none; margin: 0; padding: 0 }
.lista li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linha) }
.lista li:first-child { border-top: 0 }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; flex: none; background: var(--marca-f); color: var(--marca) }
.av.ouro { background: var(--sol-f); color: var(--sol-e) }
.cresce { flex: 1; min-width: 0 }
.cresce .n { font-weight: 640; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 650; background: var(--apagado); color: var(--tinta-2); white-space: nowrap }
.chip.ok { background: var(--marca-f); color: var(--marca) } .chip.aviso { background: var(--sol-f); color: var(--sol-e) } .chip.erro { background: var(--verm-f); color: var(--verm) } .chip.info { background: var(--azul-f); color: var(--azul) } .chip.ex { background: var(--roxo-f); color: var(--roxo) }

/* tabela */
.tabela-rola { position: relative; overflow-x: auto; margin: 0 -18px; padding: 0 18px }
table { width: 100%; border-collapse: collapse; font-size: 14px }
th { text-align: left; font-size: 12px; color: var(--cinza); font-weight: 650; padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap }
td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle }
tr:last-child td { border-bottom: 0 }
.progresso { height: 8px; background: var(--apagado); border-radius: 99px; overflow: hidden; min-width: 80px }
.progresso i { display: block; height: 100%; width: 0; background: var(--marca); border-radius: 99px; transition: width .7s cubic-bezier(.2,.8,.2,1) }
.acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap }

/* turmas */
.turmas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px }
.turma { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: inherit; transition: transform .15s, box-shadow .15s }
.turma:hover { transform: translateY(-2px); text-decoration: none }
.turma .meta { display: flex; gap: 8px; flex-wrap: wrap }

/* catálogo */
.setores { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px }
.setor.embreve { opacity: .78 }
.setor .tr { margin-top: 12px; padding: 12px; border-radius: 12px; background: var(--apagado) }
.setor ul { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--tinta-2) }

/* simulador de WhatsApp */
.simulador { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 20px; align-items: start }
.telefone { border-radius: 28px; border: 1px solid var(--linha); overflow: hidden; background: var(--papel); box-shadow: var(--sombra); display: flex; flex-direction: column; height: min(700px, calc(100vh - 240px)); min-height: 460px }
.telefone .cab { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--marca-e); color: #fff }
.telefone .cab .av { background: rgba(255,255,255,.2); color: #fff }
.telefone .cab small { display: block; opacity: .85; font-size: 12px }
.conversa { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth }
.bolha { max-width: 86%; padding: 7px 10px 18px; border-radius: 10px; font-size: 14px; line-height: 1.42; position: relative; white-space: pre-wrap; word-wrap: break-word; box-shadow: 0 1px 1px rgba(0,0,0,.06); animation: entra .22s ease-out }
.bolha.ele { align-self: flex-start; background: var(--bolha-ele); border-top-left-radius: 3px }
.bolha.eu { align-self: flex-end; background: var(--bolha-eu); border-top-right-radius: 3px }
.bolha time { position: absolute; right: 8px; bottom: 3px; font-size: 10.5px; color: var(--cinza) }
.bolha.bloq { opacity: .6; border: 1px dashed var(--verm) }
.bolha .estado { font-size: 11px; color: var(--verm); display: block; margin-top: 4px }
.digitando { align-self: flex-start; background: var(--bolha-ele); padding: 9px 12px; border-radius: 10px; display: none; gap: 4px }
.digitando.on { display: inline-flex }
.digitando i { width: 6px; height: 6px; border-radius: 50%; background: var(--cinza); animation: pula 1s infinite }
.digitando i:nth-child(2) { animation-delay: .15s } .digitando i:nth-child(3) { animation-delay: .3s }
@keyframes pula { 0%, 60%, 100% { transform: translateY(0); opacity: .5 } 30% { transform: translateY(-4px); opacity: 1 } }
@keyframes entra { from { transform: translateY(6px); opacity: 0 } }
.rapidas { display: flex; gap: 6px; padding: 8px 10px 0; overflow-x: auto; scrollbar-width: none }
.rapidas button { flex: none; border: 1px solid var(--linha); background: var(--card); border-radius: 999px; padding: 6px 12px; min-height: 36px; font-weight: 650; font-size: 13px }
.rapidas button:hover { border-color: var(--marca) }
.escrever { display: flex; gap: 8px; padding: 10px; }
.escrever input { flex: 1; border-radius: 999px; border: 1px solid var(--linha); padding: 10px 14px; background: var(--card); min-height: 44px }
.escrever button { border-radius: 50%; width: 44px; height: 44px; padding: 0; flex: none }
.tag-sim { font-size: 11.5px; background: rgba(255,255,255,.2); padding: 2px 8px; border-radius: 99px; margin-left: auto; white-space: nowrap }

/* canal */
.opcoes-canal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px }
.opcao { border: 2px solid var(--linha); border-radius: 14px; padding: 14px; background: var(--card); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 6px; min-height: 44px; transition: border-color .15s, background .15s }
.opcao:hover { border-color: color-mix(in srgb, var(--marca) 45%, var(--linha)) }
.opcao[aria-pressed="true"] { border-color: var(--marca); background: var(--marca-f) }
.opcao .t { font-weight: 700 }
.opcao p { font-size: 13px; color: var(--tinta-2) }
.qr { width: 240px; height: 240px; image-rendering: pixelated; border-radius: 12px; background: #fff; padding: 8px }
.caixa-info { border-radius: 12px; padding: 12px 14px; background: var(--azul-f); color: var(--tinta); font-size: 13.5px; margin-top: 12px }
.caixa-info.aviso { background: var(--sol-f) }
.caixa-info code, .codigo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; word-break: break-all; background: var(--apagado); padding: 2px 6px; border-radius: 6px }

/* cobrança */
.fatura { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px }
.total-fatura { font-size: 40px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums }
.faixas { display: grid; gap: 8px }
.faixa { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: end }

/* entrar */
.entrada { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.entrada .arte { background: radial-gradient(1200px 600px at 10% 10%, color-mix(in srgb, var(--marca) 35%, transparent), transparent), linear-gradient(160deg, var(--marca-e), #062A22); color: #fff; padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 22px; overflow: hidden }
.entrada .arte h1 { font-size: 42px; line-height: 1.08; letter-spacing: -.03em; max-width: 520px }
.entrada .arte p { font-size: 17px; opacity: .9; max-width: 480px }
.mini-chat { max-width: 360px; display: flex; flex-direction: column; gap: 8px }
.mini-chat .bolha { color: #14211D; background: #fff; animation: entra .4s ease-out both }
.mini-chat .bolha.eu { background: #D9FDD3 }
.mini-chat .bolha:nth-child(2) { animation-delay: .5s } .mini-chat .bolha:nth-child(3) { animation-delay: 1s } .mini-chat .bolha:nth-child(4) { animation-delay: 1.5s }
.entrada .form { padding: 56px; display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 520px; width: 100% }
.entrada .form h2:focus { outline: none }
.entrada .form .esq.t { height: 34px; width: 70% } .entrada .form .esq.l { height: 16px } .entrada .form .esq.curta { width: 55% } .entrada .form .esq.bt-esq { height: 44px; margin-top: 10px }
.lista-empresas { display: flex; flex-direction: column; gap: 10px }
.bt.empresa { justify-content: space-between; text-align: left; white-space: normal }
.separador { display: flex; align-items: center; gap: 10px; color: var(--cinza); font-size: 12.5px; margin: 6px 0 } .separador::before, .separador::after { content: ""; flex: 1; height: 1px; background: var(--linha) }
.marca-stars { display: flex; align-items: center; gap: 8px; font-size: 12.5px; opacity: .85 }

/* vazio, carregando, erro */
.vazio { text-align: center; padding: 34px 16px; color: var(--tinta-2) }
.vazio .ic-g { width: 44px; height: 44px; color: var(--marca); margin: 0 auto 10px }
.vazio h3 { margin-bottom: 6px }
.esq { background: linear-gradient(90deg, var(--apagado), color-mix(in srgb, var(--apagado) 40%, var(--card)), var(--apagado)); background-size: 200% 100%; animation: brilho 1.2s infinite linear; border-radius: 12px }
@keyframes brilho { to { background-position: -200% 0 } }
.esq.k { height: 92px } .esq.b { height: 260px; margin-top: 16px }
.erro-tela { border: 1px solid color-mix(in srgb, var(--verm) 30%, transparent); background: var(--verm-f); color: var(--verm); border-radius: 12px; padding: 14px }

/* modal */
dialog { border: 0; border-radius: 18px; padding: 0; width: min(560px, calc(100vw - 24px)); background: var(--card); color: var(--tinta); box-shadow: 0 30px 80px rgba(0,0,0,.3) }
dialog::backdrop { background: rgba(10,20,17,.45) }
dialog .corpo { padding: 22px; max-height: 80vh; overflow-y: auto }
dialog .pe { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--linha) }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px); background: var(--tinta); color: var(--fundo); padding: 11px 18px; border-radius: 12px; opacity: 0; transition: .25s; pointer-events: none; z-index: 60; max-width: calc(100vw - 32px); font-weight: 560; font-size: 14px }
#toast.on { opacity: 1; transform: translateX(-50%) translateY(0) }
#toast.erro { background: var(--verm); color: #fff }

.confete { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden }
.confete i { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; animation: cai 1.6s ease-in forwards }
@keyframes cai { to { transform: translateY(105vh) rotate(540deg); opacity: .4 } }

/* celular */
@media (max-width: 1080px) { .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)) } .g-painel { grid-template-columns: 1fr } }
@media (max-width: 860px) {
  .casca { grid-template-columns: 1fr }
  .lado { display: none }
  .barra-mobile { display: flex; position: sticky; top: 0; z-index: 20; align-items: center; gap: 10px; padding: 10px 14px; background: var(--card); border-bottom: 1px solid var(--linha) }
  .barra-mobile .logo { padding: 0; font-size: 17px }
  .barra-mobile .bt { margin-left: auto }
  .nav-mobile { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--card); border-top: 1px solid var(--linha); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)) }
  .nav-mobile a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; font-size: 11px; color: var(--cinza); min-height: 48px; justify-content: center; border-radius: 10px; text-decoration: none }
  .nav-mobile a[aria-current="page"] { color: var(--marca); font-weight: 700 }
  .nav-mobile .ic { width: 20px; height: 20px }
  main { padding: 18px 14px 96px }
  h1 { font-size: 22px }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .kpi .v { font-size: 26px }
  .g2, .g3, .fatura, .opcoes-canal { grid-template-columns: 1fr }
  .simulador { grid-template-columns: 1fr }
  .telefone { height: calc(100vh - 210px); border-radius: 20px }
  .entrada { grid-template-columns: 1fr }
  .entrada .arte { padding: 28px 20px; gap: 12px } .entrada .arte h1 { font-size: 30px } .entrada .mini-chat { display: none }
  .entrada .form { padding: 24px 20px 40px; max-width: none }
  .esconde-movel { display: none }
}
@media (min-width: 861px) { .nav-mobile { display: none } }
.mt { margin-top: 12px } .sem-borda { border: 0; padding: 0; margin: 14px 0 0 } .sem-borda legend { padding: 0; margin: 0 0 6px }
ol.peq { padding-left: 18px; margin: 8px 0 } ol.peq li { margin: 4px 0 }
svg.ic { width: 18px; height: 18px; flex: none } .cab-card > svg.ic { width: 22px; height: 22px; color: var(--sol-e) }
.casca > div { min-width: 0 }

/* 13/10: no iPhone, o "elástico" ao passar do fim da página arrastava a barra de baixo junto (relato do dono). Sem elástico, a barra fica presa no rodapé. */
html, body { overscroll-behavior: none }

/* 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; }
}