:root { color-scheme: light; font-family: "Vazirmatn", Tahoma, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; background: #f4f6f8; color: #18202b; }
.login-card { width: min(420px, calc(100vw - 32px)); padding: 34px; border: 1px solid #e3e7eb; border-radius: 16px; background: #fff; box-shadow: 0 18px 55px rgba(29, 42, 55, .09); }
.mark { width: 58px; height: 58px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 16px; background: #08775b; color: #fff; font-size: 18px; font-weight: 800; }
h1 { margin: 0; text-align: center; font-size: 24px; }
p { margin: 8px 0 24px; text-align: center; color: #75808d; font-size: 14px; }
label { display: block; margin: 15px 0 7px; font-weight: 700; font-size: 14px; }
input { width: 100%; height: 48px; padding: 0 13px; border: 1px solid #d9dee4; border-radius: 9px; background: #fff; font: inherit; direction: ltr; outline: none; }
input:focus { border-color: #08775b; box-shadow: 0 0 0 3px rgba(8, 119, 91, .12); }
button { width: 100%; height: 49px; margin-top: 24px; border: 0; border-radius: 9px; background: #08775b; color: #fff; font: 800 16px "Vazirmatn", sans-serif; cursor: pointer; }
button:hover { background: #07684f; }
.error { padding: 10px 12px; border-radius: 8px; background: #fff0f2; color: #b82d40; text-align: center; font-size: 13px; }