:root{
  --bg-start: #303e4a;
  --bg-end: #28333d;
  --card: #28333d;
  --accent: #77abd9;
  --muted: #b7c5d1;
  --text: #f3f3f3;
  --topbar: rgba(40,51,61,0.9);
  --shadow: rgba(0,0,0,0.75);
  --error: #f92772;
}

html,body{height:100%;margin:0}
body{
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Page wrapper + logo */
.center-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:100vh;
  padding:48px 16px;
  box-sizing:border-box;
}
.logo-inverted{
  display:block;
  width:160px;
  max-width:60%;
  height:auto;
  margin:0 auto;
  pointer-events:none;
  user-select:none;
}

/* Card */
.card{
  width:100%;
  max-width:420px;
  background:var(--card);
  border-radius:14px;
  padding:24px;
  box-shadow:0 0 25px var(--shadow);
  border:1px solid #28333d;
  margin-top:0;
}

/* Buttons row (centered with spacing) */
.btn-row{
  display:flex;
  justify-content:center;
  gap:14px;
  align-items:center;
  margin:18px 0;
}

/* Buttons */
.btn{
  padding:10px 16px;
  border-radius:10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.06));
  color: var(--text);
  border: 1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  font-weight:700;
  letter-spacing:0.6px;
  transition:transform .08s ease, box-shadow .12s ease, background .12s;
  min-width:110px;
  text-align:center;
}
.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
.btn-ghost{
  background: transparent;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Form fields */
.field{
  display:flex;
  flex-direction:column;
  margin-bottom:12px;
}
label{
  font-size:.9rem;
  color:var(--muted);
  margin-bottom:8px;
}
.label-small{
  font-size:.7rem;
  color:var(--muted);
  margin-top:8px;
  margin-bottom:8px;
}

.input, input{
  padding:10px 12px;
  border:1px solid rgba(0,0,0,0.12);
  border-radius:8px;
  font-size:1rem;
  background: rgba(255,255,255,0.06);
  color:var(--text);
  outline:none;
  transition:box-shadow .12s ease, border-color .12s ease;
  width:100%;
  box-sizing:border-box;
}
.input:focus, input:focus{
  box-shadow:0 8px 30px rgba(37,99,235,0.06);
  border-color: rgba(119,171,217,0.9);
}

/* Actions row in form */
.actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:6px;
}

/* Status and back button */
#status{
  margin-top:12px;
  color:var(--muted);
  font-size:.95rem;
  text-align:center;
}
#statusWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  margin-top:8px;
}
#backToActions{
  display:none;
  align-self:center;
}

/* Spinner animation keyframes */
@keyframes spin{ to{ transform: rotate(360deg) } }

img{vertical-align:middle}

/* Responsive tweaks */
@media (max-width:420px){
  .card{padding:18px;border-radius:12px}
  .center-wrap{padding:36px 12px}
  .btn{min-width:92px;padding:8px 12px}
  .logo-inverted{width:120px;max-width:70%}
}