:root {
  --gold-1: #fff1b8;
  --gold-2: #f5c451;
  --gold-3: #c98a1b;
  --gold-4: #7a4c0c;
  --red-1: #ff5a2a;
  --red-2: #d4231a;
  --red-3: #7a0d0b;
  --ink: #0b0605;
  --panel: rgba(18, 9, 7, 0.72);
  --text: #f3e6d0;
  --muted: #b39a7c;
  --ok: #4cd97b;
  --err: #ff4d4d;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
  min-height: 100vh;
}

a { color: inherit; }

/* ---------- Fundo ---------- */
.bg-gradient {
  position: fixed; inset: 0; z-index: -5;
  background:
    radial-gradient(ellipse 80% 60% at 50% 110%, rgba(212, 35, 26, .55), transparent 60%),
    radial-gradient(ellipse 50% 40% at 15% 20%, rgba(201, 138, 27, .18), transparent 70%),
    radial-gradient(ellipse 50% 40% at 85% 30%, rgba(122, 13, 11, .45), transparent 70%),
    linear-gradient(180deg, #120705 0%, #1c0907 50%, #2a0a06 100%);
  animation: bgPulse 8s ease-in-out infinite alternate;
}
@keyframes bgPulse {
  from { filter: brightness(.9) saturate(1); }
  to   { filter: brightness(1.15) saturate(1.2); }
}

.bg-fog {
  position: fixed; left: -50%; width: 200%; height: 60%; z-index: -4;
  pointer-events: none; opacity: .35; mix-blend-mode: screen;
  background:
    radial-gradient(ellipse 25% 40% at 20% 50%, rgba(255, 120, 60, .25), transparent 70%),
    radial-gradient(ellipse 30% 45% at 55% 60%, rgba(255, 80, 40, .2), transparent 70%),
    radial-gradient(ellipse 25% 40% at 85% 45%, rgba(255, 170, 80, .18), transparent 70%);
  filter: blur(30px);
}
.fog-1 { bottom: -10%; animation: fogDrift 40s linear infinite; }
.fog-2 { bottom: 10%; opacity: .2; animation: fogDrift 60s linear infinite reverse; }
@keyframes fogDrift {
  from { transform: translateX(0); }
  to   { transform: translateX(25%); }
}

#embers {
  position: fixed; inset: 0; z-index: -3;
  width: 100%; height: 100%; pointer-events: none;
}

.vignette {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .85) 100%);
}

/* ---------- Layout ---------- */
.stage {
  min-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: center;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 32px 16px;
}

/* ---------- Logo ---------- */
.hero {
  display: flex; flex-direction: column; align-items: center;
  animation: rise 1.2s cubic-bezier(.2, .8, .2, 1) both;
}

.logo-wrap {
  position: relative;
  width: min(520px, 90vw);
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transition: transform .2s ease-out;
}

.logo {
  position: relative; z-index: 2;
  width: 100%; height: 100%; object-fit: contain;
  animation: float 6s ease-in-out infinite, glow 3s ease-in-out infinite alternate;
  user-select: none; -webkit-user-drag: none;
}

.logo-aura {
  position: absolute; inset: 8%; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 40, .55) 0%, rgba(212, 35, 26, .25) 40%, transparent 70%);
  filter: blur(40px);
  animation: auraPulse 3s ease-in-out infinite alternate;
}

.logo-ring {
  position: absolute; inset: 2%; z-index: 1; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(255, 200, 90, .7) 80%, transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 66%, #000 67%, #000 69%, transparent 70%);
          mask: radial-gradient(circle, transparent 66%, #000 67%, #000 69%, transparent 70%);
  animation: spin 6s linear infinite;
  filter: blur(1px);
}

.tagline {
  margin-top: 8px;
  font-family: "Cinzel", serif; font-weight: 700;
  letter-spacing: .25em; text-transform: uppercase; font-size: .9rem;
  background: linear-gradient(90deg, var(--gold-3), var(--gold-1), var(--gold-3));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 4s linear infinite;
  text-align: center;
}

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50%      { transform: translateY(-14px) rotate(.4deg); }
}
@keyframes glow {
  from { filter: drop-shadow(0 0 12px rgba(255, 110, 30, .45)) drop-shadow(0 0 2px rgba(255, 220, 120, .6)); }
  to   { filter: drop-shadow(0 0 32px rgba(255, 80, 20, .8))  drop-shadow(0 0 6px rgba(255, 220, 120, .9)); }
}
@keyframes auraPulse {
  from { opacity: .6; transform: scale(.92); }
  to   { opacity: 1;  transform: scale(1.06); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { to { background-position: 200% center; } }
@keyframes rise {
  from { opacity: 0; transform: translateY(40px) scale(.95); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Painel ---------- */
.panel-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  animation: rise 1.2s .25s cubic-bezier(.2, .8, .2, 1) both;
}

.panel {
  position: relative;
  width: 100%; max-width: 440px;
  padding: 30px 32px 28px;
  border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, .7),
    0 0 60px rgba(212, 35, 26, .25),
    inset 0 1px 0 rgba(255, 220, 150, .12);
  isolation: isolate;
}

/* borda dourada animada */
.panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; z-index: -1;
  background: conic-gradient(from var(--angle, 0deg),
    var(--gold-4), var(--gold-2), var(--red-1), var(--gold-4) 40%,
    var(--gold-4) 60%, var(--gold-1), var(--gold-4));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: borderSpin 6s linear infinite;
}
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes borderSpin { to { --angle: 360deg; } }

.corner {
  position: absolute; width: 22px; height: 22px; border: 2px solid var(--gold-2);
  filter: drop-shadow(0 0 4px rgba(245, 196, 81, .8));
}
.corner.tl { top: -6px; left: -6px; border-right: 0; border-bottom: 0; }
.corner.tr { top: -6px; right: -6px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: -6px; left: -6px; border-right: 0; border-top: 0; }
.corner.br { bottom: -6px; right: -6px; border-left: 0; border-top: 0; }

.panel.shake { animation: shake .45s cubic-bezier(.36, .07, .19, .97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* ---------- Abas ---------- */
.tabs {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  background: rgba(0, 0, 0, .35); border-radius: 12px; padding: 4px;
  border: 1px solid rgba(245, 196, 81, .15);
  margin-bottom: 22px;
}
.tab {
  position: relative; z-index: 1;
  background: none; border: 0; cursor: pointer;
  padding: 11px 0;
  font-family: "Cinzel", serif; font-weight: 700; font-size: .95rem; letter-spacing: .08em;
  color: var(--muted); transition: color .3s;
}
.tab.active { color: #1a0a04; }
.tab:not(.active):hover { color: var(--gold-1); }
.tab-indicator {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 9px;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 45%, var(--gold-3));
  box-shadow: 0 0 18px rgba(245, 196, 81, .55), inset 0 -2px 0 rgba(0, 0, 0, .2);
  transition: transform .45s cubic-bezier(.65, 0, .35, 1);
}
.tabs[data-active="register"] .tab-indicator { transform: translateX(100%); }

/* ---------- Formulários ---------- */
.forms { position: relative; display: grid; perspective: 900px; }
.form {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 16px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(40px) rotateY(-8deg);
  transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s .55s;
}
.form:not(.active) { position: absolute; inset: 0 0 auto 0; }
.form.left { transform: translateX(-40px) rotateY(8deg); }
.form.active {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: none;
  transition: opacity .45s .1s ease, transform .55s .1s cubic-bezier(.2, .8, .2, 1), visibility 0s;
}

.form-title {
  font-family: "Cinzel", serif; font-weight: 700; font-size: 1.15rem;
  text-align: center; color: var(--gold-1); margin-bottom: 4px;
  text-shadow: 0 0 14px rgba(255, 140, 40, .45);
}

/* campos com label flutuante */
.field { position: relative; }
.field input {
  width: 100%;
  padding: 20px 44px 8px 44px;
  font: 500 .95rem "Inter", sans-serif; color: var(--text);
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(245, 196, 81, .18);
  border-radius: 10px;
  outline: none;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.field input:focus {
  border-color: var(--gold-2);
  background: rgba(30, 12, 6, .6);
  box-shadow: 0 0 0 3px rgba(245, 196, 81, .12), 0 0 22px rgba(255, 110, 30, .25);
}
.field label {
  position: absolute; left: 44px; top: 50%; transform: translateY(-50%);
  font-size: .92rem; color: var(--muted); pointer-events: none;
  transition: all .25s ease;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
  top: 12px; transform: none; font-size: .7rem; letter-spacing: .06em;
  color: var(--gold-2); text-transform: uppercase;
}
.field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; fill: var(--muted); transition: fill .3s, filter .3s;
}
.field input:focus ~ .field-icon {
  fill: var(--gold-2); filter: drop-shadow(0 0 6px rgba(245, 196, 81, .8));
}
.field-line {
  position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--red-1), var(--gold-1), var(--red-1), transparent);
  transform: scaleX(0); transition: transform .4s ease; border-radius: 2px;
}
.field input:focus ~ .field-line { transform: scaleX(1); }

.field.invalid input { border-color: var(--err); box-shadow: 0 0 14px rgba(255, 77, 77, .25); }
.field.invalid label { color: var(--err) !important; }
.field.valid input { border-color: rgba(76, 217, 123, .55); }

.toggle-pass {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; padding: 6px; border-radius: 6px;
  display: grid; place-items: center;
}
.toggle-pass svg { width: 18px; height: 18px; fill: var(--muted); transition: fill .2s; }
.toggle-pass:hover svg, .toggle-pass.on svg { fill: var(--gold-2); }

/* linha lembrar / esqueci */
.row { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; gap: 10px; flex-wrap: wrap; }
.link {
  color: var(--gold-2); text-decoration: none; position: relative;
}
.link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s;
}
.link:hover::after { transform: scaleX(1); transform-origin: left; }

.check {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  font-size: .85rem; color: var(--muted); user-select: none;
}
.check input { position: absolute; opacity: 0; pointer-events: none; }
.check .box {
  width: 18px; height: 18px; flex: none; border-radius: 5px;
  border: 1px solid rgba(245, 196, 81, .4); background: rgba(0, 0, 0, .4);
  display: grid; place-items: center; transition: all .25s;
}
.check .box::after {
  content: ""; width: 5px; height: 9px; border: solid #1a0a04; border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); margin-top: -2px; transition: transform .25s cubic-bezier(.5, 1.8, .5, 1);
}
.check input:checked + .box {
  background: linear-gradient(180deg, var(--gold-1), var(--gold-3));
  border-color: var(--gold-2); box-shadow: 0 0 10px rgba(245, 196, 81, .6);
}
.check input:checked + .box::after { transform: rotate(45deg) scale(1); }
.check input:focus-visible + .box { outline: 2px solid var(--gold-2); outline-offset: 2px; }
.terms.invalid .box { border-color: var(--err); box-shadow: 0 0 10px rgba(255, 77, 77, .5); }

/* ---------- Botão principal ---------- */
.btn-primary {
  position: relative; overflow: hidden;
  margin-top: 4px; padding: 15px 20px;
  border: 0; border-radius: 11px; cursor: pointer;
  font-family: "Cinzel", serif; font-weight: 900; font-size: 1.05rem; letter-spacing: .14em;
  text-transform: uppercase; color: #fff8e6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5), 0 0 10px rgba(255, 200, 100, .6);
  background: linear-gradient(180deg, #ff7a35 0%, var(--red-2) 50%, var(--red-3) 100%);
  box-shadow:
    0 0 0 1px var(--gold-3),
    0 0 0 3px rgba(0, 0, 0, .6),
    0 0 0 4px rgba(245, 196, 81, .5),
    0 10px 30px rgba(212, 35, 26, .55),
    inset 0 1px 0 rgba(255, 220, 160, .6);
  transition: transform .15s, box-shadow .3s, filter .3s;
}
.btn-primary::before { /* brilho que varre o botão */
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, .55), transparent);
  transform: skewX(-20deg);
  animation: sweep 3.2s ease-in-out infinite;
}
@keyframes sweep { 0%, 60% { left: -75%; } 100% { left: 130%; } }
.btn-primary:hover {
  filter: brightness(1.15);
  box-shadow:
    0 0 0 1px var(--gold-2),
    0 0 0 3px rgba(0, 0, 0, .6),
    0 0 0 4px rgba(245, 196, 81, .8),
    0 12px 40px rgba(255, 90, 42, .75),
    inset 0 1px 0 rgba(255, 220, 160, .7);
}
.btn-primary:active { transform: translateY(2px) scale(.99); }
.btn-primary:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 4px; }

.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 230, 160, .7), transparent 70%);
  transform: scale(0); animation: ripple .7s ease-out forwards;
}
@keyframes ripple { to { transform: scale(4); opacity: 0; } }

.btn-spinner {
  display: none; width: 22px; height: 22px; margin: 0 auto;
  border: 3px solid rgba(255, 240, 200, .3); border-top-color: var(--gold-1);
  border-radius: 50%; animation: spin .8s linear infinite;
}
.btn-primary.loading .btn-label { display: none; }
.btn-primary.loading .btn-spinner { display: block; }
.btn-primary.loading { pointer-events: none; }

.switch { text-align: center; font-size: .85rem; color: var(--muted); }
.switch a { color: var(--gold-2); font-weight: 600; text-decoration: none; }
.switch a:hover { color: var(--gold-1); text-shadow: 0 0 10px rgba(245, 196, 81, .7); }

/* ---------- Status do servidor ---------- */
.server-status {
  display: flex; align-items: center; gap: 8px;
  font-size: .82rem; color: var(--muted);
  padding: 8px 16px; border-radius: 999px;
  background: rgba(0, 0, 0, .45); border: 1px solid rgba(245, 196, 81, .15);
}
.server-status strong { color: var(--text); font-weight: 600; }
.server-status .sep { opacity: .4; }
.dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(76, 217, 123, .7); animation: ping 1.8s infinite;
}
.server-status.down .dot { background: var(--err); animation: none; }
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(76, 217, 123, .7); }
  70%  { box-shadow: 0 0 0 9px rgba(76, 217, 123, 0); }
  100% { box-shadow: 0 0 0 0 rgba(76, 217, 123, 0); }
}

.footer {
  height: 48px; display: grid; place-items: center;
  font-size: .75rem; color: rgba(179, 154, 124, .6); letter-spacing: .05em;
  padding: 0 16px; text-align: center;
}

/* ---------- Toasts ---------- */
.toast-stack {
  position: fixed; top: 20px; right: 20px; z-index: 50;
  display: flex; flex-direction: column; gap: 10px; max-width: calc(100vw - 32px);
}
.toast {
  display: flex; align-items: center; gap: 10px;
  min-width: 260px; padding: 13px 16px; border-radius: 10px;
  background: rgba(20, 10, 7, .92); backdrop-filter: blur(10px);
  border: 1px solid rgba(245, 196, 81, .3); border-left: 4px solid var(--gold-2);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  font-size: .88rem;
  animation: toastIn .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.toast.error { border-left-color: var(--err); }
.toast.success { border-left-color: var(--ok); }
.toast.out { animation: toastOut .35s ease forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateX(110%); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(110%); } }

/* ---------- Responsivo ---------- */
@media (max-width: 960px) {
  .stage { grid-template-columns: 1fr; gap: 8px; padding: 24px 16px 8px; }
  .logo-wrap { width: min(340px, 80vw); }
  .tagline { font-size: .75rem; }
}
@media (max-width: 480px) {
  .panel { padding: 24px 18px 22px; }
  .logo-wrap { width: min(260px, 75vw); }
  .tab { font-size: .85rem; }
  .btn-primary { font-size: .95rem; }
  .toast-stack { right: 16px; left: 16px; }
  .toast { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}