/* ══════════════════════════════════════════════════════════════════════════
   HELIX SOMBRIA — tokens e componentes do tema
   Carregue esta folha antes do <style> inline de cada view.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Base sombria */
  --hellix-night:        #070504;
  --hellix-coal:         #0e0907;
  --hellix-panel:        #17100c;
  --hellix-panel-raised: #21150e;
  --hellix-line:         #4b2919;
  --hellix-line-soft:    #331d13;

  /* Fogo de abóbora */
  --hellix-orange:       #ff6a13;
  --hellix-orange-hot:   #ff3d0a;
  --hellix-amber:        #ffb52e;
  --hellix-copper:       #a94318;
  --hellix-ember:        #c83308;

  /* Feitiço */
  --hellix-purple:       #8d3cff;
  --hellix-toxic:        #8bdb16;
  --hellix-moon:         #ffe8b0;

  /* Texto */
  --hellix-cream:        #fff2dc;
  --hellix-muted:        #9b887a;
  --hellix-muted-dim:    #6f5f54;

  /* Semânticos */
  --hellix-success:      #8bdb16;
  --hellix-danger:       #ff3d0a;
  --hellix-warning:      #ffb52e;

  /* Superfícies compostas */
  --hellix-surface:      linear-gradient(150deg, #17100c, #0d0907);
  --hellix-surface-warm: linear-gradient(155deg, #21130d, #0e0907 72%);
  --hellix-cta:          linear-gradient(110deg, var(--hellix-orange-hot), var(--hellix-ember));
  --hellix-cta-glow:     0 10px 30px rgba(255, 83, 12, 0.28);
  --hellix-shadow:       0 24px 80px rgba(0, 0, 0, 0.67);
  --hellix-shadow-deep:  0 32px 110px #000;

  /* Tipografia */
  --hellix-display: 'Barlow Condensed', 'Oswald', Impact, sans-serif;
  --hellix-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --hellix-mono:    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;

  /* Formas */
  --hellix-radius:    18px;
  --hellix-radius-sm: 11px;
  --hellix-radius-lg: 22px;
}

/* ─── Marca ──────────────────────────────────────────────────────────────── */
.hx-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  font-family: var(--hellix-display);
  line-height: .78;
}
.hx-brand b {
  margin-top: 11px;
  font-size: 34px;
  letter-spacing: 1px;
}
.hx-brand strong {
  color: var(--hellix-orange);
  font-size: 43px;
  font-style: italic;
  text-shadow: 2px 2px #3a1408;
  transform: skew(-7deg);
}
.hx-brand small {
  margin-top: 10px;
  color: var(--hellix-orange);
  font: 700 8px var(--hellix-body);
  letter-spacing: 4px;
}

.hx-orbit {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border: 2px solid #85502b;
  border-radius: 50%;
  background: radial-gradient(circle, #ff9e24, #8e2f0d 42%, #170a05 70%);
  box-shadow: 0 0 0 5px #21150d, 0 0 28px rgba(255, 92, 17, 0.48);
}
.hx-orbit span {
  font-size: 44px;
  color: var(--hellix-moon);
  filter: drop-shadow(0 0 5px orange);
}

/* ─── Botões ─────────────────────────────────────────────────────────────── */
.hx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: var(--hellix-radius-sm);
  background: var(--hellix-cta);
  box-shadow: var(--hellix-cta-glow);
  color: #fff;
  font-family: var(--hellix-body);
  font-weight: 800;
  cursor: pointer;
  transition: filter .2s ease, transform .2s ease;
}
.hx-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.hx-btn:active { transform: translateY(0); }
.hx-btn:disabled {
  cursor: not-allowed;
  filter: saturate(.55);
  box-shadow: none;
  background: linear-gradient(120deg, #3a170c, #271008);
  color: #855743;
}
.hx-btn--ghost {
  background: #120c09;
  border: 1px solid var(--hellix-line);
  box-shadow: none;
  color: var(--hellix-cream);
}
.hx-btn--block { width: 100%; }
.hx-btn--sm { min-height: 38px; padding: 0 16px; font-size: 12px; }

/* ─── Painéis ────────────────────────────────────────────────────────────── */
.hx-panel {
  border: 1px solid var(--hellix-line);
  border-top: 2px solid var(--hellix-orange);
  border-radius: var(--hellix-radius-lg);
  background: var(--hellix-surface);
  box-shadow: var(--hellix-shadow), 0 0 35px rgba(255, 91, 12, 0.08);
}
.hx-panel--flat {
  border-top: 1px solid var(--hellix-line);
  box-shadow: none;
}

/* ─── Campos ─────────────────────────────────────────────────────────────── */
.hx-input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid #493024;
  border-radius: var(--hellix-radius-sm);
  background: #100c09;
  color: #fff;
  font-family: var(--hellix-body);
  font-size: 15px;
  outline: 0;
}
.hx-input::placeholder { color: var(--hellix-muted-dim); }
.hx-input:focus {
  border-color: var(--hellix-orange);
  box-shadow: 0 0 0 3px rgba(255, 105, 19, 0.13);
}

/* ─── Selo / etiqueta ────────────────────────────────────────────────────── */
.hx-tag {
  display: inline-block;
  color: var(--hellix-orange);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ─── Céu noturno reutilizável ───────────────────────────────────────────── */
.hx-night-sky {
  background-color: var(--hellix-night);
  background-image:
    radial-gradient(circle at 50% 18%, rgba(255, 100, 16, 0.10), transparent 32%),
    radial-gradient(circle at 78% 12%, rgba(255, 232, 176, 0.14), transparent 14%),
    linear-gradient(180deg, #120a06 0%, #1e0d05 42%, #070504 88%);
}

/* Névoa que sobe do rodapé */
.hx-fog::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 38%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(20, 7, 2, 0.78) 62%, var(--hellix-night));
}

/* ─── Animações do covil ─────────────────────────────────────────────────── */
@keyframes hx-flicker {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 106, 19, .75)); }
  42%      { opacity: .84; filter: drop-shadow(0 0 12px rgba(255, 181, 46, .95)); }
  63%      { opacity: .96; filter: drop-shadow(0 0 4px rgba(255, 61, 10, .7)); }
}
@keyframes hx-float {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-12px) }
}
@keyframes hx-bat {
  0%   { transform: translate(0, 0) scaleX(1) }
  25%  { transform: translate(26vw, -22px) scaleX(.92) }
  50%  { transform: translate(52vw, 14px) scaleX(1) }
  75%  { transform: translate(78vw, -18px) scaleX(.94) }
  100% { transform: translate(104vw, 0) scaleX(1) }
}
.hx-flicker { animation: hx-flicker 2.6s ease-in-out infinite; }
.hx-float   { animation: hx-float 4.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .hx-flicker, .hx-float { animation: none; }
}