:root { color-scheme: light; --ink: #123d35; --accent: #176747; --paper: #fcfaf5; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; color: var(--ink); background: radial-gradient(ellipse at 10% 0%, #dce8d8, transparent 60%), linear-gradient(135deg, #f4eee1, #e8efe7); font-family: "Avenir Next", "Trebuchet MS", sans-serif; }
.login-card { width: min(100%, 520px); padding: clamp(24px, 6vw, 48px); border: 1px solid #123d351f; border-radius: 24px; background: var(--paper); box-shadow: 0 24px 70px #123d3510; }
.login-brand { font-weight: 800; font-size: 24px; text-decoration: none; }
.login-label { margin-top: 32px; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 700; }
h1 { font-family: Georgia, serif; font-size: clamp(32px, 8vw, 44px); line-height: 1.1; font-weight: 500; letter-spacing: -.03em; }
p { line-height: 1.65; }
a { color: var(--accent); }
label { display: block; margin: 24px 0 8px; font-weight: 700; }
input { width: 100%; padding: 14px; border: 1px solid #b9c8bc; border-radius: 10px; background: white; font: inherit; }
.login-button { display: block; width: 100%; text-align: center; margin-top: 16px; padding: 16px; border: 0; border-radius: 10px; background: var(--accent); color: white; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.login-button:disabled { opacity: .6; cursor: wait; }
.login-note { font-size: 14px; color: #52635b; }
.login-status { font-weight: 600; font-size: 14px; }
.login-secondary { display: block; text-align: center; padding: 12px; border: 1px solid #bdc9be; border-radius: 10px; text-decoration: none; }
hr { border: 0; border-top: 1px solid #dce1d6; margin: 28px 0 20px; }
footer { display: flex; gap: 20px; margin-top: 32px; font-size: 12px; }
:focus-visible { outline: 3px solid #d28c38; outline-offset: 3px; }