:root{
  --bg:#282a36;
  --panel:#1f2029;
  --line:#44475a;
  --fg:#f8f8f2;
  --muted:#6272a4;
  --pink:#ff79c6;
  --purple:#bd93f9;
  --cyan:#8be9fd;
  --green:#50fa7b;
  --orange:#ffb86c;
  --red:#ff5555;
  --yellow:#f1fa8c;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font:14px/1.35 ui-sans-serif, system-ui, -apple-system, Segoe UI, Ubuntu, Cantarell, Noto Sans, Arial, sans-serif;
}
a{color:inherit}

/* Scrollbars (Dracula-ish) */
*{scrollbar-width:thin;scrollbar-color:#282a36 #20212a}
*::-webkit-scrollbar{width:12px;height:12px}
*::-webkit-scrollbar-track{background:#20212a}
*::-webkit-scrollbar-thumb{background:#282a36;border-radius:999px;border:3px solid #20212a}
*::-webkit-scrollbar-thumb:hover{background:#313341}
*::-webkit-scrollbar-button{width:0;height:0;display:none}
*::-webkit-scrollbar-corner{background:#20212a}

body{display:flex;align-items:center;justify-content:center}
form{display:flex;gap:1rem;align-items:center;justify-content:center}
input{
  width:140px;
  height:44px;
  padding:0 1rem;
  border:1px solid rgba(68,71,90,.9);
  border-radius:14px;
  background:rgba(40,42,54,.9);
  color:var(--fg);
  outline:none;
  font:14px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
input:focus{border-color:rgba(189,147,249,.85)}
input.otp-err{animation:otp-border-flash 1s linear 1}
@keyframes otp-border-flash{
  0%,70%{border-color:var(--red)}
  100%{border-color:rgba(68,71,90,.9)}
}
.iconbtn{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(40,42,54,.9);
  color:var(--fg);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  padding:0;
}
.iconbtn:hover{border-color:rgba(189,147,249,.7);color:var(--purple)}
.iconbtn svg{width:18px;height:18px;display:block}