:root{
  --gold: #dbb460;
  --gold-mid: #c79f4a;
  --bg-deep: #14100c;
  --bg-card: #201a14;
  --text: #f5efe4;
  --text-dim: #9a8f7c;
  --border: rgba(219,180,96,0.18);
  --border-hi: rgba(219,180,96,0.5);
  --green: #6fbf73;
  --red: #d9695a;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  background:
    radial-gradient(ellipse 600px 400px at 50% 0%, rgba(219,180,96,0.12), transparent 65%),
    var(--bg-deep);
  color:var(--text);
}
.card{
  width:100%;
  max-width:380px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:20px;
  padding:32px 26px;
  text-align:center;
  box-shadow:0 20px 50px rgba(0,0,0,0.4);
}
.brand{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:800;
  font-size:15px;
  margin-bottom:22px;
  color:var(--text-dim);
  letter-spacing:.3px;
}
.brand b{color:var(--gold);}
h1{font-size:20px; margin:0 0 8px; font-weight:800;}
p.lead{color:var(--text-dim); font-size:13.5px; margin:0 0 24px; line-height:1.6;}

.field{margin-bottom:14px; text-align:left;}
.field label{display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px;}
.field input{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.25);
  color:var(--text);
  font-size:15px;
  outline:none;
  transition:border-color .2s;
}
.field input:focus{border-color:var(--border-hi);}

.otp-row{display:flex; gap:8px; justify-content:center; margin:18px 0;}
.otp-row input{
  width:42px; height:52px;
  text-align:center;
  font-size:20px;
  border-radius:10px;
  border:1px solid var(--border);
  background:rgba(0,0,0,0.25);
  color:var(--text);
  outline:none;
}
.otp-row input:focus{border-color:var(--border-hi);}

.btn{
  display:block;
  width:100%;
  padding:14px;
  border-radius:12px;
  border:none;
  font-weight:800;
  font-size:15px;
  cursor:pointer;
  background:linear-gradient(145deg, var(--gold), var(--gold-mid));
  color:#1a1610;
  transition:transform .15s, opacity .15s;
}
.btn:active{transform:scale(0.98);}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.btn-ghost{
  background:transparent;
  color:var(--text-dim);
  border:1px solid var(--border);
  font-weight:600;
  font-size:13px;
  margin-top:10px;
}

.msg{margin-top:14px; font-size:13px; padding:10px 12px; border-radius:10px; display:none;}
.msg.show{display:block;}
.msg-error{background:rgba(217,105,90,0.14); color:#f0aaa1;}
.msg-success{background:rgba(111,191,115,0.14); color:#a8dcab;}
.msg-info{background:rgba(219,180,96,0.1); color:var(--gold);}

.spinner{
  display:inline-block; width:14px; height:14px; border-radius:50%;
  border:2px solid rgba(0,0,0,0.3); border-top-color:#1a1610;
  animation:spin .7s linear infinite; margin-right:6px; vertical-align:-2px;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== Alive screen ===== */
.pulse-ring{
  width:150px; height:150px; border-radius:50%;
  margin:0 auto 26px;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle, rgba(219,180,96,0.18), transparent 70%);
  border:2px solid var(--border-hi);
  position:relative;
}
.pulse-ring::before{
  content:'';
  position:absolute; inset:-8px;
  border-radius:50%;
  border:1px solid var(--border);
  animation:breathe 3s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1); opacity:.6;} 50%{transform:scale(1.08); opacity:1;}}
.pulse-ring span{font-size:52px;}

.status-line{font-size:12.5px; color:var(--text-dim); margin-top:16px;}
.status-line b{color:var(--green);}