:root {
  color: #f4f5f7;
  background: #101316;
  font-family: Inter, ui-sans-serif, system-ui, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: linear-gradient(145deg, #101316 0 55%, #17201c 100%);
}

.auth-panel {
  width: min(100%, 390px);
  padding: 32px;
  border: 1px solid #343b3f;
  border-radius: 6px;
  background: #191d20;
  box-shadow: 0 24px 60px rgb(0 0 0 / 32%);
}

.brand-mark {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 2px solid #d6b461;
  color: #d6b461;
  font-weight: 800;
}

.eyebrow { margin: 22px 0 4px; color: #9ba6a9; font-size: 12px; text-transform: uppercase; }
h1 { margin: 0 0 24px; font-size: 28px; letter-spacing: 0; }

.mode-switch { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 22px; border-bottom: 1px solid #343b3f; }
.mode-switch button { padding: 11px; border: 0; border-bottom: 2px solid transparent; color: #9ba6a9; background: transparent; cursor: pointer; }
.mode-switch button[aria-selected="true"] { border-color: #d6b461; color: #fff; }

form { display: grid; gap: 16px; }
form[hidden] { display: none; }
label { display: grid; gap: 7px; color: #c8ced0; font-size: 13px; }
input { width: 100%; min-height: 44px; border: 1px solid #454e52; border-radius: 4px; padding: 10px 12px; color: #fff; background: #111517; font: inherit; }
input:focus { border-color: #d6b461; outline: 2px solid rgb(214 180 97 / 20%); }
button { font: inherit; }
.primary { min-height: 44px; margin-top: 4px; border: 0; border-radius: 4px; color: #141414; background: #d6b461; font-weight: 750; cursor: pointer; }
.primary:disabled { cursor: wait; opacity: .6; }
.note, .message { margin: 16px 0 0; color: #aeb7b9; font-size: 13px; line-height: 1.5; }
.message.error { color: #ff9e96; }
.message.success { color: #9fd6af; }

@media (max-width: 480px) {
  .auth-shell { padding: 0; place-items: stretch; }
  .auth-panel { width: 100%; min-height: 100vh; padding: 28px 22px; border: 0; }
}