/* Habi Games | sign in and registration. */
:root {
  color-scheme: light;
  --bg: #f8f7fc;
  --surface: #fff;
  --raised: #f0eef8;
  --line: #e2deed;
  --text: #17182c;
  --muted: #66677c;
  --mint: #7756f8;
  --danger: #ce4253;
  --success: #2f9275;
}
body { background: #f8f7fc; color: #17182c; font-family: Inter, "Avenir Next", "Segoe UI", system-ui, sans-serif; }
::selection { background: #d9d0ff; color: #17182c; }
.auth-shell { grid-template-columns: minmax(390px, 46%) minmax(480px, 54%); }
.auth-scene {
  position: relative;
  isolation: isolate;
  background: radial-gradient(circle at 90% 14%, #8369ea8f, transparent 30%), radial-gradient(circle at 10% 93%, #ff836473, transparent 35%), linear-gradient(143deg, #201947, #111327 70%);
  border-right: 0;
  color: #fff;
}
.auth-scene::after { content: ""; position: absolute; z-index: -1; width: 380px; height: 380px; right: -180px; bottom: 20%; border: 1px solid #ffffff2c; transform: rotate(24deg); border-radius: 60px; box-shadow: 0 0 0 40px #ffffff08, 0 0 0 80px #ffffff06; }
.auth-brand img { width: clamp(185px, 15vw, 218px); }
.auth-scene__topline { border-color: #ffffff30; color: #e0dbf1; }
.auth-scene__topline strong { color: #ffb69d; }
.auth-art-card { border-color: #ffffff4a; border-radius: 15px; box-shadow: 0 13px 28px #0004; }
.auth-scene__copy { color: #fff; }
.auth-scene__copy > p { color: #d3c9f9; }
.auth-scene__copy h1 { color: #fff; font-weight: 820; }
.auth-scene__copy h1 em { color: #ffa58c; }
.auth-scene__copy > span, .auth-scene__metric, .auth-scene__metric strong { color: #e0dced; }
.auth-panel { background: #f8f7fc; }
.auth-panel__inner { padding: 29px 0; }
.auth-back { color: #69667b; }
.auth-back span { color: #7756f8; }
.auth-kicker { color: #6b4bdc; }
.auth-panel h2 { color: #17182c; font-weight: 790; }
.auth-lead { color: #656579; }
.auth-field label { color: #29273b; }
.auth-label-row span { color: #747287; }
.auth-input { border-color: #dad5e6; background: #fff; border-radius: 11px; box-shadow: 0 3px 8px #29244208; }
.auth-input:hover { border-color: #ac9af6; }
.auth-input:focus-within { border-color: #7756f8; background: #fff; box-shadow: 0 0 0 3px #7756f81b; }
.auth-input > svg { stroke: #79738b; }
.auth-input input { color: #18182b; }
.auth-input input::placeholder { color: #838095; }
.auth-input button { color: #77718d; }
.auth-input button:hover { background: #f1ecff; }
.auth-check { color: #625f72; }
.auth-check input { accent-color: #7756f8; }
.auth-submit { min-height: 55px; background: #7756f8; border-color: #7756f8; color: #fff; border-radius: 11px; box-shadow: 0 8px 22px #7756f83b; }
.auth-submit:hover { background: #6545e8; }
.auth-switch { color: #656477; }
.auth-switch a, .auth-inline-link { color: #6542df; }
.auth-security { color: #79778b; }
.auth-security svg { stroke: #7756f8; }
.auth-message { background: #fff1f1; border-color: #f0bcc1; color: #973e48; }
.auth-message.is-success { background: #e9f7f2; border-color: #a8d8c6; color: #27735c; }
.password-meter i { background: #e4dfee; }
@media (max-width: 850px) {
  .auth-panel { background: #f8f7fc; }
  .auth-scene { border-top-color: #493a83; }
}
@media (max-width: 620px) {
  .auth-panel { padding-top: 104px; }
  .auth-panel__inner { padding: 15px 0; }
}