.register-page {

    min-height:100vh;

    background-image:
        linear-gradient(
            rgba(0,0,0,.18),
            rgba(0,0,0,.38)
        ),
        url("../image/ehwexar-id-register.png");

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:30px 16px;
}


.register-card {

    width:100%;

    max-width:500px;

    padding:42px;

    background:var(--surface);

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

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    backdrop-filter:blur(20px);
    transition:
        background .4s ease,
        border-color .4s ease,
        box-shadow .4s ease,
        color .4s ease;


}


.register-logo {

    margin-bottom:18px;

    color:var(--light-purple);

    font-size:14px;

    font-weight:700;

    letter-spacing:3px;

    text-align:center;

}


.register-card h1 {

    margin:0;

    color:var(--text);

    text-align:center;

    font-size:30px;

}


.register-subtitle {

    margin:12px 0 30px;

    color:var(--text-secondary);

    text-align:center;

    font-size:14px;

    line-height:1.5;

}


.register-field {

    margin-bottom:18px;

}


.register-field label {

    display:block;

    margin-bottom:7px;

    color:var(--text-secondary);

    font-size:13px;

}


.register-field input,
.verification-input {

    box-sizing:border-box;

    width:100%;

    padding:13px 15px;

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

    border-radius:14px;

    outline:none;

    background:rgba(0,0,0,.35);

    color:var(--text);

    font-size:15px;

    transition:
        background .4s ease,
        border-color .3s ease,
        color .3s ease,
        box-shadow .3s ease;

}


.register-field input::placeholder,
.verification-input::placeholder {

    color:rgba(176,168,192,.55);

}


.register-field input:focus,
.verification-input:focus {

    border-color:var(--purple);

    box-shadow:
        0 0 0 3px
        rgba(138,123,182,.12);

}


.register-button {

    width:100%;

    margin-top:8px;

    padding:14px 20px;

    border:none;

    border-radius:14px;

    background:var(--purple);

    color:white;

    font-size:15px;

    font-weight:600;

    cursor:pointer;

    transition:var(--transition);

}


.register-button:hover {

    background:#9b8bc9;

    transform:translateY(-2px);

    box-shadow:
        0 8px 25px
        rgba(138,123,182,.25);

}


.register-button:active {

    transform:translateY(0);

}


.register-button:disabled {

    opacity:.65;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}


.register-result {

    min-height:22px;

    margin-top:18px;

    color:var(--text-secondary);

    text-align:center;

    font-size:14px;

    line-height:1.5;

}


.verification-block {

    margin-top:28px;

    padding-top:28px;

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

    text-align:center;

}


.verification-icon {

    width:52px;

    height:52px;

    margin:0 auto 16px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:rgba(138,123,182,.15);

    font-size:23px;

}


.verification-block h2 {

    margin:0 0 10px;

    color:var(--text);

    font-size:21px;

}


.verification-block p {

    margin:0 0 18px;

    color:var(--text-secondary);

    font-size:14px;

    line-height:1.5;

}


.verification-input {

    margin-bottom:10px;

    text-align:center;

    letter-spacing:5px;

    font-size:19px;

}


.register-login {

    margin:26px 0 0;

    color:var(--text-secondary);

    text-align:center;

    font-size:14px;

}
.register-login a {
    color: #9b7dcc;
    transition: color .25s ease;
}

.register-login a:hover {
    color: #c3a9f5;
}

.loading-dots {

    display:inline-flex;

    align-items:center;

    gap:5px;

}


.loading-dots span {

    width:6px;

    height:6px;

    border-radius:50%;

    background:currentColor;

    animation:registerDots 1.2s ease-in-out infinite;

}


.loading-dots span:nth-child(2) {

    animation-delay:.15s;

}


.loading-dots span:nth-child(3) {

    animation-delay:.3s;

}


@keyframes registerDots {

    0%,
    60%,
    100% {

        transform:translateY(0);

        opacity:.4;

    }

    30% {

        transform:translateY(-6px);

        opacity:1;

    }

}


@media(max-width:600px) {

    .register-card {

        padding:32px 22px;

    }


    .register-card h1 {

        font-size:25px;

    }

}
/* Светлая тема */

.light-theme .register-page {

    background-image:
        linear-gradient(
            rgba(255,255,255,.45),
            rgba(255,255,255,.70)
        ),
        url("../image/ehwexar-id-register.png");

}


/* Светлая карточка */

.light-theme .register-card {

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

    border-color:
        rgba(75,54,105,.16);

    box-shadow:
        0 20px 60px
        rgba(75,54,105,.18);

}


/* Светлые textbox */

.light-theme .register-field input,
.light-theme .verification-input {

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

    border-color:
        rgba(75,54,105,.22);

    color:#222;

    box-shadow:
        0 3px 12px
        rgba(75,54,105,.06);

}


/* Текст внутри textbox */

.light-theme .register-field input::placeholder,
.light-theme .verification-input::placeholder {

    color:#756d80;

}


/* Кнопка */

.light-theme .register-button {

    background:#735b9d;

    color:#ffffff;

    box-shadow:
        0 6px 20px
        rgba(115,91,157,.20);

}
/* ==========================================================
   LEGAL LINKS
========================================================== */
.register-legal {

    margin-top: 18px;

    text-align: center;

}


.register-legal p {

    margin: 0;

    color: var(--text-secondary);

    font-size: 12px;

    line-height: 1.6;

}


.register-legal-link {

    display: inline;

    padding: 0;

    border: none;

    background: none;

    color: #9b7dcc;

    font: inherit;

    font-size: inherit;

    cursor: pointer;

    transition: color .25s ease;

}


.register-legal-link:hover {

    color: #c3a9f5;

}
.register-legal-links {

    display: flex;

    justify-content: center;

    gap: 18px;

    margin-top: 18px;

    flex-wrap: wrap;
}
/* ==========================================================
   AGREEMENT
========================================================== */

.agreement-content {

    margin-top: 22px;

    max-height: 55vh;

    overflow-y: auto;

    padding-right: 10px;
}


.agreement-content h3 {

    margin-top: 22px;

    margin-bottom: 8px;

    font-size: 15px;

    color: var(--text-primary);
}


.agreement-content h3:first-child {

    margin-top: 0;

}


.agreement-content p {

    margin: 0 0 12px;

    line-height: 1.65;

    color: var(--text-secondary);

    font-size: 14px;
}


.agreement-actions {

    display: flex;

    justify-content: center;

    margin-top: 24px;

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

    .register-legal-links {

        gap: 12px;

        flex-direction: column;

        align-items: center;

    }


    .register-legal-link {

        font-size: 11px;

    }


    .agreement-content {

        max-height: 60vh;

    }

}
.security-info-content {

    margin-top: 22px;

    max-height: 58vh;

    overflow-y: auto;

    padding-right: 10px;
}


.security-info-content h3 {

    margin: 24px 0 9px;

    font-size: 16px;

    font-weight: 600;

    color: var(--text-primary);
}


.security-info-content h3:first-child {

    margin-top: 0;

}


.security-info-content p {

    margin: 0 0 14px;

    color: var(--text-secondary);

    font-size: 14px;

    line-height: 1.65;
}


.security-info-content ul {

    margin: 0;

    padding-left: 21px;

}


.security-info-content li {

    margin-bottom: 11px;

    padding-left: 3px;

    color: var(--text-secondary);

    font-size: 14px;

    line-height: 1.65;
}


.security-info-label {

    font-size: 11px !important;

    color: #9b7dcc !important;

    margin-top: -3px !important;

    margin-bottom: 10px !important;
}

.security-danger-list li strong {

    color: #d99be9;

}


.security-info-actions {

    display: flex;

    justify-content: center;

    margin-top: 26px;

    padding-top: 18px;

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

}


.security-ok-button {

    min-width: 130px;

    padding: 11px 24px;

    border: 1px solid #8a7bb6;

    border-radius: 12px;

    background: rgba(138,123,182,.12);

    color: #b99be8;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .2s ease;
}


.security-ok-button:hover {

    background: rgba(138,123,182,.22);

    border-color: #a991d4;

    color: #d0b9f5;

    transform: translateY(-1px);

}


.security-ok-button:active {

    transform: translateY(0);

}


@media (max-width: 600px) {

    .security-info-content {

        max-height: 60vh;

    }


    .security-info-content li,
    .security-info-content p {

        font-size: 13px;

    }


    .security-info-content h3 {

        font-size: 15px;

    }

}
.agreement-actions {

    display: flex;

    justify-content: center;

    margin-top: 26px;

    padding-top: 18px;

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

}


.agreement-actions .secondary-button {

    min-width: 130px;

    padding: 11px 24px;

    border: 1px solid #8a7bb6;

    border-radius: 12px;

    background: rgba(138,123,182,.12);

    color: #b99be8;

    font-family: inherit;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .2s ease;
}


.agreement-actions .secondary-button:hover {

    background: rgba(138,123,182,.22);

    border-color: #a991d4;

    color: #d0b9f5;

    transform: translateY(-1px);

}


.agreement-actions .secondary-button:active {

    transform: translateY(0);

}
#securityInfoModal .modal-window,
#userAgreementModal .modal-window {

    width: clamp(
        320px,
        70vw,
        850px
    );

    max-width: calc(100vw - 40px);

}
@media (max-width: 600px) {

    #securityInfoModal .modal-window,
    #userAgreementModal .modal-window {

        width: calc(100vw - 28px);

        max-width: none;

    }

}
#securityInfoModal .security-info-content,
#userAgreementModal .agreement-content {

    scrollbar-width: thin;
    scrollbar-color: #8a7bb6 transparent;
}


/* Chrome / Edge / Safari */

#securityInfoModal .security-info-content::-webkit-scrollbar,
#userAgreementModal .agreement-content::-webkit-scrollbar {

    width: 5px;
}


#securityInfoModal .security-info-content::-webkit-scrollbar-track,
#userAgreementModal .agreement-content::-webkit-scrollbar-track {

    background: transparent;
}


#securityInfoModal .security-info-content::-webkit-scrollbar-thumb,
#userAgreementModal .agreement-content::-webkit-scrollbar-thumb {

    background: #8a7bb6;

    border-radius: 10px;

}


#securityInfoModal .security-info-content::-webkit-scrollbar-thumb:hover,
#userAgreementModal .agreement-content::-webkit-scrollbar-thumb:hover {

    background: #a991d4;

}
.security-info-revision {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: right;
    font-size: 12px;
    letter-spacing: 0.5px;
    opacity: 0.5;
}