:root {
  --fundo: #ffffff;
  --superficie: #f6f7f8;
  --borda: #e3e5e8;
  --texto: #16181d;
  --suave: #5b616e;
  --primario: #16181d;
  --primario-texto: #ffffff;
  --destaque: #2457d6;
  --ok: #1b7f4b;
  --erro: #b42318;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fundo: #111317;
    --superficie: #191c21;
    --borda: #2b2f36;
    --texto: #eceef1;
    --suave: #a1a7b3;
    --primario: #eceef1;
    --primario-texto: #111317;
    --destaque: #7aa2ff;
    --ok: #4cc38a;
    --erro: #ff8a80;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); line-height: 1.55; font-size: 16px; }
a { color: var(--destaque); }
[hidden] { display: none !important; }

.topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1040px; margin: 0 auto; padding: 20px 16px; }
.marca { display: inline-flex; align-items: baseline; gap: 8px; color: var(--texto); text-decoration: none; }
.marca b { letter-spacing: .08em; }
.marca span { color: var(--suave); }
.topo-link { color: var(--texto); text-decoration: none; font-weight: 600; padding: 8px 14px; border: 1px solid var(--borda); border-radius: 8px; }
.topo-link:hover { background: var(--superficie); }

.pagina { max-width: 1040px; margin: 0 auto; padding: 24px 16px 64px; }
.pagina-estreita { max-width: 520px; }
h1 { font-size: clamp(1.9rem, 4.5vw, 2.8rem); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 16px; }
.pagina-estreita h1 { font-size: 1.8rem; }
h2 { font-size: 1.05rem; margin: 0 0 12px; }
.abertura { max-width: 720px; padding: 32px 0 40px; }
.abertura > p { color: var(--suave); font-size: 1.1rem; margin: 0 0 32px; }

.verificar label, .formulario label { display: block; font-weight: 600; margin: 0 0 6px; }
.campo-link { display: flex; align-items: stretch; border: 1px solid var(--borda); border-radius: 8px; background: var(--fundo); overflow: hidden; }
.campo-link:focus-within { outline: 2px solid var(--destaque); outline-offset: 1px; }
.prefixo { display: flex; align-items: center; padding: 0 4px 0 12px; color: var(--suave); background: var(--superficie); white-space: nowrap; font-size: .95rem; }
.campo-link input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--texto); padding: 12px; font: inherit; }
.situacao { min-height: 1.5em; margin: 8px 0 0; font-size: .95rem; color: var(--suave); }
.situacao.livre { color: var(--ok); }
.situacao.ocupado { color: var(--erro); }

.exemplos h2 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--suave); }
.cartoes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.cartao a { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1px solid var(--borda); border-radius: 12px; color: var(--texto); text-decoration: none; height: 100%; }
.cartao a:hover { border-color: var(--suave); }
.cartao img, .sem-foto { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; object-position: 50% 22%; flex: none; background: var(--superficie); }
.cartao-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cartao-texto span { color: var(--suave); font-size: .92rem; }
.cartao-texto .cartao-link { color: var(--destaque); font-size: .88rem; overflow-wrap: anywhere; }

.formulario { display: grid; gap: 4px; }
.formulario input:not(.campo-link input) { width: 100%; padding: 11px 12px; border: 1px solid var(--borda); border-radius: 8px; font: inherit; background: var(--fundo); color: var(--texto); margin-bottom: 12px; }
.botao { justify-self: start; margin-top: 8px; padding: 11px 18px; border-radius: 8px; border: 1px solid var(--primario); background: var(--primario); color: var(--primario-texto); font: inherit; font-weight: 600; cursor: pointer; }
.botao:disabled { opacity: .55; cursor: default; }
.botao-secundario { background: transparent; color: var(--texto); border-color: var(--borda); }
.erro { color: var(--erro); min-height: 1.2em; margin: 8px 0 0; }
.nota { color: var(--suave); font-size: .95rem; }
.bloco { border: 1px solid var(--borda); border-radius: 12px; padding: 20px; margin: 20px 0; }
.link-atual { font-size: 1.1rem; overflow-wrap: anywhere; margin: 0 0 12px; }
.lista { margin: 0; padding-left: 20px; color: var(--suave); }
.carregando { color: var(--suave); }

.rodape { max-width: 1040px; margin: 0 auto; padding: 24px 16px 40px; color: var(--suave); font-size: .9rem; border-top: 1px solid var(--borda); }