:root {
  color-scheme: dark;
  --gold: #ddbb72;
  --gold-bright: #f1d58f;
  --teal: #57aaa5;
  --text: #ebe5db;
  --muted: #aaa59d;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 40px 0;
  overflow: hidden;
  color: var(--text);
  background:
    linear-gradient(180deg, rgba(2, 3, 3, 0.99) 0%, rgba(5, 4, 3, 0.96) 18%, rgba(18, 9, 5, 0.78) 48%, transparent 100%),
    radial-gradient(circle at 8% 28%, rgba(224, 129, 43, 0.3), transparent 25%),
    radial-gradient(circle at 92% 70%, rgba(176, 73, 25, 0.3), transparent 28%),
    repeating-linear-gradient(0deg, rgba(255, 211, 130, 0.025) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #120804 0%, #3a1b0b 10%, #1c0d06 20%, #1c0d06 80%, #3a1b0b 90%, #120804 100%);
  font-family: Arial, Helvetica, sans-serif;
}

body::before,
body::after {
  content: "";
  position: fixed;
  top: 0;
  bottom: 0;
  width: 1px;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(235, 164, 70, 0.78) 14%, rgba(108, 57, 22, 0.9) 50%, rgba(235, 164, 70, 0.78) 86%, transparent);
  box-shadow: 0 0 30px rgba(222, 112, 35, 0.35);
}

body::before { left: 20vw; }
body::after { right: 20vw; }

button,
input { font: inherit; }

.account-shell {
  position: relative;
  width: 60vw;
  height: min(720px, calc(100svh - 80px));
  min-height: 560px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(221, 187, 114, 0.6);
  background: #070a0c;
  box-shadow: inset 0 0 0 4px #020304, 0 28px 90px rgba(0, 0, 0, 0.84);
}

.gate-art {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: url("/eter-auth-gate.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.account-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(560px, calc(100% - 96px));
  min-width: 0;
  padding: clamp(28px, 4vw, 52px);
  color: #f3ede3;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);
}

.account-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-bottom: 36px;
  color: var(--gold-bright);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  letter-spacing: 0.25em;
  text-decoration: none;
  text-indent: 0.25em;
}

.account-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 30px;
  border-bottom: 1px solid rgba(221, 187, 114, 0.22);
}

.account-tabs button {
  min-height: 50px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #89867f;
  background: transparent;
  cursor: pointer;
}

.account-tabs button.is-active {
  border-bottom-color: var(--gold);
  color: #f4ecdf;
}

.account-form {
  display: grid;
  gap: 10px;
}

.account-form[hidden] { display: none; }

.account-form h1 {
  margin: 0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.75rem;
  font-weight: 400;
}

.account-form label {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.85rem;
}

.account-form input {
  width: 100%;
  min-height: 46px;
  padding: 10px 13px;
  border: 1px solid rgba(221, 187, 114, 0.28);
  border-radius: 0;
  outline: 0;
  color: #f6f1e8;
  background: rgba(2, 5, 6, 0.82);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(3px);
}

.account-form input:focus {
  border-color: var(--teal);
  box-shadow: inset 4px 0 0 #378e8b;
}

.submit-button {
  min-height: 48px;
  margin-top: 20px;
  border: 1px solid #9b7131;
  color: #171006;
  background: linear-gradient(180deg, #f0d287 0 26%, #c08b39 26% 78%, #7e4f1c 78% 100%);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), 4px 4px 0 rgba(0, 0, 0, 0.58);
  font-weight: 700;
  cursor: pointer;
}

.submit-button:disabled { opacity: 0.55; cursor: wait; }

.form-message {
  min-height: 22px;
  margin: 16px 0 0;
  color: #d9807b;
  font-size: 0.84rem;
  text-align: center;
}

@media (max-width: 760px) {
  body { padding: 16px; overflow: auto; }
  body::before,
  body::after { display: none; }
  .account-shell {
    width: calc(100vw - 32px);
    height: auto;
    min-height: calc(100svh - 32px);
  }
  .gate-art { background-position: center; }
  .account-panel { width: calc(100% - 32px); padding: 30px 18px 36px; }
  .account-brand { margin-bottom: 20px; }
}

@media (max-height: 700px) and (min-width: 761px) {
  body { padding-block: 20px; }
  .account-shell { height: calc(100svh - 40px); min-height: 0; }
  .account-panel { padding-block: 30px; }
  .account-brand { margin-bottom: 18px; }
  .account-tabs { margin-bottom: 18px; }
  .account-form h1 { margin-bottom: 8px; }
}