* { box-sizing: border-box; }
body { font-family: Inter, sans-serif; background: #000000; color: #ffffff; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }
.login-box { background: #1a1a1a; padding: 2rem; border-radius: 8px; width: 300px; }
input, button { font-family: Inter, sans-serif; }
input { width: 100%; padding: 10px; margin: 0; background: #2a2a2a; border: 1px solid #444; color: #fff; border-radius: 8px; }
button { width: 100%; padding: 10px; margin-top: 10px; background: #2a2a2a; color: #fff; border: 1px solid #3a3a3a; border-radius: 8px; cursor: pointer; font-family: Inter, sans-serif; font-size: 0.9rem; }
button:hover { background: #3a3a3a; }
.error { color: #ff5555; font-size: 0.9rem; margin-bottom: 1rem; text-align: center; }
h2 { margin-bottom: 1.5rem; text-align: center; }

@media (max-width: 480px) {
    .login-box { width: 85%; padding: 1.5rem; }
    input { padding: 0.75rem; font-size: 1rem; }
    button { padding: 0.75rem; margin-top: 0.75rem; font-size: 0.95rem; }
    .error { font-size: 0.85rem; margin-bottom: 0.75rem; }
}