* { box-sizing: border-box; }
body { margin: 0; min-height: 100dvh; display: grid; place-items: center; background: #000; color: #ededed; font: 14px/1.6 system-ui, sans-serif; padding: 24px 16px; }
main { width: 100%; max-width: 360px; padding: 28px 24px; background: #141414; border: 1px solid #303030; border-radius: 16px; }
.mark { font-size: 28px; font-weight: 700; }
h1 { font-size: 24px; margin: 12px 0 4px; }
p { color: #aaa; }
label { display: block; margin-top: 16px; }
input:not([type=checkbox]) { width: 100%; min-height: 44px; display: block; margin-top: 6px; padding: 10px 12px; border: 1px solid #454545; border-radius: 8px; background: #202020; color: #fff; font: inherit; }
.remember { display: flex; align-items: center; gap: 8px; }
input[type=checkbox] { width: 18px; height: 18px; margin: 0; }
button { width: 100%; min-height: 44px; margin-top: 20px; border: 0; border-radius: 8px; background: #eee; color: #111; font: inherit; font-weight: 600; cursor: pointer; }
button:disabled { opacity: .5; cursor: wait; }
input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
a { color: #bbb; }
#error { color: #ffb4b4; overflow-wrap: anywhere; }
[hidden] { display: none !important; }