/* GUDAN · capa — HUD de tela cheia no estilo destilado de
   Estilo/MOC-Estilo-LuannaLink.md, com a pose de "battle intel" da referencia
   Estilo/Estilo Luanna/outros/web-login.png: trilhos laterais, painel central
   de autenticacao, relogio vivo e gauge.  Uma tela so, sem rolagem. */
:root {
  --primary: #3ddbff;
  --primary-bright: #5ec8ff;
  --primary-soft: rgba(61, 219, 255, 0.08);
  --primary-glow: rgba(93, 200, 255, 0.55);
  --bg-void: #030509;
  --bg-base: #060b14;
  --bg-panel: #0a1220;
  --bg-panel-2: #0d1826;
  --accent: #33e6a0;
  --text: #d8ecf5;
  --text-dim: #7fa3b8;
  --text-faint: #3d5a6b;
  --danger: #ff4d5e;
  --status-ok: #33e6a0;
  --status-info: #4d9fff;
  --borda: rgba(93, 200, 255, 0.18);
  --borda-forte: rgba(93, 200, 255, 0.42);
  --ff-cut: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  --ff-cut-sm: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --ff-titulo: 'Chakra Petch', 'Segoe UI', sans-serif;
  --ff-corpo: 'Space Grotesk', 'Segoe UI', sans-serif;
  --ff-dado: 'JetBrains Mono', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  height: 100%;
  overflow: hidden;                 /* pagina unica, sem rolagem */
  background: var(--bg-void);
  color: var(--text);
  font-family: var(--ff-corpo);
  font-size: 13px;
}

::selection { background: rgba(61, 219, 255, 0.3); }

body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 14px;
  padding: 14px 22px 12px;
}

/* ------------------------------------------------------------- camadas --- */
.hero {
  position: fixed; inset: -24px;
  background: url('img/hero.jpg') center 58% / cover no-repeat, var(--bg-void);
  opacity: 0.92;
  z-index: 0;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 46%, rgba(3, 5, 9, 0.80), rgba(3, 5, 9, 0.30) 60%, transparent 100%),
    linear-gradient(rgba(61, 219, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 219, 255, 0.035) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
}

#enxame { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

.varredura {
  position: fixed; left: 0; right: 0; top: -30%; height: 26%;
  z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(61, 219, 255, 0.05) 45%, rgba(93, 200, 255, 0.12) 50%, rgba(61, 219, 255, 0.05) 55%, transparent);
  animation: varrer 9s linear infinite;
}
@keyframes varrer { 0% { top: -30%; } 55% { top: 110%; } 100% { top: 110%; } }

/* entrada escalonada dos blocos */
.entra {
  opacity: 0;
  transform: translateY(14px);
  animation: entrar 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.12s + var(--ordem) * 0.14s);
}
@keyframes entrar { to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- topo --- */
.topo {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
}
.marca-bloco { display: flex; align-items: center; gap: 12px; }
.selo { width: 44px; height: 44px; color: var(--primary); filter: drop-shadow(0 0 8px rgba(61, 219, 255, 0.45)); }
.marca-nome {
  font-family: var(--ff-titulo); font-weight: 600; font-size: 22px;
  letter-spacing: 0.34em; color: var(--text);
}
.marca-traco { color: var(--primary); margin-left: 4px; }
.marca-sub {
  font-family: var(--ff-dado); font-size: 9.5px; letter-spacing: 0.3em;
  color: var(--text-dim); margin-top: 2px;
}
.topo-dados {
  display: flex; align-items: center; gap: 22px;
  border: 1px solid var(--borda);
  background: rgba(6, 11, 20, 0.72);
  clip-path: var(--ff-cut-sm);
  padding: 8px 18px;
}
.dado { display: flex; flex-direction: column; gap: 2px; }
.dado-rot { font-family: var(--ff-dado); font-size: 8.5px; letter-spacing: 0.22em; color: var(--status-info); text-transform: uppercase; }
.dado-val { font-family: var(--ff-dado); font-size: 12px; letter-spacing: 0.18em; color: var(--text); }
.relogio-bloco { text-align: right; border-left: 1px solid var(--borda); padding-left: 20px; }
#relogio { font-family: var(--ff-dado); font-size: 19px; letter-spacing: 0.14em; color: var(--text); }
#data-hoje { font-family: var(--ff-dado); font-size: 8.5px; letter-spacing: 0.24em; color: var(--text-dim); text-transform: uppercase; }

/* --------------------------------------------------------------- grade --- */
.grade {
  position: relative; z-index: 3;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 268px;
  gap: 20px;
  min-height: 0;
}
.trilho { display: flex; flex-direction: column; gap: 14px; min-height: 0; }

.caixa {
  border: 1px solid var(--borda);
  background: rgba(6, 11, 20, 0.66);
  clip-path: var(--ff-cut-sm);
  padding: 12px 14px;
  position: relative;
}
.caixa::before {
  content: ''; position: absolute; top: 0; left: 0; width: 26px; height: 1px;
  background: var(--primary); opacity: 0.7;
}
.caixa-titulo {
  margin: 0 0 8px; font-family: var(--ff-titulo); font-size: 11px; font-weight: 600;
  letter-spacing: 0.26em; color: var(--text); text-transform: uppercase;
}
.caixa-ver { font-family: var(--ff-dado); font-size: 9px; letter-spacing: 0.2em; color: var(--text-faint); margin: -4px 0 10px; }

.modulos { list-style: none; margin: 0; padding: 0; }
.modulos li {
  position: relative; padding: 5px 0 5px 18px;
  font-family: var(--ff-dado); font-size: 10px; letter-spacing: 0.14em;
  color: var(--text-dim); text-transform: uppercase;
  transition: color 0.3s, padding-left 0.3s;
}
.modulos li::before {
  content: ''; position: absolute; left: 0; top: 8px; width: 8px; height: 8px;
  background: rgba(61, 219, 255, 0.22); border: 1px solid var(--borda-forte);
}
.modulos li:nth-child(odd)::before { animation: piscar 3.4s steps(2, jump-none) infinite; }
.modulos li:nth-child(3n)::before { animation-delay: 1.1s; }
.modulos li:hover { color: var(--primary-bright); padding-left: 22px; }
@keyframes piscar { 0%, 70% { opacity: 1; } 78%, 86% { opacity: 0.25; } 100% { opacity: 1; } }

.status { margin: 0; }
.status div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; }
.status dt { font-family: var(--ff-dado); font-size: 10px; letter-spacing: 0.16em; color: var(--text-dim); text-transform: uppercase; }
.status dd { margin: 0; font-family: var(--ff-dado); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; }
.status dd.ok { color: var(--status-ok); }
.status dd.info { color: var(--status-info); }
.status dd::before { content: '· '; color: var(--text-faint); }

.id-corp { font-family: var(--ff-dado); font-size: 9px; letter-spacing: 0.2em; color: var(--text-faint); padding-left: 2px; }

/* -------------------------------------------------------------- centro --- */
.centro { display: flex; align-items: center; justify-content: center; min-height: 0; }
.painel-auth {
  position: relative;
  width: min(430px, 100%);
  max-height: 100%;
  overflow: hidden;
  border: 1px solid var(--borda-forte);
  background: linear-gradient(180deg, rgba(10, 18, 32, 0.92), rgba(6, 11, 20, 0.88));
  clip-path: var(--ff-cut);
  padding: 20px 34px 26px;
  box-shadow: 0 0 0 1px rgba(61, 219, 255, 0.06), 0 0 42px rgba(61, 219, 255, 0.10), inset 0 0 60px rgba(61, 219, 255, 0.05);
}
.painel-auth::before, .painel-auth::after {
  content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none;
  border-color: var(--primary); border-style: solid; border-width: 0;
}
.painel-auth::before { top: 6px; left: 6px; border-top-width: 2px; border-left-width: 2px; }
.painel-auth::after { bottom: 6px; right: 6px; border-bottom-width: 2px; border-right-width: 2px; }

.painel-cab { display: flex; justify-content: space-between; font-family: var(--ff-dado); font-size: 9px; letter-spacing: 0.2em; color: var(--status-info); text-transform: uppercase; }
.painel-cab .dim { color: var(--text-faint); }

.auth-titulo {
  margin: 22px 0 4px; text-align: center;
  font-family: var(--ff-titulo); font-weight: 600; font-size: 27px;
  letter-spacing: 0.3em; color: var(--text);
  text-shadow: 0 0 18px rgba(61, 219, 255, 0.35);
}
.auth-sub { text-align: center; font-family: var(--ff-dado); font-size: 9.5px; letter-spacing: 0.3em; color: var(--text-dim); }

.marca-agua { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.marca-agua svg { width: 190px; height: 190px; color: var(--primary); opacity: 0.06; }

.chamada {
  position: relative; margin: 16px 0 0; text-align: center;
  font-family: var(--ff-corpo); font-size: 13px; color: var(--text-dim); letter-spacing: 0.04em;
}
.chamada.forte {
  margin-top: 4px; color: var(--primary-bright);
  font-family: var(--ff-titulo); font-weight: 600; font-size: 15px; letter-spacing: 0.12em;
  text-shadow: 0 0 14px rgba(61, 219, 255, 0.4);
}

#form-capa { position: relative; margin-top: 20px; }
.campo-rot {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--ff-dado); font-size: 9.5px; letter-spacing: 0.22em;
  color: var(--text-dim); text-transform: uppercase; margin: 12px 0 5px;
}
.campo-jp { color: var(--text-faint); letter-spacing: 0.1em; }
.campo {
  width: 100%; padding: 10px 12px;
  background: rgba(3, 5, 9, 0.7);
  border: 1px solid var(--borda);
  color: var(--text);
  font-family: var(--ff-dado); font-size: 12.5px; letter-spacing: 0.12em;
  clip-path: var(--ff-cut-sm);
  outline: none;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.campo:focus {
  border-color: var(--borda-forte);
  background: rgba(10, 18, 32, 0.9);
  box-shadow: 0 0 0 1px rgba(61, 219, 255, 0.25), 0 0 18px rgba(61, 219, 255, 0.16);
}
.campo-olho { position: relative; }
.campo-olho .campo { padding-right: 42px; }
.olho {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 24px; display: grid; place-items: center;
  background: none; border: 0; color: var(--text-faint); cursor: pointer;
  transition: color 0.3s;
}
.olho svg { width: 18px; height: 18px; }
.olho:hover, .olho.ativo { color: var(--primary); }

#capa-erro {
  min-height: 16px; margin-top: 10px;
  font-family: var(--ff-dado); font-size: 10px; letter-spacing: 0.16em;
  color: var(--danger); text-transform: uppercase;
}

.botao-entrar {
  width: 100%; margin-top: 4px; padding: 12px 10px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: linear-gradient(180deg, rgba(61, 219, 255, 0.16), rgba(61, 219, 255, 0.05));
  border: 1px solid var(--borda-forte);
  color: var(--primary-bright);
  font-family: var(--ff-titulo); font-weight: 600; font-size: 15px; letter-spacing: 0.34em;
  clip-path: var(--ff-cut-sm);
  cursor: pointer;
  transition: letter-spacing 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s, background 0.35s, color 0.35s;
}
.botao-entrar small { font-family: var(--ff-dado); font-size: 8.5px; letter-spacing: 0.3em; color: var(--text-dim); }
.botao-entrar:hover {
  letter-spacing: 0.44em;
  background: linear-gradient(180deg, rgba(61, 219, 255, 0.3), rgba(61, 219, 255, 0.1));
  box-shadow: 0 0 26px rgba(61, 219, 255, 0.35), inset 0 0 18px rgba(61, 219, 255, 0.18);
  color: #eafcff;
}
.botao-entrar:disabled { opacity: 0.55; cursor: progress; letter-spacing: 0.34em; }

.painel-pe { position: absolute; left: 14px; right: 14px; bottom: 8px; display: flex; justify-content: space-between; pointer-events: none; }
.x-marca { width: 9px; height: 9px; border: 1px solid var(--borda-forte); position: relative; opacity: 0.8; }
.x-marca::before, .x-marca::after { content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 1px; background: var(--borda-forte); }
.x-marca::before { transform: translate(-50%, -50%) rotate(45deg); }
.x-marca::after { transform: translate(-50%, -50%) rotate(-45deg); }

/* --------------------------------------------------------- trilho dir. --- */
.acesso { display: flex; align-items: center; gap: 12px; }
.selo-mini { width: 40px; height: 40px; color: var(--primary); flex: none; filter: drop-shadow(0 0 6px rgba(61, 219, 255, 0.4)); }
.acesso-titulo { font-family: var(--ff-titulo); font-size: 10.5px; font-weight: 600; letter-spacing: 0.2em; color: var(--text); }
.acesso-sub { font-family: var(--ff-dado); font-size: 9px; letter-spacing: 0.2em; color: var(--status-info); margin-top: 3px; }

.gauge { position: relative; width: 128px; margin: 4px auto 0; }
.gauge svg { width: 100%; display: block; transform: rotate(135deg); }
.gauge-trilho { fill: none; stroke: rgba(93, 200, 255, 0.14); stroke-width: 5; stroke-dasharray: 216.8 289.0; stroke-linecap: butt; }
.gauge-arco {
  fill: none; stroke: var(--primary); stroke-width: 5;
  stroke-dasharray: 0 289.0; stroke-linecap: butt;
  filter: drop-shadow(0 0 5px rgba(61, 219, 255, 0.6));
  transition: stroke-dasharray 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge-meio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; flex-wrap: wrap; }
.gauge-meio b { font-family: var(--ff-dado); font-size: 21px; color: var(--text); }
.gauge-meio i { font-style: normal; font-family: var(--ff-dado); font-size: 11px; color: var(--text-dim); }
.gauge-meio span { width: 100%; text-align: center; font-family: var(--ff-dado); font-size: 8.5px; letter-spacing: 0.26em; color: var(--status-ok); text-transform: uppercase; }

.hist { display: flex; align-items: flex-end; gap: 2px; height: 26px; margin-top: 10px; }
.hist i { flex: 1; background: linear-gradient(180deg, var(--primary), rgba(61, 219, 255, 0.12)); opacity: 0.55; transition: height 0.9s cubic-bezier(0.22, 1, 0.36, 1); }

.log { font-family: var(--ff-dado); font-size: 9.5px; line-height: 1.75; letter-spacing: 0.06em; color: var(--text-dim); min-height: 96px; white-space: pre-wrap; }
.log .ok { color: var(--status-ok); }
.log .cursor { color: var(--primary); animation: piscar 1s steps(2, jump-none) infinite; }

/* ------------------------------------------------------------------ pe --- */
.pe {
  position: relative; z-index: 3;
  text-align: center;
  font-family: var(--ff-dado); font-size: 9.5px; letter-spacing: 0.3em;
  color: var(--text-faint); text-transform: uppercase;
}

/* ------------------------------------------------------- telas menores --- */
@media (max-width: 1180px) {
  .grade { grid-template-columns: 200px minmax(0, 1fr); }
  .trilho:last-child { display: none; }
}
@media (max-width: 860px) {
  body { padding: 12px 14px 10px; }
  .grade { grid-template-columns: minmax(0, 1fr); }
  .trilho { display: none; }
  .topo-dados .dado { display: none; }
  .marca-nome { font-size: 18px; letter-spacing: 0.26em; }
  .painel-auth { padding: 16px 22px 24px; }
  .auth-titulo { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .varredura, .modulos li::before, .log .cursor { animation: none; }
  .entra { animation-duration: 0.01s; }
  .hero { transition: none; }
}