:root {
    /*
     * Login aliases.
     *
     * Gedeelde waarden komen uit platform_foundation.css.
     * Login-specifieke accentwaarden blijven hier lokaal.
     */
    --wai-ink: #173b43;
    --wai-muted: var(--wai-color-muted);
    --wai-border: var(--wai-color-border);
    --wai-surface: var(--wai-color-surface);
    --wai-background: #f4f7f7;
    --wai-accent: #2f6670;
    --wai-accent-dark: #214e57;
    --wai-soft: var(--wai-color-brand-soft);
    --wai-login-panel: #225762;
    --wai-login-panel-deep: #1c4d56;
    --wai-login-input: #ffffff;
}

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;

    color: var(--wai-ink);
    background: var(--wai-background);

    font-family: var(--wai-font-family);
}

.platform-login-page {
    min-height: 100vh;

    display: grid;

    grid-template-columns:
        minmax(520px, 1.06fr)
        minmax(480px, .94fr);
}

.platform-login-brand-panel {
    min-width: 0;

    padding:
        52px
        clamp(48px, 5vw, 78px)
        44px;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            145deg,
            var(--wai-login-panel) 0%,
            var(--wai-login-panel-deep) 100%
        );

    color: #ffffff;
}

.platform-login-brand {
    display: flex;
    align-items: center;

    gap: 14px;
}

.live-logo {
    width: 52px;
    height: 52px;

    flex:
        0
        0
        52px;

    display: grid;
    place-items: center;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0
        8px
        24px
        rgba(8, 31, 36, .12);
}

.live-logo img {
    width: 34px;
    height: 34px;

    display: block;
}

.platform-login-brand-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;
}

.platform-login-brand-copy strong {
    font-size: 19px;
    font-weight: 850;

    letter-spacing: -.015em;
}

.platform-login-brand-copy span {
    opacity: .74;

    font-size: 12px;
    line-height: 1.35;
}

.platform-login-thom {
    width: min(100%, 760px);

    margin:
        auto;

    display: grid;

    grid-template-columns:
        220px
        minmax(0, 1fr);

    align-items: center;

    gap:
        clamp(34px, 4vw, 58px);
}

.platform-login-thom-image {
    width: 220px;
    height: 220px;

    display: grid;
    place-items: center;

    border:
        8px
        solid
        rgba(255, 255, 255, .11);

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .08);

    box-shadow:
        0
        22px
        52px
        rgba(6, 28, 33, .18);
}

.platform-login-thom-image img {
    width: 194px;
    height: 194px;

    display: block;

    object-fit: contain;

    border-radius: 50%;
}

.platform-login-thom-copy {
    min-width: 0;

    max-width: 410px;
}

.platform-login-eyebrow {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 900;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.platform-login-thom-copy h2 {
    margin:
        0
        0
        16px;

    font-size:
        clamp(
            34px,
            3.1vw,
            46px
        );

    line-height: 1.04;

    letter-spacing: -.035em;
}

.platform-login-thom-copy p {
    margin: 0;

    max-width: 410px;

    opacity: .78;

    font-size: 16px;
    line-height: 1.65;
}

.platform-login-form-panel {
    min-width: 0;

    padding:
        56px
        clamp(42px, 6vw, 92px);

    display: grid;
    place-items: center;

    background: var(--wai-surface);
}

.platform-login-form-wrapper {
    width: min(100%, 460px);
}

.platform-login-form-wrapper
.platform-login-eyebrow {
    color: var(--wai-accent);
}

.platform-login-form-wrapper h1 {
    margin: 0;

    font-size:
        clamp(
            42px,
            4vw,
            54px
        );

    line-height: 1;

    letter-spacing: -.045em;
}

.platform-login-introduction {
    margin:
        14px
        0
        38px;

    color: var(--wai-muted);

    font-size: 15px;
    line-height: 1.55;
}

.platform-login-form {
    display: flex;
    flex-direction: column;
}

.platform-login-form > label {
    margin-bottom: 8px;

    color: var(--wai-ink);

    font-size: 12px;
    font-weight: 850;
}

.platform-login-form > input {
    width: 100%;
    height: 52px;

    margin-bottom: 22px;

    padding:
        0
        15px;

    border:
        1px
        solid
        var(--wai-border);

    border-radius: var(--wai-radius-sm);

    background: var(--wai-login-input);
    color: var(--wai-ink);

    box-shadow:
        0
        1px
        2px
        rgba(16, 28, 34, .02);

    font: inherit;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        background-color .15s ease;
}

.platform-login-form > input:hover {
    border-color: #c7d6da;
}

.platform-login-form > input:focus {
    outline: 0;

    border-color: var(--wai-accent);

    background: #ffffff;

    box-shadow:
        0
        0
        0
        4px
        rgba(47, 102, 112, .10);
}

.platform-login-form > input:-webkit-autofill,
.platform-login-form > input:-webkit-autofill:hover,
.platform-login-form > input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--wai-ink);

    box-shadow:
        0
        0
        0
        1000px
        #ffffff
        inset;

    transition:
        background-color 9999s ease-in-out 0s;
}

.platform-login-form-options {
    margin:
        -2px
        0
        30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    font-size: 12px;
}

.platform-login-remember {
    display: flex;
    align-items: center;

    gap: 8px;

    color: var(--wai-muted);
}

.platform-login-remember input {
    width: 15px;
    height: 15px;

    margin: 0;

    accent-color: var(--wai-accent);
}

.platform-login-form-options a {
    color: var(--wai-accent);

    font-weight: 850;
    text-decoration: none;
}

.platform-login-form-options a:hover {
    text-decoration: underline;
}

.platform-login-submit {
    height: 54px;

    border: 0;
    border-radius: var(--wai-radius-sm);

    background: var(--wai-accent);
    color: #ffffff;

    box-shadow:
        0
        8px
        22px
        rgba(33, 78, 87, .14);

    cursor: pointer;

    font-size: 14px;
    font-weight: 900;

    transition:
        transform .12s ease,
        background-color .15s ease,
        box-shadow .15s ease;
}

.platform-login-submit:hover {
    background: var(--wai-accent-dark);

    box-shadow:
        0
        10px
        26px
        rgba(33, 78, 87, .18);
}

.platform-login-submit:active {
    transform: translateY(1px);
}

.platform-login-support {
    margin:
        28px
        0
        0;

    color: var(--wai-muted);

    font-size: 11px;
    line-height: 1.55;

    text-align: center;
}

.platform-login-error {
    margin-bottom: 20px;

    padding:
        12px
        14px;

    border:
        1px
        solid
        #e4b8b3;

    border-radius: var(--wai-radius-sm);

    background: #fff3f1;
    color: #9b3b32;

    font-size: 12px;
    font-weight: 700;

    line-height: 1.45;
}

@media (max-width: 1100px) {
    .platform-login-page {
        grid-template-columns:
            minmax(450px, 1fr)
            minmax(430px, .9fr);
    }

    .platform-login-thom {
        grid-template-columns:
            170px
            minmax(0, 1fr);

        gap: 32px;
    }

    .platform-login-thom-image {
        width: 170px;
        height: 170px;
    }

    .platform-login-thom-image img {
        width: 148px;
        height: 148px;
    }
}

@media (max-width: 900px) {
    .platform-login-page {
        grid-template-columns: 1fr;
    }

    .platform-login-brand-panel {
        min-height: 410px;

        padding:
            32px
            30px
            40px;
    }

    .platform-login-thom {
        width: 100%;

        margin:
            58px
            0
            0;

        grid-template-columns:
            130px
            minmax(0, 1fr);

        gap: 26px;
    }

    .platform-login-thom-image {
        width: 130px;
        height: 130px;

        border-width: 6px;
    }

    .platform-login-thom-image img {
        width: 112px;
        height: 112px;
    }

    .platform-login-thom-copy h2 {
        font-size: 32px;
    }

    .platform-login-thom-copy p {
        font-size: 14px;
    }

    .platform-login-form-panel {
        padding:
            54px
            28px
            64px;
    }
}

@media (max-width: 560px) {
    .platform-login-brand-panel {
        min-height: 0;

        padding:
            26px
            22px
            34px;
    }

    .live-logo {
        width: 46px;
        height: 46px;

        flex-basis: 46px;

        border-radius: 12px;
    }

    .live-logo img {
        width: 30px;
        height: 30px;
    }

    .platform-login-thom {
        margin-top: 44px;

        grid-template-columns: 1fr;

        justify-items: center;

        gap: 22px;
    }

    .platform-login-thom-image {
        width: 142px;
        height: 142px;
    }

    .platform-login-thom-image img {
        width: 122px;
        height: 122px;
    }

    .platform-login-thom-copy {
        text-align: center;
    }

    .platform-login-thom-copy p {
        max-width: 360px;
    }

    .platform-login-form-panel {
        padding:
            44px
            22px
            54px;
    }

    .platform-login-form-wrapper h1 {
        font-size: 40px;
    }

    .platform-login-introduction {
        margin-bottom: 32px;
    }

    .platform-login-form-options {
        align-items: flex-start;
        flex-direction: column;

        gap: 14px;
    }
}