:root{
  color-scheme: light dark;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --bg: #EFEFF1;
  --field: #FFFFFF;
  --edge: rgba(0,0,0,0.13);
  --drop: rgba(0,0,0,0.05);
  --sep: rgba(0,0,0,0.1);
  --label: rgba(0,0,0,0.87);
  --placeholder: rgba(0,0,0,0.42);
  --muted: rgba(0,0,0,0.55);
  --focus: rgba(0,122,255,0.38);
  --red: #C4001A;

  --btn-top: #2E8BFF;
  --btn-bottom: #0068E6;
  --btn-shadow:
    inset 0 0.5px 0 rgba(255,255,255,0.32),
    0 0 0 0.5px rgba(0,56,150,0.5),
    0 1px 1.5px rgba(0,0,0,0.16);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg: #1E1E1E;
    --field: #2C2C2E;
    --edge: rgba(255,255,255,0.1);
    --drop: rgba(0,0,0,0.3);
    --sep: rgba(255,255,255,0.1);
    --label: rgba(255,255,255,0.9);
    --placeholder: rgba(255,255,255,0.38);
    --muted: rgba(255,255,255,0.56);
    --focus: rgba(10,132,255,0.5);
    --red: #FF5A50;

    --btn-top: #2B87FF;
    --btn-bottom: #0A64D8;
    --btn-shadow:
      inset 0 0.5px 0 rgba(255,255,255,0.22),
      0 0 0 0.5px rgba(0,0,0,0.45),
      0 1px 1.5px rgba(0,0,0,0.4);
  }
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--bg); color:var(--label);
  font-family:var(--font); font-size:14px; line-height:1.4;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}

.page{
  display:flex; flex-direction:column;
  min-height:100vh; min-height:100dvh;
  padding:max(24px, calc(50vh - 110px)) 20px 0;
}
.page.unlocking{ animation:fade-out .25s ease forwards; }

.panel{ width:100%; max-width:320px; margin:0 auto; }
@keyframes fade-out{ to{ opacity:0; } }

.sr{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

.group{
  overflow:hidden;
  border-radius:10px;
  background:var(--field);
  box-shadow:0 0 0 0.5px var(--edge), 0 1px 2px var(--drop);
  transition:box-shadow .12s ease;
}
.group:focus-within{ box-shadow:0 0 0 0.5px var(--edge), 0 0 0 3.5px var(--focus); }
.group .sep{ height:1px; margin-left:12px; background:var(--sep); }

.group input{
  display:block; width:100%; height:38px; padding:0 12px;
  border:0; border-radius:0; outline:none; background:transparent;
  color:var(--label); font:inherit; font-size:14px;
  -webkit-appearance:none; appearance:none;
}
.group input::placeholder{ color:var(--placeholder); opacity:1; }

.group input:-webkit-autofill,
.group input:-webkit-autofill:hover,
.group input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--label);
  -webkit-box-shadow:0 0 0 100px var(--field) inset;
  caret-color:var(--label);
}

.group input.code{ font-family:var(--mono); letter-spacing:0.04em; }
.group input.code:placeholder-shown{ font-family:var(--font); letter-spacing:0; }

.actions{ display:flex; align-items:flex-start; gap:14px; margin-top:14px; }

.btn{
  position:relative; flex:none; margin-left:auto;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:92px; height:30px; padding:0 16px;
  border:0; border-radius:7px;
  background:linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  box-shadow:var(--btn-shadow);
  color:#FFFFFF; font:inherit; font-size:13.5px; font-weight:500; letter-spacing:-0.005em;
  cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent;
  transition:filter .08s ease;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ filter:brightness(0.9); }
.btn:disabled{ cursor:default; }
.btn:focus-visible{ outline:none; box-shadow:var(--btn-shadow), 0 0 0 3.5px var(--focus); }

.btn.is-busy{ color:transparent; pointer-events:none; }
.btn.is-busy::after{
  content:""; position:absolute; width:12px; height:12px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.35); border-top-color:#FFFFFF;
  animation:spin .7s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }

.error{
  flex:1; min-width:0;
  padding-top:7px;
  font-size:12px; line-height:16px; text-align:left;
  color:var(--red);
}
.error.is-notice{ color:var(--muted); }

.links{
  margin-top:auto;
  display:flex; flex-wrap:wrap; justify-content:center; gap:6px 28px;
  padding:48px 0 28px;
  font-size:12.5px; line-height:18px; text-align:center;
  color:var(--muted);
}
.links a{
  color:var(--label);
  text-decoration:underline; text-decoration-color:var(--sep);
  text-decoration-thickness:1px; text-underline-offset:3px;
  transition:text-decoration-color .12s ease;
}
.links a:hover{ text-decoration-color:currentColor; }
.links a:focus-visible{ outline:none; border-radius:3px; box-shadow:0 0 0 3px var(--focus); }

.shake{ animation:shake .42s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake{
  15%{ transform:translateX(-7px); }
  30%{ transform:translateX(6px); }
  45%{ transform:translateX(-5px); }
  60%{ transform:translateX(3px); }
  75%{ transform:translateX(-2px); }
  100%{ transform:none; }
}

@media (pointer:coarse){
  .group input{ font-size:16px; height:44px; }
  .btn{ height:38px; min-width:108px; font-size:15px; border-radius:9px; }
  .error{ padding-top:11px; }
}

@media (prefers-reduced-motion: reduce){
  .shake, .page.unlocking{ animation:none; }
  .btn.is-busy::after{ animation-duration:1.4s; }
}