@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@300;400;500;600&display=swap');

:root {
    --eqs-bg: #a1a9ba;
    --eqs-ink: #171c26;
    --eqs-orange: #861719;
    --eqs-accent-rgb: 134 23 25;
    color: var(--eqs-ink);
    background: var(--eqs-bg);
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html { min-width: 320px; min-height: 100%; zoom: .8; }
body { min-width: 320px; min-height: 125vh; margin: 0; background: var(--eqs-bg); color: var(--eqs-ink); overflow-x: hidden; }
button, input { font: inherit; }
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--eqs-orange); outline-offset: 3px; }

.eqs-login-page {
    isolation: isolate;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 125svh;
    padding: 48px 24px;
    overflow-x: hidden;
    color: var(--eqs-ink);
    background: #a3aab5;
}

.eqs-login-backdrop {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: #a3aab5;
}
.eqs-login-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(transparent 48%, #171d2924 120%), linear-gradient(90deg, #dfe4ea12, transparent 42%);
}
.eqs-login-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .16;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.eqs-login-system-mark,
.eqs-login-axis-mark {
    position: absolute;
    z-index: 2;
    margin: 0;
    color: #171d2994;
    font: 600 .572rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.eqs-login-system-mark { top: 30px; right: 34px; }
.eqs-login-axis-mark { top: 50%; left: 24px; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); }

.eqs-login-card {
    position: relative;
    z-index: 10;
    width: min(100%, 412px);
    padding: clamp(24px, 2.1vw, 32px);
    border: 1px solid #171d2961;
    border-radius: 4px;
    background: #dadad4c2;
    box-shadow: 0 40px 100px #171d2940;
    backdrop-filter: blur(14px) saturate(.82);
    -webkit-backdrop-filter: blur(14px) saturate(.82);
}

.eqs-login-brand { display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.eqs-login-logo { display: block; width: auto; max-width: 100%; height: 64px; object-fit: contain; }
.eqs-login-identifier {
    margin: 0 0 14px;
    color: var(--eqs-orange);
    font: 600 .56rem/1.5 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.eqs-login-form,
.eqs-login-fields { display: flex; flex-direction: column; gap: 10px; }
.eqs-login-field { min-width: 0; }
.eqs-login-label {
    display: block;
    margin: 0 0 7px;
    color: #171d29b8;
    font: 600 .55rem/1.4 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .2em;
    text-transform: uppercase;
}
.eqs-login-input-shell { position: relative; }
.eqs-login-field-icon {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 15px;
    width: 15px;
    height: 15px;
    color: #171d298c;
    pointer-events: none;
    transform: translateY(-50%);
    transition: color .3s;
}
.eqs-login-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px 0 42px;
    border: 1px solid #171d2947;
    border-radius: 2px;
    outline: 0;
    color: #171d29;
    background: #a3aab54d;
    font: 400 .759rem 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .025em;
    transition: border-color .26s, background .26s, box-shadow .26s;
}
.eqs-login-input::placeholder { color: #171d2966; opacity: 1; }
.eqs-login-input:hover { border-color: #171d2975; }
.eqs-login-input:focus,
.eqs-login-input:focus-visible {
    border-color: var(--eqs-orange);
    outline: 0;
    background: #eef1f4a8;
    box-shadow: 0 0 0 4px rgb(var(--eqs-accent-rgb) / .12);
}
.eqs-login-input-shell:focus-within .eqs-login-field-icon { color: var(--eqs-orange); }
.eqs-login-input:-webkit-autofill,
.eqs-login-input:-webkit-autofill:hover,
.eqs-login-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #171d29;
    caret-color: #171d29;
    box-shadow: inset 0 0 0 1000px #d8dce1;
}

.eqs-login-message-slot { max-height: 46px; overflow: hidden auto; }
.eqs-login-message-slot:empty { display: none; }
.eqs-login-message {
    min-height: 37px;
    margin: 0;
    padding: 8px 10px;
    border-left: 2px solid var(--eqs-orange);
    color: #171d29bd;
    background: rgb(var(--eqs-accent-rgb) / .085);
    font: 400 .616rem/1.55 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .035em;
}
.eqs-login-message.is-error { color: #641012; }

.eqs-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    border: 1px solid #171d29;
    border-radius: 2px;
    color: #e6e9ed;
    background: #171d29;
    cursor: pointer;
    font: 700 .616rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .18em;
    text-transform: uppercase;
    transition: transform .3s, background .3s, border-color .3s, color .3s, box-shadow .3s;
}
.eqs-login-submit:hover:not(:disabled) {
    border-color: var(--eqs-orange);
    color: #fff;
    background: var(--eqs-orange);
    box-shadow: 0 14px 35px rgb(var(--eqs-accent-rgb) / .28);
    transform: translateY(-3px);
}
.eqs-login-submit:focus-visible { outline: 2px solid var(--eqs-orange); outline-offset: 4px; }

.eqs-login-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 16px;
    color: #171d297a;
    font: 400 .495rem/1.5 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .12em;
    text-align: center;
    text-transform: uppercase;
}
.eqs-login-links a { padding: 3px 0; transition: color .22s; }
.eqs-login-links a:hover,
.eqs-login-links a:focus-visible { color: var(--eqs-orange); }

.eqs-login-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #171d2929;
    color: #171d297a;
    font: 600 .517rem/1 'JetBrains Mono', ui-monospace, monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
}

@media (max-width: 900px) {
    .eqs-login-page { justify-content: center; padding: 32px 14px; }
    .eqs-login-card { width: min(100vw - 28px, 412px); }
    .eqs-login-system-mark, .eqs-login-axis-mark { display: none; }
}

@media (max-width: 520px) {
    .eqs-login-card { padding: 23px; }
    .eqs-login-logo { height: 40px; }
    .eqs-login-brand, .eqs-login-identifier { margin-bottom: 20px; }
    .eqs-login-links { gap: 5px; font-size: .462rem; }
}

@media (max-height: 720px) and (min-width: 721px) {
    .eqs-login-page { padding-block: 18px; }
    .eqs-login-card { padding-block: 24px; }
    .eqs-login-brand { margin-bottom: 16px; }
    .eqs-login-logo { height: 44px; }
    .eqs-login-identifier { margin-bottom: 16px; }
    .eqs-login-fields { gap: 12px; }
    .eqs-login-input, .eqs-login-message-slot { height: 44px; }
    .eqs-login-message { min-height: 33px; padding-block: 6px; }
    .eqs-login-submit { height: 46px; }
    .eqs-login-card-footer { margin-top: 16px; padding-top: 11px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}