body {
 font-family: -apple-system, BlinkMacSystemFont, "Segoe
UI", Roboto, Helvetica, Arial, sans-serif;
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 margin: 0;
 background-color: #1a1a1a;
 color: #f0f0f0;
}
.container {
 text-align: center;
}
.card {
 background-color: #2c2c2c;
 padding: 40px;
 border-radius: 12px;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
 border: 1px solid #444;
 width: 350px;
}
h1 {
 color: #ffffff;
 margin-bottom: 15px;
}
p {
     color: #b0b0b0;
 margin-bottom: 30px;
}
button {
 width: 100%;
 padding: 15px;
 border: none;
 border-radius: 8px;
 font-size: 16px;
 font-weight: bold;
 cursor: pointer;
 transition: background-color 0.3s, transform 0.2s;
 background-color: #007bff;
 color: white;
}
button:hover {
 background-color: #0056b3;
 transform: translateY(-2px);
}
button:active {
 transform: translateY(0);
}
.hidden {
 display: none;
}
#status {
 margin-top: 20px;
 font-weight: bold;
 min-height: 20px;
}
.status-hidden {
 display: none;
}
.status-success {
     color: #28a745;
 display: block;
}
.status-error {
 color: #dc3545;
 display: block;
}