:root{
  --bg:#11151c;
  --surface:#171c25;
  --surface-2:#1d232e;
  --border:#2a323f;
  --text:#e7eaf1;
  --text-dim:#9aa3b5;
  --text-faint:#697184;
  --accent:#7c93e8;
  --accent-bg:#1b2030;
  --danger:#d8627a;
  --danger-bg:#281b22;
  --mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding:20px;
}
.card{
  width:100%;
  max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:30px 28px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:22px;
}
.brand-mark{font-size:18px;color:var(--accent);line-height:1;}
.brand-title{font-family:var(--mono);font-weight:600;font-size:14px;}
.brand-sub{font-family:var(--mono);font-size:10.5px;color:var(--text-faint);letter-spacing:.06em;text-transform:uppercase;margin-top:2px;}

h1{
  font-family:var(--mono);
  font-size:18px;
  font-weight:600;
  margin:0 0 6px;
}
.subtitle{
  color:var(--text-dim);
  font-size:13.5px;
  margin:0 0 22px;
  line-height:1.5;
}

label{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-faint);
  margin-bottom:6px;
}
input[type="text"],input[type="password"]{
  width:100%;
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px;
  color:var(--text);
  font-family:var(--sans);
  font-size:14.5px;
  padding:10px 12px;
  margin-bottom:16px;
  outline:none;
}
input[type="text"]:focus,input[type="password"]:focus{border-color:var(--accent);}

.totp-input{
  font-family:var(--mono);
  font-size:22px;
  letter-spacing:.3em;
  text-align:center;
}

button{
  width:100%;
  background:var(--accent);
  color:#11151c;
  border:none;
  font-family:var(--mono);
  font-weight:600;
  font-size:13.5px;
  padding:11px;
  border-radius:6px;
  cursor:pointer;
}
button:hover{opacity:.9;}

.alert{
  background:var(--danger-bg);
  border:1px solid var(--danger);
  color:var(--danger);
  font-size:13px;
  padding:10px 12px;
  border-radius:6px;
  margin-bottom:16px;
}

.hint{
  margin-top:18px;
  font-size:12.5px;
  color:var(--text-faint);
  line-height:1.5;
}
.hint a{color:var(--accent);}

.secret-box{
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:6px;
  padding:12px;
  font-family:var(--mono);
  font-size:13px;
  word-break:break-all;
  margin-bottom:16px;
  color:var(--text);
}