.task-login {
    --mc-login-ink: #152337;
    --mc-login-muted: #596779;
    --mc-login-canvas: #f5f4f0;
    --mc-login-card: #fffefa;
    --mc-login-line: #ccd3d7;
    --mc-login-field: #fff;
    --mc-login-accent: #12695d;
    --mc-login-accent-hover: #0c544a;
    --mc-login-focus: #12695d;
    background: var(--mc-login-canvas);
    color: var(--mc-login-ink);
    font-family: Geist, "Segoe UI", system-ui, sans-serif;
    min-inline-size: 0;
    overflow: auto;
}

html.dark-mode .task-login {
    --mc-login-ink: #f2f6fa;
    --mc-login-muted: #b3c0ce;
    --mc-login-canvas: #10151e;
    --mc-login-card: #1c2634;
    --mc-login-line: #526173;
    --mc-login-field: #182230;
    --mc-login-accent: #12695d;
    --mc-login-accent-hover: #0d5a50;
    --mc-login-focus: #81d6bd;
}

.task-login #layout {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    block-size: auto;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    overflow: visible;
    padding: clamp(1rem, 5vw, 5rem);
}

.task-login #layout-content {
    display: grid;
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    align-items: stretch;
    inline-size: min(100%, 68rem);
    min-block-size: clamp(32rem, 65vh, 39rem);
    overflow: hidden;
    border: 1px solid rgb(16 26 43 / 8%);
    border-radius: 1.5rem;
    background: var(--mc-login-card);
    box-shadow: 0 1.5rem 4rem -2.6rem rgb(16 26 43 / 26%);
    color: var(--mc-login-ink);
    text-align: start;
}

.task-login #layout-content > #logo {
    display: none;
}

.task-login .matchcore-brand,
.task-login #layout-content:not(:has(> .matchcore-brand))::before {
    --mc-panel-ring: rgb(173 219 209 / 20%);
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 0.75rem;
    padding: clamp(1.5rem, 4vw, 3.75rem);
    background:
        radial-gradient(circle at 78% 86%, #91cdbc 0 0.25rem, transparent 0.31rem),
        radial-gradient(circle at 78% 86%, var(--mc-panel-ring) 0 0.6rem, transparent 0.66rem),
        repeating-radial-gradient(circle at 78% 86%, transparent 0 2.35rem, var(--mc-panel-ring) 2.38rem 2.42rem, transparent 2.45rem 2.7rem),
        #101a2b;
    color: #f5f8fa;
    font-size: clamp(1.75rem, 3.2vw, 3.25rem);
    font-weight: 680;
    letter-spacing: -0.065em;
    line-height: 1;
}

.task-login .matchcore-brand {
    align-items: flex-start;
}

.task-login #layout-content:not(:has(> .matchcore-brand))::before {
    content: "MatchCore";
    align-items: flex-start;
}

.task-login .matchcore-brand-mark {
    display: grid;
    flex: none;
    place-items: center;
    inline-size: 0.91em;
    block-size: 0.91em;
    margin-block-start: 0.03em;
    border: 1px solid #94cbbb;
    border-radius: 0.2em;
    color: #a5dacb;
}

.task-login .matchcore-brand-mark::before,
.task-login .matchcore-brand-mark::after {
    content: "";
    grid-area: 1 / 1;
    inline-size: 0.35em;
    block-size: 0.35em;
    border: 1px solid currentColor;
    border-radius: 0.045em;
    rotate: 45deg;
}

.task-login .matchcore-brand-mark::after {
    inline-size: 0.12em;
    block-size: 0.12em;
    background: currentColor;
}

.task-login #login-form {
    position: static;
    align-self: center;
    justify-self: center;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(1.75rem, 4.6vw, 4.75rem);
    color: var(--mc-login-ink);
}

.task-login .matchcore-login-heading,
.task-login #login-form:not(:has(> .matchcore-login-heading))::before {
    display: block;
    margin: 0 0 2rem;
    color: var(--mc-login-ink);
    font-size: clamp(1.75rem, 3.7vw, 3.3rem);
    font-weight: 680;
    letter-spacing: -0.065em;
    line-height: 1.04;
    text-wrap: balance;
}

.task-login #login-form:not(:has(> .matchcore-login-heading))::before {
    content: "Вход в почту";
}

.task-login #login-form table,
.task-login #login-form tbody,
.task-login #login-form tr,
.task-login #login-form td {
    display: block;
    width: 100%;
    max-width: none;
}

.task-login #login-form tr {
    margin: 0 0 1rem;
}

.task-login #login-form td.title {
    /* Elastic hides these labels inline while converting the rows to input groups. */
    display: block !important;
    padding: 0;
    color: var(--mc-login-ink);
    text-align: start;
}

.task-login #login-form td.title label {
    display: inline-block;
    margin: 0 0 0.4rem;
    color: inherit;
    font-size: 0.875rem;
    font-weight: 620;
    line-height: 1.35;
}

.task-login #login-form td.input {
    padding: 0;
}

.task-login #login-form .input-group-prepend {
    display: none;
}

.task-login #login-form .form-control,
.task-login #login-form .custom-select {
    flex: none;
    inline-size: 100%;
    min-block-size: 3.25rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--mc-login-line);
    border-radius: 0.55rem;
    background: var(--mc-login-field);
    color: var(--mc-login-ink);
    font: inherit;
    font-size: max(16px, 1rem);
    line-height: 1.4;
}

.task-login #login-form .form-control::placeholder {
    color: transparent;
}

.task-login #login-form .form-control:focus,
.task-login #login-form .custom-select:focus {
    border-color: var(--mc-login-focus);
    box-shadow: 0 0 0 2px var(--mc-login-focus);
    outline: none;
}

.task-login #login-form .formbuttons {
    display: block;
    margin: 1.55rem 0 0;
    padding: 0;
}

.task-login #rcmloginsubmit {
    display: block;
    width: 100%;
    min-block-size: 3.25rem;
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: 0.55rem;
    background: var(--mc-login-accent);
    color: #fff;
    font: inherit;
    font-weight: 650;
    line-height: 1.4;
    text-transform: none !important;
    transition: background-color 140ms ease, scale 140ms ease;
}

.task-login #rcmloginsubmit:hover:not(:disabled) {
    background: var(--mc-login-accent-hover);
}

.task-login #rcmloginsubmit:active:not(:disabled) {
    scale: 0.96;
}

.task-login #rcmloginsubmit:focus-visible {
    outline: 2px solid var(--mc-login-focus);
    outline-offset: 3px;
}

.task-login #login-footer {
    margin-block-start: 1.35rem;
    color: var(--mc-login-muted);
    font-size: 0.82rem;
    text-align: start;
}

.task-login #login-footer:not(:has(a, > div)) {
    display: none;
}

@media (max-width: 46rem) {
    .task-login #layout {
        padding: clamp(0.8rem, 4vw, 1.75rem);
    }

    .task-login #layout-content {
        grid-template-columns: minmax(0, 1fr);
        max-inline-size: 32rem;
        min-block-size: 0;
        border-radius: 1rem;
    }

    .task-login .matchcore-brand,
    .task-login #layout-content:not(:has(> .matchcore-brand))::before {
        align-items: center;
        min-block-size: 6.3rem;
        padding: 1.45rem;
        font-size: 1.9rem;
    }

    .task-login #login-form {
        padding: clamp(1.25rem, 5vw, 2.2rem);
    }

    .task-login .matchcore-login-heading,
    .task-login #login-form:not(:has(> .matchcore-login-heading))::before {
        margin-block-end: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .task-login #rcmloginsubmit {
        transition: none;
    }

    .task-login #rcmloginsubmit:active:not(:disabled) {
        scale: 1;
    }
}