/* ========================================= */
/* 🔥 ELITE COSMIC ACCOUNT PRO (v150.0) 🔥 */
/* ========================================= */

#account.page-content {
    background: none;
}

.account-page {
    color: #ffffff;
    font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 0 10px 30px 10px !important;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ========================================= */
/* 🔥 ГЛУБОКИЙ ЗАГАДОЧНЫЙ КОСМОС (ФОН) 🔥 */
/* ========================================= */
.account-stars-bg.dynamic-bg {
    position: fixed;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 100vw; height: 100dvh;
    z-index: 0; pointer-events: none;

    /* 🔥 ИСПРАВЛЕННЫЙ ГРАДИЕНТ: Теперь он идет по диагонали (135deg), как и везде! */
    /* От глубокого индиго в левом верхнем углу к сапфировому в центре и черному внизу */
    background: linear-gradient(135deg, #0f172a 0%, #082f49 50%, #020617 100%) !important;
}

/* Анимация звезд/стикеров (Оставляем, она хороша) */
.account-stars-bg .floating-sticker {
    position: absolute;
    background-image: var(--bg-img);
    background-size: contain; background-repeat: no-repeat; background-position: center;
    background-color: transparent !important;

    /* 🔥 Сделали стикеры ярче и добавили им неоновое свечение! */
    opacity: 0.35;
    filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.4));

    will-change: transform;
    transform: translateZ(0);
    animation: floatAccountStickers linear infinite;
}

/* Разбрасываем 8 стикеров по всему экрану с разной скоростью */
.account-stars-bg .sticker-1 { width: 70px; height: 70px; top: 10%; left: 5%; animation-duration: 35s; }
.account-stars-bg .sticker-2 { width: 50px; height: 50px; top: 60%; left: 85%; animation-duration: 40s; animation-direction: reverse; opacity: 0.5; }
.account-stars-bg .sticker-3 { width: 85px; height: 85px; top: 25%; left: 15%; animation-duration: 45s; }
.account-stars-bg .sticker-4 { width: 60px; height: 60px; top: 15%; left: 75%; animation-duration: 30s; animation-direction: reverse; }
.account-stars-bg .sticker-5 { width: 90px; height: 90px; top: 75%; left: 10%; animation-duration: 50s; opacity: 0.2; }
.account-stars-bg .sticker-6 { width: 45px; height: 45px; top: 85%; left: 70%; animation-duration: 38s; }
.account-stars-bg .sticker-7 { width: 110px; height: 110px; top: 40%; left: 80%; animation-duration: 55s; animation-direction: reverse; opacity: 0.15; }
.account-stars-bg .sticker-8 { width: 40px; height: 40px; top: 50%; left: 10%; animation-duration: 25s; }

/* Сложная 3D анимация полета */
@keyframes floatAccountStickers {
    0% { transform: translateY(0) rotate(0deg) scale(1) translateZ(0); }
    33% { transform: translateY(-40px) rotate(120deg) scale(1.1) translateZ(0); }
    66% { transform: translateY(20px) rotate(240deg) scale(0.9) translateZ(0); }
    100% { transform: translateY(0) rotate(360deg) scale(1) translateZ(0); }
}

/* Координаты звезд для аккаунта */
.account-stars-bg .star-1 { width: 50px; height: 50px; top: 15%; left: 10%; animation-duration: 35s; }
.account-stars-bg .star-2 { width: 40px; height: 40px; top: 40%; left: 85%; animation-duration: 40s; animation-direction: reverse; }
.account-stars-bg .star-3 { width: 60px; height: 60px; top: 70%; left: 15%; animation-duration: 45s; }
.account-stars-bg .star-4 { width: 35px; height: 35px; top: 5%; left: 60%; animation-duration: 32s; opacity: 0.08; }
.account-stars-bg .star-5 { width: 45px; height: 45px; top: 85%; left: 70%; animation-duration: 38s; animation-direction: reverse; opacity: 0.08; }

@keyframes floatAnimation {
    0% { transform: translateY(0) rotate(0deg) translateZ(0); }
    33% { transform: translateY(-30px) rotate(120deg) scale(1.05) translateZ(0); }
    66% { transform: translateY(15px) rotate(240deg) scale(0.95) translateZ(0); }
    100% { transform: translateY(0) rotate(360deg) translateZ(0); }
}

/* ========================================= */
/* 🔥 ТЁМНОЕ КОСМИЧЕСКОЕ СТЕКЛО (БЛОКИ) 🔥 */
/* ========================================= */
.profile-card, .account-menu, .account-history-block {
    /* 🔥 Фейковое космическое стекло без блюра */
    background: linear-gradient(145deg, rgba(20, 25, 40, 0.55) 0%, rgba(5, 8, 15, 0.35) 100%) !important;

    border: 1px solid rgba(0, 229, 255, 0.1) !important;
    border-radius: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
    transform: translateZ(0);
}

/* --- Профиль --- */
.profile-card { padding: 25px 20px; display: flex; align-items: center; gap: 20px; }

.profile-avatar {
    width: 75px; height: 75px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    /* 🔥 Яркая рамка для аватарки */
    border: 3px solid rgba(158, 239, 225, 0.4);
    box-shadow: 0 0 25px rgba(158, 239, 225, 0.2);
    overflow: hidden; background: transparent;
}
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }

.profile-info h2 { font-size: 22px; margin: 0 0 5px 0; color: #fff; font-weight: 800; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.profile-balance { margin: 0; font-size: 14px; color: rgba(158, 239, 225, 0.9); font-weight: 500; } /* Мятный цвет ID */

/* ========================================= */
/* 🔥 УЛЬТРА-СЕЙФ ШАРДОВ (ГЛАВНЫЙ ФОКУС) 🔥 */
/* ========================================= */
.shards-dashboard-block {
    /* 🔥 Плотная подложка сейфа, чтобы текст не сливался со стикерами */
    background: linear-gradient(180deg, rgba(13, 22, 41, 0.95) 0%, rgba(6, 10, 20, 0.98) 100%) !important;

    border: 1px solid rgba(0, 229, 255, 0.4) !important;
    border-radius: 32px;
    padding: 35px 20px;
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 30px rgba(0, 229, 255, 0.05);
    position: relative;
    overflow: hidden;
    transform: translateZ(0);
}

/* 🔥 МАГИЯ 3: Глубокий синий туман позади кристалла внутри сейфа */
.shards-dashboard-block::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(0, 119, 182, 0.3) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Огромный парящий кристалл (уже анимирован в style.css) */
.shards-big-icon { margin-bottom: 5px; z-index: 1; }
.shards-big-icon img {
    width: 75px !important;
    height: 75px !important;
    object-fit: contain;
    filter: drop-shadow(0 0 20px rgba(0, 229, 255, 0.8));
}

/* Текст над цифрами */
.shards-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 5px;
    z-index: 1;
}

/* Громадные цифры баланса */
.shards-amount {
    font-size: 58px;
    font-weight: 900;
    color: #fff;
    /* 🔥 Бирюзовое свечение цифр */
    text-shadow: 0 0 30px rgba(158, 239, 225, 0.8), 0 2px 5px rgba(0,0,0,0.5);
    line-height: 1;
    margin-bottom: 25px;
    z-index: 1;
}

/* Широкая кнопка "За покупками" */
.shards-spend-btn {
    width: 100%;
    /* 🔥 Градиент от циана к синему */
    background: linear-gradient(90deg, #00E5FF, #0077B6) !important;
    color: #fff;
    border: none !important;
    padding: 18px 20px;
    border-radius: 18px;
    font-weight: 800;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 8px 25px rgba(0, 229, 255, 0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.shards-spend-btn:active {
    transform: scale(0.96);
    box-shadow: 0 4px 15px rgba(0, 229, 255, 0.3);
}

/* --- Меню --- */
.account-menu { padding: 0; overflow: hidden; }
.menu-item { display: flex; align-items: center; padding: 18px 20px; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background 0.2s; }
.menu-item:last-child { border-bottom: none; }
.menu-item:active { background: rgba(158, 239, 225, 0.08); } /* Мятный блик при нажатии */

.menu-icon {
    width: 40px; height: 40px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; margin-right: 15px;
    background: rgba(158, 239, 225, 0.1); /* Мятный фон иконки */
    border: 1px solid rgba(158, 239, 225, 0.2);
}
.support-icon { color: #9EEFE1; filter: drop-shadow(0 0 8px rgba(158, 239, 225, 0.4)); }
.menu-icon svg { width: 20px; height: 20px; }
.menu-text { flex: 1; font-size: 16px; font-weight: 600; }
.menu-arrow { color: rgba(158, 239, 225, 0.6); display: flex; align-items: center; }
.menu-arrow svg { width: 22px; height: 22px; }

/* --- История --- */
.account-history-block { padding: 25px 20px; }
.history-title { font-size: 16px; font-weight: 800; margin-bottom: 15px; color: #fff; }
.history-empty { text-align: center; padding: 20px; color: rgba(255, 255, 255, 0.5); font-size: 13px; }