:root { --bg1: #f8f9fa; --bg2: #777; --card: #fff; --text: #222; }
html, body { height: 100%; }
body {
  margin: 0;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
.page { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px 12px; }
.card { width: 100%; max-width: 380px; background: var(--card); color: var(--text);
  border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.08); padding: 20px; }
.h1 { margin: 0 0 12px; font-size: 20px; font-weight: 700; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
input[type=text], input[type=password] { padding: 10px 12px; border: 1px solid #dcdcdc; border-radius: 10px; outline: 0; }
button { width: 100%; padding: 10px 12px; border: 0; border-radius: 10px; background: #0d6efd; color: #fff; cursor: pointer; margin-top: 8px; }
a.btn { display: inline-block; text-decoration: none; text-align: center; width: 100%; padding: 10px 12px; border-radius: 10px; background: #6c757d; color: #fff; }
.center { text-align: center; }