:root {
    --kha-bg: #f4fbf9;
    --kha-card: #ffffff;
    --kha-text: #1f2f2b;
    --kha-muted: #5d716b;
    --kha-border: #d9e8e3;
    --kha-border-strong: #6f8f86;
    --kha-input-bg: #f7fcfa;
    --kha-input-bg-hover: #f1faf7;
    --kha-primary: #52b8a2;
    --kha-primary-dark: #3ea28d;
    --kha-primary-soft: #dff4ed;
    --kha-success: #2f9b76;
    --kha-warning: #b7842c;
    --kha-error: #b04a58;
    --kha-radius: 18px;
    --kha-shadow: 0 18px 40px rgba(33, 82, 67, 0.08);
}

.kha-auth-shell {
    max-width: 1100px;
    margin: 1.5rem auto;
    color: var(--kha-text);
    font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.kha-auth-combined {
    background: linear-gradient(180deg, #effaf7 0%, #f8fcfb 100%);
    border: 1px solid var(--kha-border);
    border-radius: var(--kha-radius);
    padding: 1.25rem;
}

.kha-auth-tabs {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.kha-auth-tabs button {
    border: 1px solid var(--kha-border);
    background: #fff;
    color: var(--kha-muted);
    border-radius: 999px;
    padding: 0.58rem 1rem;
    cursor: pointer;
    transition: all 0.18s ease;
}

.kha-auth-tabs button.is-active {
    border-color: transparent;
    background: var(--kha-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(82, 184, 162, 0.28);
}

.kha-auth-pane {
    display: none;
}

.kha-auth-pane.is-active {
    display: block;
    animation: kha-fade 0.22s ease;
}

.kha-card {
    background: var(--kha-card);
    border: 1px solid var(--kha-border);
    border-radius: var(--kha-radius);
    box-shadow: var(--kha-shadow);
    padding: 1.25rem;
}

.kha-card-header h2 {
    margin: 0;
    font-size: 1.45rem;
}

.kha-card-header p {
    margin-top: 0.38rem;
    color: var(--kha-muted);
}

.kha-progress {
    list-style: none;
    padding: 0;
    margin: 1rem 0 1.3rem;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.6rem;
}

.kha-progress li {
    border: 1px solid var(--kha-border);
    border-radius: 12px;
    padding: 0.55rem;
    background: #fff;
    color: var(--kha-muted);
    display: grid;
    gap: 0.25rem;
    align-items: center;
}

.kha-progress li span {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e8f3ef;
    color: #45655c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.83rem;
}

.kha-progress li strong {
    font-size: 0.84rem;
    line-height: 1.25;
}

.kha-progress li.is-active {
    border-color: #c5e8de;
    background: #f4fbf8;
    color: var(--kha-text);
}

.kha-progress li.is-active span {
    background: var(--kha-primary);
    color: #fff;
}

.kha-form {
    display: grid;
    gap: 1rem;
}

.kha-step {
    display: none;
    opacity: 0;
    transform: translateY(6px);
}

.kha-step.is-active {
    display: grid;
    gap: 1rem;
    opacity: 1;
    transform: translateY(0);
    animation: kha-step-in 0.2s ease;
}

.kha-step h3 {
    margin: 0;
}

.kha-grid {
    display: grid;
    gap: 0.85rem;
}

.kha-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kha-field label {
    display: block;
    font-weight: 650;
    margin-bottom: 0.38rem;
    color: #203831;
    letter-spacing: 0.01em;
}

.kha-field {
    display: grid;
    gap: 0.34rem;
}

.kha-field input,
.kha-field select,
.kha-field textarea,
.kha-combobox-input {
    width: 100%;
    border: 2px solid var(--kha-border-strong);
    border-radius: 12px;
    background: var(--kha-input-bg);
    min-height: 46px;
    padding: 0.62rem 0.78rem;
    color: var(--kha-text);
    font-size: 0.96rem;
    line-height: 1.4;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 1px 2px rgba(25, 64, 54, 0.05);
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.kha-field input::placeholder,
.kha-field textarea::placeholder,
.kha-combobox-input::placeholder {
    color: #88a49c;
}

.kha-field input:hover,
.kha-field select:hover,
.kha-field textarea:hover,
.kha-combobox-input:hover {
    border-color: #58786f;
    background: var(--kha-input-bg-hover);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 2px 6px rgba(31, 74, 61, 0.09);
}

.kha-field textarea {
    min-height: 100px;
    resize: vertical;
}

.kha-field input:focus,
.kha-field select:focus,
.kha-field textarea:focus,
.kha-combobox-input:focus {
    outline: none;
    border-color: #4fa791;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(82, 184, 162, 0.18), 0 3px 10px rgba(40, 104, 84, 0.1);
}

.kha-field:focus-within label {
    color: #1f4f42;
}

.kha-field input:disabled,
.kha-field select:disabled,
.kha-field textarea:disabled,
.kha-combobox-input:disabled {
    background: #edf4f2;
    border-color: #9fb7b0;
    color: #6d837c;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.95;
}

.kha-helper {
    margin: -0.08rem 0 0.35rem;
    color: #69837b;
    font-size: 0.84rem;
    line-height: 1.45;
}

.kha-field-message {
    display: block;
    min-height: 1rem;
    margin-top: 0.12rem;
    font-size: 0.81rem;
    color: var(--kha-muted);
}

.kha-field.is-invalid input,
.kha-field.is-invalid select,
.kha-field.is-invalid textarea,
.kha-field.is-invalid .kha-combobox-input {
    border-color: #cf7283;
    background: #fff8f9;
    box-shadow: 0 0 0 4px rgba(176, 74, 88, 0.12), 0 2px 8px rgba(135, 52, 67, 0.08);
}

.kha-field.is-invalid .kha-field-message {
    color: var(--kha-error);
}

.kha-field.is-invalid label {
    color: #8b3949;
}

.kha-field.is-valid input,
.kha-field.is-valid select,
.kha-field.is-valid textarea,
.kha-field.is-valid .kha-combobox-input {
    border-color: #4da88f;
    background: #f5fcf9;
    box-shadow: 0 0 0 4px rgba(47, 155, 118, 0.11), 0 2px 8px rgba(39, 121, 94, 0.08);
}

.kha-field.is-valid label {
    color: #245f4a;
}

.kha-hidden {
    display: none !important;
}

.kha-combobox {
    position: relative;
}

.kha-combobox-list,
.kha-suggestions {
    position: absolute;
    z-index: 60;
    left: 0;
    right: 0;
    margin-top: 0.3rem;
    background: #fff;
    border: 2px solid #7ea79c;
    border-radius: 12px;
    box-shadow: 0 16px 30px rgba(17, 50, 40, 0.12);
    max-height: 220px;
    overflow-y: auto;
    display: none;
}

.kha-combobox-list.is-open,
.kha-suggestions.has-items {
    display: block;
}

.kha-combobox-item,
.kha-suggestion-item {
    width: 100%;
    border: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    padding: 0.62rem 0.76rem;
    display: grid;
    gap: 0.13rem;
    color: var(--kha-text);
    transition: background-color 0.14s ease;
}

.kha-combobox-item:focus-visible,
.kha-suggestion-item:focus-visible {
    outline: none;
    background: #def3ec;
}

.kha-combobox-item:hover,
.kha-suggestion-item:hover {
    background: #edf9f5;
}

.kha-combobox-item.is-active,
.kha-suggestion-item.is-active {
    background: #e7f7f2;
}

.kha-suggestion-item span {
    font-size: 0.8rem;
    color: var(--kha-muted);
}

.kha-suggestion-empty {
    padding: 0.7rem;
    color: var(--kha-muted);
    font-size: 0.9rem;
}

.kha-location-preview {
    padding: 0.65rem 0.8rem;
    border: 1px dashed #abd8cc;
    border-radius: 12px;
    background: #f5fcf9;
}

.kha-location-preview h4 {
    margin: 0 0 0.25rem;
    font-size: 0.92rem;
}

.kha-location-preview p {
    margin: 0;
    color: var(--kha-muted);
}

.kha-password-wrap {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem;
    align-items: stretch;
}

.kha-password-wrap .kha-toggle-password {
    border: 2px solid var(--kha-border-strong);
    border-radius: 12px;
    min-height: 46px;
    background: #f7fdfb;
    color: #44695f;
    padding: 0 0.8rem;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.16s ease;
}

.kha-password-wrap .kha-toggle-password:hover {
    border-color: #a6d2c5;
    background: #eef9f5;
}

.kha-password-wrap .kha-toggle-password:focus-visible {
    outline: none;
    border-color: #8ad4c2;
    box-shadow: 0 0 0 4px rgba(82, 184, 162, 0.16);
}

.kha-password-strength {
    min-height: 1rem;
    margin-top: 0.25rem;
    font-size: 0.82rem;
}

.kha-password-strength--placeholder {
    opacity: 0;
    pointer-events: none;
}

.kha-step[data-step="4"] .kha-grid--2 {
    align-items: start;
}

.kha-field--password > label {
    min-height: 1.35rem;
    display: flex;
    align-items: center;
}

.kha-password-strength.is-weak span {
    color: var(--kha-error);
}

.kha-password-strength.is-medium span {
    color: var(--kha-warning);
}

.kha-password-strength.is-strong span {
    color: var(--kha-success);
}

.kha-checkboxes {
    display: grid;
    gap: 0.5rem;
}

.kha-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--kha-text);
    font-size: 0.94rem;
}

.kha-checkbox input {
    width: 18px;
    height: 18px;
}

.kha-checkbox a {
    color: var(--kha-primary-dark);
    text-decoration: none;
}

.kha-checkbox.is-invalid {
    color: var(--kha-error);
}

.kha-checkbox.is-valid {
    color: var(--kha-success);
}

.kha-step-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.2rem;
}

.kha-form .button {
    min-height: 46px;
    border-radius: 12px;
    border: 1px solid transparent;
    padding: 0.62rem 1.05rem;
    font-size: 0.94rem;
    font-weight: 650;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.16s ease;
}

.kha-form .button:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(82, 184, 162, 0.18);
}

.kha-form .button:disabled {
    cursor: not-allowed;
    opacity: 0.62;
    box-shadow: none;
}

.kha-form .button.button-primary {
    background: linear-gradient(180deg, #58bea8 0%, #45ab95 100%);
    border-color: #419f8b;
    color: #fff;
    box-shadow: 0 8px 18px rgba(66, 161, 140, 0.24);
}

.kha-form .button.button-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(66, 161, 140, 0.29);
}

.kha-form .button.button-primary:active {
    transform: translateY(0);
}

.kha-form .button.button-secondary {
    background: #f4fbf9;
    border-color: #bdd9d0;
    color: #2f5850;
}

.kha-form .button.button-secondary:hover {
    background: #eaf7f2;
    border-color: #a6d2c5;
}

.kha-step-actions .kha-prev {
    margin-right: auto;
    min-width: 126px;
}

.kha-step-actions .kha-next,
.kha-step-actions .kha-submit {
    min-width: 154px;
}

.kha-step-actions .button[aria-busy="true"],
.kha-step-actions .button.is-loading {
    position: relative;
    color: transparent !important;
}

.kha-step-actions .button[aria-busy="true"]::after,
.kha-step-actions .button.is-loading::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-top-color: #fff;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: kha-spin 0.75s linear infinite;
}

.kha-full-button {
    width: 100%;
    min-height: 46px !important;
    border-radius: 12px !important;
}

.kha-links-row {
    display: flex;
    justify-content: space-between;
    gap: 0.7rem;
    font-size: 0.9rem;
}

.kha-links-row a {
    color: var(--kha-primary-dark);
    text-decoration: none;
}

.kha-status-box {
    border: 1px solid var(--kha-border);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    margin-bottom: 1rem;
    background: #f7fcfa;
}

.kha-status-box p {
    margin: 0.35rem 0 0;
    color: var(--kha-muted);
}

.kha-status-box--active {
    border-color: #a7dfcd;
    background: #f1fbf7;
}

.kha-status-box--pending {
    border-color: #e8d9a3;
    background: #fffbef;
}

.kha-status-box--blocked,
.kha-status-box--rejected {
    border-color: #efc0c7;
    background: #fff4f6;
}

.kha-sensitive-overview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
    margin: 0 0 1rem;
}

.kha-sensitive-overview div {
    border: 1px solid var(--kha-border);
    border-radius: 10px;
    padding: 0.55rem;
    background: #fbfefd;
}

.kha-sensitive-overview dt {
    font-size: 0.78rem;
    color: var(--kha-muted);
}

.kha-sensitive-overview dd {
    margin: 0.2rem 0 0;
}

.kha-simple-table {
    width: 100%;
    border-collapse: collapse;
}

.kha-simple-table th,
.kha-simple-table td {
    border: 1px solid var(--kha-border);
    padding: 0.45rem 0.55rem;
    font-size: 0.88rem;
}

.kha-divider {
    border: 0;
    border-top: 1px solid var(--kha-border);
    margin: 1.25rem 0;
}

.kha-alert {
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 0.7rem 0.82rem;
    border: 1px solid transparent;
}

.kha-alert--success {
    background: #effaf5;
    border-color: #a7dfcb;
    color: #1f694f;
}

.kha-alert--info {
    background: #eef8fb;
    border-color: #b8d8e4;
    color: #335b6a;
}

.kha-alert--warning {
    background: #fff9ed;
    border-color: #ecd8a7;
    color: #745724;
}

.kha-alert--error {
    background: #fff0f3;
    border-color: #edbcc5;
    color: #843947;
}

@keyframes kha-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes kha-step-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kha-spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (max-width: 960px) {
    .kha-progress {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kha-grid--2,
    .kha-sensitive-overview {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .kha-card {
        padding: 1rem;
        border-radius: 14px;
    }

    .kha-step-actions {
        flex-direction: column;
    }

    .kha-step-actions .button {
        width: 100%;
    }

    .kha-step-actions .kha-prev,
    .kha-step-actions .kha-next,
    .kha-step-actions .kha-submit {
        margin-right: 0;
        min-width: 100%;
    }

    .kha-links-row {
        flex-direction: column;
    }
}