@font-face {
  font-family: 'Archivo';
  src: url('/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

:root {
  --fundo: #0a0b0f;
  --fundo-2: #0f1117;
  --sup: #14171f;
  --sup-2: #1a1e28;
  --linha: #252a36;
  --linha-2: #323849;
  --texto: #eef0f5;
  --texto-2: #a3a9b8;
  --texto-3: #6b7285;

  --ambar: #ffb547;
  --coral: #ff6b4a;
  --marca: linear-gradient(135deg, #ffc65c 0%, #ff8a3d 55%, #ff5a4a 100%);
  --fala: #ffb547;
  --fala-brilho: rgba(255, 181, 71, .45);
  --ouve: #3ee08f;
  --ouve-brilho: rgba(62, 224, 143, .4);
  --erro: #ff5d6c;

  --raio: 14px;
  --raio-g: 22px;
  --sombra: 0 1px 0 rgba(255,255,255,.04) inset, 0 20px 40px -24px rgba(0,0,0,.8);
  --mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Archivo', system-ui, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
button, input, select { font: inherit; color: inherit; }
a { color: inherit; }
::selection { background: var(--ambar); color: #000; }

/* ---------- marca ---------- */
.marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.marca svg { width: 30px; height: 30px; flex: none; }
.marca b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; font-stretch: 112%; }
.marca b em { font-style: normal; background: var(--marca); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca small { display: block; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--texto-3); font-weight: 600; margin-top: -3px; }

/* ---------- botões ---------- */
.bt {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--linha-2);
  background: var(--sup-2); font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, transform .1s;
  white-space: nowrap;
}
.bt:hover { background: #222736; border-color: #3d4458; }
.bt:active { transform: translateY(1px); }
.bt.primario { background: var(--marca); color: #1a0d00; border: 0; box-shadow: 0 8px 24px -10px rgba(255,138,61,.7); }
.bt.primario:hover { filter: brightness(1.06); }
.bt.fantasma { background: transparent; border-color: transparent; color: var(--texto-2); }
.bt.fantasma:hover { background: var(--sup-2); color: var(--texto); }
.bt.perigo { color: var(--erro); }
.bt.pequeno { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.bt:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- formulários ---------- */
.campo { display: grid; gap: 6px; }
.campo span { font-size: 12px; font-weight: 600; color: var(--texto-2); letter-spacing: .02em; }
.entrada {
  height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--linha-2);
  background: var(--fundo-2); outline: none; transition: border-color .15s, box-shadow .15s; width: 100%;
}
.entrada:focus { border-color: var(--ambar); box-shadow: 0 0 0 4px rgba(255,181,71,.15); }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%), linear-gradient(135deg, var(--texto-3) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.aviso-erro { color: var(--erro); font-size: 13px; min-height: 20px; }

/* ---------- pílulas e etiquetas ---------- */
.pilula { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--sup-2); border: 1px solid var(--linha); color: var(--texto-2); }
.pilula.ok { color: var(--ouve); border-color: rgba(62,224,143,.3); background: rgba(62,224,143,.08); }
.pilula.desl { color: var(--texto-3); }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ponto.vivo { box-shadow: 0 0 0 0 currentColor; animation: pulsa 1.8s infinite; }
@keyframes pulsa { 0% { box-shadow: 0 0 0 0 rgba(62,224,143,.6); } 70% { box-shadow: 0 0 0 7px rgba(62,224,143,0); } 100% { box-shadow: 0 0 0 0 rgba(62,224,143,0); } }
.codigo { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; padding: 3px 8px; border-radius: 7px; background: var(--fundo-2); border: 1px solid var(--linha); }

/* tipos de terminal */
.tipo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.tipo i { width: 8px; height: 8px; border-radius: 3px; }
.tipo.radio i { background: #ffb547; }
.tipo.mesa i { background: #8b7bff; }
.tipo.escuta i { background: #4cc3ff; }

/* ---------- fundo decorativo ---------- */
.brilho-fundo {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(800px 500px at 85% -10%, rgba(255,138,61,.13), transparent 60%),
    radial-gradient(600px 400px at -10% 110%, rgba(139,123,255,.08), transparent 60%);
}
.grade-fundo {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: linear-gradient(var(--linha) 1px, transparent 1px), linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 0%, transparent 70%);
}

.cartao { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio-g); box-shadow: var(--sombra); }

/* toast */
.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; background: var(--sup-2); border: 1px solid var(--linha-2); padding: 12px 18px; border-radius: 12px; font-weight: 600; transition: .25s; z-index: 100; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
.toast.erro { border-color: rgba(255,93,108,.5); color: #ffc2c8; }