:root {
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #07110f;
  color: #f4fffb;
  --line: #244139;
  --line-bright: #397163;
  --green: #61f59c;
  --cyan: #50d8ff;
}

* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; background: linear-gradient(rgb(20 51 43 / 32%) 1px, transparent 1px), linear-gradient(90deg, rgb(20 51 43 / 32%) 1px, transparent 1px), radial-gradient(circle at 50% 0%, #123329 0, #07110f 42%, #050b0a 100%); background-size: 32px 32px, 32px 32px, auto; }
button, input { font: inherit; }
.auth-screen { min-height: 100vh; display: grid; place-items: center; padding: calc(env(safe-area-inset-top) + 24px) 20px calc(env(safe-area-inset-bottom) + 24px); }
.auth-panel { position: relative; width: min(100%, 390px); display: grid; gap: 17px; padding: 26px; overflow: hidden; border: 1px solid var(--line-bright); border-radius: 8px; background: rgb(10 24 20 / 94%); box-shadow: 0 30px 80px rgb(0 0 0 / 42%), inset 0 1px rgb(255 255 255 / 4%); }
.auth-panel::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: linear-gradient(90deg, var(--green), var(--cyan), transparent 86%); }
.auth-brand { display: flex; align-items: center; gap: 18px; padding: 8px 0 10px; }
.auth-brand p { margin: 0 0 5px; color: var(--green); font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.auth-brand h1 { margin: 0; font-size: 25px; line-height: 1.15; letter-spacing: 0; }
.brand-mark { position: relative; width: 54px; height: 54px; display: grid; flex: 0 0 auto; place-items: center; border: 1px solid var(--green); border-radius: 50%; background: #0b1c16; box-shadow: 0 0 24px rgb(97 245 156 / 18%); }
.brand-mark::before, .brand-mark::after { content: ""; position: absolute; background: var(--green); opacity: 0.4; }
.brand-mark::before { width: 68px; height: 1px; }
.brand-mark::after { width: 1px; height: 68px; }
.brand-mark i { width: 18px; height: 18px; border: 4px solid #dffff0; border-radius: 50%; box-shadow: 0 0 12px var(--green); }
.field-row { display: grid; gap: 7px; color: #a9c5bc; font-size: 12px; font-weight: 650; }
.field-row input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid var(--line); border-radius: 7px; outline: none; background: #08130f; color: #f4fffb; caret-color: var(--green); font-size: 16px; }
.field-row input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgb(80 216 255 / 10%); }
button { min-height: 44px; border: 1px solid var(--green); border-radius: 7px; background: var(--green); color: #052013; font-size: 14px; font-weight: 650; box-shadow: 0 8px 24px rgb(97 245 156 / 15%); }
button:disabled { opacity: 0.45; }
.status { min-height: 34px; margin: 0; display: flex; align-items: center; gap: 9px; padding: 7px 11px; border-left: 2px solid var(--green); background: rgb(11 28 22 / 72%); color: #a9c5bc; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.4; }
.status::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }