@font-face { font-family: Geist; src: url(Geist-Regular.ttf); font-weight: 400; }
@font-face { font-family: Geist; src: url(Geist-Medium.ttf); font-weight: 500; }
@font-face { font-family: Geist; src: url(Geist-SemiBold.ttf); font-weight: 600; }
@font-face { font-family: 'Geist Mono'; src: url(GeistMono-Regular.ttf); font-weight: 400; }
:root {
  --ink: #0d1626; --muted: #5a6473; --line: rgba(13,22,38,.10); --bg: #f4f6f9; --card: #fff;
  --accent: #0099ff; --ok: #06a06a; --warn: #c27c00; --no: #e5484d; --em: #b4141a;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: Geist, system-ui, sans-serif;
  font-size: 15px; -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
.mono { font-family: 'Geist Mono', ui-monospace, monospace; }
.muted { color: var(--muted); }
button, .btn { font: inherit; font-weight: 500; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 10px; padding: 10px 16px; cursor: pointer; text-decoration: none; display: inline-flex;
  align-items: center; justify-content: center; gap: 8px; }
button.pri, .btn.pri { background: var(--accent); border-color: var(--accent); color: #fff; }
button.ok { background: var(--ok); border-color: var(--ok); color: #fff; }
button.em, .btn.em { background: var(--em); border-color: var(--em); color: #fff; }
button:disabled { opacity: .5; cursor: default; }
input, select, textarea { font: inherit; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  background: #fff; color: var(--ink); width: 100%; }
textarea { min-height: 90px; resize: vertical; }
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 6px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.k { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 3px 10px;
  border-radius: 999px; background: var(--bg); white-space: nowrap; }
.pill i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.g1 { color: var(--muted); } .g2 { color: var(--warn); } .g3 { color: var(--no); } .g4 { color: var(--em); }
.st-aberta { color: var(--no); } .st-recebida { color: var(--warn); } .st-encerrada { color: var(--ok); }
.on { color: var(--ok); } .off { color: var(--no); }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 500; font-size: 12px; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.clic { cursor: pointer; } tr.clic:hover td { background: rgba(0,153,255,.04); }
.erro { color: var(--no); font-size: 14px; margin-top: 10px; min-height: 1em; }
/* alvos de toque de pelo menos 44 px (celular) */
button, .btn, select, input:not([type=checkbox]):not([type=radio]) { min-height: 44px; }
input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--accent); }
.ok-msg { color: var(--ok); font-size: 14px; margin-top: 10px; }
.aviso { color: var(--warn); font-size: 14px; }
/* telas estreitas (entrar, senha, 2FA) */
.estreito { max-width: 400px; margin: 10vh auto 40px; padding: 0 16px; }
.estreito .logo { height: 40px; margin-bottom: 28px; display: block; }
.estreito h2 { margin: 6px 0 4px; }
.estreito .largo { width: 100%; margin-top: 8px; }
.estreito .rodape { margin-top: 18px; text-align: center; font-size: 14px; }
.copiar { display: flex; gap: 8px; margin-top: 8px; }
.copiar input { flex: 1; min-width: 0; }
.codigos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; margin: 12px 0; font-size: 16px; }