:root {
    font-family: Inter, "Segoe UI", "Microsoft YaHei UI", "PingFang SC", sans-serif;
    color: #192721;
    background: #f7f8f3;
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
a { color: inherit; text-underline-offset: 4px; }
:focus-visible { outline: 2px solid #70d2ab; outline-offset: 3px; }
.login-page {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: 24px 16px;
    color-scheme: dark;
    color: #f0f3f1;
    background: #141719;
}
.login-card {
    width: min(100%, 396px);
    padding: clamp(24px, 5vw, 36px);
    background: #1d2123;
    border: 1px solid #353c3e;
    border-radius: 12px;
}
.wordmark {
    color: #98dbbd;
    font-size: 14px;
    font-weight: 750;
    letter-spacing: .1em;
}
.login-card h1 { margin: 6px 0 26px; font-size: 27px; line-height: 1.35; letter-spacing: -.035em; }
.field { display: grid; gap: 7px; margin-bottom: 17px; }
.field-row, .links { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 14px; }
label { color: #dce1df; font-size: 14px; font-weight: 550; }
.login-card a { color: #b5c2bd; text-decoration: none; font-size: 13px; }
.login-card a:hover { color: #a3e3c7; text-decoration: underline; }
input {
    min-width: 0;
    width: 100%;
    min-height: 45px;
    border: 1px solid #5c6768;
    background: #161a1c;
    color: #f2f5f3;
    border-radius: 6px;
    padding: 10px 12px;
    font: inherit;
}
input:focus { outline: 2px solid #80c7a7; outline-offset: 1px; }
.login-card button {
    width: 100%;
    min-height: 45px;
    margin-top: 4px;
    border: 0;
    border-radius: 6px;
    background: #94d8b8;
    color: #11271d;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.login-card button:hover { background: #a7e5c8; }
.login-card button:disabled { opacity: .65; cursor: wait; }
.feedback { margin: 12px 0 0; color: #ffb6af; font-size: 14px; }
.feedback:empty { margin: 0; }
.links { margin-top: 20px; }
.mast { min-height: 78px; border-bottom: 1px solid #cad3cb; display: flex; align-items: center; padding: 0 clamp(20px,5vw,88px); }
.brand { display: inline-flex; align-items: center; gap: 11px; font: 850 23px/1 Inter, "Segoe UI", sans-serif; letter-spacing: -.065em; text-decoration: none; }
.brand img { width: 36px; height: 36px; }
.help { max-width: 620px; margin: clamp(54px,12vh,160px) auto; padding: 0 24px; }
.help h1 { margin: 0 0 24px; font-size: clamp(32px,3vw,45px); line-height: 1.22; letter-spacing: -.05em; }
.help p { line-height: 1.8; color: #58685f; }
.help code { overflow-wrap: anywhere; }
.help .action { display: inline-flex; align-items: center; gap: 30px; min-height: 49px; margin-top: 24px; padding: 0 17px; border-radius: 5px; color: white; background: #17694f; text-decoration: none; font-weight: 650; }
.help .action:hover { background: #10553e; }
@media (max-width: 650px) {
    .mast { min-height: 62px; }
    .brand { font-size: 21px; }
    .brand img { width: 31px; height: 31px; }
}