body {
	background-color: #1a1a1a;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}
.auth-box {
	  background: #1e1e1e;
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #333;
  width: 100%;
  max-width: 400px;
}

.auth-box h1 {
	
	text-align: center;
	margin-bottom: 10px;
}
.form-group {
	margin-bottom: 15px;
}
.form-group label {
	display: block;
	color: var(--text-primary);
	margin-bottom: 5px;
	font-weight: 600;
	font-size: 0.9rem;
}
.form-group input {
	  width: 100%;
  padding: 10px;
  margin: 0;
  background: #2b2b2b;
  border: 1px solid #444;
  color: white;
  border-radius: 4px;
  box-sizing: border-box;
}
.btn-discord {
    background-color: #5865F2;
    width: 100%;
    color: white;
    padding: 10px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: normal;
    justify-content: center;
    margin-top: 10px;
}
.btn-discord:hover {
    background-color: #4752C4;
}
.btn-submit {
	 width: 100%;
  padding: 10px;
  background: #7ed957;
  border: none;
  cursor: pointer;
  font-weight: bold;
  border-radius: 4px;
}
.btn-submit:hover {
	background-color: var(--primary-2);
}
.alt-link {
	text-align: center;
	margin-top: 15px;
	font-size: 0.85rem;
	color: var(--text-secondary);
}
.alt-link a {
	color: #15fe15;
	text-decoration: none;
}

/* UX: Message Box */
.status-message {
	padding: 10px 15px;
	margin-bottom: 15px;
	border-radius: 4px;
	font-size: 0.9rem;
	font-weight: 600;
	display: none;
	text-align: center;
}
.status-message.error {
	color: #ffcccc;
	background-color: #581d1d;
	border: 1px solid #ff4444;
}
.status-message.success {
	color: #ccffcc;
	background-color: #1d581d;
	border: 1px solid #44ff44;
}
    #step-otp { display: none; }