/* Authentication redesign: login, signup and developer/admin share one calm, secure flow. */
.auth {
  --auth-ink:#10140e; --auth-muted:#74796f; --auth-paper:#fffefa; --auth-line:#e5e8de; --auth-accent:#b8f36b;
  position:relative; isolation:isolate; display:none; align-items:center; justify-content:center;
  min-height:100vh; min-height:100svh; height:100vh; height:100svh; width:100%; padding:36px 20px; overflow-x:hidden; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#f7f8f2; color:var(--auth-ink); font-family:'Space Grotesk',sans-serif;
}
.auth.show { display:flex; }
.auth::before { content:''; position:absolute; inset:0; z-index:-2; background-image:radial-gradient(circle at 1px 1px,#b6bdad 1px,transparent 0); background-size:24px 24px; opacity:.25; mask-image:linear-gradient(to bottom,#000,transparent 85%); pointer-events:none; }
.auth::after { content:''; position:absolute; width:min(68vw,670px); aspect-ratio:1; right:-27%; top:50%; z-index:-1; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle,#eaf4dc 0,#f1f5e9 43%,transparent 70%); pointer-events:none; }
.auth-wrap { width:min(100%,454px); margin:auto; position:relative; z-index:1; }
.auth-back { width:42px; height:42px; display:grid; place-items:center; margin:0 0 19px; border:1px solid #dfe3d7; border-radius:13px; background:#ffffffcc; box-shadow:0 4px 12px #18200e0d; color:var(--auth-ink); font-size:19px; transition:transform .18s,background .18s; }
.auth-back:hover { transform:translateX(-2px); background:#fff; }
.auth-brand { display:flex; align-items:center; gap:9px; margin:0 0 17px 2px; color:var(--auth-ink); font-weight:700; font-size:17px; letter-spacing:-.07em; }
.auth-brand-mark { width:29px; height:29px; display:grid; place-items:center; border-radius:9px; background:var(--auth-ink); color:var(--auth-accent); font-size:15px; transform:rotate(-4deg); }
.auth-brand>span:nth-child(2)>span { color:#78b934; }
.auth-brand>i { width:6px; height:6px; margin-left:auto; border-radius:50%; background:#96d45b; box-shadow:0 0 0 4px #96d45b22; }
.auth-card { position:relative; padding:clamp(24px,5vw,34px); border:1px solid #e6e8df; border-radius:22px; background:var(--auth-paper); box-shadow:0 24px 65px #27301d12,0 3px 10px #27301d08; }
.auth-kicker { display:flex; align-items:center; gap:8px; margin:0 0 17px; color:#73796c; font:600 9px 'IBM Plex Mono',monospace; letter-spacing:.1em; }
.auth-kicker-dot { width:7px; height:7px; border-radius:50%; background:#83c94b; box-shadow:0 0 0 4px #83c94b20; }
.auth-badge { margin-left:auto; padding:6px 9px; border:1px solid #ecd9a9; border-radius:99px; background:#fbf4df; color:#795d22; font:700 8px 'IBM Plex Mono',monospace; letter-spacing:.08em; }
.auth-title { margin:0 0 8px; font-size:clamp(32px,7vw,41px); font-weight:600; line-height:1.05; letter-spacing:-.065em; }
.auth-sub { max-width:360px; margin:0 0 25px; color:var(--auth-muted); font-size:13px; line-height:1.65; letter-spacing:-.012em; }
.auth-field { margin:0 0 16px; }
.auth-field>label { display:block; margin:0 0 7px 1px; color:#34382f; font:600 9px 'IBM Plex Mono',monospace; letter-spacing:.09em; text-transform:uppercase; }
.auth-label-soft { color:#96998f; font:400 9px 'Space Grotesk',sans-serif; letter-spacing:0; text-transform:none; }
.auth-input-wrap { min-height:52px; display:flex; align-items:center; gap:10px; padding:0 13px; border:1px solid #dfe2d8; border-radius:12px; background:#fff; transition:border-color .18s,box-shadow .18s,background .18s; }
.auth-input-wrap:focus-within { border-color:#8dbf5d; box-shadow:0 0 0 4px #9ad76924; background:#fff; }
.auth-input-icon { width:18px; flex:0 0 18px; color:#94998b; text-align:center; font:500 15px 'IBM Plex Mono',monospace; }
.auth-input-wrap input { width:100%; min-width:0; height:50px; padding:0; border:0; outline:none; background:transparent; color:var(--auth-ink); font:500 14px 'Space Grotesk',sans-serif; letter-spacing:0; box-shadow:none; transform:none; }
.auth-input-wrap input:focus { box-shadow:none; transform:none; }
.auth-input-wrap input::placeholder { color:#b2b5ac; font-weight:400; }
.auth-pin-wrap input { font-family:'IBM Plex Mono',monospace; font-size:16px; letter-spacing:.24em; }
.auth-pin-toggle { width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#747a6f; transition:background .15s,color .15s; }
.auth-pin-toggle:hover,.auth-pin-toggle:focus-visible { background:#f1f5e9; color:#456e28; outline:none; }
.auth-pin-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.auth-pin-toggle .auth-eye-hide { display:none; }
.auth-pin-visible .auth-pin-toggle .auth-eye-show { display:none; }
.auth-pin-visible .auth-pin-toggle .auth-eye-hide { display:block; }
.auth-field-hint { display:block; margin:6px 2px 0; color:#999d93; font:400 9px 'IBM Plex Mono',monospace; letter-spacing:.015em; }
.auth-check { display:flex; gap:10px; align-items:flex-start; margin:9px 0 0; padding:12px; border:1px solid #e3e6dd; border-radius:12px; background:#fbfcf8; cursor:pointer; font-size:11px; line-height:1.45; }
.auth-check.warn { background:#fbfaf3; border-color:#ece6ce; }
.auth-check input { width:16px; height:16px; flex:0 0 16px; margin:1px 0 0; accent-color:#74ae3f; }
.auth-check>span { display:block; }
.auth-check .t { display:block; color:#30352b; font-weight:600; }
.auth-check .s { display:block; margin-top:3px; color:#878b81; font-size:10px; }
.auth-submit { width:100%; min-height:51px; display:flex; align-items:center; justify-content:center; gap:12px; margin-top:19px; padding:12px 18px; border:0; border-radius:13px; background:#11150e; color:#fff; font:700 12px 'Space Grotesk',sans-serif; letter-spacing:.02em; box-shadow:0 6px 16px #10140e1e; transition:transform .18s,background .18s,box-shadow .18s; }
.auth-submit b { color:var(--auth-accent); font-size:15px; font-weight:500; }
.auth-submit:hover { transform:translateY(-1px); background:#22291d; box-shadow:0 9px 20px #10140e24; }
.auth-submit:active { transform:translateY(0) scale(.99); }
.auth-msg { min-height:0; margin:10px 0 0; text-align:center; font:500 10px 'IBM Plex Mono',monospace; line-height:1.6; }
.auth-msg:not(:empty) { min-height:16px; }
.auth-msg.err { color:#b4233b; }.auth-msg.ok { color:#26783d; }
.auth-switch { margin-top:17px; color:#85897f; text-align:center; font-size:11px; }
.auth-switch button { padding:3px 1px; border:0; border-bottom:1px solid #9bbd7e; background:none; color:#2b3924; font:700 11px 'Space Grotesk',sans-serif; }
.auth-footnote { display:flex; justify-content:space-between; gap:12px; margin:17px 3px 0; color:#a0a399; font:500 8px 'IBM Plex Mono',monospace; letter-spacing:.07em; }
.auth-footnote i { color:#8baf6b; font-style:normal; }
@media (max-width:520px) {
  .auth { align-items:flex-start; padding:20px 18px 26px; }
  .auth-wrap { margin:auto; }
  .auth-back { width:38px; height:38px; margin-bottom:15px; }
  .auth-brand { margin-bottom:13px; }
  .auth-card { padding:23px 20px 21px; border-radius:19px; }
  .auth-sub { margin-bottom:21px; }
  .auth-footnote { font-size:7px; }
}
@media (max-height:690px) and (min-width:521px) {
  .auth { align-items:flex-start; padding-top:18px; padding-bottom:18px; }
  .auth-wrap { margin:auto; }
  .auth-back { margin-bottom:10px; }
  .auth-brand { margin-bottom:10px; }
  .auth-card { padding-top:21px; padding-bottom:20px; }
  .auth-sub { margin-bottom:17px; }
  .auth-field { margin-bottom:12px; }
}
@media (prefers-reduced-motion:reduce) { .auth *, .auth *::before, .auth *::after { transition-duration:.01ms !important; } }