:root {
    --auth-yellow: #f6c900;
    --auth-black: #11110f;
    --auth-paper: #f5f4ef;
    --auth-white: #ffffff;
    --auth-line: #d8d6cd;
    --auth-muted: #74746d;
    --auth-danger: #b83225;
}

* { box-sizing: border-box; }

body {
    background: var(--auth-paper);
    color: var(--auth-black);
    font-family: "Manrope", sans-serif;
    margin: 0;
}

.auth-signal {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 32px 20px;
}

.auth-signal__panel {
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    max-width: 430px;
    padding: clamp(32px, 6vw, 52px);
    width: 100%;
}

.auth-signal__brand {
    align-items: center;
    color: var(--auth-black);
    display: inline-flex;
    gap: 12px;
    text-decoration: none;
}

.auth-signal__brand span {
    align-items: center;
    background: var(--auth-yellow);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    height: 40px;
    justify-content: center;
    width: 44px;
}

.auth-signal__brand strong { font-size: 17px; font-weight: 800; }

.auth-signal__heading { margin-top: 52px; }
.auth-signal__heading h1 { font-size: clamp(30px, 7vw, 38px); letter-spacing: -.045em; line-height: 1.1; margin: 0; }
.auth-signal__heading p { color: var(--auth-muted); font-size: 14px; line-height: 1.5; margin: 12px 0 0; }

.auth-signal__error {
    background: #fae5e1;
    border-left: 3px solid var(--auth-danger);
    color: var(--auth-danger);
    font-size: 12px;
    margin-top: 24px;
    padding: 12px 14px;
}

.auth-signal__form { display: grid; gap: 22px; margin-top: 34px; }
.auth-signal__form label { display: grid; gap: 8px; }
.auth-signal__form label > span { font-size: 12px; font-weight: 700; }
.auth-signal__form input {
    background: var(--auth-white);
    border: 1px solid var(--auth-line);
    border-radius: 0;
    color: var(--auth-black);
    font: inherit;
    min-height: 50px;
    outline: 0;
    padding: 12px 14px;
    width: 100%;
}
.auth-signal__form input:focus { border-color: var(--auth-black); box-shadow: 0 0 0 3px rgba(246, 201, 0, .35); }
.auth-signal__form button {
    background: var(--auth-black);
    border: 1px solid var(--auth-black);
    color: var(--auth-white);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    min-height: 52px;
    padding: 12px 18px;
}
.auth-signal__form button:hover { background: var(--auth-yellow); color: var(--auth-black); }
.auth-signal__form button:focus-visible,
.auth-signal__brand:focus-visible,
.auth-signal__logout:focus-visible { outline: 3px solid var(--auth-yellow); outline-offset: 3px; }

.auth-signal__logout { color: var(--auth-black); display: inline-block; font-size: 12px; font-weight: 700; margin-top: 28px; }

@media (max-width: 479.98px) {
    .auth-signal { align-items: flex-start; padding: 18px 14px; }
    .auth-signal__panel { padding: 30px 24px; }
    .auth-signal__heading { margin-top: 44px; }
}

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