:root { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; color: #374151; background: #f6f7f8; font: 14px/1.6 'Noto Sans Bengali', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
.login-container { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 24px; }
.login-form { display: grid; gap: 10px; width: 100%; max-width: 360px; padding: 28px; border: 1px solid #e5e7eb; border-radius: 12px; background: white; box-shadow: 0 4px 20px #11182704; }
.login-form label { font-size: 13px; font-weight: 500; }
.login-form label[for=password] { margin-top: 8px; }
.input { width: 100%; min-width: 0; min-height: 46px; padding: 10px 12px; border: 1px solid #d9dde3; border-radius: 7px; background: white; color: #27313f; font-size: 16px; }
.input::placeholder { color: #9ca3af; font-size: 13px; }
.input:focus { outline: 2px solid #9ca3af; outline-offset: 2px; border-color: #9ca3af; }
.login-button { width: 100%; min-height: 46px; margin-top: 12px; padding: 10px 14px; border: 1px solid #374151; border-radius: 7px; background: #374151; color: white; font-size: 14px; font-weight: 500; cursor: pointer; touch-action: manipulation; }
.login-button:hover { background: #27313f; border-color: #27313f; }
.login-button:focus-visible { outline: 2px solid #6b7280; outline-offset: 3px; }
.login-error { padding: 11px 12px; margin-bottom: 6px; border: 1px solid #f2d5cf; border-radius: 7px; background: #fff5f3; color: #a4453b; font-size: 12px; overflow-wrap: anywhere; }
.muted { color: #6b7280; font-size: 11px; font-weight: 400; }
@media (max-width: 380px) { .login-container { padding: 18px; } .login-form { padding: 24px; } }