html, body { margin: 0; padding: 0; }
body {
  font-family: Georgia, "Times New Roman", serif;
  color: #333;
  background-color: #ffffff;
}
.page { min-height: 100vh; display: flex; flex-direction: column; }
.header { background: #fff; border-bottom: 1px solid #e0e0e0; }
.header-inner { max-width: 800px; margin: 0 auto; padding: 20px 24px 12px; }
.header-name { font-size: 14px; color: #2c3e50; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; }
.accent-bar { height: 3px; background: #2c3e50; }
.main { max-width: 800px; margin: 0 auto; padding: 40px 24px; flex: 1; width: 100%; box-sizing: border-box; }
.hero { display: flex; align-items: center; gap: 32px; margin-bottom: 48px; }
.hero-photo { flex-shrink: 0; }
.photo-placeholder {
  width: 120px; height: 120px; border-radius: 50%;
  background: #2c3e50; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 700; font-family: Georgia, serif;
}
.hero-text { flex: 1; }
.hero-name { font-size: 32px; font-weight: 700; color: #222; margin: 0 0 8px 0; font-family: Georgia, serif; }
.hero-title { font-size: 18px; color: #555; margin: 0; }
.section { margin-bottom: 36px; }
.section-heading {
  font-size: 20px; font-weight: 700; color: #2c3e50;
  margin: 0 0 16px 0; padding-bottom: 8px;
  border-bottom: 2px solid #7f8c8d;
  font-family: Georgia, serif;
}
.paragraph { font-size: 16px; line-height: 1.7; color: #444; margin: 0; }
.list { margin: 0; padding-left: 24px; }
.list li { font-size: 16px; line-height: 1.8; color: #444; }
.links { display: flex; gap: 24px; flex-wrap: wrap; }
.links a {
  color: #2c3e50; font-size: 16px; text-decoration: none;
  border-bottom: 1px solid #7f8c8d; padding-bottom: 2px;
}
.footer { border-top: 1px solid #e0e0e0; background: #f9f9f9; padding: 16px 24px; }
.footer-inner {
  max-width: 800px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-brand { font-size: 13px; color: #888; }
.admin-link { font-size: 12px; color: #bbb; cursor: pointer; text-decoration: none; }
.admin-link:hover { color: #888; }

/* Auth forms */
.auth-card {
  max-width: 400px; margin: 60px auto; padding: 32px 28px;
  background: #fff; border: 1px solid #e0e0e0; border-radius: 4px;
}
.auth-card h1 { font-size: 22px; color: #2c3e50; margin: 0 0 18px 0; font-family: Georgia, serif; }
.auth-card label {
  display: block; font-size: 13px; color: #555; margin: 12px 0 4px;
}
.auth-card input {
  width: 100%; box-sizing: border-box;
  padding: 9px 11px; border: 1px solid #ccc; border-radius: 3px;
  font-size: 15px; font-family: Georgia, serif;
}
.auth-card input:focus { outline: none; border-color: #2c3e50; }
.auth-card button {
  width: 100%; margin-top: 18px;
  padding: 10px 14px; background: #2c3e50; color: #fff;
  border: none; border-radius: 3px; font-size: 15px;
  font-family: Georgia, serif; cursor: pointer;
}
.auth-card button:hover { background: #34495e; }
.auth-card button:disabled { background: #95a5a6; cursor: not-allowed; }
.auth-card .error { color: #c0392b; font-size: 13px; margin-top: 12px; min-height: 16px; }
.auth-card .alt { margin-top: 18px; font-size: 13px; color: #777; text-align: center; }
.auth-card .alt a { color: #2c3e50; }