/* ==========================================================
ACCOUNT PAGE
Основные настройки страницы
========================================================== */

.account-section {
    width:100%;
    padding:80px 20px;
}

.container {
    max-width:1200px;
    margin:0 auto;
}



/* ==========================================================
HERO
Изображение account.png и заголовок поверх
========================================================== */

.account-hero {
    position:relative;
    width:100%;
    height:600px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
}

.hero-image {
    position:absolute;
    width:100%;
    height:100%;
    object-fit:cover;
}

.hero-overlay {
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        180deg,
        rgba(0,0,0,.15),
        rgba(0,0,0,.55)
    );
}

.hero-content {
    position:relative;
    z-index:2;
    text-align:center;
    padding:20px;
}

/* ==========================================================
HERO TEXT
Текст поверх изображения
========================================================== */

.hero-text {
    text-align:center;
    color:white;
}

.hero-label {
    display:block;
    margin-bottom:20px;
    color:var(--light-purple);
    font-family:"Orbitron",sans-serif;
    font-size:20px;
    letter-spacing:.2em;
}


.hero-text h1 {

    font-family:
    "Orbitron",
    sans-serif;

    font-size:
    clamp(42px,6vw,90px);

    line-height:
    1.05;

    font-weight:
    700;

    color:
    white;

    margin-bottom:
    30px;

}


.hero-text p {

    max-width:600px;

    margin:
    0 auto;

    color:
    rgba(255,255,255,.75);

    font-size:
    18px;

}



/* ==========================================================
SECTION TITLE
Заголовки блоков
========================================================== */

.section-title {
    margin-bottom:40px;
}

.section-title h2 {
    margin:0 0 10px;
    color:var(--text);
    font-family:"Orbitron",sans-serif;
    font-size:32px;
}

.section-title p {
    margin:0;
    color:var(--text-secondary);
}



/* ==========================================================
PROFILE CARD
Главная карточка профиля
========================================================== */

.profile-card {
    display:grid;
    grid-template-columns:350px 1fr;
    gap:40px;
    padding:40px;
    background:var(--surface);
    border:1px solid var(--border);
    backdrop-filter:blur(15px);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}



/* ==========================================================
PROFILE LEFT
Аватар и EHWEXAR ID
========================================================== */

.profile-main {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.avatar-wrapper {
    width:180px;
    height:180px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid var(--purple);
    box-shadow:0 0 40px rgba(138,123,182,.4);
}

.avatar-wrapper img {
    width:100%;
    height:100%;
    object-fit:cover;
}



.primary-button,
.secondary-button,
.danger-button {
    margin-top:20px;
    padding:12px 24px;
    border-radius:14px;
    cursor:pointer;
    transition:var(--transition);
    font-size:15px;
}



.primary-button {
    background:var(--purple);
    color:white;
    border:none;
}

.primary-button:hover {
    background:var(--light-purple);
}



.secondary-button {
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
}

.secondary-button:hover {
    border-color:var(--purple);
}



.danger-button {
    background:#8b1e1e;
    color:white;
    border:none;
}

.danger-button:hover {
    background:#b52b2b;
}



/* ==========================================================
EHWEXAR ID BLOCK
========================================================== */

.ehwexar-id-box {
    width:100%;
    margin-top:35px;
    padding:25px;
    background:rgba(138,123,182,.12);
    border:1px solid var(--border);
    border-radius:20px;
}

.id-label {
    display:block;
    color:var(--text-secondary);
    font-size:14px;
}

.id-value {
    display:block;
    margin:12px 0;
    color:var(--text);
    font-family:"Orbitron",sans-serif;
    font-size:22px;
}

.ehwexar-id-box p {
    margin:0;
    color:var(--text-secondary);
    font-size:14px;
}



.created-box {
    margin-top:20px;
    color:var(--text-secondary);
}

.created-box strong {
    display:block;
    margin-top:5px;
    color:var(--text);
}



/* ==========================================================
PROFILE RIGHT
Информация пользователя
========================================================== */
.profile-card {
    position: relative;
}
.profile-details {
    display:flex;
    flex-direction:column;
    gap:25px;
}

.info-group {
    display:flex;
    flex-direction:column;
    gap:10px;
}

.info-group label {
    color:var(--text-secondary);
    font-size:14px;
}

.info-group input {
    width:100%;
    padding:14px 18px;
    background:var(--surface-solid);
    color:var(--text);
    border:1px solid var(--border);
    border-radius:14px;
    outline:none;
}

.input-action {
    display:flex;
    gap:15px;
}

.input-action button {
    margin-top:0;
}



.status-badge {
    width:max-content;
    padding:8px 18px;
    border-radius:20px;
    background:rgba(138,123,182,.2);
    color:var(--light-purple);
}
.status-badge.status-Обычный {
    background: rgba(138,123,182,.2);
    color: var(--light-purple);
}

.status-badge.status-Продвинутый {
    background: linear-gradient(
        90deg,
        #6d9eff,
        #9b7cff,
        #6d9eff
    );
    background-size: 200% 100%;
    color: white;
    animation: advancedStatus 3s linear infinite;
}

.status-badge.status-Премиум {
    background: linear-gradient(
        90deg,
        #d8a84e,
        #fff1a8,
        #d8a84e
    );
    background-size: 200% 100%;
    color: #3d2a00;
    animation: premiumStatus 2.5s linear infinite;
}
.status-badge.status-VIP {

    position: relative;

    color: white;

    background: linear-gradient(
        120deg,
        #6d3fa9,
        #9b4d9f,
        #c45aa8,
        #e06aaa,
        #c45aa8,
        #9b4d9f,
        #6d3fa9
    );

    background-size: 300% 300%;

    border: 1px solid rgba(255,255,255,.35);

    animation:
        vipBackground 5s ease infinite,
        vipGlow 6s linear infinite;

    z-index: 1;

}
.status-badge.status-VIP::before {

    content: "";

    position: absolute;

    inset: -3px;

    border-radius: 30px;

    background: conic-gradient(
        from 0deg,
        #ff4d8d,
        #a855f7,
        #4f8cff,
        #00d4ff,
        #ff4d8d
    );

    filter: blur(7px);

    opacity: .15;

    animation: vipRGB 6s linear infinite;

    z-index: -1;

}

@keyframes advancedStatus {

    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }

}


@keyframes premiumStatus {

    from {
        background-position: 0% 50%;
    }

    to {
        background-position: 200% 50%;
    }

}
@keyframes vipBackground {

    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }

}
@keyframes vipRGB {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


@keyframes vipGlow {

    0% {
        box-shadow:
            0 0 8px #ff4d8d,
            0 0 18px #a855f7;
    }

    33% {
        box-shadow:
            0 0 8px #4f8cff,
            0 0 18px #00d4ff;
    }

    66% {
        box-shadow:
            0 0 8px #a855f7,
            0 0 18px #ff4d8d;
    }

    100% {
        box-shadow:
            0 0 8px #ff4d8d,
            0 0 18px #a855f7;
    }

}
.icon-button {

    border:none;

    background:transparent;

    padding:5px;

    margin:0;

    width:32px;

    height:32px;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:var(--text-secondary);

}

.icon-button img {

    width:20px;

    height:20px;

    display:block;

    filter:invert(75%);

}

body.light-theme .icon-button img {

    filter:none;

}

.icon-button:hover {

    opacity:0.7;

}
.email-modal-fields {

    display: flex;

    flex-direction: column;

    gap: 12px;

    margin-top: 20px;

}


.email-modal-fields input {

    width: 100%;

    box-sizing: border-box;

    padding: 12px 14px;

    border: 1px solid rgba(128, 128, 128, 0.5);

    border-radius: 10px;

    background: var(--bg-secondary);

    color: var(--text-primary);

    font-size: 15px;

    outline: none;

}


.email-modal-fields input:focus {

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

}


.email-modal-fields input::placeholder {

    color: var(--text-secondary);

}
.email-code-timer {

    min-height: 18px;

    margin-top: -4px;

    text-align: center;

    font-size: 13px;

    color: var(--text-secondary);

}
#confirmActionModal {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: none;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;
}

#confirmActionModal.active {
    display: flex;
}

#confirmActionModal .modal-window {
    position: relative;
    z-index: 10000;
}
/* ==========================================================
HERO LIGHT THEME
Светлый режим
========================================================== */
.light-theme .danger-button {

    background: #c93636;

    color: white;

}

.light-theme .hero-overlay {

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.45),
        rgba(255,255,255,.75)
    );

}


.light-theme .hero-text h1 {

    color:
    #111111;

}


.light-theme .hero-label {

    color:
    var(--dark-purple);

}


.light-theme .hero-text p {

    color:
    rgba(0,0,0,.65);

}

/* ==========================================================
ADAPTIVE
Телефон
========================================================== */

@media(max-width:900px) {

    .account-hero {
        height:450px;
    }

    .hero-text {
        padding:30px 20px;
    }

    .hero-text h1 {
        font-size:32px;
    }

    .profile-card {
        grid-template-columns:1fr;
        padding:25px;
    }

    .input-action {
        flex-direction:column;
    }

}
/* ==========================================================
SECURITY CARD
Безопасность аккаунта
========================================================== */

.security-card {
    display:flex;
    flex-direction:column;
    gap:20px;
    padding:35px;
    background:var(--surface);
    border:1px solid var(--border);
    backdrop-filter:blur(15px);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
}
/* ==========================================================
SECURITY / SETTINGS BUTTONS
Убираем лишний отступ только здесь
========================================================== */

.security-item .primary-button,
.security-item .secondary-button,
.security-item .danger-button,
.setting-item .primary-button,
.setting-item .secondary-button,
.setting-item .danger-button {

    margin-top:0;

}

/* ==========================================================
SETTINGS CARD
Настройки пользователя
========================================================== */
.setting-item {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:25px;
    border-radius:20px;
    background:rgba(255,255,255,.03);
    border:1px solid var(--border);
}

.setting-item h3 {
    margin:0 0 8px;
    color:var(--text);
}

.setting-item p {
    margin:0;
    color:var(--text-secondary);
}



/* ==========================================================
ANIMATION
Появление блоков
========================================================== */

.account-section {
    animation:accountFade .7s ease forwards;
}

@keyframes accountFade {

    from {
        opacity:0;
        transform:translateY(30px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }

}



/* ==========================================================
INPUT FOCUS
Поля ввода
========================================================== */

.info-group input:focus {
    border-color:var(--purple);
    box-shadow:0 0 20px rgba(138,123,182,.25);
}



/* ==========================================================
BUTTON EFFECTS
Эффекты кнопок
========================================================== */

.primary-button:hover,
.secondary-button:hover,
.danger-button:hover {
    transform:translateY(-2px);
}



/* ==========================================================
RESPONSIVE TABLET
Планшеты
========================================================== */

@media(max-width:700px) {

    .account-section {
        padding:50px 15px;
    }

    .security-item,
    .setting-item {
        flex-direction:column;
        align-items:flex-start;
    }

    .security-item button,
    .setting-item button {
        width:100%;
    }

    .security-card{
        padding:20px;
    }

}



/* ==========================================================
SMALL MOBILE
Маленькие телефоны
========================================================== */

@media(max-width:420px) {

    .hero-text h1 {
        font-size:26px;
    }

    .hero-label {
        font-size:14px;
        letter-spacing:2px;
    }

    .avatar-wrapper {
        width:140px;
        height:140px;
    }

    .profile-card {
        padding:20px;
    }

    .id-value {
        font-size:18px;
    }

}
/* ==========================================================
ACCOUNT THEME TRANSITION
Плавность элементов кабинета
========================================================== */

.account-section,
.profile-card,
.security-card,
.info-group input,
.ehwexar-id-box,
.created-box,
.security-item,
.setting-item,
.hero-text,
.hero-text h1,
.hero-text p,
.devices-container,
.device-card,
.hero-label {

    transition:
    background-color .8s ease,
    color .6s ease,
    border-color .6s ease,
    box-shadow .6s ease;

}

/* ==========================================================
DEVICES
Активные устройства
========================================================== */
.devices-container {

    padding: 25px;

    background: rgba(20, 25, 35, 0.7);

    border: 1px solid rgba(120,140,180,0.25);

    box-shadow:
    0 10px 30px rgba(0,0,0,0.25);

}


.devices-container::before {

    content:"";

    display:block;

    height:3px;

    width:60px;

    margin-bottom:20px;

    border-radius:10px;

    background:#4da3ff;

}
.devices-list {

    display:flex;

    flex-direction:column;

    gap:15px;

}

.device-card {

    padding:20px;

    border-radius:10px;

    background:rgba(255,255,255,0.05);

    border:1px solid rgba(255,255,255,0.1);

}

.device-card h4 {

    margin:0 0 12px;

    font-size:18px;

}

.device-card p {

    margin:6px 0;

    color:var(--text-secondary);

}
.logout-device {

    margin-top:15px;

}
#currentDeviceBlock{

    margin-top:24px;

    padding:24px;

    border-radius:20px;

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

    border:2px solid rgba(212,175,55,.8);

}
#activeSessionsBlock{

    margin-top:24px;

    padding:24px;

    border-radius:20px;

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

    border:1px solid rgba(255,255,255,.08);

}
#currentDeviceBlock h3,
#activeSessionsBlock h3{

    font-size:1.5rem;

    font-weight:700;

    margin-bottom:20px;

}


.devices-list{

    display:flex;

    flex-direction:column;

    gap:16px;

}


.device-card{

    padding:18px;

    border-radius:16px;

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

    border:1px solid rgba(255,255,255,.06);

}


.device-card h4{

    margin-bottom:10px;

}


.device-card p{

    margin:6px 0;

}


.no-sessions{

    margin-top:15px;

    text-align:center;

    opacity:.7;

    font-style:italic;

}
.loading-dots {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

.loading-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: loadingDot 0.8s infinite ease-in-out;
}

.loading-dots span:nth-child(2) {
    animation-delay: 0.15s;
}

.loading-dots span:nth-child(3) {
    animation-delay: 0.3s;
}

@keyframes loadingDot {
    0%, 60%, 100% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(-6px);
    }
}
/* ==========================================================
ACTIVE DEVICES LIGHT THEME
========================================================== */


.light-theme .devices-container {

    background: #ffffff;

    border: 1px solid rgba(0,0,0,0.1);

    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);

}



.light-theme .device-card {

    background: #f7f8fa;

    border: 1px solid rgba(0,0,0,0.08);

}



.light-theme .device-card h4 {

    color: #222;

}

.light-theme .device-card p {

    color: #555;

}
.button-dots{
    display:inline-flex;
    gap:4px;
    align-items:center;
    margin-left:7px;
}

.button-dots span{
    width:5px;
    height:5px;
    border-radius:50%;
    background:currentColor;
    animation:buttonDotBounce .8s infinite ease-in-out;
}

.button-dots span:nth-child(2){
    animation-delay:.12s;
}

.button-dots span:nth-child(3){
    animation-delay:.24s;
}

@keyframes buttonDotBounce{

    0%,80%,100%{
        transform:translateY(0);
    }

    40%{
        transform:translateY(-5px);
    }

}
.forgot-password-link {
    display: block;
    margin: -5px 0 5px;

    color: #8a7bb6;
    font-size: 12px;
    text-decoration: none;

    transition:
        color 0.2s ease,
        opacity 0.2s ease;
}

.forgot-password-link:hover {
    color: #b09be8;
    opacity: 0.9;
}
#securityInfoModal .modal-window {

    width: clamp(320px, 70vw, 850px);
    max-width: calc(100vw - 40px);

}


#securityInfoModal .security-info-content {

    margin-top: 22px;
    max-height: 58vh;
    overflow-y: auto;
    padding-right: 10px;

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


#securityInfoModal .security-info-content::-webkit-scrollbar {

    width: 5px;

}


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

    background: transparent;

}


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

    background: #8a7bb6;
    border-radius: 10px;

}


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

    background: #a991d4;

}


#securityInfoModal .security-info-content h3 {

    margin: 24px 0 9px;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);

}


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

    margin-top: 0;

}


#securityInfoModal .security-info-content p {

    margin: 0 0 14px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.65;

}


#securityInfoModal .security-info-content ul {

    margin: 0;
    padding-left: 21px;

}


#securityInfoModal .security-info-content li {

    margin-bottom: 11px;
    padding-left: 3px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.65;

}


#securityInfoModal .security-info-label {

    font-size: 12px !important;
    color: #9b7dcc !important;
    margin-top: -3px !important;
    margin-bottom: 10px !important;

}


#securityInfoModal .security-danger-list li strong {

    color: var(--text-primary);

}


#securityInfoModal .security-info-actions {

    display: flex;
    justify-content: center;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--border);

}


#securityInfoModal .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;

}


#securityInfoModal .security-ok-button:hover {

    background: rgba(138,123,182,.22);
    border-color: #a991d4;
    color: #d0b9f5;
    transform: translateY(-1px);

}


#securityInfoModal .security-ok-button:active {

    transform: translateY(0);

}


@media (max-width: 600px) {

    #securityInfoModal .modal-window {

        width: calc(100vw - 28px);
        max-width: none;

    }


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

        font-size: 13px;

    }


    #securityInfoModal .security-info-content h3 {

        font-size: 15px;

    }

}