/* Shared look of the stand-alone pages (password reset, support): the dark forest sky, a glowing icon, a lime button. */
:root { --lime: #d5f161; --ink: #0c1b14; --serif: "New York", ui-serif, "Newsreader", Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 72px 20px 40px;
  background: radial-gradient(120% 80% at 50% 0%, #1d3a2b, #08130d 70%); background-attachment: fixed;
  color: #fff; font: 16px/1.5 var(--sans); -webkit-font-smoothing: antialiased;
}
.home {
  position: fixed; top: calc(16px + env(safe-area-inset-top)); left: 16px; display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 14px 0 10px; border-radius: 999px; color: rgba(255, 255, 255, .85); text-decoration: none; font-weight: 600; font-size: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.home svg { width: 16px; height: 16px; }
.card { width: min(400px, 100%); text-align: center; }
.logo { width: 76px; height: 76px; border-radius: 20px; display: block; margin: 0 auto 20px; box-shadow: 0 0 60px rgba(213, 241, 97, .25), 0 20px 50px rgba(0, 0, 0, .45); }
h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1.1; }
h1 em { font-style: italic; color: var(--lime); }
.lead { margin: 10px 0 28px; color: rgba(255, 255, 255, .7); }
form { display: grid; gap: 14px; text-align: left; }
label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.field { position: relative; }
input {
  width: 100%; height: 54px; padding: 0 48px 0 16px; border-radius: 16px; font: inherit; font-size: 16px; color: #fff; outline: none;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: border-color .15s, background .15s;
}
input:focus { border-color: var(--lime); background: rgba(255, 255, 255, .11); }
.eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .6); cursor: pointer; display: grid; place-items: center; }
.eye:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.eye svg { width: 20px; height: 20px; }
.hint { margin: -4px 0 0; font-size: 13px; color: rgba(255, 255, 255, .55); }
.msg { min-height: 1.4em; margin: 0; font-size: 14px; color: #ff9a85; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 54px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--lime); color: var(--ink); font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .12s, opacity .12s;
}
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .45; cursor: default; transform: none; }
.btn.glass { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.state { display: grid; gap: 12px; }
.badge { width: 64px; height: 64px; margin: 0 auto 4px; border-radius: 50%; display: grid; place-items: center; background: rgba(213, 241, 97, .16); color: var(--lime); }
.badge.bad { background: rgba(255, 154, 133, .14); color: #ff9a85; }
.badge svg { width: 30px; height: 30px; }
.state p { margin: 0 0 8px; color: rgba(255, 255, 255, .75); }
[hidden] { display: none !important; }

/* Support form */
textarea {
  width: 100%; min-height: 150px; padding: 14px 16px; border-radius: 16px; font: inherit; font-size: 16px; color: #fff; outline: none; resize: vertical;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); transition: border-color .15s, background .15s;
}
textarea:focus { border-color: var(--lime); background: rgba(255, 255, 255, .11); }
input.plain { padding-right: 16px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.signed { margin: -12px 0 6px; font-size: 14px; color: rgba(255, 255, 255, .6); }