:root {
  --ground: #080D16;
  --panel: #0E1626;
  --panel-2: #131F33;
  --raised: #182741;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.14);
  --ink: #E9EEF7;
  --ink-2: #9AA9C2;
  --ink-3: #64748E;
  --gold: #D6A44C;
  --live: #45BE8B;
  --warn: #E08A3C;
  --stop: #D65A4C;
  --display: "Bahnschrift", "DIN Alternate", "Segoe UI Semibold", system-ui, sans-serif;
  --body: "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", "Consolas", ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.marca { display: flex; align-items: center; gap: 11px; }
.king { width: 78px; height: 23px; object-fit: cover; object-position: top; display: block; }
.vpn { font-family: "Century Gothic", "Futura", "Segoe UI", sans-serif; font-size: 19px; letter-spacing: 0.14em; line-height: 1; }

/* ---------- barra da tela de entrada ----------
   Fina (48px) e translúcida: ela emoldura a tela de entrada, não disputa com
   ela. Fica grudada no topo para o download continuar à mão em telas baixas,
   onde o cartão de login já ocupa tudo. */
.barra {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  height: 48px; padding: 0 20px;
  background: rgba(10, 17, 32, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.barra-marca { display: flex; align-items: center; gap: 9px; color: var(--ink-2); }
.barra-marca .simbolo { height: 19px; width: auto; display: block; opacity: 0.9; }
.barra-marca .nome { font-family: var(--display); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; }

/* Ouro cheio e com brilho: é a ação que a maior parte de quem chega aqui vem
   fazer -- baixar o programa. O "Entrar" do cartão é do dono, e está no meio da
   tela; este é do cliente, e está no topo. Cada um manda no seu território. */
.baixar {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  margin-left: auto; text-decoration: none;
  /* Esquerda um pouco menor que a direita de propósito: o desenho da seta não
     encosta na borda do seu quadro (sobra ~17% de cada lado dentro do SVG), e
     com padding igual nos dois lados o conteúdo parece empurrado para a direita.
     Isto é acerto ÓPTICO -- pelo número, o botão ficaria "certo" e torto. */
  height: 36px; padding: 0 21px 0 18px; border-radius: 999px;
  font-family: var(--display); font-size: 12.5px; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; line-height: 1;
  color: #1A1206;
  background: linear-gradient(180deg, #E6BE6A 0%, var(--gold) 55%, #C79338 100%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 12px rgba(214, 164, 76, 0.30);
  transition: box-shadow 0.18s ease, filter 0.18s ease, transform 0.18s ease;
}
.baixar:hover { filter: brightness(1.06); box-shadow: 0 4px 18px rgba(214, 164, 76, 0.45); transform: translateY(-1px); }
.baixar:active { transform: translateY(0); box-shadow: 0 1px 8px rgba(214, 164, 76, 0.35); }
.baixar:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* O letter-spacing acrescenta espaço DEPOIS de cada letra, inclusive a última:
   sem cortar esse resto, o texto fica encostado à esquerda dentro da cápsula e
   parece torto. `display: block` no ícone tira a folga de linha-base do SVG,
   que desalinhava a seta na vertical pelo mesmo motivo. */
/* O -0.13em corta o espaço da última letra; o padding-top de 0.05em desce o
   texto o tanto que as maiúsculas sobem em relação ao meio da linha. Ambos em
   `em` para acompanharem a fonte real do Windows (Bahnschrift), que tem métrica
   diferente da fonte de reserva. */
.baixar .rotulo { margin-right: -0.13em; padding-top: 0.05em; }
.baixar svg { width: 16px; height: 16px; flex: none; display: block; }

/* Em tela estreita some primeiro o que é apoio -- a barra nunca quebra em duas
   linhas, e o botão continua inteiro. */
@media (max-width: 560px) {
  .barra { gap: 10px; padding: 0 14px; }
  .barra-marca .nome { display: none; }
  .baixar { padding: 0 13px; letter-spacing: 0.08em; }
}

.oculto { display: none !important; }

/* ---------- entrada ---------- */
.entrada { min-height: calc(100vh - 48px); display: grid; place-items: center; padding: 24px; }
.cartao { width: 100%; max-width: 372px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; padding: 30px 28px; }
.cartao .marca { justify-content: center; margin-bottom: 6px; }
.cartao h1 { font-family: var(--display); font-size: 17px; font-weight: 600; text-align: center; margin: 16px 0 22px; letter-spacing: 0.02em; }

label { display: block; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 6px; }

input, select, textarea {
  width: 100%; padding: 10px 12px; font-family: var(--body); font-size: 15px;
  background: var(--panel-2); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: transparent; }
.campo { margin-bottom: 16px; }

button { font-family: var(--body); font-size: 14px; cursor: pointer; border-radius: 8px; }
button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.principal { width: 100%; padding: 12px; font-family: var(--display); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; background: var(--gold); color: #1A1206; border: 1px solid var(--gold); }
.principal:hover { filter: brightness(1.08); }
.principal[disabled] { opacity: 0.6; cursor: progress; }

.erro { color: var(--stop); font-size: 13.5px; margin-top: 12px; min-height: 20px; }

/* ---------- painel ---------- */
/* Mesma altura e mesmo acabamento da barra da tela de entrada: quem entra no
   painel não sente que trocou de site, só de página. */
.topo {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  height: 48px; padding: 0 20px;
  background: rgba(10, 17, 32, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topo .quem { margin-left: auto; font-size: 12.5px; color: var(--ink-3); }
.sair { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); padding: 5px 14px; font-size: 12.5px; }
.sair:hover { color: var(--ink); border-color: var(--ink-3); }

.conteudo { max-width: 1080px; margin: 0 auto; padding: 26px 22px 60px; }

h2 { font-family: var(--display); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); font-weight: 600; margin: 0 0 14px; }

.bloco { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; margin-bottom: 26px; }

.linha-campos { display: grid; grid-template-columns: 2fr 2fr 1fr 1.4fr; gap: 14px; align-items: end; }
@media (max-width: 780px) { .linha-campos { grid-template-columns: 1fr; } }
.linha-campos .campo { margin-bottom: 0; }
.linha-campos button { padding: 10px 20px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; padding: 0 10px 9px; border-bottom: 1px solid var(--line); }
td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }

.codigo { font-family: var(--mono); font-size: 13.5px; color: var(--gold); cursor: pointer; border: 0; background: transparent; padding: 0; }
.codigo:hover { text-decoration: underline; }

.selo { display: inline-block; font-size: 11.5px; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; border: 1px solid; }
.s-ativa { color: var(--live); border-color: rgba(69, 190, 139, 0.45); }
.s-espera { color: var(--gold); border-color: rgba(214, 164, 76, 0.45); }
.s-vencida { color: var(--warn); border-color: rgba(224, 138, 60, 0.45); }
.s-cancelada { color: var(--stop); border-color: rgba(214, 90, 76, 0.45); }
/* Versão do instalador não é situação: as cores acima significam ativo/vencido/
   cancelado, e pintar "versão 1.2.0" de verde faria o olho ler estado. */
.s-versao { color: var(--ink-2); border-color: var(--line-2); font-family: var(--mono); }

.acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.acoes button { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); padding: 5px 11px; font-size: 12.5px; }
.acoes button:hover { color: var(--ink); border-color: var(--ink-3); }
.acoes .perigo:hover { color: var(--stop); border-color: var(--stop); }

.vazio { text-align: center; color: var(--ink-3); padding: 30px; font-size: 14px; }

.aviso { display: flex; gap: 10px; background: rgba(224, 138, 60, 0.08); border: 1px solid rgba(224, 138, 60, 0.3); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; color: var(--ink-2); margin-bottom: 24px; }
.aviso b { color: var(--warn); font-weight: 500; }

/* ---------- aplicativo para download ---------- */
.app-atual { margin-bottom: 18px; }
.app-linha { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.app-atual .vazio { padding: 18px; }

.botao-link { display: inline-block; background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 8px; padding: 5px 11px; font-size: 12.5px; text-decoration: none; }
.botao-link:hover { color: var(--ink); border-color: var(--ink-3); }

.linha-app { display: grid; grid-template-columns: 3fr 1.2fr 1.2fr; gap: 14px; align-items: end; }
@media (max-width: 780px) { .linha-app { grid-template-columns: 1fr; } }
.linha-app .campo { margin-bottom: 0; }
.linha-app button { padding: 10px 20px; }

input[type="file"] { padding: 8px 10px; font-size: 13.5px; }
input[type="file"]::file-selector-button { background: var(--raised); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 6px; padding: 5px 12px; margin-right: 12px; font-family: var(--body); font-size: 13px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { color: var(--ink); }

/* Sem isto o envio de dezenas de MB parece travado e a pessoa recarrega no meio. */
.progresso { height: 6px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; margin-top: 14px; }
.progresso span { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.15s linear; }

dialog { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 14px; padding: 24px; max-width: 560px; width: 92%; }
dialog::backdrop { background: rgba(4, 8, 14, 0.7); }
dialog h3 { font-family: var(--display); font-size: 17px; font-weight: 600; margin: 0 0 4px; }
dialog p { color: var(--ink-2); font-size: 13.5px; margin: 0 0 14px; }
pre { background: #060B13; border: 1px solid var(--line); border-radius: 8px; padding: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); overflow-x: auto; white-space: pre; margin: 0 0 14px; }
.fechar { background: transparent; color: var(--ink-2); border: 1px solid var(--line-2); padding: 8px 18px; }