@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/roboto-cyrillic.woff2") format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: "Roboto";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("/fonts/roboto-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --brand: #004f6f;
    --brand-2: #007ea5;
    --line: #d8e0e5;
    --line-strong: #cbd6dc;
    --text: #17222b;
    --muted: #667782;
    --safe-x: 50%;
    --safe-y: 16%;
}

* { box-sizing: border-box; }
html, body { height: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at var(--safe-x) var(--safe-y), rgba(0, 79, 111, .11), transparent 34rem),
        radial-gradient(circle at calc(100% - var(--safe-x)) calc(100% - var(--safe-y)), rgba(91, 145, 165, .13), transparent 36rem),
        linear-gradient(135deg, #f8fbfc 0%, #eef5f7 48%, #f6f8f9 100%);
    background-repeat: no-repeat;
    color: var(--text);
    font-family: "Roboto", Arial, sans-serif;
    font-size: 14px;
}

body.kesto { background: #004782; }
body.kesto .lk-brand h1 { color: #fff; }

.lk-login {
    width: min(420px, 100%);
    display: grid;
    gap: 22px;
}

.lk-brand {
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
}

.lk-logo {
    width: 200px;
    height: 58px;
    background: url(/images/logo24.svg) no-repeat center center;
    background-size: contain;
}

.lk-brand h1 {
    margin: 0;
    color: var(--brand);
    font-size: 22px;
    font-weight: 550;
    line-height: 1.2;
}

.lk-panel {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 12px 28px rgba(0, 54, 76, .075);
    backdrop-filter: blur(8px);
}

.lk-panel h2 {
    margin: 0 0 18px;
    color: var(--text);
    font-size: 20px;
    font-weight: 550;
    line-height: 1.3;
}

.lk-msg {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid #e0baba;
    border-radius: 7px;
    background: #fff0f0;
    color: #833131;
    font-size: 13px;
    line-height: 1.4;
}

.lk-field {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.lk-field > span {
    color: #263640;
    font-weight: 550;
}

.lk-field > input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: #fff;
    color: var(--text);
    font-size: 14px;
    outline: 0;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.lk-field > input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(0, 79, 111, .12);
}

.lk-field > input::placeholder { color: var(--muted); }

.lk-note {
    margin: 0 0 16px;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: #eef5f7;
    color: #2c3d47;
    font-size: 13px;
    line-height: 1.45;
}

.lk-row {
    display: flex;
    justify-content: flex-end;
    margin: 4px 0 18px;
}

.lk-back {
    margin-top: 16px;
    text-align: center;
}

.lk-login a {
    color: var(--brand);
    text-decoration: none;
    font-weight: 550;
}

.lk-login a:hover { text-decoration: underline; }

.lk-btn {
    width: 100%;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 7px;
    background: var(--brand);
    color: #fff;
    cursor: pointer;
    font-size: 14px;
    font-weight: 550;
    box-shadow: 0 8px 18px rgba(0, 79, 111, .18);
    transition: background-color .15s ease;
}

.lk-btn:hover { background: #013e57; }

@media (max-width: 460px) {
    .lk-panel { padding: 18px; }
    .lk-logo { width: 168px; height: 50px; }
}