:root{
  --bg:#0a0c0f; --panel:#12151a; --line:#232830; --txt:#e7eaee;
  --muted:#8b929c; --accent:#5b8def; --err:#e2686b;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  display:flex; align-items:center; justify-content:center;
  padding:24px calc(20px + env(safe-area-inset-left)) 24px calc(20px + env(safe-area-inset-right));
}
.wrap{width:100%; max-width:340px}
.panel{text-align:center; animation:fade .35s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.spinner{
  width:26px; height:26px; margin:0 auto 18px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--accent);
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.status{margin:0; font-size:13.5px; color:var(--muted)}
.ell i{animation:blink 1.4s infinite both; font-style:normal}
.ell i:nth-child(2){animation-delay:.2s}
.ell i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}

.mark{
  width:46px; height:46px; margin:0 auto 16px; border-radius:14px;
  display:grid; place-items:center; color:var(--accent);
  background:#161b23; border:1px solid var(--line);
}
.mark svg{width:24px; height:24px}
.ico-off{width:34px; height:34px; color:var(--err); margin-bottom:14px}

h1{margin:0 0 4px; font-size:19px; font-weight:600; letter-spacing:-.2px}
.sub{margin:0 0 22px; font-size:13px; color:var(--muted)}

input{
  width:100%; padding:12px 14px; font-size:16px; text-align:center;
  background:#171b21; color:var(--txt); border:1px solid var(--line);
  border-radius:10px; outline:none; transition:border-color .15s;
}
input:focus{border-color:var(--accent)}
button{
  width:100%; margin-top:9px; padding:12px; font-size:15px; font-weight:550;
  font-family:inherit; background:var(--accent); color:#fff; border:0;
  border-radius:10px; cursor:pointer; transition:filter .15s;
}
button:hover{filter:brightness(1.09)}
button.ghost{
  background:transparent; color:var(--muted);
  border:1px solid var(--line); margin-top:18px;
}
button.ghost:hover{color:var(--txt)}
.err{min-height:18px; margin:12px 0 0; font-size:13px; color:var(--err)}
.foot{margin:26px 0 0; font-size:11.5px; line-height:1.6; color:#5c636d}