:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #18241f; background: #f7f4ef; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login-card { width: min(100%, 390px); background: #fff; border: 1px solid #d9ded9; border-radius: 12px; padding: 34px; box-shadow: 0 14px 34px rgba(24,36,31,.08); }
.mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 8px; background: #f1c76c; color: #19382d; font-weight: 800; }
.eyebrow { margin: 24px 0 4px; color: #2f6d52; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
h1 { margin: 0; font-size: 28px; }.hint { color: #66756e; margin: 8px 0 24px; }
form { display: grid; gap: 16px; } label { display: grid; gap: 7px; color: #66756e; font-size: 13px; font-weight: 700; }
input, button { min-height: 44px; border-radius: 8px; font: inherit; } input { border: 1px solid #d9ded9; padding: 0 12px; color: #18241f; } input:focus { outline: 3px solid rgba(47,109,82,.14); border-color: #2f6d52; }
button { border: 0; background: #224236; color: #fff; font-weight: 800; cursor: pointer; } #login-error { margin: -4px 0 0; color: #a22a2a; font-size: 14px; }