.kh-login-shell,
    .kh-register-shell,
    .kh-school-request-shell {
        font-family: Montserrat, sans-serif;
    }
    .kh-login-wrap,
    .kh-register-wrap,
    .kh-school-request-wrap {
        width: 100%;
        position: relative;
        z-index: 10;
    }
    .kh-login-wrap,
    .kh-register-wrap {
        max-width: 24rem;
    }
    .kh-school-request-wrap {
        max-width: 42rem;
    }
    .kh-login-brand,
    .kh-register-brand,
    .kh-school-request-brand {
        text-align: center;
        margin-bottom: 2rem;
    }
    .kh-auth-brand-logo {
        display: inline-block;
        line-height: 1.15;
        text-decoration: none;
        transition: color .18s ease;
    }
    .kh-auth-brand-logo:hover {
        color: #111827;
    }
    .kh-login-panel,
    .kh-register-panel,
    .kh-school-request-panel {
        padding: 2rem;
    }
    .kh-login-form {
        display: grid;
        gap: 1.25rem;
    }
    .kh-register-form,
    .kh-school-request-form {
        display: grid;
        gap: 1rem;
        margin-top: 1.5rem;
    }
    .kh-school-request-row {
        display: grid;
        gap: 1rem;
    }
    .kh-school-request-row > .kh-field {
        align-content: start;
    }
    .kh-school-picker {
        position: relative;
    }
    .kh-school-picker-results {
        position: absolute;
        top: calc(100% + .35rem);
        left: 0;
        right: 0;
        z-index: 20;
        background: #fff;
        border: 1px solid #d8dce4;
        border-radius: .75rem;
        box-shadow: 0 12px 32px rgba(15, 23, 42, .12);
        padding: .35rem;
        max-height: 16rem;
        overflow-y: auto;
    }
    .kh-school-picker__result {
        display: block;
        width: 100%;
        text-align: left;
        padding: .55rem .65rem;
        border: none;
        background: none;
        border-radius: .5rem;
        font-family: Montserrat, sans-serif;
        font-size: .875rem;
        color: #111827;
        cursor: pointer;
    }
    .kh-school-picker__result:hover,
    .kh-school-picker__result.is-active {
        background: #f3f4f6;
    }
    .kh-school-picker__empty {
        padding: .55rem .65rem;
        margin: 0;
        font-size: .8125rem;
        color: #9ca3af;
    }
    .kh-school-picker__add {
        display: block;
        margin: .25rem;
        padding: .6rem .65rem;
        border-radius: .5rem;
        background: #f0fdf4;
        color: #15803d;
        font-size: .8125rem;
        font-weight: 600;
        text-decoration: none;
    }
    .kh-school-picker__add:hover {
        background: #dcfce7;
        color: #166534;
    }
    .kh-field-hint {
        margin: 0;
        font-size: .75rem;
        line-height: 1.4;
        color: #6b7280;
    }
    .kh-field-hint[data-kh-school-picker-error] {
        color: #dc2626;
    }
    .kh-register-consent,
    .kh-school-request-consent {
        display: flex;
        align-items: flex-start;
        gap: .75rem;
        border: 1px solid #e5e7eb;
        border-radius: .75rem;
        background: #f9fafb;
        padding: .75rem;
        color: #4b5563;
        font-size: .875rem;
        line-height: 1.45;
    }
    .kh-register-consent input,
    .kh-school-request-consent input {
        flex: 0 0 auto;
        margin-top: .125rem;
        width: 1rem;
        height: 1rem;
        border-radius: .25rem;
    }
    .kh-login-footer,
    .kh-school-request-footer {
        margin-top: 1.5rem;
        text-align: center;
    }
    .kh-school-request-footer,
    .kh-login-extra,
    .kh-register-links {
        font-size: .875rem;
    }
    .kh-login-extra {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: .5rem;
        margin-top: 1rem;
    }
    .kh-register-links {
        display: grid;
        gap: .5rem;
        margin-top: 1.5rem;
        text-align: center;
    }

    @media (max-width: 480px) {
        .kh-login-shell,
        .kh-register-shell,
        .kh-school-request-shell {
            align-items: flex-start;
            padding: 1rem;
        }
        .kh-login-brand {
            margin-bottom: 1rem;
        }
        .kh-register-brand,
        .kh-school-request-brand {
            margin-bottom: .9rem;
        }
        .kh-login-brand-title,
        .kh-register-brand-title,
        .kh-school-request-brand-title {
            font-size: 1.375rem;
            line-height: 1.15;
        }
        .kh-login-brand-caption,
        .kh-register-brand-caption,
        .kh-school-request-brand-caption {
            margin-top: .35rem;
            font-size: .875rem;
            line-height: 1.3;
        }
        .kh-login-panel,
        .kh-register-panel,
        .kh-school-request-panel {
            padding: 1rem;
            border-radius: .875rem;
        }
        .kh-register-title,
        .kh-school-request-title {
            font-size: 1.25rem;
            line-height: 1.2;
        }
        .kh-register-caption,
        .kh-school-request-caption {
            margin-top: .35rem;
            font-size: .875rem;
            line-height: 1.35;
        }
        .kh-login-form {
            gap: .85rem;
        }
        .kh-register-form,
        .kh-school-request-form {
            gap: .65rem;
            margin-top: .9rem;
        }
        .kh-school-request-row {
            gap: .65rem .5rem;
        }
        .kh-login-form .kh-field,
        .kh-register-form .kh-field,
        .kh-school-request-form .kh-field {
            gap: .35rem;
        }
        .kh-school-request-form .kh-field {
            min-width: 0;
        }
        .kh-login-form .kh-field-label,
        .kh-register-form .kh-field-label,
        .kh-school-request-form .kh-field-label {
            font-size: .75rem;
            line-height: 1.1;
        }
        .kh-school-request-form .kh-field-label {
            white-space: nowrap;
        }
        .kh-login-form .kh-input,
        .kh-register-form .kh-input,
        .kh-school-request-form .kh-input,
        .kh-school-request-form .kh-textarea {
            min-height: 3rem;
            padding: .7rem 1rem;
            border-radius: .75rem;
            font-size: 1rem;
            line-height: 1.25;
        }
        .kh-school-request-form .kh-textarea {
            min-height: 5rem;
            resize: vertical;
        }
        .kh-login-form .kh-button,
        .kh-register-form .kh-button,
        .kh-school-request-form .kh-button {
            min-height: 3rem;
            border-radius: .75rem;
            font-size: 1rem;
            line-height: 1.2;
        }
        .kh-register-consent,
        .kh-school-request-consent {
            gap: .65rem;
            padding: .7rem .75rem;
            border-radius: .75rem;
            font-size: .75rem;
            line-height: 1.35;
        }
        .kh-register-consent input,
        .kh-school-request-consent input {
            margin-top: .05rem;
            width: 1rem;
            height: 1rem;
        }
        .kh-login-footer {
            margin-top: 1rem;
        }
        .kh-login-footer a,
        .kh-login-extra,
        .kh-register-links,
        .kh-school-request-footer {
            font-size: .875rem;
        }
        .kh-login-extra {
            gap: .45rem;
            margin-top: .85rem;
        }
        .kh-register-links,
        .kh-school-request-footer {
            margin-top: .9rem;
        }
        .kh-register-links {
            gap: .45rem;
        }
    }

    @media (min-width: 640px) {
        .kh-school-request-row {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 480px) and (max-height: 720px) {
        .kh-login-brand-caption,
        .kh-register-brand-caption,
        .kh-register-caption,
        .kh-school-request-brand-caption,
        .kh-school-request-caption {
            display: none;
        }
        .kh-login-brand {
            margin-bottom: .75rem;
        }
        .kh-register-brand,
        .kh-school-request-brand {
            margin-bottom: .6rem;
        }
        .kh-login-panel,
        .kh-register-panel,
        .kh-school-request-panel {
            padding: .9rem;
        }
        .kh-register-form,
        .kh-school-request-form {
            gap: .55rem;
            margin-top: .7rem;
        }
        .kh-login-form .kh-input,
        .kh-login-form .kh-button,
        .kh-register-form .kh-input,
        .kh-register-form .kh-button,
        .kh-school-request-form .kh-input,
        .kh-school-request-form .kh-button {
            min-height: 2.875rem;
        }
        .kh-register-form .kh-input,
        .kh-school-request-form .kh-input,
        .kh-school-request-form .kh-textarea {
            padding-top: .65rem;
            padding-bottom: .65rem;
        }
        .kh-school-request-form .kh-textarea {
            min-height: 4.25rem;
        }
        .kh-register-consent,
        .kh-school-request-consent {
            padding: .6rem .7rem;
            line-height: 1.3;
        }
    }