:root { font-family: 'IBM Plex Sans', sans-serif; color: #202927; background: #eef0ec; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background-color: #eef0ec; background-image: linear-gradient(rgba(32, 41, 39, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(32, 41, 39, .05) 1px, transparent 1px); background-size: 24px 24px; display: grid; place-items: center; }
.login { width: min(420px, calc(100% - 32px)); border-top: 4px solid #d84a32; background: #fff; box-shadow: 0 18px 50px rgba(32, 41, 39, .14); }
.login header { padding: 28px 30px 20px; border-bottom: 1px solid #d6dcd7; }
.mark { width: 46px; height: 46px; margin-bottom: 24px; border: 1px solid #65716c; display: grid; place-items: center; font: 500 24px 'IBM Plex Mono', monospace; }
.eyebrow { color: #66716d; font: 500 11px 'IBM Plex Mono', monospace; text-transform: uppercase; }
h1 { margin: 5px 0 0; font-size: 27px; font-weight: 600; letter-spacing: 0; }
form { padding: 24px 30px 30px; display: grid; gap: 15px; }
label { display: grid; gap: 6px; font-size: 12px; font-weight: 600; }
input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #aeb7b3; border-radius: 4px; color: #202927; background: #fafbf9; font: inherit; }
input:focus { border-color: #174d3c; outline: 2px solid rgba(23, 77, 60, .15); }
button { height: 44px; margin-top: 5px; border: 0; border-radius: 4px; color: #fff; background: #174d3c; font: 600 13px inherit; cursor: pointer; }
.error, .setup { margin: 0; padding: 11px 12px; border-left: 3px solid #d84a32; color: #8f2f22; background: #f8ece9; font-size: 12px; line-height: 1.5; }
.setup { margin: 24px 30px 30px; color: #525e59; border-color: #a67c00; background: #f7f4e8; }
code { font-family: 'IBM Plex Mono', monospace; }