* { box-sizing: border-box; margin: 0; padding: 0; letter-spacing: 0; }
:root {
    color-scheme: dark;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: #f0f1f2;
    background: #141617;
    --accent: #ff6b00;
    --text-muted: #a9aeb2;
}
body {
    min-height: 100vh; min-height: 100dvh;
    display: flex; align-items: center; justify-content: flex-end;
    padding: 40px 8%;
    background: #141617 url('/admin/static/login-graphite.png') left center / cover no-repeat fixed;
}
.login-card { width: 360px; max-width: 100%; }
.brand-mark { display: block; margin: 0 auto 14px; object-fit: contain; filter: brightness(0) invert(1); }
h1 { font-size: 30px; font-weight: 600; text-align: center; }
h1 span { color: var(--accent); }
.login-subtitle { color: var(--text-muted); text-align: center; font-size: 14px; margin: 8px 0 32px; }
.field { margin-bottom: 18px; }
label { display: block; font-size: 14px; margin-bottom: 8px; color: #cdd0d2; }
input[type='text'], input[type='password'] {
    display: block; width: 100%; height: 44px; padding: 10px 12px;
    background: #141617cc; color: #f0f1f2; border: 1px solid #686c70;
    border-radius: 4px; font: 14px 'Segoe UI', system-ui, sans-serif;
}
input::placeholder { color: var(--text-muted); }
input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }
#password { padding-right: 48px; }
#togglePass {
    position: absolute; right: 5px; bottom: 3px; width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); background: none; border: 0; border-radius: 4px; cursor: pointer;
}
#togglePass:hover { color: var(--accent); }
button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.submit-btn {
    display: block; width: 100%; min-height: 44px; padding: 10px 16px;
    background: var(--accent); border: 1px solid var(--accent); border-radius: 4px;
    color: white; font: 500 15px 'Segoe UI', system-ui, sans-serif; cursor: pointer;
}
.submit-btn:hover { background: #ff812b; border-color: #ff812b; }
.submit-btn:disabled { opacity: .55; cursor: wait; }
.captcha-wrap { display: flex; justify-content: center; margin: 20px 0; min-width: 0; }
.error-msg { display: none; color: #ff948b; font-size: 14px; line-height: 1.5; margin-bottom: 18px; overflow-wrap: anywhere; }
.error-msg.visible { display: block; }
@media (max-width: 768px) {
    body { padding: 280px 16px 40px; justify-content: center; align-items: flex-start; background-position: left top; background-size: auto 300px; background-attachment: scroll; }
    .brand-mark { width: 48px; height: 48px; margin-bottom: 10px; }
    h1 { font-size: 28px; }
    .login-subtitle { margin-bottom: 24px; }
    input[type='text'], input[type='password'] { font-size: 16px; }
}
@media (max-width: 359px) {
    .captcha-wrap { margin-left: -8px; margin-right: -8px; }
}