html:has(body.account-page) {
    overflow-x: clip;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 244, 238, 0.48) transparent;
}
html:has(body.account-page)::-webkit-scrollbar { width: 8px; height: 8px; }
html:has(body.account-page)::-webkit-scrollbar-button { display: none; width: 0; height: 0; background: transparent; }
html:has(body.account-page)::-webkit-scrollbar-track,
html:has(body.account-page)::-webkit-scrollbar-track-piece,
html:has(body.account-page)::-webkit-scrollbar-corner { background: transparent; }
html:has(body.account-page)::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(37, 244, 238, 0.48); background-clip: padding-box; }
html:has(body.account-page)::-webkit-scrollbar-thumb:hover { background-color: rgba(254, 44, 85, 0.66); }
html:has(body.account-chat-directory-open),
html:has(body.account-navigation-open) { overflow-y: hidden; scrollbar-width: none; }
html:has(body.account-chat-directory-open)::-webkit-scrollbar,
html:has(body.account-navigation-open)::-webkit-scrollbar { display: none; width: 0; height: 0; }

.account-page {
    --account-cyan-soft: rgba(37, 244, 238, 0.12);
    --account-pink-soft: rgba(254, 44, 85, 0.12);
    --account-panel: rgba(15, 15, 18, 0.92);
    --account-panel-raised: rgba(23, 23, 27, 0.96);
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

.account-page .inner-page-main {
    min-height: calc(100vh - var(--header-height));
    padding: 118px 0 76px;
}

.auth-notifications {
    position: relative;
    width: 46px;
    min-width: 46px;
    justify-content: center;
    padding-inline: 0;
    border-color: rgba(37, 244, 238, 0.22);
    background: rgba(37, 244, 238, 0.07);
}

.auth-notifications b,
.account-heading-actions b {
    position: absolute;
    top: -7px;
    right: -6px;
    min-width: 21px;
    height: 21px;
    padding: 0 5px;
    border: 2px solid #000;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    line-height: 17px;
    text-align: center;
}

.account-shell {
    display: grid;
    min-width: 0;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

.account-sidebar {
    position: sticky;
    top: 106px;
    min-width: 0;
    max-height: calc(100vh - 132px);
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 26px;
    background:
        linear-gradient(150deg, rgba(37, 244, 238, 0.05), transparent 34%),
        linear-gradient(330deg, rgba(254, 44, 85, 0.05), transparent 38%),
        rgba(10, 10, 12, 0.96);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.36);
}

.account-sidebar-scroll {
    display: grid;
    min-width: 0;
    max-height: calc(100vh - 132px);
    grid-template-rows: auto auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: auto;
    scrollbar-width: none;
}

.account-sidebar-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }

.account-sidebar-scrollbar {
    position: absolute;
    z-index: 8;
    top: 18px;
    right: 4px;
    bottom: 18px;
    width: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.account-sidebar-scrollbar.is-visible { opacity: 1; }
.account-sidebar-scrollbar > i {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    min-height: 46px;
    border-radius: inherit;
    background: linear-gradient(var(--cyan), #fff 52%, var(--pink));
    box-shadow: 0 0 10px rgba(37, 244, 238, 0.26);
    transform: translateY(var(--account-sidebar-thumb-top, 0));
    transition: height 120ms ease, transform 90ms linear;
}

.account-identity {
    position: relative;
    display: grid;
    justify-items: center;
    padding: 28px 20px 24px;
    overflow: hidden;
    border-bottom: 1px solid var(--line);
    text-align: center;
    transition: background 220ms ease, border-color 220ms ease;
    animation: account-identity-in 440ms var(--ease) both;
}

.account-identity::before,
.account-profile-cover::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 24px 24px;
    content: "";
    mask-image: linear-gradient(#000, transparent);
    pointer-events: none;
}

.account-identity::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -55%;
    width: 38%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    content: "";
    pointer-events: none;
    transform: skewX(-18deg);
    transition: left 520ms var(--ease);
}

.account-identity:hover { border-bottom-color: rgba(37, 244, 238, 0.28); background: linear-gradient(135deg, rgba(37, 244, 238, 0.055), rgba(254, 44, 85, 0.045)); }
.account-identity:hover::after { left: 118%; }

@keyframes account-identity-in {
    from { opacity: 0; transform: translateY(-12px); }
}

.account-avatar,
.account-user-avatar {
    position: relative;
    display: grid;
    width: 78px;
    height: 78px;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 3px solid #0b0b0d;
    border-radius: 25px;
    background: linear-gradient(135deg, var(--cyan), #fff 48%, var(--pink));
    box-shadow: -4px 4px 0 rgba(37, 244, 238, 0.75), 4px -4px 0 rgba(254, 44, 85, 0.75);
    color: #050505;
    font-size: 25px;
    font-weight: 950;
    transition: transform 220ms var(--ease), border-radius 220ms var(--ease), box-shadow 220ms ease;
}

.account-identity:hover > .account-avatar { border-radius: 31px; box-shadow: -6px 6px 0 rgba(37, 244, 238, 0.82), 6px -6px 0 rgba(254, 44, 85, 0.82); transform: rotate(-3deg) scale(1.045); }

.account-avatar img,
.account-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-avatar.is-large {
    width: 126px;
    height: 126px;
    border-radius: 38px;
    font-size: 38px;
}

.account-identity > div {
    position: relative;
    display: grid;
    gap: 1px;
    margin-top: 15px;
}

.account-identity strong {
    max-width: 210px;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 180ms ease, letter-spacing 180ms ease;
}

.account-identity:hover strong { color: #fff; letter-spacing: 0.012em; }

.account-identity > div > span {
    color: var(--muted);
    font-size: 13px;
}

.account-role {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding: 6px 11px;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 999px;
    background: rgba(37, 244, 238, 0.07);
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms var(--ease);
}

.account-identity:hover .account-role { border-color: rgba(254, 44, 85, 0.35); background: linear-gradient(90deg, rgba(37, 244, 238, 0.1), rgba(254, 44, 85, 0.1)); color: #fff; transform: translateY(-1px); }

.account-progression {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    gap: 10px;
    margin-top: 14px;
    padding: 13px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 18px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px),
        radial-gradient(circle at 0 0, rgba(37, 244, 238, 0.12), transparent 43%),
        radial-gradient(circle at 100% 100%, rgba(254, 44, 85, 0.12), transparent 46%),
        rgba(255, 255, 255, 0.026);
    background-size: 18px 18px, 18px 18px, auto, auto, auto;
    box-shadow: inset 0 0 28px rgba(255, 255, 255, 0.022), 0 10px 26px rgba(0, 0, 0, 0.18);
    text-align: left;
    isolation: isolate;
    transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease);
}

.account-progression::before {
    position: absolute;
    top: 0;
    right: 14px;
    left: 14px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--pink), transparent);
    content: "";
    opacity: 0.62;
    transform: scaleX(0.78);
    transition: opacity 220ms ease, transform 220ms var(--ease);
}

.account-progression::after {
    position: absolute;
    z-index: -1;
    top: -70%;
    left: -52%;
    width: 42%;
    height: 240%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
    content: "";
    pointer-events: none;
    transform: rotate(18deg);
    transition: left 620ms var(--ease);
}

.account-progression:hover { border-color: rgba(37, 244, 238, 0.38); box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.3), 3px -3px 0 rgba(254, 44, 85, 0.28), 0 18px 38px rgba(0, 0, 0, 0.3); transform: translateY(-3px); }
.account-progression:hover::before { opacity: 1; transform: scaleX(1.02); }
.account-progression:hover::after { left: 118%; }

.account-progression-head { position: relative; z-index: 1; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 62px; gap: 8px; align-items: stretch; }
.account-status-tile,
.account-level-tile { min-width: 0; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(0, 0, 0, 0.28); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.account-status-tile { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; padding: 8px; border-radius: 13px; }
.account-status-tile > i { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.22); border-radius: 10px; background: rgba(37, 244, 238, 0.08); color: var(--cyan); font-size: 12px; box-shadow: inset -2px 0 0 rgba(254, 44, 85, 0.45); transition: transform 200ms var(--ease), box-shadow 200ms ease; }
.account-status-tile > span { display: grid; min-width: 0; gap: 1px; }
.account-status-tile small,
.account-level-tile small,
.account-progress-metric small { max-width: 100%; color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: 0.065em; line-height: 1.15; overflow-wrap: anywhere; text-transform: uppercase; }
.account-status-tile strong { max-width: none; overflow: visible; color: #fff; font-size: 10px; font-weight: 950; letter-spacing: 0.04em; line-height: 1.2; overflow-wrap: normal; text-overflow: clip; text-transform: uppercase; white-space: normal; }
.account-level-tile { display: grid; align-content: center; justify-items: center; gap: 1px; padding: 8px 5px; border-radius: 13px; text-align: center; }
.account-level-tile strong { color: #fff; font-size: 22px; font-weight: 950; line-height: 1; text-shadow: -1px 0 var(--cyan), 1px 0 var(--pink); transition: color 180ms ease, text-shadow 180ms ease, transform 180ms var(--ease); }
.account-progression:hover .account-status-tile,
.account-progression:hover .account-level-tile { border-color: rgba(255, 255, 255, 0.16); background: rgba(255, 255, 255, 0.045); }
.account-progression:hover .account-status-tile > i { box-shadow: inset -2px 0 0 rgba(254, 44, 85, 0.72), 0 0 18px rgba(37, 244, 238, 0.14); transform: rotate(-6deg) scale(1.06); }
.account-status-tile:hover { border-color: rgba(37, 244, 238, 0.42) !important; box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.2); transform: translateY(-2px) translateX(-1px); }
.account-level-tile:hover { border-color: rgba(254, 44, 85, 0.42) !important; box-shadow: 2px -2px 0 rgba(254, 44, 85, 0.2); transform: translateY(-2px) translateX(1px); }
.account-level-tile:hover strong { color: var(--cyan); text-shadow: -1px 0 #fff, 1px 0 var(--pink), 0 0 14px rgba(37, 244, 238, 0.2); transform: scale(1.08); }

.account-progression-metrics { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.account-progress-metric { display: grid; min-width: 0; grid-template-columns: 24px minmax(0, 1fr); gap: 6px; align-items: center; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 12px; background: rgba(0, 0, 0, 0.22); transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease); }
.account-progress-metric > i { color: var(--cyan); font-size: 11px; text-align: center; transition: color 180ms ease, transform 180ms var(--ease); }
.account-progress-metric.is-rating { border-color: rgba(254, 44, 85, 0.15); }
.account-progress-metric.is-rating > i { color: var(--pink); }
.account-progress-metric > span { display: grid; min-width: 0; gap: 2px; }
.account-progress-metric strong { overflow: hidden; color: #fff; font-size: 12px; font-weight: 900; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.account-progress-metric:hover { border-color: rgba(37, 244, 238, 0.34); background: rgba(37, 244, 238, 0.06); transform: translateY(-2px); }
.account-progress-metric.is-rating:hover { border-color: rgba(254, 44, 85, 0.36); background: rgba(254, 44, 85, 0.06); }
.account-progress-metric:hover > i { transform: scale(1.16) rotate(-7deg); }

.account-progress-route { position: relative; z-index: 1; display: grid; gap: 7px; padding: 9px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 13px; background: rgba(0, 0, 0, 0.22); }
.account-progress-route > header,
.account-progress-route > footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.account-progress-route > header { color: var(--muted); font-size: 8px; font-weight: 800; letter-spacing: 0.055em; text-transform: uppercase; }
.account-progress-route > header strong { overflow: hidden; color: #dcdce1; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.account-progress-route progress { width: 100%; height: 7px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.account-progression progress::-webkit-progress-bar { border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.account-progression progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--cyan), #fff 56%, var(--pink)); box-shadow: 0 0 14px rgba(37, 244, 238, 0.3); }
.account-progression progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--cyan), #fff 56%, var(--pink)); }
.account-progress-route > footer { color: var(--muted); font-size: 9px; font-weight: 750; }
.account-progress-route > footer span { display: inline-flex; min-width: 0; align-items: center; gap: 5px; }
.account-progress-route > footer i { color: var(--cyan); font-size: 9px; }
.account-progress-route > footer strong { flex: 0 0 auto; color: #fff; font-size: 11px; font-weight: 950; }

.account-maximum-level { position: relative; z-index: 1; display: grid; min-height: 42px; place-items: center; padding: 8px 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 13px; background: linear-gradient(100deg, rgba(37, 244, 238, 0.11), rgba(255, 255, 255, 0.045) 50%, rgba(254, 44, 85, 0.11)); color: #fff; text-align: center; transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.account-maximum-level::before { position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, 0.08), transparent 70%); content: ""; opacity: 0; transform: translateX(-70%); transition: opacity 180ms ease, transform 460ms var(--ease); pointer-events: none; }
.account-maximum-level strong { max-width: none; overflow: visible; font-size: 10px; font-weight: 950; letter-spacing: 0.055em; line-height: 1.25; overflow-wrap: normal; text-overflow: clip; text-transform: uppercase; white-space: normal; }
.account-maximum-level:hover { border-color: rgba(255, 255, 255, 0.34); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.22), 2px -2px 0 rgba(254, 44, 85, 0.22); transform: translateY(-2px); }
.account-maximum-level:hover::before { opacity: 1; transform: translateX(70%); }

.account-progression.is-administrator { border-color: rgba(255, 255, 255, 0.26); background: linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px), radial-gradient(circle at 5% 5%, rgba(37, 244, 238, 0.2), transparent 43%), radial-gradient(circle at 96% 95%, rgba(254, 44, 85, 0.21), transparent 46%), rgba(10, 10, 13, 0.94); background-size: 18px 18px, 18px 18px, auto, auto, auto; box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.34), 3px -3px 0 rgba(254, 44, 85, 0.33), inset 0 0 32px rgba(255, 255, 255, 0.035), 0 16px 38px rgba(0, 0, 0, 0.34); }
.account-progression.is-administrator::before { right: 9px; left: 9px; height: 3px; opacity: 1; background: linear-gradient(90deg, var(--cyan), #fff 50%, var(--pink)); box-shadow: 0 0 14px rgba(255, 255, 255, 0.18); transform: none; }
.account-progression.is-administrator .account-status-tile { border-color: rgba(255, 255, 255, 0.22); background: linear-gradient(110deg, rgba(37, 244, 238, 0.15), rgba(255, 255, 255, 0.055) 50%, rgba(254, 44, 85, 0.15)); box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.035); }
.account-progression.is-administrator .account-status-tile > i { border-color: rgba(255, 255, 255, 0.32); background: linear-gradient(145deg, var(--cyan), #fff 52%, var(--pink)); box-shadow: 0 0 18px rgba(37, 244, 238, 0.2), 0 0 24px rgba(254, 44, 85, 0.11); color: #050507; }
.account-progression.is-administrator .account-status-tile strong { background: linear-gradient(90deg, var(--cyan), #fff 48%, var(--pink)); background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(255, 255, 255, 0.12); }
.account-progression.is-administrator .account-level-tile { border-color: rgba(254, 44, 85, 0.24); background: linear-gradient(145deg, rgba(254, 44, 85, 0.13), rgba(37, 244, 238, 0.09)); }
.account-progression.is-administrator .account-progress-route { border-color: rgba(37, 244, 238, 0.15); }
.account-progression.is-administrator:hover { border-color: rgba(255, 255, 255, 0.42); box-shadow: -5px 5px 0 rgba(37, 244, 238, 0.43), 5px -5px 0 rgba(254, 44, 85, 0.42), inset 0 0 42px rgba(255, 255, 255, 0.05), 0 22px 46px rgba(0, 0, 0, 0.42); }

.account-admin-link {
    position: relative;
    z-index: 1;
    display: grid;
    width: 100%;
    min-height: 44px;
    align-items: center;
    margin-top: 14px;
    padding: 9px 11px;
    border: 1px solid rgba(254, 44, 85, 0.28);
    border-radius: 13px;
    background: linear-gradient(100deg, rgba(254, 44, 85, 0.1), rgba(37, 244, 238, 0.055));
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    grid-template-columns: 28px minmax(0, 1fr) 18px;
    gap: 8px;
    text-align: left;
    transition: transform 180ms var(--ease), border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.account-admin-link > i:first-child { color: var(--pink); }
.account-admin-link > i:last-child { color: var(--cyan); font-size: 11px; transition: transform 180ms var(--ease); }
.account-admin-link:hover,
.account-admin-link:focus-visible { border-color: rgba(37, 244, 238, 0.48); outline: 0; background: linear-gradient(100deg, rgba(254, 44, 85, 0.16), rgba(37, 244, 238, 0.12)); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.44), 2px -2px 0 rgba(254, 44, 85, 0.42); transform: translateY(-2px); }
.account-admin-link:hover > i:last-child,
.account-admin-link:focus-visible > i:last-child { transform: translateX(3px); }

.account-menu-toggle {
    position: relative;
    z-index: 2;
    display: none;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.28);
    border-radius: 13px;
    background: rgba(37, 244, 238, 0.08);
    color: var(--cyan);
    cursor: pointer;
}

.account-sidebar-opener,
.account-sidebar-backdrop { display: none; }

.account-navigation {
    display: grid;
    min-height: auto;
    gap: 18px;
    padding: 20px 13px 22px;
    overflow: visible;
}

.account-nav-group {
    display: grid;
    gap: 4px;
}

.account-nav-group > span {
    padding: 0 12px 5px;
    color: #77777f;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.account-nav-group > a {
    position: relative;
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 43px;
    padding: 8px 12px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 13px;
    color: #b6b6bd;
    font-size: 13px;
    font-weight: 720;
    transition: 180ms var(--ease);
}

.account-nav-group > a::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 13px 0 0 13px;
    background: linear-gradient(var(--cyan), var(--pink));
    content: "";
    opacity: 0;
    transform: translateX(-4px);
    transition: inherit;
}

.account-nav-group > a:hover,
.account-nav-group > a.is-current {
    border-color: rgba(255, 255, 255, 0.09);
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
    transform: translateX(2px);
}

.account-nav-group > a.is-current {
    border-color: rgba(37, 244, 238, 0.18);
    background: linear-gradient(90deg, rgba(37, 244, 238, 0.1), rgba(254, 44, 85, 0.055));
}

.account-nav-group > a.is-current::before {
    opacity: 1;
    transform: none;
}

.account-nav-group > a > i:first-child {
    width: 24px;
    color: #d9d9de;
    text-align: center;
}

.account-nav-group > a.is-current > i:first-child {
    color: var(--cyan);
}

.account-nav-group > a b {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-size: 10px;
    line-height: 20px;
    text-align: center;
}

.account-nav-group > a em {
    color: #696971;
    font-size: 10px;
}

.account-workspace {
    min-width: 0;
}

.account-page-heading {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    min-height: 96px;
    margin-bottom: 28px;
}

.account-page-heading > div:first-child {
    max-width: 820px;
}

.account-page-heading p {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 6px;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.account-page-heading p span {
    width: 18px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--cyan) 50%, var(--pink) 50%);
}

.account-page-heading h1 {
    margin: 0;
    font-size: clamp(32px, 4vw, 54px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.account-page-heading > div:first-child > span {
    display: block;
    max-width: 760px;
    margin-top: 9px;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.55;
}

.account-heading-actions {
    display: flex;
    gap: 9px;
}

.account-icon-button {
    position: relative;
    display: inline-grid;
    width: 44px;
    height: 44px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.045);
    color: #e8e8eb;
    cursor: pointer;
    transition: 180ms var(--ease);
}

.account-icon-button:hover {
    border-color: rgba(37, 244, 238, 0.45);
    background: rgba(37, 244, 238, 0.1);
    color: var(--cyan);
    transform: translateY(-2px);
}

.account-icon-button.is-danger:hover {
    border-color: rgba(254, 44, 85, 0.48);
    background: rgba(254, 44, 85, 0.12);
    color: #ff6c88;
}

.account-icon-button.is-success {
    border-color: rgba(54, 230, 154, 0.25);
    color: var(--success);
}

.account-icon-button.is-play {
    border-color: rgba(37, 244, 238, 0.35);
    background: var(--cyan);
    color: #050505;
}

.account-icon-button.is-play:hover {
    background: #fff;
    color: #000;
}

.account-icon-button.is-favorite {
    border-color: rgba(254, 44, 85, 0.34);
    background: rgba(254, 44, 85, 0.1);
    color: var(--pink);
}

.account-coin {
    --account-coin-font-size: 19px;
    --account-coin-icon-size: 28px;
    --account-coin-unit-size: 13px;
    display: inline-flex;
    width: max-content;
    min-width: max-content;
    min-height: 36px;
    max-width: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 4px;
    overflow: visible;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    box-shadow: inset 0 0 18px rgba(37, 244, 238, 0.025);
    color: #fff !important;
    font-family: "TikTok Sans", Inter, Arial, sans-serif !important;
    font-size: var(--account-coin-font-size) !important;
    font-style: normal !important;
    font-variant-numeric: tabular-nums;
    font-weight: 900 !important;
    letter-spacing: -0.3px !important;
    line-height: 23px !important;
    text-transform: none !important;
    white-space: nowrap;
    vertical-align: middle;
}

.account-coin > img {
    width: var(--account-coin-icon-size) !important;
    height: var(--account-coin-icon-size) !important;
    flex: 0 0 auto;
    object-fit: contain;
    transform: rotate(-7deg);
    transition: transform 180ms var(--ease);
}

.account-coin > .account-coin-value {
    color: #fff !important;
    font-family: inherit !important;
    font-size: var(--account-coin-font-size) !important;
    font-style: normal !important;
    font-weight: 900 !important;
    letter-spacing: -0.3px !important;
    line-height: 23px !important;
}

.account-coin > small {
    color: #fff !important;
    font-family: inherit !important;
    font-size: var(--account-coin-unit-size) !important;
    font-style: normal !important;
    font-weight: 760 !important;
    letter-spacing: 0 !important;
    line-height: 16px !important;
    opacity: 0.72 !important;
    text-transform: none !important;
}

.account-shell :is(strong, b, small, span, dd, td, h2, p):has(> .account-coin) {
    overflow: visible;
    text-overflow: clip;
}

:is(a, article, td, strong, b):hover > .account-coin > img,
.account-coin:hover > img {
    transform: rotate(5deg) scale(1.1);
}

.account-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 10px 17px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: var(--surface-soft);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    transition: 180ms var(--ease);
}

.account-button .account-coin {
    --account-coin-icon-size: 1.45em;
    display: inline-flex;
    width: auto;
    min-width: 0;
    min-height: 0;
    max-width: 100%;
    flex: 0 1 auto;
    gap: 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: currentColor !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: inherit !important;
    font-weight: inherit !important;
    letter-spacing: inherit !important;
    line-height: 1 !important;
}
.account-button .account-coin > .account-coin-value,
.account-button .account-coin > small { color: currentColor !important; font-family: inherit !important; font-size: inherit !important; font-style: inherit !important; font-weight: inherit !important; letter-spacing: inherit !important; line-height: 1 !important; }
.account-button .account-coin > small { opacity: 0.78 !important; }

.account-button:hover {
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-2px);
}

.account-button-primary {
    border-color: var(--cyan);
    background: var(--cyan);
    color: #030303;
    box-shadow: 3px 3px 0 rgba(254, 44, 85, 0.8);
}

.account-button-primary:hover {
    background: #fff;
    box-shadow: 5px 5px 0 var(--pink);
}

.account-button-secondary {
    border-color: rgba(254, 44, 85, 0.32);
    background: rgba(254, 44, 85, 0.1);
    color: #ff7a94;
}

.account-button-danger {
    border-color: rgba(254, 44, 85, 0.42);
    background: rgba(254, 44, 85, 0.13);
    color: #ff7892;
}

.account-button-quiet {
    min-height: 38px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.035);
    color: var(--muted-strong);
    font-size: 12px;
}

.account-button:disabled,
.account-icon-button:disabled {
    cursor: wait;
    opacity: 0.55;
    transform: none;
}

.account-button.is-loading {
    position: relative;
    padding-right: 43px;
}

.account-button.is-loading::after {
    position: absolute;
    right: 15px;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: account-spin 620ms linear infinite;
    content: "";
}

@keyframes account-spin { to { transform: rotate(360deg); } }

.account-panel {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.025), transparent 45%),
        var(--account-panel);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.2);
    transition: border-color 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease;
}

.account-panel:hover {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
}

.account-panel + .account-panel,
.account-dashboard-columns + .account-panel,
.account-metric-grid + .account-panel,
.account-balance-overview + .account-panel,
.account-disabled-feature + .account-panel,
.account-support-head + .account-panel,
.account-referral-hero + .account-dashboard-columns,
.account-reward-stage + .account-panel,
.account-cashback-hero + .account-dashboard-columns {
    margin-top: 20px;
}

.account-panel > header {
    display: flex;
    min-height: 34px;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 18px;
}

.account-panel > header > div {
    display: flex;
    min-width: 0;
    gap: 10px;
    align-items: center;
}

.account-panel > header > div > i {
    color: var(--cyan);
}

.account-panel h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 820;
    letter-spacing: -0.02em;
}

.account-panel > header > a,
.account-empty a,
.account-notification-list a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 800;
}

.account-panel > header > span:not(.account-badge) {
    color: var(--muted);
    font-size: 12px;
}

.account-panel-copy {
    margin-bottom: 18px;
    color: var(--muted);
    font-size: 13px;
}

.account-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.account-feature-card {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 178px;
    gap: 15px;
    align-items: flex-start;
    padding: 21px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: var(--account-panel);
    isolation: isolate;
    transition: 190ms var(--ease);
}

.account-module-dashboard .account-feature-card {
    --dashboard-card-accent: 37, 244, 238;
    --dashboard-card-secondary: 254, 44, 85;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--dashboard-card-accent), 0.15), transparent 48%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.027), transparent 46%),
        var(--account-panel);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
    animation: account-dashboard-card-in 420ms var(--ease) both;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease), background 190ms ease;
}

.account-module-dashboard .account-feature-card:not(.account-radio-card) {
    display: grid;
    min-height: 164px;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 8px 12px;
    align-content: start;
    align-items: start;
    padding: 18px;
}
.account-module-dashboard .account-feature-card:not(.account-radio-card) > .account-card-icon { grid-column: 1; grid-row: 1; }
.account-module-dashboard .account-feature-card:not(.account-radio-card) > div:not(.account-radio-visual) { display: contents; }
.account-module-dashboard .account-feature-card:not(.account-radio-card) > div > small { min-width: 0; grid-column: 2; grid-row: 1; align-self: center; line-height: 1.35; }
.account-module-dashboard .account-feature-card:not(.account-radio-card) > div > strong { min-width: 0; grid-column: 1 / -1; grid-row: 2; align-self: center; }
.account-module-dashboard .account-feature-card:not(.account-radio-card) > div > p { min-width: 0; grid-column: 1 / -1; grid-row: 3; margin: 0; padding-right: 20px; }

.account-module-dashboard .account-feature-card:nth-child(2) { --dashboard-card-accent: 254, 44, 85; --dashboard-card-secondary: 37, 244, 238; animation-delay: 45ms; }
.account-module-dashboard .account-feature-card:nth-child(3) { --dashboard-card-accent: 254, 44, 85; --dashboard-card-secondary: 255, 255, 255; animation-delay: 90ms; }
.account-module-dashboard .account-feature-card:nth-child(4) { --dashboard-card-accent: 255, 255, 255; --dashboard-card-secondary: 254, 44, 85; animation-delay: 135ms; }
.account-module-dashboard .account-feature-card:nth-child(5) { --dashboard-card-accent: 254, 44, 85; --dashboard-card-secondary: 37, 244, 238; animation-delay: 180ms; }
.account-module-dashboard .account-feature-card:nth-child(6) { --dashboard-card-accent: 37, 244, 238; --dashboard-card-secondary: 255, 255, 255; animation-delay: 225ms; }
.account-module-dashboard .account-feature-card:nth-child(7) { --dashboard-card-accent: 255, 255, 255; --dashboard-card-secondary: 37, 244, 238; animation-delay: 270ms; }

.account-module-dashboard .account-feature-card::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 20px;
    left: 20px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, rgba(var(--dashboard-card-accent), 0.98), rgba(var(--dashboard-card-secondary), 0.88), transparent);
    opacity: 0.48;
    content: "";
    transform: scaleX(0.82);
    transition: opacity 190ms ease, transform 190ms var(--ease);
}

.account-module-dashboard .account-feature-card > * {
    position: relative;
    z-index: 1;
}

.account-feature-card::after,
.account-metric-card::after {
    position: absolute;
    right: -42px;
    bottom: -52px;
    width: 125px;
    height: 125px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(255, 255, 255, 0.018);
    content: "";
    pointer-events: none;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-feature-card:hover {
    border-color: rgba(37, 244, 238, 0.36);
    box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.65), 3px -3px 0 rgba(254, 44, 85, 0.65);
    transform: translateY(-4px);
}

.account-module-dashboard .account-feature-card:is(:hover, :focus-visible) {
    border-color: rgba(var(--dashboard-card-accent), 0.48);
    box-shadow:
        -3px 3px 0 rgba(37, 244, 238, 0.46),
        3px -3px 0 rgba(254, 44, 85, 0.46),
        0 28px 72px rgba(0, 0, 0, 0.38);
    transform: translateY(-5px);
}

.account-module-dashboard .account-feature-card:is(:hover, :focus-visible)::before { opacity: 1; transform: scaleX(1.05); }
.account-module-dashboard .account-feature-card:is(:hover, :focus-visible)::after { border-color: rgba(var(--dashboard-card-accent), 0.2); box-shadow: 0 0 0 22px rgba(var(--dashboard-card-secondary), 0.035); transform: translate(-7px, -7px) scale(1.06); }

.account-feature-card > div:not(.account-radio-visual) {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.account-feature-card > i:last-child {
    position: absolute;
    right: 17px;
    bottom: 17px;
    color: #73737b;
    transition: inherit;
}

.account-feature-card:hover > i:last-child {
    color: var(--cyan);
    transform: translateX(3px);
}

.account-card-icon {
    display: grid;
    width: 43px;
    height: 43px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 14px;
    background: var(--account-cyan-soft);
    color: var(--cyan);
    box-shadow: inset 0 0 0 1px rgba(37, 244, 238, 0.08);
    transition: color 190ms ease, background 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-card-icon.is-pink {
    background: var(--account-pink-soft);
    color: #ff6e8a;
}

.account-card-icon.is-white {
    background: rgba(255, 255, 255, 0.09);
    color: #fff;
}

.account-module-dashboard .account-feature-card:is(:hover, :focus-visible) .account-card-icon {
    background: rgba(var(--dashboard-card-accent), 0.16);
    color: rgb(var(--dashboard-card-accent));
    box-shadow: 0 0 0 1px rgba(var(--dashboard-card-accent), 0.28), 0 12px 28px rgba(var(--dashboard-card-accent), 0.12);
    transform: translateY(-2px) rotate(-5deg) scale(1.08);
}

.account-feature-card > div:not(.account-radio-visual) > small {
    color: var(--muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.account-feature-card strong {
    display: block;
    overflow: hidden;
    font-size: clamp(20px, 2vw, 28px);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.account-feature-card p {
    margin: 1px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.account-balance-card {
    background:
        radial-gradient(circle at 90% 0, rgba(37, 244, 238, 0.18), transparent 45%),
        var(--account-panel);
}

.account-radio-card {
    grid-column: span 2;
    align-items: center;
    cursor: pointer;
}

.account-radio-card:focus-visible {
    outline: 2px solid var(--cyan);
    outline-offset: 4px;
}

.account-radio-change-icon {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.25);
    border-radius: 13px;
    background: rgba(37, 244, 238, 0.08);
    color: var(--cyan);
    transition: transform 180ms var(--ease), background 180ms ease;
}

.account-radio-card:hover .account-radio-change-icon { background: rgba(37, 244, 238, 0.14); transform: translateY(2px); }

.account-card-statline {
    display: grid;
    gap: 4px;
}

.account-card-statline > span {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 4px;
}

.account-payout-card { background: radial-gradient(circle at 96% 4%, rgba(254, 44, 85, 0.13), transparent 46%), var(--account-panel); }
.account-games-total-card { background: radial-gradient(circle at 96% 4%, rgba(37, 244, 238, 0.12), transparent 46%), var(--account-panel); }
.account-gift-value-card { background: radial-gradient(circle at 96% 4%, rgba(255, 255, 255, 0.09), transparent 46%), var(--account-panel); }

@keyframes account-dashboard-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
}

.account-radio-visual {
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.25);
    border-radius: 24px;
    background: #08080a;
}

.account-radio-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-radio-visual > i {
    color: var(--cyan);
    font-size: 27px;
}

.account-equalizer {
    position: absolute;
    inset: auto 8px 8px;
    display: flex;
    height: 23px;
    gap: 2px;
    align-items: end;
    justify-content: center;
    padding: 3px;
    border-radius: 7px;
    background: rgba(0, 0, 0, 0.72);
}

.account-equalizer i {
    width: 2px;
    height: 35%;
    border-radius: 9px;
    background: var(--cyan);
}

.is-playing .account-equalizer i {
    animation: account-equalizer 720ms ease-in-out infinite alternate;
}

.is-playing .account-equalizer i:nth-child(3n) { animation-delay: -300ms; background: #fff; }
.is-playing .account-equalizer i:nth-child(4n) { animation-delay: -520ms; background: var(--pink); }
.is-playing .account-equalizer i:nth-child(5n) { animation-duration: 430ms; }

@keyframes account-equalizer {
    to { height: 100%; }
}

.account-dashboard-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, 0.75fr);
    gap: 20px;
    margin-top: 20px;
}

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

.account-dashboard-panel {
    --dashboard-panel-accent: 37, 244, 238;
    --dashboard-panel-secondary: 254, 44, 85;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--dashboard-panel-accent), 0.105), transparent 42%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.028), transparent 46%),
        var(--account-panel);
    animation: account-dashboard-panel-in 420ms var(--ease) both;
}

.account-dashboard-panel.is-leader { --dashboard-panel-accent: 254, 44, 85; --dashboard-panel-secondary: 255, 255, 255; }
.account-dashboard-panel.is-referrals { --dashboard-panel-accent: 37, 244, 238; --dashboard-panel-secondary: 254, 44, 85; }
.account-dashboard-panel.is-notifications { --dashboard-panel-accent: 255, 255, 255; --dashboard-panel-secondary: 37, 244, 238; }

.account-dashboard-columns .account-dashboard-panel:nth-child(2) { animation-delay: 70ms; }
.account-dashboard-columns-secondary .account-dashboard-panel:nth-child(1) { animation-delay: 120ms; }
.account-dashboard-columns-secondary .account-dashboard-panel:nth-child(2) { animation-delay: 180ms; }

.account-dashboard-panel::before {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 22px;
    left: 22px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--pink), transparent);
    opacity: 0.46;
    content: "";
    transition: opacity 180ms ease, transform 180ms var(--ease);
}

.account-dashboard-panel::after {
    position: absolute;
    z-index: 0;
    right: -70px;
    bottom: -88px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(var(--dashboard-panel-accent), 0.1);
    border-radius: 50%;
    box-shadow: 0 0 0 30px rgba(var(--dashboard-panel-secondary), 0.018);
    content: "";
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-dashboard-panel > * { position: relative; z-index: 1; }

.account-dashboard-panel.is-leader::before { background: linear-gradient(90deg, transparent, var(--pink), #fff, transparent); }
.account-dashboard-panel.is-referrals::before { background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent); }
.account-dashboard-panel.is-notifications::before { background: linear-gradient(90deg, transparent, #fff, var(--cyan), transparent); }

.account-dashboard-panel:hover {
    border-color: rgba(var(--dashboard-panel-accent), 0.42);
    box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.34), 3px -3px 0 rgba(254, 44, 85, 0.34), 0 28px 70px rgba(0, 0, 0, 0.34);
    transform: translateY(-4px);
}

.account-dashboard-panel:hover::before { opacity: 1; transform: scaleX(1.08); }
.account-dashboard-panel:hover::after { border-color: rgba(var(--dashboard-panel-accent), 0.22); box-shadow: 0 0 0 30px rgba(var(--dashboard-panel-secondary), 0.045); transform: translate(-10px, -10px) scale(1.08); }
.account-dashboard-panel > header > div > i {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--dashboard-panel-accent), 0.18);
    border-radius: 12px;
    background: rgba(var(--dashboard-panel-accent), 0.075);
    color: rgb(var(--dashboard-panel-accent));
    transition: color 180ms ease, border-color 180ms ease, transform 180ms var(--ease), background 180ms ease, box-shadow 180ms ease;
}
.account-dashboard-panel:hover > header > div > i { border-color: rgba(var(--dashboard-panel-accent), 0.4); background: rgba(var(--dashboard-panel-accent), 0.14); color: rgb(var(--dashboard-panel-accent)); box-shadow: 0 9px 24px rgba(var(--dashboard-panel-accent), 0.12); transform: rotate(-7deg) scale(1.1); }
.account-dashboard-panel > header > a { padding: 8px 11px; border: 1px solid rgba(var(--dashboard-panel-accent), 0.15); border-radius: 999px; background: rgba(var(--dashboard-panel-accent), 0.055); color: rgb(var(--dashboard-panel-accent)); transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease; }
.account-dashboard-panel > header > a:hover { border-color: rgba(var(--dashboard-panel-accent), 0.42); background: rgba(var(--dashboard-panel-accent), 0.13); box-shadow: 0 8px 24px rgba(var(--dashboard-panel-accent), 0.1); transform: translateX(3px); }
.account-dashboard-panel :is(.account-activity-list, .account-notification-preview) article { border-radius: 12px; transition: background 160ms ease, padding 160ms ease, transform 160ms var(--ease); }
.account-dashboard-panel :is(.account-activity-list, .account-notification-preview) article:hover { padding-inline: 10px; background: rgba(255, 255, 255, 0.035); transform: translateX(3px); }
.account-dashboard-panel :is(.account-rank-spotlight, .account-mini-stats > div, .account-empty) { transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.account-dashboard-panel :is(.account-rank-spotlight, .account-mini-stats > div, .account-empty):hover { border-color: rgba(var(--dashboard-panel-accent), 0.34); background-color: rgba(var(--dashboard-panel-accent), 0.055); box-shadow: inset 3px 0 0 rgba(var(--dashboard-panel-accent), 0.72), 0 15px 36px rgba(0, 0, 0, 0.18); transform: translateY(-3px); }
.account-dashboard-panel.is-games > .account-empty { justify-content: flex-start; }

@keyframes account-dashboard-panel-in {
    from { opacity: 0; transform: translateY(16px); }
}

.account-activity-list,
.account-event-list,
.account-notification-preview,
.account-session-list,
.account-user-list,
.account-station-list,
.account-rate-list,
.account-notification-list,
.account-ticket-list {
    display: grid;
    gap: 9px;
}

.account-activity-list article,
.account-event-list article,
.account-notification-preview article {
    display: flex;
    min-width: 0;
    gap: 12px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.account-activity-list article:last-child,
.account-event-list article:last-child,
.account-notification-preview article:last-child {
    border-bottom: 0;
}

.account-activity-list article > div,
.account-event-list article > div,
.account-notification-preview article > div {
    display: grid;
    min-width: 0;
    flex: 1;
    gap: 1px;
}

.account-activity-list strong,
.account-event-list strong,
.account-notification-preview strong {
    overflow: hidden;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-activity-list small,
.account-event-list time,
.account-notification-preview time {
    color: var(--muted);
    font-size: 11px;
}

.account-activity-list b {
    font-size: 13px;
    white-space: nowrap;
}

.is-positive { color: var(--success) !important; }
.is-negative { color: #ff6985 !important; }

.account-result-icon {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    color: #dadade;
}

.account-result-icon.is-positive { background: rgba(54, 230, 154, 0.1); }
.account-result-icon.is-negative { background: rgba(254, 44, 85, 0.1); }

.account-rank-spotlight {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 16px;
    align-items: center;
    min-height: 130px;
    padding: 19px;
    border: 1px solid rgba(37, 244, 238, 0.17);
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(37, 244, 238, 0.09), rgba(254, 44, 85, 0.055));
}

.account-rank-spotlight > span {
    color: var(--cyan);
    font-size: 42px;
    font-weight: 950;
    letter-spacing: -0.06em;
}

.account-rank-spotlight strong { font-size: 17px; }
.account-rank-spotlight p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.account-rank-spotlight > i { color: var(--pink); font-size: 30px; }

.account-mini-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.account-mini-stats > div {
    display: grid;
    gap: 7px;
    min-height: 94px;
    align-content: center;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.03);
}

.account-mini-stats > div > span { color: var(--muted); font-size: 11px; }
.account-mini-stats > div > strong { font-size: clamp(20px, 2vw, 28px); font-weight: 900; line-height: 1.15; }

.account-notification-preview article {
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 13px;
}

.account-notification-preview article.is-unread {
    border-color: rgba(37, 244, 238, 0.16);
    background: rgba(37, 244, 238, 0.055);
}

.account-notification-preview article > i { color: var(--pink); }

.account-empty {
    display: flex;
    min-height: 128px;
    gap: 15px;
    align-items: center;
    justify-content: center;
    padding: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.13);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.018);
}

.account-empty > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.06);
    color: #777780;
}

.account-empty > div { max-width: 420px; }
.account-empty strong { display: block; font-size: 14px; }
.account-empty p { margin: 3px 0 7px; color: var(--muted); font-size: 12px; line-height: 1.5; }

.account-profile-form {
    display: grid;
    gap: 20px;
}

.account-profile-cover {
    position: relative;
    display: flex;
    min-height: 236px;
    gap: 42px;
    align-items: center;
    overflow: hidden;
    padding: 36px;
    border-color: rgba(37, 244, 238, 0.25);
    background:
        radial-gradient(circle at 10% 18%, rgba(37, 244, 238, 0.2), transparent 30%),
        radial-gradient(circle at 92% 82%, rgba(254, 44, 85, 0.18), transparent 34%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.03), transparent 46%),
        var(--account-panel);
    box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.2), 3px -3px 0 rgba(254, 44, 85, 0.18), 0 26px 72px rgba(0, 0, 0, 0.3);
    isolation: isolate;
    animation: account-profile-card-in 420ms var(--ease) both;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-profile-cover::after {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 28px;
    left: 28px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--pink), transparent);
    opacity: 0.62;
    content: "";
    transform: scaleX(0.86);
    transition: opacity 190ms ease, transform 190ms var(--ease);
}

.account-profile-avatar-edit {
    position: relative;
    z-index: 1;
    padding-bottom: 19px;
}

.account-profile-avatar-edit .account-avatar {
    transition: border-radius 190ms var(--ease), box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-profile-avatar-action {
    position: absolute;
    bottom: 0;
    left: 50%;
    display: inline-flex !important;
    width: max-content;
    min-height: 42px;
    gap: 8px !important;
    align-items: center;
    justify-content: center;
    padding: 8px 13px;
    overflow: hidden;
    border: 2px solid #0b0b0d;
    border-radius: 13px;
    background: linear-gradient(135deg, var(--pink), #ff6c88);
    color: #fff;
    box-shadow: 3px 3px 0 rgba(37, 244, 238, 0.8), 0 12px 28px rgba(0, 0, 0, 0.36);
    cursor: pointer;
    transform: translateX(-50%);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-profile-avatar-action:hover,
.account-profile-avatar-action:focus-within { border-color: var(--cyan); background: #fff; color: #08080a; box-shadow: 5px 5px 0 var(--pink), 0 16px 34px rgba(0, 0, 0, 0.42); transform: translate(-50%, -3px); }
.account-profile-avatar-action > span { position: static !important; width: auto !important; height: auto !important; overflow: visible !important; color: inherit !important; font-size: 11px !important; font-weight: 850; opacity: 1 !important; white-space: nowrap; }
.account-profile-avatar-action input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.account-profile-cover > * { position: relative; z-index: 1; }
.account-profile-cover:hover { border-color: rgba(37, 244, 238, 0.48); box-shadow: -5px 5px 0 rgba(37, 244, 238, 0.34), 5px -5px 0 rgba(254, 44, 85, 0.32), 0 34px 86px rgba(0, 0, 0, 0.4); transform: translateY(-4px); }
.account-profile-cover:hover::after { opacity: 1; transform: scaleX(1.04); }
.account-profile-cover:hover .account-profile-avatar-edit .account-avatar { border-radius: 44px; box-shadow: -7px 7px 0 rgba(37, 244, 238, 0.84), 7px -7px 0 rgba(254, 44, 85, 0.84); transform: rotate(-3deg) scale(1.045); }
.account-profile-cover-copy { display: grid; gap: 4px; }
.account-profile-cover h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.045em; }
.account-profile-cover p { margin: 0 0 8px; color: var(--cyan); font-size: 17px; font-weight: 800; }
.account-profile-cover-copy > span { display: block; max-width: 580px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.account-public-profile-link {
    display: inline-flex;
    width: fit-content;
    min-height: 42px;
    gap: 9px;
    align-items: center;
    margin-top: 14px;
    padding: 8px 13px;
    border: 1px solid rgba(37, 244, 238, 0.28);
    border-radius: 13px;
    background: rgba(37, 244, 238, 0.075);
    color: #fff;
    font-size: 12px;
    font-weight: 850;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}
.account-public-profile-link > i:first-child { color: var(--cyan); transition: color 180ms ease, transform 180ms var(--ease); }
.account-public-profile-link > i:last-child { color: var(--pink); transition: transform 180ms var(--ease); }
.account-public-profile-link:hover,
.account-public-profile-link:focus-visible { border-color: var(--pink); outline: 0; background: rgba(254, 44, 85, 0.12); box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.32), 3px -3px 0 rgba(254, 44, 85, 0.3); transform: translateY(-3px); }
.account-public-profile-link:hover > i:first-child { color: #fff; transform: rotate(-7deg) scale(1.08); }
.account-public-profile-link:hover > i:last-child { transform: translateX(3px); }

@keyframes account-profile-card-in {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
}

.account-form {
    display: grid;
    gap: 18px;
}

.account-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.account-form label,
.account-search-form label {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.account-form label.is-wide { grid-column: 1 / -1; }

.account-form label > span,
.account-search-form label > span {
    color: #d6d6db;
    font-size: 12px;
    font-weight: 750;
}

.account-form input,
.account-form textarea,
.account-form select,
.account-search-form input,
.account-copy-field input {
    width: 100%;
    min-height: 46px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 13px;
    outline: 0;
    background: rgba(0, 0, 0, 0.34);
    color: #fff;
    font-size: 14px;
    transition: 160ms ease;
}

.account-form textarea { min-height: 112px; resize: vertical; }
.account-form input:focus,
.account-form textarea:focus,
.account-form select:focus,
.account-search-form input:focus,
.account-copy-field input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.1); }
.account-form :is(input, select, textarea).is-invalid,
.account-search-form input.is-invalid { border-color: rgba(254, 44, 85, 0.72); box-shadow: 0 0 0 3px rgba(254, 44, 85, 0.11); }
.account-form input:disabled { color: #8b8b93; cursor: not-allowed; }
.account-form label small { color: #7f7f87; font-size: 10px; line-height: 1.4; }
.account-form label > output { color: var(--cyan); font-size: 12px; font-weight: 800; }
.account-form input[type="range"] { min-height: 26px; padding: 0; accent-color: var(--cyan); }

.account-toggle-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.account-switch {
    display: grid !important;
    grid-template-columns: 45px minmax(0, 1fr);
    gap: 13px !important;
    align-items: center;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition: 170ms ease;
}

.account-switch:hover { border-color: rgba(37, 244, 238, 0.25); }
.account-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.account-switch > span {
    position: relative;
    width: 43px;
    height: 25px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: #27272c;
    transition: 170ms ease;
}

.account-switch > span::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #92929a;
    content: "";
    transition: inherit;
}

.account-switch input:checked + span { border-color: var(--cyan); background: rgba(37, 244, 238, 0.22); }
.account-switch input:checked + span::after { background: var(--cyan); transform: translateX(18px); }
.account-switch input:focus-visible + span { outline: 3px solid var(--cyan); outline-offset: 3px; }
.account-switch > div { display: grid; gap: 2px; }
.account-switch strong { font-size: 13px; }
.account-switch small { color: var(--muted); font-size: 10px; line-height: 1.4; }

.account-security-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.account-badge {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 6px;
    padding: 4px 9px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    color: #c8c8ce;
    font-size: 10px;
    font-style: normal;
    font-weight: 820;
    line-height: 1;
    white-space: nowrap;
}

.account-badge.is-active,
.account-badge.is-completed,
.account-badge.is-posted,
.account-badge.is-accepted,
.account-badge.is-info { border-color: rgba(54, 230, 154, 0.28); background: rgba(54, 230, 154, 0.08); color: var(--success); }
.account-badge.is-pending,
.account-badge.is-created,
.account-badge.is-waiting,
.account-badge.is-confirming,
.account-badge.is-reviewing,
.account-badge.is-warning { border-color: rgba(255, 204, 77, 0.28); background: rgba(255, 204, 77, 0.08); color: var(--warning); }
.account-badge.is-failed,
.account-badge.is-rejected,
.account-badge.is-critical,
.account-badge.is-revoked { border-color: rgba(254, 44, 85, 0.3); background: rgba(254, 44, 85, 0.09); color: #ff6f8b; }

.account-totp-secret {
    display: grid;
    gap: 9px;
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 14px;
    background: rgba(37, 244, 238, 0.055);
}

.account-totp-secret > span { color: var(--muted); font-size: 11px; }
.account-totp-secret code { overflow-wrap: anywhere; color: var(--cyan); font-size: 13px; }
.account-totp-secret details { color: var(--muted); font-size: 11px; }
.account-totp-secret details code { display: block; margin-top: 8px; color: #ccc; }

.account-session-list article {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.025);
}

.account-session-list article.is-current { border-color: rgba(37, 244, 238, 0.25); background: rgba(37, 244, 238, 0.045); }
.account-session-list article > span { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: rgba(255, 255, 255, 0.06); color: var(--cyan); }
.account-session-list article > div { display: grid; min-width: 0; gap: 2px; }
.account-session-list strong { font-size: 13px; }
.account-session-list small { color: var(--muted); font-size: 10px; }
.account-session-list em { color: var(--cyan); font-size: 10px; font-style: normal; font-weight: 750; }

.account-event-list article > i { color: var(--cyan); }
.account-event-list .account-badge { margin-left: auto; }

.account-station-card {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.025);
    transition: 170ms var(--ease);
}

.account-station-card:hover { border-color: rgba(37, 244, 238, 0.26); transform: translateX(3px); }
.account-station-art { display: grid; width: 68px; height: 68px; place-items: center; overflow: hidden; border-radius: 16px; background: #050506; color: var(--cyan); }
.account-station-art img { width: 100%; height: 100%; object-fit: cover; }
.account-station-card > div:nth-child(2) { display: grid; min-width: 0; gap: 2px; }
.account-station-card strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-station-card span,
.account-station-card time { color: var(--muted); font-size: 10px; }
.account-card-actions { display: flex; gap: 7px; align-items: center; }

.account-search-form {
    display: flex;
    gap: 10px;
}

.account-search-form label {
    position: relative;
    flex: 1;
}

.account-search-form label > i { position: absolute; z-index: 1; top: 15px; left: 14px; color: #777780; }
.account-search-form input { padding-left: 42px; }

.account-user-list.is-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-user-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 74px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.024);
    transition: 170ms ease;
}

.account-user-card:hover { border-color: rgba(254, 44, 85, 0.25); background: rgba(254, 44, 85, 0.035); }
.account-user-avatar { width: 48px; height: 48px; border-radius: 15px; font-size: 15px; box-shadow: -2px 2px 0 var(--cyan), 2px -2px 0 var(--pink); }
.account-user-card > div:nth-child(2) { display: grid; min-width: 0; }
.account-user-card strong { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-user-card > div:nth-child(2) > span { color: var(--muted); font-size: 10px; }
.account-user-card small { display: flex; gap: 5px; align-items: center; color: var(--muted); font-size: 9px; }
.account-user-card small i { width: 6px; height: 6px; border-radius: 50%; background: #666; }
.account-user-card small.is-online { color: var(--success); }
.account-user-card small.is-online i { background: var(--success); box-shadow: 0 0 8px var(--success); }

.account-metric-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.account-metric-card {
    position: relative;
    display: grid;
    min-height: 150px;
    gap: 4px;
    align-content: center;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--account-panel);
}

.account-metric-card > i { margin-bottom: 7px; color: var(--cyan); }
.account-metric-card > span { color: var(--muted); font-size: 11px; }
.account-metric-card strong { font-size: 22px; }
.account-metric-card small { color: #85858d; font-size: 10px; }
.account-panel.is-full { grid-column: 1 / -1; }

.account-table-wrap {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
}

.account-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
}

.account-table th,
.account-table td {
    padding: 13px 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    vertical-align: middle;
}

.account-table th { background: rgba(255, 255, 255, 0.035); color: #898991; font-size: 9px; font-weight: 850; letter-spacing: 0.09em; text-transform: uppercase; }
.account-table td { color: #d8d8dc; font-size: 12px; }
.account-table tr:last-child td { border-bottom: 0; }
.account-table td strong { display: block; max-width: 260px; overflow: hidden; color: #fff; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-table td small { display: block; color: #777780; font-size: 9px; }

.account-privacy-state {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 16px;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.025);
    color: var(--muted);
    font-size: 11px;
}

.account-privacy-state i { color: var(--cyan); }

.account-rank-list {
    display: grid;
    gap: 8px;
}

.account-rank-list article {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto 110px;
    gap: 13px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.024);
}

.account-rank-list article > span { color: var(--cyan); font-size: 23px; font-weight: 900; }
.account-rank-list article > div { display: grid; }
.account-rank-list strong { font-size: 13px; }
.account-rank-list small,
.account-rank-list time { color: var(--muted); font-size: 10px; }
.account-rank-list b { color: #fff; font-size: 13px; }

/* Real leaderboard catalogue and calculated positions. */
.account-leader-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(22px, 4vw, 38px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(270px, .42fr);
    align-items: center;
    gap: 24px;
    border: 1px solid rgba(37, 244, 238, .2);
    border-radius: 22px;
    background: radial-gradient(circle at 15% 0, rgba(37,244,238,.14), transparent 38%), linear-gradient(145deg, rgba(20,20,24,.98), rgba(8,8,10,.98));
    box-shadow: -5px 5px 0 rgba(37,244,238,.22), 5px -5px 0 rgba(254,44,85,.17), 0 30px 70px rgba(0,0,0,.35);
}
.account-leader-hero::after { position: absolute; right: -70px; bottom: -95px; width: 240px; height: 240px; border: 1px solid rgba(254,44,85,.14); border-radius: 50%; content: ""; }
.account-leader-hero > div:first-child { position: relative; z-index: 1; min-width: 0; display: grid; grid-template-columns: 70px minmax(0,1fr); align-items: center; gap: 18px; }
.account-leader-hero .account-module-hero-mark { width: 70px; height: 70px; }
.account-leader-hero > div:first-child > div { min-width: 0; display: grid; gap: 5px; }
.account-leader-hero p { margin: 0; color: var(--cyan); font-size: 11px; font-weight: 900; text-transform: uppercase; letter-spacing: .12em; }
.account-leader-hero h2 { margin: 0; font-size: clamp(25px,4vw,42px); line-height: 1.05; letter-spacing: -.035em; }
.account-leader-hero > div:first-child > div > span { max-width: 650px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.account-leader-hero .account-privacy-state { position: relative; z-index: 1; margin: 0; min-width: 0; display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 9px; }
.account-leader-hero .account-privacy-state > a { grid-column: 2; display: inline-flex; width: fit-content; align-items: center; gap: 7px; color: var(--cyan); font-size: 10px; font-weight: 850; transition: color 170ms ease, transform 170ms var(--ease); }
.account-leader-hero .account-privacy-state > a:hover,.account-leader-hero .account-privacy-state > a:focus-visible { color: #fff; outline: none; transform: translateX(3px); }
.account-leader-selector > form { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 12px; }
.account-leader-selector label { min-width: 0; display: grid; gap: 7px; }
.account-leader-selector label > span { color: #d6d6db; font-size: 11px; font-weight: 800; }
.account-leader-selector select { width: 100%; min-height: 46px; padding: 0 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 13px; outline: none; color: #fff; background: rgba(0,0,0,.34); font: inherit; font-size: 12px; transition: border-color 170ms ease, box-shadow 170ms ease; }
.account-leader-selector select:focus-visible { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37,244,238,.1); }
.account-leader-summary {
    padding: 21px;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(260px,.42fr);
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 19px;
    background: rgba(255,255,255,.025);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}
.account-leader-summary:hover { border-color: rgba(37,244,238,.25); background: rgba(37,244,238,.025); transform: translateY(-2px); }
.account-leader-summary > div { min-width: 0; display: grid; gap: 5px; }
.account-leader-summary small { color: var(--cyan); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.account-leader-summary h2 { margin: 0; font-size: 23px; }
.account-leader-summary p { max-width: 680px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.account-leader-summary dl,.account-leader-current dl { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.account-leader-summary dl > div,.account-leader-current dl > div { min-width: 0; padding: 10px; display: grid; gap: 3px; border-radius: 12px; background: rgba(255,255,255,.035); }
.account-leader-summary dt,.account-leader-current dt { color: var(--muted); font-size: 9px; }
.account-leader-summary dd,.account-leader-current dd { margin: 0; color: #fff; font-size: 12px; font-weight: 850; overflow-wrap: anywhere; }
.account-leader-current {
    padding: 19px 21px;
    display: grid;
    grid-template-columns: minmax(190px,.4fr) minmax(0,1fr);
    align-items: center;
    gap: 20px;
    border: 1px solid rgba(254,44,85,.23);
    border-radius: 19px;
    background: linear-gradient(135deg,rgba(254,44,85,.085),rgba(37,244,238,.045));
    box-shadow: 4px 4px 0 rgba(37,244,238,.16);
}
.account-leader-current > div { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 10px; }
.account-leader-current > div small { grid-column: 1/-1; color: var(--muted); font-size: 10px; font-weight: 800; }
.account-leader-current > div strong { color: var(--cyan); font-size: 34px; line-height: 1; }
.account-leader-current > div span { color: #fff; font-size: 13px; font-weight: 850; }
.account-leader-current dl { grid-template-columns: repeat(3,minmax(0,1fr)); }
.account-leader-list { display: grid; gap: 9px; }
.account-leader-list article {
    min-width: 0;
    padding: 12px 13px;
    display: grid;
    grid-template-columns: 50px 42px minmax(0,1fr) auto;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 15px;
    background: rgba(255,255,255,.023);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}
.account-leader-list article:hover { border-color: rgba(37,244,238,.27); background: rgba(37,244,238,.025); box-shadow: -3px 3px 0 rgba(254,44,85,.18); transform: translateY(-2px); }
.account-leader-list article.is-viewer { border-color: rgba(37,244,238,.36); background: linear-gradient(90deg,rgba(37,244,238,.08),rgba(254,44,85,.045)); }
.account-leader-list article > b { color: var(--cyan); font-size: 20px; font-weight: 950; text-align: center; }
.account-leader-avatar { width: 42px; height: 42px; display: grid; place-items: center; overflow: hidden; border: 2px solid rgba(37,244,238,.35); border-radius: 13px; background: rgba(37,244,238,.08); color: #fff; font-size: 11px; font-weight: 900; }
.account-leader-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-leader-list article > div { min-width: 0; display: grid; gap: 3px; }
.account-leader-list article > div > strong { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.account-leader-list article > div > strong a { color: #fff; transition: color 170ms ease; }
.account-leader-list article > div > strong a:hover,.account-leader-list article > div > strong a:focus-visible { color: var(--cyan); outline: none; }
.account-leader-list article > div > small { color: var(--muted); font-size: 9px; }
.account-leader-list article > span { display: grid; justify-items: end; color: #fff; font-size: 15px; font-weight: 900; white-space: nowrap; }
.account-leader-list article > span small { color: var(--muted); font-size: 8px; font-weight: 700; }
.account-leader-board > header > span { color: var(--muted); font-size: 10px; font-weight: 800; }
.account-leader-pagination { margin-top: 14px; }
.account-leader-progression { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.account-leader-progression article { min-width: 0; padding: 16px; display: grid; grid-template-columns: 42px minmax(0,1fr); align-items: center; gap: 11px; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); transition: border-color 170ms ease,transform 170ms var(--ease),box-shadow 170ms ease; }
.account-leader-progression article:hover { border-color: rgba(37,244,238,.3); box-shadow: -3px 3px 0 rgba(254,44,85,.16); transform: translateY(-2px); }
.account-leader-progression article > span { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--cyan); background: rgba(37,244,238,.08); }
.account-leader-progression article > div { min-width: 0; display: grid; gap: 4px; }
.account-leader-progression small { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.account-leader-progression strong { font-size: 18px; overflow-wrap: anywhere; }
.account-leader-rule-list { display: grid; gap: 8px; }
.account-leader-rule-list article { padding: 12px 14px; display: grid; grid-template-columns: minmax(0,1fr) repeat(2,minmax(92px,auto)); align-items: center; gap: 12px; border: 1px solid rgba(255,255,255,.075); border-radius: 14px; background: rgba(255,255,255,.025); transition: border-color 170ms ease,background 170ms ease,transform 170ms var(--ease); }
.account-leader-rule-list article:hover { border-color: rgba(37,244,238,.24); background: rgba(37,244,238,.025); transform: translateY(-2px); }
.account-leader-rule-list article.is-disabled { opacity: .5; }
.account-leader-rule-list article > div,.account-leader-rule-list article > span { min-width: 0; display: grid; gap: 3px; }
.account-leader-rule-list article strong { font-size: 12px; }
.account-leader-rule-list article small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.account-leader-rule-list article > span { justify-items: end; }
.account-leader-rule-list article > span b { color: var(--cyan); font-size: 15px; }
.account-leader-catalogues { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(280px,.8fr); gap: 16px; align-items: start; }
.account-leader-level-table { max-height: 440px; padding-right: 4px; display: grid; gap: 6px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(37,244,238,.3) transparent; }
.account-leader-level-table > div { padding: 9px 11px; display: grid; grid-template-columns: 38px minmax(0,1fr) auto; align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); transition: border-color 170ms ease,background 170ms ease; }
.account-leader-level-table > div:hover,.account-leader-level-table > div.is-current { border-color: rgba(37,244,238,.3); background: rgba(37,244,238,.055); }
.account-leader-level-table b { color: var(--cyan); font-size: 13px; text-align: center; }
.account-leader-level-table span { font-size: 11px; font-weight: 800; }
.account-leader-level-table strong { color: var(--muted); font-size: 10px; }
.account-leader-status-list { display: grid; gap: 7px; }
.account-leader-status-list article { padding: 10px 11px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; gap: 10px; border: 1px solid rgba(255,255,255,.07); border-radius: 12px; background: rgba(255,255,255,.025); transition: border-color 170ms ease,transform 170ms var(--ease); }
.account-leader-status-list article:hover,.account-leader-status-list article.is-current { border-color: rgba(254,44,85,.28); transform: translateY(-1px); }
.account-leader-status-list article > b { color: var(--pink); text-align: center; }
.account-leader-status-list article > div { min-width: 0; display: grid; gap: 2px; }
.account-leader-status-list strong { font-size: 11px; }
.account-leader-status-list small { color: var(--muted); font-size: 9px; }
.account-leader-battle { padding: 15px 17px; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 16px; border: 1px solid rgba(254,44,85,.18); border-radius: 17px; background: linear-gradient(130deg,rgba(254,44,85,.055),rgba(37,244,238,.025)); }
.account-leader-battle > div { min-width: 0; display: grid; gap: 5px; }
.account-leader-battle small { color: var(--pink); font-size: 9px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.account-leader-battle p { margin: 0; color: #dddde3; font-size: 11px; line-height: 1.5; }
.account-leader-battle ol { margin: 0; padding: 0; display: flex; gap: 8px; list-style: none; }
.account-leader-battle li { padding: 8px 10px; display: grid; justify-items: center; gap: 3px; border: 1px solid rgba(255,255,255,.09); border-radius: 11px; background: rgba(0,0,0,.2); }
.account-leader-battle li b { color: var(--cyan); }
.account-leader-battle li .account-coin { font-size: 10px; }

@media (max-width: 900px) {
    .account-leader-hero,.account-leader-summary { grid-template-columns: 1fr; }
    .account-leader-current { grid-template-columns: 1fr; }
    .account-leader-progression { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .account-leader-catalogues { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .account-leader-selector > form { grid-template-columns: 1fr; }
    .account-leader-selector .account-button { width: 100%; }
    .account-leader-current dl { grid-template-columns: 1fr; }
    .account-leader-list article { grid-template-columns: 42px 38px minmax(0,1fr); }
    .account-leader-avatar { width: 38px; height: 38px; }
    .account-leader-list article > span { grid-column: 3; justify-items: start; }
    .account-leader-rule-list article { grid-template-columns: minmax(0,1fr) repeat(2,auto); }
    .account-leader-battle { grid-template-columns: 1fr; }
}

/* Publication-ready leaders surface: the dashboard language, applied end to end. */
.account-module-leaders .account-workspace,
.account-module-leaders .account-leaders,
.account-module-leaders .account-leaders > *,
.account-module-leaders .account-leaders :is(section, article, nav, div, dl, ol, li) {
    min-width: 0;
}

.account-module-leaders .account-leaders {
    --leader-cyan: 37, 244, 238;
    --leader-pink: 254, 44, 85;
    --leader-white: 247, 247, 250;
    display: grid;
    max-width: 100%;
    gap: 24px;
}

.account-module-leaders .account-leader-hero {
    position: relative;
    min-height: 330px;
    padding: clamp(25px, 3vw, 38px);
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    align-items: stretch;
    gap: clamp(22px, 3vw, 38px);
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(var(--leader-cyan), 0.24);
    border-radius: 27px;
    background:
        linear-gradient(rgba(var(--leader-cyan), 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--leader-cyan), 0.025) 1px, transparent 1px),
        radial-gradient(circle at 12% 8%, rgba(var(--leader-cyan), 0.18), transparent 34%),
        radial-gradient(circle at 92% 88%, rgba(var(--leader-pink), 0.16), transparent 38%),
        linear-gradient(145deg, rgba(17, 20, 23, 0.99), rgba(7, 7, 10, 0.995));
    background-size: 32px 32px, 32px 32px, auto, auto, auto;
    box-shadow:
        -5px 5px 0 rgba(var(--leader-cyan), 0.3),
        5px -5px 0 rgba(var(--leader-pink), 0.23),
        0 34px 82px rgba(0, 0, 0, 0.42),
        inset 0 1px rgba(255, 255, 255, 0.045);
    animation: account-leader-surface-in 520ms var(--ease) both;
    transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease);
}

.account-module-leaders .account-leader-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.055) 48%, transparent 72%);
    content: "";
    transform: translateX(-115%);
    animation: account-leader-hero-scan 950ms ease-out 420ms both;
}

.account-module-leaders .account-leader-hero::after {
    position: absolute;
    z-index: -1;
    right: -105px;
    bottom: -130px;
    width: 350px;
    height: 350px;
    border: 1px solid rgba(var(--leader-pink), 0.16);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(var(--leader-cyan), 0.025), 0 0 0 78px rgba(var(--leader-pink), 0.018);
    content: "";
}

@media (hover: hover) {
    .account-module-leaders .account-leader-hero:hover {
        border-color: rgba(var(--leader-cyan), 0.44);
        box-shadow:
            -7px 7px 0 rgba(var(--leader-cyan), 0.4),
            7px -7px 0 rgba(var(--leader-pink), 0.33),
            0 39px 94px rgba(0, 0, 0, 0.47),
            inset 0 1px rgba(255, 255, 255, 0.06);
        transform: translateY(-3px);
    }
}

.account-module-leaders .account-leader-hero-copy {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    gap: 18px 20px;
}

.account-module-leaders .account-leader-hero-copy > .account-module-hero-mark {
    width: 78px;
    height: 78px;
    border-radius: 23px;
}

.account-module-leaders .account-leader-hero-copy > div:nth-child(2) {
    display: grid;
    gap: 7px;
}

.account-module-leaders .account-leader-hero-copy p {
    margin: 0;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.account-module-leaders .account-leader-hero-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(34px, 4.2vw, 54px);
    font-weight: 950;
    letter-spacing: -0.055em;
    line-height: 0.98;
    text-wrap: balance;
}

.account-module-leaders .account-leader-hero-copy > div:nth-child(2) > span {
    max-width: 650px;
    color: #acacb4;
    font-size: 14px;
    line-height: 1.58;
}

.account-module-leaders .account-leader-hero-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.account-module-leaders .account-leader-visibility,
.account-module-leaders .account-leader-hero-actions > a,
.account-module-leaders .account-leader-hero-navigation > a {
    display: inline-flex;
    min-width: 0;
    min-height: 44px;
    gap: 9px;
    align-items: center;
    padding: 9px 13px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 13px;
    color: #d9d9df;
    background: rgba(255, 255, 255, 0.035);
    font-size: 11px;
    font-weight: 820;
    line-height: 1.35;
}

.account-module-leaders .account-leader-visibility {
    flex: 1 1 270px;
}

.account-module-leaders .account-leader-visibility > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-module-leaders .account-leader-visibility > i { color: var(--cyan); }
.account-module-leaders .account-leader-visibility.is-private > i { color: #ff6885; }

.account-module-leaders .account-leader-hero-actions > a {
    flex: 0 0 auto;
    border-color: rgba(var(--leader-cyan), 0.2);
    color: var(--cyan);
    background: rgba(var(--leader-cyan), 0.065);
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-module-leaders .account-leader-hero-actions > a > i:last-child { margin-left: 2px; }

.account-module-leaders .account-leader-hero-actions > a:hover,
.account-module-leaders .account-leader-hero-actions > a:focus-visible {
    border-color: rgba(var(--leader-pink), 0.48);
    outline: 0;
    background: linear-gradient(135deg, rgba(var(--leader-cyan), 0.11), rgba(var(--leader-pink), 0.09));
    color: #fff;
    box-shadow: -2px 2px 0 rgba(var(--leader-cyan), 0.3), 2px -2px 0 rgba(var(--leader-pink), 0.25);
    transform: translateY(-2px);
}

.account-module-leaders .account-leader-hero-navigation {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.account-module-leaders .account-leader-hero-navigation > a {
    min-height: 38px;
    padding: 7px 11px;
    border-color: transparent;
    background: rgba(0, 0, 0, 0.22);
    color: #a7a7af;
    transition: color 170ms ease, background 170ms ease, transform 170ms var(--ease);
}

.account-module-leaders .account-leader-hero-navigation > a > i { color: var(--pink); }
.account-module-leaders .account-leader-hero-navigation > a:first-child > i { color: var(--cyan); }
.account-module-leaders .account-leader-hero-navigation > a:hover,
.account-module-leaders .account-leader-hero-navigation > a:focus-visible { outline: 0; background: rgba(255, 255, 255, 0.065); color: #fff; transform: translateX(3px); }

.account-module-leaders .account-leader-hero-stage {
    position: relative;
    z-index: 2;
    min-height: 250px;
    padding: 18px;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--leader-cyan), 0.18);
    border-radius: 23px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.015));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.05), 0 24px 52px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px);
}

.account-module-leaders .account-leader-hero-stage::after {
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 17px;
    content: "";
    pointer-events: none;
}

.account-module-leaders .account-leader-hero-radar {
    position: relative;
    width: 142px;
    height: 142px;
    align-self: center;
    justify-self: center;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.account-module-leaders .account-leader-hero-radar > span {
    position: absolute;
    inset: 36px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 20px;
    background: rgba(4, 4, 6, 0.76);
    box-shadow: none;
    color: #fff;
    font-size: 27px;
}

.account-module-leaders .account-leader-hero-stage dl {
    position: relative;
    z-index: 2;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.account-module-leaders .account-leader-hero-stage dl > div {
    padding: 10px 11px;
    display: grid;
    gap: 3px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 12px;
    background: rgba(4, 4, 6, 0.46);
}

.account-module-leaders .account-leader-hero-stage dl > div.is-wide { grid-column: 1 / -1; }
.account-module-leaders .account-leader-hero-stage dt { color: #878790; font-size: 9px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.account-module-leaders .account-leader-hero-stage dd { margin: 0; overflow-wrap: anywhere; color: #fff; font-size: 15px; font-weight: 950; }

.account-module-leaders .account-leader-overview {
    position: relative;
    padding: clamp(20px, 2.5vw, 30px);
    display: grid;
    gap: 18px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(var(--leader-cyan), 0.16);
    border-radius: 26px;
    background:
        radial-gradient(circle at 0 0, rgba(var(--leader-cyan), 0.095), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(var(--leader-pink), 0.065), transparent 31%),
        linear-gradient(145deg, rgba(16, 17, 21, 0.97), rgba(8, 8, 11, 0.99));
    box-shadow: -4px 4px 0 rgba(var(--leader-cyan), 0.14), 0 28px 68px rgba(0, 0, 0, 0.31), inset 0 1px rgba(255, 255, 255, 0.035);
    animation: account-leader-surface-in 480ms var(--ease) 50ms both;
}

.account-module-leaders .account-leader-overview::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 38px;
    left: 38px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--pink), transparent);
    content: "";
    opacity: 0.54;
}

.account-module-leaders .account-leader-zone-heading {
    padding-inline: 2px;
}

.account-module-leaders .account-leader-zone-heading > div {
    gap: 15px;
}

.account-module-leaders .account-leader-zone-heading > div > span {
    width: 50px;
    height: 50px;
    border-color: rgba(var(--leader-cyan), 0.28);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(var(--leader-cyan), 0.13), rgba(var(--leader-pink), 0.055));
    box-shadow: -2px 2px 0 rgba(var(--leader-cyan), 0.24), inset -2px 0 0 rgba(var(--leader-pink), 0.5);
    font-size: 17px;
}

.account-module-leaders .account-leader-zone-heading p { font-size: 10px; }
.account-module-leaders .account-leader-zone-heading h2 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -0.035em; }
.account-module-leaders .account-leader-zone-heading small { max-width: 820px; color: #9999a2; font-size: 13px; line-height: 1.55; }

.account-module-leaders .account-leader-progression {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.account-module-leaders .account-leader-progression article {
    --leader-card-accent: var(--leader-cyan);
    --leader-card-secondary: var(--leader-pink);
    position: relative;
    min-height: 132px;
    padding: 17px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    align-content: center;
    align-items: start;
    gap: 13px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(var(--leader-card-accent), 0.15);
    border-radius: 19px;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--leader-card-accent), 0.14), transparent 46%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.014)),
        #0e0e12;
    box-shadow: 0 19px 44px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.035);
    animation: account-leader-card-in 440ms var(--ease) both;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-module-leaders .account-leader-progression article:nth-child(2) { --leader-card-accent: var(--leader-pink); --leader-card-secondary: var(--leader-cyan); animation-delay: 60ms; }
.account-module-leaders .account-leader-progression article:nth-child(3) { --leader-card-accent: var(--leader-white); --leader-card-secondary: var(--leader-cyan); animation-delay: 120ms; }
.account-module-leaders .account-leader-progression article:nth-child(4) { --leader-card-accent: var(--leader-pink); --leader-card-secondary: var(--leader-white); animation-delay: 180ms; }

.account-module-leaders .account-leader-progression article::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 18px;
    left: 18px;
    height: 2px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, transparent, rgba(var(--leader-card-accent), 0.95), transparent);
    content: "";
    opacity: 0.56;
    transition: opacity 190ms ease, transform 190ms var(--ease);
}

.account-module-leaders .account-leader-progression article::after {
    position: absolute;
    z-index: -1;
    right: -34px;
    bottom: -42px;
    width: 112px;
    height: 112px;
    border: 3px solid rgba(var(--leader-card-secondary), 0.32);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--leader-card-secondary), 0.14) 0 34%, rgba(var(--leader-card-secondary), 0.04) 35% 57%, transparent 58%);
    box-shadow: 0 0 0 8px rgba(var(--leader-card-secondary), 0.045), inset 0 0 24px rgba(var(--leader-card-secondary), 0.12);
    content: "";
    transition: transform 190ms var(--ease), border-color 190ms ease, box-shadow 190ms ease;
}

@media (hover: hover) {
    .account-module-leaders .account-leader-progression article:hover {
        border-color: rgba(var(--leader-card-accent), 0.42);
        box-shadow: -3px 3px 0 rgba(var(--leader-cyan), 0.28), 3px -3px 0 rgba(var(--leader-pink), 0.24), 0 26px 58px rgba(0, 0, 0, 0.34);
        transform: translateY(-5px);
    }
    .account-module-leaders .account-leader-progression article:hover::before { opacity: 1; transform: scaleX(1.08); }
    .account-module-leaders .account-leader-progression article:hover::after { border-color: rgba(var(--leader-card-secondary), 0.58); box-shadow: 0 0 0 10px rgba(var(--leader-card-secondary), 0.075), inset 0 0 28px rgba(var(--leader-card-secondary), 0.17); transform: translate(-8px, -8px) scale(1.09); }
}

.account-module-leaders .account-leader-progression article > span {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--leader-card-accent), 0.2);
    border-radius: 14px;
    color: rgb(var(--leader-card-accent));
    background: rgba(var(--leader-card-accent), 0.09);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
    transition: color 190ms ease, background 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

@media (hover: hover) {
    .account-module-leaders .account-leader-progression article:hover > span {
        background: rgba(var(--leader-card-accent), 0.16);
        box-shadow: 0 10px 28px rgba(var(--leader-card-accent), 0.13);
        transform: rotate(-6deg) scale(1.08);
    }
}

.account-module-leaders .account-leader-progression article > div {
    display: grid;
    gap: 3px;
}

.account-module-leaders .account-leader-progression small { color: #8f8f98; font-size: 10px; font-weight: 880; letter-spacing: 0.09em; text-transform: uppercase; }
.account-module-leaders .account-leader-progression strong { overflow-wrap: anywhere; color: #fff; font-size: clamp(19px, 2vw, 25px); font-weight: 950; letter-spacing: -0.035em; line-height: 1.1; }
.account-module-leaders .account-leader-progression article.is-status strong { font-size: clamp(14px, 1.45vw, 18px); line-height: 1.2; }
.account-module-leaders .account-leader-progression em { color: rgb(var(--leader-card-accent)); font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }

.account-module-leaders .account-leader-level-route {
    --dashboard-panel-accent: var(--leader-cyan);
    --dashboard-panel-secondary: var(--leader-pink);
    min-height: 126px;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: 78px minmax(190px, 0.55fr) minmax(280px, 1fr);
    align-items: center;
    gap: 18px;
    border: 1px solid rgba(var(--leader-cyan), 0.17);
    border-radius: 20px;
}

.account-module-leaders .account-leader-level-badge {
    width: 72px;
    height: 72px;
    display: grid;
    place-content: center;
    justify-items: center;
    border: 1px solid rgba(var(--leader-cyan), 0.32);
    border-radius: 19px;
    background: linear-gradient(145deg, rgba(var(--leader-cyan), 0.16), rgba(var(--leader-pink), 0.09));
    box-shadow: -3px 3px 0 rgba(var(--leader-cyan), 0.28), 3px -3px 0 rgba(var(--leader-pink), 0.22);
}

.account-module-leaders .account-leader-level-badge small { color: var(--cyan); font-size: 9px; font-weight: 950; letter-spacing: 0.14em; }
.account-module-leaders .account-leader-level-badge strong { color: #fff; font-size: 29px; font-weight: 950; line-height: 1; }

.account-module-leaders .account-leader-level-copy {
    display: grid;
    gap: 3px;
}

.account-module-leaders .account-leader-level-copy small { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.account-module-leaders .account-leader-level-copy strong { overflow-wrap: anywhere; color: #fff; font-size: 17px; font-weight: 930; }
.account-module-leaders .account-leader-level-copy span { color: #909099; font-size: 11px; line-height: 1.4; }

.account-module-leaders .account-leader-level-progress {
    padding: 0;
    display: grid;
    gap: 10px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.account-module-leaders .account-leader-level-progress > span { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.account-module-leaders .account-leader-level-progress > span b { color: #fff; font-size: 13px; }
.account-module-leaders .account-leader-level-progress > span em { min-width: 0; color: var(--cyan); font-size: 10px; font-style: normal; font-weight: 850; text-align: right; white-space: normal; }
.account-module-leaders .account-leader-level-progress > i { height: 10px; padding: 2px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 999px; background: rgba(0, 0, 0, 0.42); }
.account-module-leaders .account-leader-level-progress > i > b { display: block; width: var(--leader-level-progress); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #fff 54%, var(--pink)); box-shadow: 0 0 16px rgba(var(--leader-cyan), 0.34); transform-origin: left; animation: account-leader-progress-fill 900ms var(--ease) 180ms both; }

.account-module-leaders .account-leader-zone {
    padding: clamp(20px, 2.5vw, 30px);
    gap: 18px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(var(--leader-cyan), 0.16);
    border-radius: 26px;
    background:
        radial-gradient(circle at 0 0, rgba(var(--leader-cyan), 0.095), transparent 30%),
        radial-gradient(circle at 100% 100%, rgba(var(--leader-pink), 0.065), transparent 31%),
        linear-gradient(145deg, rgba(16, 17, 21, 0.97), rgba(8, 8, 11, 0.99));
    box-shadow: -4px 4px 0 rgba(var(--leader-cyan), 0.14), 0 28px 68px rgba(0, 0, 0, 0.31), inset 0 1px rgba(255, 255, 255, 0.035);
    animation: account-leader-surface-in 480ms var(--ease) 80ms both;
}

.account-module-leaders .account-leader-zone::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 38px;
    left: 38px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--pink), transparent);
    content: "";
    opacity: 0.54;
}

.account-module-leaders .account-leader-guide {
    border-color: rgba(var(--leader-pink), 0.18);
    background:
        radial-gradient(circle at 100% 0, rgba(var(--leader-pink), 0.095), transparent 31%),
        radial-gradient(circle at 0 100%, rgba(var(--leader-cyan), 0.055), transparent 33%),
        linear-gradient(145deg, rgba(16, 15, 20, 0.97), rgba(8, 8, 11, 0.99));
    box-shadow: 4px 4px 0 rgba(var(--leader-pink), 0.1), 0 28px 68px rgba(0, 0, 0, 0.3), inset 0 1px rgba(255, 255, 255, 0.035);
}

.account-module-leaders .account-leader-switcher {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.account-module-leaders .account-leader-switcher > a {
    position: relative;
    min-width: 0;
    min-height: 126px;
    padding: 15px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    align-items: start;
    gap: 10px 11px;
    overflow: hidden;
    isolation: isolate;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    color: #eeeef2;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--leader-cyan), 0.07), transparent 42%),
        rgba(255, 255, 255, 0.026);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
    animation: account-leader-card-in 430ms var(--ease) both;
    transition: border-color 190ms ease, background 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-module-leaders .account-leader-switcher > a:nth-child(2) { animation-delay: 45ms; }
.account-module-leaders .account-leader-switcher > a:nth-child(3) { animation-delay: 90ms; }
.account-module-leaders .account-leader-switcher > a:nth-child(4) { animation-delay: 135ms; }
.account-module-leaders .account-leader-switcher > a:nth-child(5) { animation-delay: 180ms; }
.account-module-leaders .account-leader-switcher > a:nth-child(6) { animation-delay: 225ms; }
.account-module-leaders .account-leader-switcher > a:nth-child(7) { animation-delay: 270ms; }
.account-module-leaders .account-leader-switcher > a:nth-child(8) { animation-delay: 315ms; }

.account-module-leaders .account-leader-switcher > a::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 14px;
    left: 14px;
    height: 2px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
    content: "";
    opacity: 0.26;
    transition: opacity 190ms ease, transform 190ms var(--ease);
}

.account-module-leaders .account-leader-switcher > a::after {
    position: absolute;
    z-index: -1;
    right: -27px;
    bottom: -34px;
    width: 88px;
    height: 88px;
    border: 3px solid rgba(var(--leader-pink), 0.3);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--leader-pink), 0.13) 0 35%, rgba(var(--leader-pink), 0.035) 36% 58%, transparent 59%);
    box-shadow: 0 0 0 7px rgba(var(--leader-cyan), 0.04), inset 0 0 20px rgba(var(--leader-pink), 0.1);
    content: "";
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-module-leaders .account-leader-switcher > a:hover,
.account-module-leaders .account-leader-switcher > a:focus-visible {
    border-color: rgba(var(--leader-cyan), 0.36);
    outline: 0;
    background: linear-gradient(145deg, rgba(var(--leader-cyan), 0.085), rgba(var(--leader-pink), 0.035));
    box-shadow: -2px 2px 0 rgba(var(--leader-cyan), 0.22), 2px -2px 0 rgba(var(--leader-pink), 0.18), 0 21px 46px rgba(0, 0, 0, 0.27);
    transform: translateY(-4px);
}

.account-module-leaders .account-leader-switcher > a:hover::before,
.account-module-leaders .account-leader-switcher > a:focus-visible::before { opacity: 0.9; transform: scaleX(1.08); }
.account-module-leaders .account-leader-switcher > a:hover::after,
.account-module-leaders .account-leader-switcher > a:focus-visible::after { border-color: rgba(var(--leader-pink), 0.62); box-shadow: 0 0 0 9px rgba(var(--leader-cyan), 0.07), inset 0 0 24px rgba(var(--leader-pink), 0.16); transform: translate(-7px, -7px) scale(1.08); }

.account-module-leaders .account-leader-switcher > a.is-active {
    border-color: rgba(var(--leader-cyan), 0.48);
    background:
        radial-gradient(circle at 100% 0, rgba(var(--leader-pink), 0.12), transparent 46%),
        linear-gradient(145deg, rgba(var(--leader-cyan), 0.15), rgba(var(--leader-pink), 0.07));
    box-shadow: inset 4px 0 0 var(--cyan), -2px 2px 0 rgba(var(--leader-cyan), 0.34), 2px -2px 0 rgba(var(--leader-pink), 0.26), 0 23px 50px rgba(0, 0, 0, 0.3);
}

.account-module-leaders .account-leader-switcher > a.is-active::before { opacity: 1; }
.account-module-leaders .account-leader-switcher > a > b {
    position: absolute;
    top: 9px;
    right: 11px;
    color: rgba(255, 255, 255, 0.15);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.08em;
}

.account-module-leaders .account-leader-policy-icon {
    width: 42px;
    height: 42px;
    grid-column: 1;
    grid-row: 1;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--leader-cyan), 0.2);
    border-radius: 13px;
    color: var(--cyan);
    background: rgba(var(--leader-cyan), 0.08);
    transition: border-color 190ms ease, background 190ms ease, color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-module-leaders .account-leader-switcher > a:hover .account-leader-policy-icon,
.account-module-leaders .account-leader-switcher > a:focus-visible .account-leader-policy-icon,
.account-module-leaders .account-leader-switcher > a.is-active .account-leader-policy-icon {
    border-color: rgba(var(--leader-cyan), 0.46);
    background: rgba(var(--leader-cyan), 0.15);
    box-shadow: 0 10px 25px rgba(var(--leader-cyan), 0.12);
    transform: rotate(-6deg) scale(1.07);
}

.account-module-leaders .account-leader-policy-copy {
    grid-column: 2;
    grid-row: 1 / 3;
    display: grid;
    align-content: start;
    gap: 3px;
    padding-right: 10px;
}

.account-module-leaders .account-leader-policy-copy small { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
.account-module-leaders .account-leader-policy-copy strong { overflow: visible; color: #fff; font-size: 13px; line-height: 1.3; text-overflow: clip; white-space: normal; }
.account-module-leaders .account-leader-policy-copy em { display: -webkit-box; overflow: hidden; color: #8d8d96; font-size: 9px; font-style: normal; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.account-module-leaders .account-leader-policy-meta {
    width: auto;
    height: auto;
    grid-column: 1 / -1;
    grid-row: 3;
    display: flex;
    min-width: 0;
    gap: 8px;
    align-items: center;
    justify-content: space-between;
    padding-top: 9px;
    border-top: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 0;
    color: inherit;
    background: transparent;
    place-items: initial;
}

.account-module-leaders .account-leader-policy-meta > small {
    display: flex;
    min-width: 0;
    gap: 6px;
    align-items: center;
    color: #a4a4ac;
    font-size: 9px;
    font-weight: 800;
}

.account-module-leaders .account-leader-policy-meta > small > i { color: #ff708a; }
.account-module-leaders .account-leader-policy-meta > i { color: #6e6e77; font-size: 11px; transition: color 170ms ease, transform 170ms var(--ease); }
.account-module-leaders .account-leader-switcher > a:is(:hover, :focus-visible, .is-active) .account-leader-policy-meta > i { color: var(--cyan); transform: translateX(2px); }
.account-module-leaders .account-leader-policy-meta .account-coin { --account-coin-font-size: 10px; --account-coin-icon-size: 17px; --account-coin-unit-size: 7px; min-height: 21px; gap: 2px; padding: 1px 5px 1px 2px; }

.account-module-leaders .account-leader-arena {
    --dashboard-panel-accent: var(--leader-cyan);
    --dashboard-panel-secondary: var(--leader-pink);
    padding: clamp(20px, 2.4vw, 28px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.55fr);
    align-items: center;
    gap: 22px;
    border: 1px solid rgba(var(--leader-cyan), 0.17);
    border-radius: 21px;
}

.account-module-leaders .account-leader-arena-copy {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: center;
    gap: 15px;
}

.account-module-leaders .account-leader-arena-copy > span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(var(--leader-cyan), 0.24);
    border-radius: 17px;
    color: var(--cyan);
    background: linear-gradient(145deg, rgba(var(--leader-cyan), 0.14), rgba(var(--leader-pink), 0.06));
    box-shadow: -2px 2px 0 rgba(var(--leader-cyan), 0.24), 2px -2px 0 rgba(var(--leader-pink), 0.18);
    font-size: 19px;
}

.account-module-leaders .account-leader-arena-copy > div { display: grid; gap: 5px; }
.account-module-leaders .account-leader-arena-copy small { color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.account-module-leaders .account-leader-arena-copy h2 { margin: 0; color: #fff; font-size: clamp(25px, 3vw, 34px); letter-spacing: -0.04em; line-height: 1.08; }
.account-module-leaders .account-leader-arena-copy p { max-width: 660px; margin: 0; color: #a2a2aa; font-size: 13px; line-height: 1.55; }

.account-module-leaders .account-leader-arena dl {
    margin: 0;
    display: grid;
    gap: 8px;
}

.account-module-leaders .account-leader-arena dl > div {
    padding: 11px 12px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.03);
    transition: border-color 170ms ease, background 170ms ease, transform 170ms var(--ease);
}

.account-module-leaders .account-leader-arena dl > div:hover { border-color: rgba(var(--leader-cyan), 0.25); background: rgba(var(--leader-cyan), 0.045); transform: translateX(-3px); }
.account-module-leaders .account-leader-arena dt { display: flex; min-width: 0; gap: 7px; align-items: center; color: #8d8d96; font-size: 10px; }
.account-module-leaders .account-leader-arena dt i { color: var(--cyan); }
.account-module-leaders .account-leader-arena dd { margin: 0; color: #fff; font-size: 12px; font-weight: 900; text-align: right; overflow-wrap: anywhere; }

.account-module-leaders .account-leader-formula {
    padding: 19px;
    display: grid;
    gap: 14px;
    border: 1px solid rgba(var(--leader-pink), 0.16);
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--leader-pink), 0.055), rgba(var(--leader-cyan), 0.025)), rgba(255, 255, 255, 0.018);
}

.account-module-leaders .account-leader-formula > header,
.account-module-leaders .account-leader-prizes > header > div {
    display: flex;
    gap: 11px;
    align-items: center;
}

.account-module-leaders .account-leader-formula > header > span,
.account-module-leaders .account-leader-prizes > header > div > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--leader-pink), 0.22);
    border-radius: 13px;
    color: #ff6f8a;
    background: rgba(var(--leader-pink), 0.08);
}

.account-module-leaders .account-leader-formula > header > div,
.account-module-leaders .account-leader-prizes > header > div > div { display: grid; gap: 2px; }
.account-module-leaders .account-leader-formula > header small,
.account-module-leaders .account-leader-prizes > header small { color: #ff6f8a; font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.account-module-leaders .account-leader-formula h3,
.account-module-leaders .account-leader-prizes h3 { margin: 0; color: #fff; font-size: 18px; line-height: 1.2; }

.account-module-leaders .account-leader-formula > div {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.account-module-leaders .account-leader-formula article {
    min-height: 108px;
    padding: 13px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-content: center;
    gap: 4px 9px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 15px;
    background: rgba(4, 4, 6, 0.26);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-module-leaders .account-leader-formula article:hover { border-color: rgba(var(--leader-cyan), 0.28); background: rgba(var(--leader-cyan), 0.035); box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18); transform: translateY(-3px); }
.account-module-leaders .account-leader-formula article > span { width: 34px; height: 34px; grid-row: 1 / 3; display: grid; place-items: center; border-radius: 11px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.08); }
.account-module-leaders .account-leader-formula article:nth-child(even) > span { color: #ff6f8a; background: rgba(var(--leader-pink), 0.08); }
.account-module-leaders .account-leader-formula article strong { align-self: end; color: #fff; font-size: 18px; font-weight: 950; line-height: 1; }
.account-module-leaders .account-leader-formula article small { grid-column: 2; color: #8f8f98; font-size: 9px; line-height: 1.35; }

.account-module-leaders .account-leader-prizes {
    padding: 20px;
    display: grid;
    gap: 15px;
    overflow: hidden;
    border: 1px solid rgba(255, 207, 92, 0.18);
    border-radius: 20px;
    background: radial-gradient(circle at 50% 100%, rgba(255, 207, 92, 0.08), transparent 42%), rgba(255, 255, 255, 0.018);
}

.account-module-leaders .account-leader-prizes > header > div > span { border-color: rgba(255, 207, 92, 0.24); color: #ffd66f; background: rgba(255, 207, 92, 0.08); }
.account-module-leaders .account-leader-prizes > header small { color: #ffd66f; }
.account-module-leaders .account-leader-prizes ol {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    list-style: none;
}

.account-module-leaders .account-leader-prizes li {
    position: relative;
    min-height: 138px;
    padding: 15px 11px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 3px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 17px;
    background: linear-gradient(155deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.018));
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-module-leaders .account-leader-prizes li.is-rank-1 {
    min-height: 166px;
    border-color: rgba(255, 207, 92, 0.32);
    background: radial-gradient(circle at 50% 0, rgba(255, 207, 92, 0.16), transparent 52%), rgba(255, 255, 255, 0.025);
    box-shadow: 0 22px 46px rgba(0, 0, 0, 0.24);
}

.account-module-leaders .account-leader-prizes li:hover { border-color: rgba(var(--leader-cyan), 0.35); box-shadow: -2px 2px 0 rgba(var(--leader-cyan), 0.24), 2px -2px 0 rgba(var(--leader-pink), 0.2); transform: translateY(-4px); }
.account-module-leaders .account-leader-prizes li > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 12px; color: #c5c8d1; background: rgba(255, 255, 255, 0.07); }
.account-module-leaders .account-leader-prizes li.is-rank-1 > span { color: #ffd66f; background: rgba(255, 207, 92, 0.11); box-shadow: 0 0 25px rgba(255, 207, 92, 0.12); }
.account-module-leaders .account-leader-prizes li.is-rank-3 > span { color: #e8a06b; background: rgba(230, 143, 85, 0.09); }
.account-module-leaders .account-leader-prizes li > small { color: #898992; font-size: 8px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.account-module-leaders .account-leader-prizes li > strong { color: #fff; font-size: 28px; font-weight: 950; line-height: 1; }
.account-module-leaders .account-leader-prizes .account-coin { margin-top: 4px; }

.account-module-leaders .account-leader-evergreen {
    padding: 17px 19px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(var(--leader-cyan), 0.16);
    border-radius: 18px;
    background: linear-gradient(120deg, rgba(var(--leader-cyan), 0.065), rgba(var(--leader-pink), 0.035));
}

.account-module-leaders .account-leader-evergreen > span { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(var(--leader-cyan), 0.23); border-radius: 14px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.08); font-size: 18px; }
.account-module-leaders .account-leader-evergreen > div { display: grid; gap: 4px; }
.account-module-leaders .account-leader-evergreen strong { color: #fff; font-size: 14px; }
.account-module-leaders .account-leader-evergreen p { margin: 0; color: #96969f; font-size: 11px; line-height: 1.5; }

.account-module-leaders .account-leader-current {
    position: relative;
    padding: 18px 20px;
    display: grid;
    grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1fr);
    align-items: center;
    gap: 19px;
    overflow: hidden;
    border: 1px solid rgba(var(--leader-cyan), 0.3);
    border-radius: 20px;
    background:
        radial-gradient(circle at 0 50%, rgba(var(--leader-cyan), 0.12), transparent 34%),
        linear-gradient(135deg, rgba(var(--leader-cyan), 0.08), rgba(var(--leader-pink), 0.055));
    box-shadow: -3px 3px 0 rgba(var(--leader-cyan), 0.24), 3px -3px 0 rgba(var(--leader-pink), 0.2), 0 21px 47px rgba(0, 0, 0, 0.24);
}

.account-module-leaders .account-leader-current::after { position: absolute; right: -65px; bottom: -80px; width: 155px; height: 155px; border: 1px solid rgba(var(--leader-pink), 0.13); border-radius: 50%; content: ""; }
.account-module-leaders .account-leader-current-rank { position: relative; z-index: 1; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 13px; }
.account-module-leaders .account-leader-current-rank > span { width: 54px; height: 54px; display: grid; place-items: center; border: 1px solid rgba(var(--leader-cyan), 0.29); border-radius: 16px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.1); box-shadow: -2px 2px 0 rgba(var(--leader-cyan), 0.23); font-size: 18px; }
.account-module-leaders .account-leader-current-rank > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 2px 9px; }
.account-module-leaders .account-leader-current-rank small { grid-column: 1 / -1; color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.account-module-leaders .account-leader-current-rank strong { color: #fff; font-size: 32px; font-weight: 950; line-height: 1; }
.account-module-leaders .account-leader-current-rank em { align-self: center; color: #c4c4cb; font-size: 11px; font-style: normal; font-weight: 850; }
.account-module-leaders .account-leader-current dl { position: relative; z-index: 1; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.account-module-leaders .account-leader-current dl > div { padding: 11px; display: grid; gap: 4px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 13px; background: rgba(4, 4, 6, 0.28); }
.account-module-leaders .account-leader-current dt { display: flex; gap: 6px; align-items: center; color: #898992; font-size: 9px; }
.account-module-leaders .account-leader-current dt i { color: var(--cyan); }
.account-module-leaders .account-leader-current dd { margin: 0; overflow-wrap: anywhere; color: #fff; font-size: 12px; font-weight: 900; }

.account-module-leaders :is(.account-leader-neighbors, .account-leader-board, .account-leader-history) {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.095);
    background:
        radial-gradient(circle at 100% 0, rgba(var(--leader-cyan), 0.06), transparent 35%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.028), transparent 48%),
        rgba(11, 11, 14, 0.94);
}

.account-module-leaders :is(.account-leader-neighbors, .account-leader-board, .account-leader-history)::before {
    position: absolute;
    top: 0;
    right: 22px;
    left: 22px;
    height: 2px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
    content: "";
    opacity: 0.46;
}

.account-module-leaders :is(.account-leader-neighbors, .account-leader-board, .account-leader-history) > header > div > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(var(--leader-cyan), 0.2);
    border-radius: 13px;
    background: rgba(var(--leader-cyan), 0.075);
    color: var(--cyan);
}

.account-module-leaders :is(.account-leader-neighbors, .account-leader-board, .account-leader-history) > header h2 { font-size: 19px; }
.account-module-leaders .account-leader-board > header > span,
.account-module-leaders .account-leader-history > header > span { padding: 7px 10px; border: 1px solid rgba(var(--leader-cyan), 0.16); border-radius: 999px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.055); font-size: 10px; font-weight: 850; }

.account-module-leaders .account-leader-list {
    display: grid;
    gap: 9px;
}

.account-module-leaders .account-leader-entry {
    --leader-entry-accent: var(--leader-cyan);
    position: relative;
    min-width: 0;
    min-height: 78px;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 55px 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.024);
    animation: account-leader-entry-in 390ms var(--ease) both;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-module-leaders .account-leader-entry:nth-child(2) { animation-delay: 40ms; }
.account-module-leaders .account-leader-entry:nth-child(3) { animation-delay: 80ms; }
.account-module-leaders .account-leader-entry:nth-child(4) { animation-delay: 120ms; }
.account-module-leaders .account-leader-entry:nth-child(5) { animation-delay: 160ms; }
.account-module-leaders .account-leader-entry.is-rank-1 { --leader-entry-accent: 255, 207, 92; border-color: rgba(255, 207, 92, 0.22); background: linear-gradient(90deg, rgba(255, 207, 92, 0.065), rgba(var(--leader-cyan), 0.025)); }
.account-module-leaders .account-leader-entry.is-rank-2 { --leader-entry-accent: 200, 207, 220; border-color: rgba(200, 207, 220, 0.17); }
.account-module-leaders .account-leader-entry.is-rank-3 { --leader-entry-accent: 232, 152, 95; border-color: rgba(232, 152, 95, 0.18); }
.account-module-leaders .account-leader-entry.is-viewer { border-color: rgba(var(--leader-cyan), 0.48); background: linear-gradient(90deg, rgba(var(--leader-cyan), 0.11), rgba(var(--leader-pink), 0.06)); box-shadow: inset 4px 0 0 var(--cyan), -2px 2px 0 rgba(var(--leader-cyan), 0.2); }

.account-module-leaders .account-leader-entry::after {
    position: absolute;
    right: -45px;
    bottom: -52px;
    width: 108px;
    height: 108px;
    border: 1px solid rgba(var(--leader-entry-accent), 0.08);
    border-radius: 50%;
    content: "";
    transition: border-color 180ms ease, transform 180ms var(--ease);
}

.account-module-leaders .account-leader-entry:hover { border-color: rgba(var(--leader-entry-accent), 0.42); background: rgba(var(--leader-entry-accent), 0.045); box-shadow: -3px 3px 0 rgba(var(--leader-cyan), 0.2), 3px -3px 0 rgba(var(--leader-pink), 0.16), 0 18px 38px rgba(0, 0, 0, 0.22); transform: translateY(-3px); }
.account-module-leaders .account-leader-entry:hover::after { border-color: rgba(var(--leader-entry-accent), 0.22); transform: translate(-7px, -7px) scale(1.08); }

.account-module-leaders .account-leader-entry-rank {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 5px;
    align-items: center;
    color: rgb(var(--leader-entry-accent));
    font-size: 16px;
    font-weight: 950;
}

.account-module-leaders .account-leader-entry-rank > i { font-size: 11px; }
.account-module-leaders .account-leader-avatar { position: relative; z-index: 1; width: 46px; height: 46px; grid-column: auto; grid-row: auto; display: grid; place-items: center; overflow: hidden; border: 0; border-radius: 14px; background: linear-gradient(145deg, rgba(var(--leader-entry-accent), 0.19), rgba(var(--leader-pink), 0.08)), #0b0b0e; box-shadow: inset 0 0 0 2px rgba(var(--leader-entry-accent), 0.34), -2px 2px 0 rgba(var(--leader-entry-accent), 0.2), 0 9px 22px rgba(0, 0, 0, 0.28); }
.account-module-leaders .account-leader-avatar > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.account-module-leaders .account-leader-avatar.is-site-mark > img { width: 72%; height: 72%; object-fit: contain; filter: drop-shadow(-1px 2px 0 rgba(var(--leader-cyan), 0.35)) drop-shadow(1px -1px 0 rgba(var(--leader-pink), 0.3)); }
.account-module-leaders .account-leader-entry-person { position: relative; z-index: 1; grid-column: auto; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; }
.account-module-leaders .account-leader-entry-person > strong { min-width: 0; overflow-wrap: anywhere; color: #fff; font-size: 14px; line-height: 1.25; }
.account-module-leaders .account-leader-entry-person > strong a { color: #fff; transition: color 170ms ease; }
.account-module-leaders .account-leader-entry-person > strong a:hover,
.account-module-leaders .account-leader-entry-person > strong a:focus-visible { outline: 0; color: var(--cyan); }
.account-module-leaders .account-leader-entry-person > small { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: #888891; font-size: 10px; }
.account-module-leaders .account-leader-entry-person > small i { width: 3px; height: 3px; border-radius: 50%; background: #5d5d65; }
.account-module-leaders .account-leader-entry-person > em { grid-column: 2; grid-row: 1; align-self: center; padding: 4px 7px; border: 1px solid rgba(var(--leader-cyan), 0.2); border-radius: 999px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.065); font-size: 8px; font-style: normal; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }

.account-module-leaders .account-leader-entry-result { position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; justify-content: flex-end; }
.account-module-leaders .account-leader-entry-prize { display: inline-flex; min-width: 0; gap: 5px; align-items: center; padding: 4px 6px; border: 1px solid rgba(255, 207, 92, 0.16); border-radius: 999px; background: rgba(255, 207, 92, 0.045); }
.account-module-leaders .account-leader-entry-prize > i { color: #ffd66f; font-size: 9px; }
.account-module-leaders .account-leader-entry-prize .account-coin { --account-coin-font-size: 10px; --account-coin-icon-size: 18px; --account-coin-unit-size: 7px; min-height: 21px; gap: 2px; padding: 1px 5px 1px 2px; }
.account-module-leaders .account-leader-entry-score { display: grid; justify-items: end; }
.account-module-leaders .account-leader-entry-score > strong { color: #fff; font-size: 17px; font-weight: 950; line-height: 1; white-space: nowrap; }
.account-module-leaders .account-leader-entry-score > small { color: #85858e; font-size: 8px; font-weight: 800; text-transform: uppercase; }

.account-module-leaders .account-leader-pagination { margin-top: 14px; }

.account-module-leaders .account-leader-history > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.account-module-leaders .account-leader-history article {
    min-height: 86px;
    padding: 11px 12px;
    display: grid;
    grid-template-columns: 42px 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.024);
    animation: account-leader-entry-in 390ms var(--ease) both;
    transition: border-color 170ms ease, background 170ms ease, transform 170ms var(--ease);
}

.account-module-leaders .account-leaders.is-leader-reveal-ready [data-leader-reveal] {
    animation: none !important;
}

.account-module-leaders .account-leaders.is-leader-reveal-ready [data-leader-reveal]:not(.is-leader-revealed) {
    opacity: 0;
    transform: translateY(13px);
}

.account-module-leaders .account-leaders.is-leader-reveal-ready [data-leader-reveal].is-leader-revealed {
    opacity: 1;
    transform: none;
    animation: account-module-enter 420ms var(--ease) both !important;
}

.account-module-leaders .account-leaders.is-leader-reveal-ready [data-leader-reveal].is-leader-revealed:is(.account-panel, .account-dashboard-panel) {
    animation-name: account-dashboard-panel-in !important;
}

.account-module-leaders .account-leader-history article:nth-child(2) { animation-delay: 45ms; }
.account-module-leaders .account-leader-history article:nth-child(3) { animation-delay: 90ms; }
.account-module-leaders .account-leader-history article:nth-child(4) { animation-delay: 135ms; }

.account-module-leaders .account-leader-history article:hover { border-color: rgba(var(--leader-cyan), 0.26); background: rgba(var(--leader-cyan), 0.035); transform: translateY(-2px); }
.account-module-leaders .account-leader-history article > b { color: var(--cyan); font-size: 16px; font-weight: 950; }
.account-module-leaders .account-leader-history article > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: #ff6f8a; background: rgba(var(--leader-pink), 0.08); }
.account-module-leaders .account-leader-history article > div { display: grid; gap: 2px; }
.account-module-leaders .account-leader-history article > div small { color: var(--cyan); font-size: 8px; font-weight: 850; text-transform: uppercase; }
.account-module-leaders .account-leader-history article > div strong { overflow-wrap: anywhere; color: #fff; font-size: 11px; line-height: 1.3; }
.account-module-leaders .account-leader-history article > div em { color: #81818a; font-size: 8px; font-style: normal; }
.account-module-leaders .account-leader-history article > p { margin: 0; display: grid; justify-items: end; }
.account-module-leaders .account-leader-history article > p strong { color: #fff; font-size: 13px; }
.account-module-leaders .account-leader-history article > p small { color: #7f7f88; font-size: 8px; }

.account-module-leaders .account-leader-rules {
    --dashboard-panel-accent: var(--leader-cyan);
    --dashboard-panel-secondary: var(--leader-pink);
    border-color: rgba(var(--leader-cyan), 0.13);
}

.account-module-leaders .account-leader-rules > header > div > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(var(--leader-cyan), 0.2);
    border-radius: 13px;
    background: rgba(var(--leader-cyan), 0.075);
}

.account-module-leaders .account-leader-rule-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.account-module-leaders .account-leader-rule-list article {
    position: relative;
    min-height: 112px;
    padding: 13px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) minmax(64px, auto) minmax(64px, auto);
    align-items: center;
    gap: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.024);
    animation: account-leader-card-in 400ms var(--ease) both;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-module-leaders .account-leader-rule-list article:nth-child(2) { animation-delay: 45ms; }
.account-module-leaders .account-leader-rule-list article:nth-child(3) { animation-delay: 90ms; }
.account-module-leaders .account-leader-rule-list article:nth-child(4) { animation-delay: 135ms; }
.account-module-leaders .account-leader-rule-list article:nth-child(5) { animation-delay: 180ms; }

.account-module-leaders .account-leader-rule-list article:hover { border-color: rgba(var(--leader-cyan), 0.3); background: linear-gradient(120deg, rgba(var(--leader-cyan), 0.055), rgba(var(--leader-pink), 0.025)); box-shadow: -2px 2px 0 rgba(var(--leader-cyan), 0.19), 2px -2px 0 rgba(var(--leader-pink), 0.15); transform: translateY(-3px); }
.account-module-leaders .account-leader-rule-list article.is-disabled { filter: saturate(0.5); opacity: 0.56; }
.account-module-leaders .account-leader-rule-icon { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(var(--leader-cyan), 0.18); border-radius: 13px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.075); transition: background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.account-module-leaders .account-leader-rule-list article:hover .account-leader-rule-icon { background: rgba(var(--leader-cyan), 0.14); box-shadow: 0 10px 26px rgba(var(--leader-cyan), 0.11); transform: rotate(-6deg) scale(1.07); }
.account-module-leaders .account-leader-rule-copy { display: grid; gap: 4px; }
.account-module-leaders .account-leader-rule-copy strong { overflow-wrap: anywhere; color: #fff; font-size: 12px; line-height: 1.35; }
.account-module-leaders .account-leader-rule-copy small { color: #888891; font-size: 9px; line-height: 1.4; }
.account-module-leaders .account-leader-rule-value { padding: 7px 8px; display: grid; min-width: 64px; justify-items: center; gap: 1px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 12px; background: rgba(0, 0, 0, 0.22); }
.account-module-leaders .account-leader-rule-value > small { color: var(--cyan); font-size: 8px; font-weight: 950; }
.account-module-leaders .account-leader-rule-value.is-rating > small { color: #ff6f8a; }
.account-module-leaders .account-leader-rule-value > b { color: #fff; font-size: 15px; font-weight: 950; }
.account-module-leaders .account-leader-rule-value > em { color: #7f7f88; font-size: 7px; font-style: normal; text-align: center; }

.account-module-leaders .account-leader-catalogues {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, 0.78fr);
    gap: 14px;
    align-items: start;
}

.account-module-leaders :is(.account-leader-levels, .account-leader-statuses) {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.09);
    background:
        radial-gradient(circle at 100% 0, rgba(var(--leader-pink), 0.055), transparent 38%),
        rgba(11, 11, 14, 0.94);
    box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24), inset 0 1px rgba(255, 255, 255, 0.035);
    animation: account-leader-surface-in 480ms var(--ease) 180ms both;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-module-leaders .account-leader-statuses { animation-delay: 250ms; }
.account-module-leaders :is(.account-leader-levels, .account-leader-statuses):hover { border-color: rgba(var(--leader-cyan), 0.28); box-shadow: -3px 3px 0 rgba(var(--leader-cyan), 0.18), 3px -3px 0 rgba(var(--leader-pink), 0.15), 0 29px 66px rgba(0, 0, 0, 0.32); transform: translateY(-4px); }
.account-module-leaders .account-leader-statuses:hover { border-color: rgba(var(--leader-pink), 0.3); }
.account-module-leaders :is(.account-leader-levels, .account-leader-statuses)::before { position: absolute; top: 0; right: 22px; left: 22px; height: 2px; border-radius: 0 0 99px 99px; background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent); content: ""; opacity: 0.42; }
.account-module-leaders :is(.account-leader-levels, .account-leader-statuses) > header > div > i { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(var(--leader-cyan), 0.19); border-radius: 13px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.075); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.account-module-leaders :is(.account-leader-levels, .account-leader-statuses):hover > header > div > i { border-color: rgba(var(--leader-cyan), 0.42); background: rgba(var(--leader-cyan), 0.14); box-shadow: 0 10px 26px rgba(var(--leader-cyan), 0.12); transform: rotate(-7deg) scale(1.08); }
.account-module-leaders .account-leader-statuses:hover > header > div > i { border-color: rgba(var(--leader-pink), 0.42); background: rgba(var(--leader-pink), 0.14); box-shadow: 0 10px 26px rgba(var(--leader-pink), 0.12); }
.account-module-leaders .account-leader-statuses > header > div > i { border-color: rgba(var(--leader-pink), 0.2); color: #ff6f8a; background: rgba(var(--leader-pink), 0.075); }
.account-module-leaders .account-leader-levels > header > span { padding: 6px 9px; border: 1px solid rgba(var(--leader-cyan), 0.15); border-radius: 999px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.05); font-size: 10px; font-weight: 900; }

.account-module-leaders .account-leader-level-table {
    max-height: 480px;
    padding-right: 5px;
    display: grid;
    gap: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--leader-cyan), 0.38) transparent;
}

.account-module-leaders .account-leader-level-table::-webkit-scrollbar { width: 5px; }
.account-module-leaders .account-leader-level-table::-webkit-scrollbar-thumb { border-radius: 99px; background: linear-gradient(var(--cyan), var(--pink)); }
.account-module-leaders .account-leader-level-table > div {
    position: relative;
    min-height: 50px;
    padding: 8px 11px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.065);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.022);
    animation: account-leader-entry-in 360ms var(--ease) both;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease);
}

.account-module-leaders .account-leader-level-table > div:nth-child(2) { animation-delay: 25ms; }
.account-module-leaders .account-leader-level-table > div:nth-child(3) { animation-delay: 50ms; }
.account-module-leaders .account-leader-level-table > div:nth-child(4) { animation-delay: 75ms; }
.account-module-leaders .account-leader-level-table > div:nth-child(5) { animation-delay: 100ms; }
.account-module-leaders .account-leader-level-table > div:nth-child(6) { animation-delay: 125ms; }
.account-module-leaders .account-leader-level-table > div:nth-child(7) { animation-delay: 150ms; }
.account-module-leaders .account-leader-level-table > div:nth-child(8) { animation-delay: 175ms; }
.account-module-leaders .account-leader-level-table > div:nth-child(n + 9) { animation-delay: 200ms; }
.account-module-leaders .account-leader-level-table > div:hover { border-color: rgba(var(--leader-cyan), 0.34); background: rgba(var(--leader-cyan), 0.055); box-shadow: inset 3px 0 0 rgba(var(--leader-cyan), 0.72), 0 12px 26px rgba(0, 0, 0, 0.18); transform: translateX(5px); }
.account-module-leaders .account-leader-level-table > div.is-current { border-color: rgba(var(--leader-cyan), 0.46); background: linear-gradient(90deg, rgba(var(--leader-cyan), 0.1), rgba(var(--leader-pink), 0.045)); box-shadow: inset 3px 0 0 var(--cyan); }
.account-module-leaders .account-leader-level-table > div.is-milestone { border-color: rgba(var(--leader-pink), 0.14); }
.account-module-leaders .account-leader-level-table > div > b { display: flex; gap: 5px; align-items: center; color: var(--cyan); font-size: 13px; }
.account-module-leaders .account-leader-level-table > div > b i { color: #ff6f8a; font-size: 7px; }
.account-module-leaders .account-leader-level-table > div > span { overflow-wrap: anywhere; color: #dddde2; font-size: 11px; font-weight: 830; }
.account-module-leaders .account-leader-level-table > div > strong { color: #888891; font-size: 9px; font-weight: 800; text-align: right; }
.account-module-leaders .account-leader-level-table > div > em { position: absolute; top: 4px; right: 6px; padding: 2px 5px; border-radius: 999px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.08); font-size: 7px; font-style: normal; font-weight: 900; }

.account-module-leaders .account-leader-status-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}

.account-module-leaders .account-leader-status-list article {
    position: relative;
    min-height: 92px;
    padding: 11px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.024);
    animation: account-leader-card-in 380ms var(--ease) both;
    transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease, transform 170ms var(--ease);
}

.account-module-leaders .account-leader-status-list article:nth-child(2) { animation-delay: 35ms; }
.account-module-leaders .account-leader-status-list article:nth-child(3) { animation-delay: 70ms; }
.account-module-leaders .account-leader-status-list article:nth-child(4) { animation-delay: 105ms; }
.account-module-leaders .account-leader-status-list article:nth-child(5) { animation-delay: 140ms; }
.account-module-leaders .account-leader-status-list article:nth-child(6) { animation-delay: 175ms; }
.account-module-leaders .account-leader-status-list article:nth-child(n + 7) { animation-delay: 210ms; }
.account-module-leaders .account-leader-status-list article:hover { border-color: rgba(var(--leader-pink), 0.38); background: rgba(var(--leader-pink), 0.055); box-shadow: inset 3px 0 0 rgba(var(--leader-pink), 0.62), 0 15px 34px rgba(0, 0, 0, 0.22); transform: translateY(-4px); }
.account-module-leaders .account-leader-status-list article.is-current { grid-column: 1 / -1; min-height: 104px; border-color: rgba(var(--leader-pink), 0.42); background: linear-gradient(120deg, rgba(var(--leader-pink), 0.1), rgba(var(--leader-cyan), 0.055)); box-shadow: inset 3px 0 0 var(--pink), -2px 2px 0 rgba(var(--leader-cyan), 0.18); }
.account-module-leaders .account-leader-status-list article > b { width: 38px; height: 38px; display: grid; place-content: center; justify-items: center; border: 1px solid rgba(var(--leader-pink), 0.18); border-radius: 12px; color: #ff6f8a; background: rgba(var(--leader-pink), 0.07); }
.account-module-leaders .account-leader-status-list article > b i { font-size: 10px; }
.account-module-leaders .account-leader-status-list article > b span { font-size: 9px; }
.account-module-leaders .account-leader-status-list article > div { display: grid; gap: 2px; }
.account-module-leaders .account-leader-status-list article > div small { color: #7f7f88; font-size: 7px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.account-module-leaders .account-leader-status-list article > div strong { overflow-wrap: anywhere; color: #fff; font-size: 11px; line-height: 1.25; }
.account-module-leaders .account-leader-status-list article > div em { color: #8f8f98; font-size: 8px; font-style: normal; }
.account-module-leaders .account-leader-status-list article > span { grid-column: 1 / -1; display: inline-flex; width: fit-content; gap: 5px; align-items: center; padding: 4px 7px; border: 1px solid rgba(var(--leader-cyan), 0.18); border-radius: 999px; color: var(--cyan); background: rgba(var(--leader-cyan), 0.055); font-size: 8px; font-weight: 900; }

/* Leaders reuse the dashboard motion hierarchy: surfaces, cards, then short interactions. */
.account-module-leaders .account-leaders.is-leader-reveal-ready :is(
    .account-leader-hero-stage dl > div,
    .account-leader-progression article,
    .account-leader-level-route,
    .account-leader-switcher > a,
    .account-leader-arena dl > div,
    .account-leader-formula article,
    .account-leader-prizes li,
    .account-leader-current dl > div,
    .account-leader-entry,
    .account-leader-history article,
    .account-leader-rule-list article,
    .account-leader-level-table > div,
    .account-leader-status-list article
) {
    animation: none !important;
}

.account-module-leaders .account-leaders.is-leader-reveal-ready [data-leader-reveal].is-leader-revealed :is(
    .account-leader-hero-stage dl > div,
    .account-leader-progression article,
    .account-leader-level-route,
    .account-leader-switcher > a,
    .account-leader-arena dl > div,
    .account-leader-formula article,
    .account-leader-prizes li,
    .account-leader-current dl > div,
    .account-leader-entry,
    .account-leader-history article,
    .account-leader-rule-list article,
    .account-leader-level-table > div,
    .account-leader-status-list article
) {
    animation: account-dashboard-card-in 420ms var(--ease) both !important;
    animation-delay: calc(var(--leader-motion-order, 0) * 45ms) !important;
}

.account-module-leaders :is(
    .account-leader-hero-stage dl > div,
    .account-leader-progression article,
    .account-leader-switcher > a,
    .account-leader-arena dl > div,
    .account-leader-formula article,
    .account-leader-prizes li,
    .account-leader-current dl > div,
    .account-leader-entry,
    .account-leader-history article,
    .account-leader-rule-list article,
    .account-leader-level-table > div,
    .account-leader-status-list article
):nth-child(2) { --leader-motion-order: 1; }

.account-module-leaders :is(
    .account-leader-hero-stage dl > div,
    .account-leader-progression article,
    .account-leader-switcher > a,
    .account-leader-arena dl > div,
    .account-leader-formula article,
    .account-leader-prizes li,
    .account-leader-current dl > div,
    .account-leader-entry,
    .account-leader-history article,
    .account-leader-rule-list article,
    .account-leader-level-table > div,
    .account-leader-status-list article
):nth-child(3) { --leader-motion-order: 2; }

.account-module-leaders :is(
    .account-leader-progression article,
    .account-leader-switcher > a,
    .account-leader-formula article,
    .account-leader-entry,
    .account-leader-history article,
    .account-leader-rule-list article,
    .account-leader-level-table > div,
    .account-leader-status-list article
):nth-child(4) { --leader-motion-order: 3; }

.account-module-leaders :is(
    .account-leader-switcher > a,
    .account-leader-entry,
    .account-leader-history article,
    .account-leader-rule-list article,
    .account-leader-level-table > div,
    .account-leader-status-list article
):nth-child(5) { --leader-motion-order: 4; }

.account-module-leaders :is(
    .account-leader-switcher > a,
    .account-leader-entry,
    .account-leader-level-table > div,
    .account-leader-status-list article
):nth-child(6) { --leader-motion-order: 5; }

.account-module-leaders :is(
    .account-leader-switcher > a,
    .account-leader-entry,
    .account-leader-level-table > div,
    .account-leader-status-list article
):nth-child(7) { --leader-motion-order: 6; }

.account-module-leaders :is(
    .account-leader-switcher > a,
    .account-leader-entry,
    .account-leader-level-table > div,
    .account-leader-status-list article
):nth-child(8) { --leader-motion-order: 7; }

.account-module-leaders :is(
    .account-leader-entry,
    .account-leader-level-table > div,
    .account-leader-status-list article
):nth-child(n + 9) { --leader-motion-order: 8; }

.account-module-leaders .account-leader-level-route { --leader-motion-order: 4; }

.account-module-leaders .account-leader-hero::before {
    content: none;
    animation: none !important;
}

.account-module-leaders .account-leader-zone,
.account-module-leaders .account-leader-level-progress > i > b {
    animation: none !important;
}

.account-module-leaders :is(
    .account-leader-current,
    .account-leader-neighbors,
    .account-leader-board,
    .account-leader-history,
    .account-leader-levels,
    .account-leader-statuses
) {
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-module-leaders :is(
    .account-leader-current,
    .account-leader-neighbors,
    .account-leader-board,
    .account-leader-history,
    .account-leader-levels,
    .account-leader-statuses
):hover {
    border-color: rgba(var(--leader-cyan), 0.38);
    box-shadow: -3px 3px 0 rgba(var(--leader-cyan), 0.3), 3px -3px 0 rgba(var(--leader-pink), 0.28), 0 28px 70px rgba(0, 0, 0, 0.34);
    transform: translateY(-4px);
}

.account-module-leaders .account-leader-statuses:hover {
    border-color: rgba(var(--leader-pink), 0.4);
}

.account-module-leaders :is(
    .account-leader-arena dl > div,
    .account-leader-current dl > div,
    .account-leader-entry,
    .account-leader-history article,
    .account-leader-level-table > div
):hover {
    transform: translateX(3px);
}

@media (max-width: 1320px) {
    .account-module-leaders .account-leader-hero { grid-template-columns: minmax(0, 1fr) minmax(270px, 0.62fr); }
    .account-module-leaders .account-leader-progression { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-module-leaders .account-leader-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-module-leaders .account-leader-rule-list { grid-template-columns: 1fr; }
}

@media (max-width: 1180px) {
    .account-module-leaders .account-leader-hero { min-height: 0; grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-hero-stage { min-height: 220px; grid-template-columns: 180px minmax(0, 1fr); grid-template-rows: 1fr; align-items: center; }
    .account-module-leaders .account-leader-hero-stage dl { align-self: center; }
    .account-module-leaders .account-leader-arena { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-arena dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .account-module-leaders .account-leader-arena dl > div { grid-template-columns: 1fr; align-content: start; }
    .account-module-leaders .account-leader-arena dd { text-align: left; }
    .account-module-leaders .account-leader-formula > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-module-leaders .account-leader-current { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-catalogues { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-status-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .account-module-leaders .account-leader-status-list article.is-current { grid-column: span 2; }
}

@media (max-width: 1050px) {
    .account-module-leaders .account-leader-level-route { grid-template-columns: 72px minmax(0, 1fr); }
    .account-module-leaders .account-leader-level-progress { grid-column: 1 / -1; }
    .account-module-leaders .account-leader-current dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .account-module-leaders .account-leader-history > div { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-status-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .account-module-leaders .account-leaders { gap: 20px; }
    .account-module-leaders .account-leader-hero { grid-template-columns: minmax(0, 1.25fr) minmax(270px, 0.75fr); }
    .account-module-leaders .account-leader-hero-stage { min-height: 250px; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .account-module-leaders .account-leader-hero-radar { width: 132px; height: 132px; }
}

@media (max-width: 760px) {
    .account-module-leaders .account-leader-hero { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-hero-stage { min-height: 205px; grid-template-columns: 160px minmax(0, 1fr); grid-template-rows: 1fr; }
    .account-module-leaders .account-leader-hero-radar { width: 124px; height: 124px; }
    .account-module-leaders .account-leader-hero-radar > span { inset: 31px; }
    .account-module-leaders .account-leader-progression { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-module-leaders .account-leader-arena dl { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-arena dl > div { grid-template-columns: minmax(0, 1fr) auto; }
    .account-module-leaders .account-leader-arena dd { text-align: right; }
    .account-module-leaders .account-leader-current dl { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-entry { grid-template-columns: 48px 44px minmax(0, 1fr); }
    .account-module-leaders .account-leader-entry-result { grid-column: 3; justify-content: flex-start; }
    .account-module-leaders .account-leader-entry-score { justify-items: start; }
    .account-module-leaders .account-leader-status-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .account-module-leaders .account-leaders { gap: 17px; }
    .account-module-leaders .account-leader-hero { padding: 20px; border-radius: 22px; box-shadow: -3px 3px 0 rgba(var(--leader-cyan), 0.28), 3px -3px 0 rgba(var(--leader-pink), 0.22), 0 25px 62px rgba(0, 0, 0, 0.38); }
    .account-module-leaders .account-leader-hero-copy { grid-template-columns: 58px minmax(0, 1fr); gap: 14px 13px; }
    .account-module-leaders .account-leader-hero-copy > .account-module-hero-mark { width: 58px; height: 58px; border-radius: 18px; }
    .account-module-leaders .account-leader-hero-copy h2 { font-size: clamp(29px, 10vw, 38px); }
    .account-module-leaders .account-leader-hero-copy > div:nth-child(2) > span { font-size: 12px; line-height: 1.5; }
    .account-module-leaders .account-leader-hero-actions { display: grid; grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-visibility,
    .account-module-leaders .account-leader-hero-actions > a { width: 100%; flex-basis: auto; }
    .account-module-leaders .account-leader-hero-navigation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-module-leaders .account-leader-hero-navigation > a { justify-content: center; text-align: center; }
    .account-module-leaders .account-leader-hero-stage { min-height: 0; padding: 15px; grid-template-columns: 112px minmax(0, 1fr); border-radius: 18px; }
    .account-module-leaders .account-leader-hero-radar { width: 104px; height: 104px; }
    .account-module-leaders .account-leader-hero-radar > span { inset: 26px; border-radius: 15px; font-size: 19px; }
    .account-module-leaders .account-leader-hero-stage dl { grid-template-columns: 1fr; gap: 6px; }
    .account-module-leaders .account-leader-hero-stage dl > div { padding: 8px 9px; }
    .account-module-leaders .account-leader-hero-stage dl > div.is-wide { grid-column: auto; }
    .account-module-leaders .account-leader-hero-stage dt { font-size: 7px; }
    .account-module-leaders .account-leader-hero-stage dd { font-size: 11px; }
    .account-module-leaders .account-leader-zone-heading > div { align-items: flex-start; }
    .account-module-leaders .account-leader-zone-heading > div > span { width: 44px; height: 44px; border-radius: 13px; }
    .account-module-leaders .account-leader-zone-heading h2 { font-size: 24px; }
    .account-module-leaders .account-leader-zone-heading small { font-size: 11px; }
    .account-module-leaders .account-leader-progression { gap: 8px; }
    .account-module-leaders .account-leader-progression article { min-height: 112px; padding: 13px; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; border-radius: 16px; }
    .account-module-leaders .account-leader-progression article > span { width: 38px; height: 38px; border-radius: 12px; }
    .account-module-leaders .account-leader-progression small { font-size: 8px; }
    .account-module-leaders .account-leader-progression strong { font-size: 18px; }
    .account-module-leaders .account-leader-progression article.is-status strong { font-size: 12px; }
    .account-module-leaders .account-leader-level-route { min-height: 0; padding: 15px; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; border-radius: 17px; }
    .account-module-leaders .account-leader-level-badge { width: 56px; height: 56px; border-radius: 16px; }
    .account-module-leaders .account-leader-level-badge strong { font-size: 22px; }
    .account-module-leaders .account-leader-zone { padding: 16px; gap: 14px; border-radius: 21px; }
    .account-module-leaders .account-leader-switcher { grid-template-columns: 1fr; gap: 8px; }
    .account-module-leaders .account-leader-switcher > a { min-height: 106px; padding: 12px; grid-template-columns: 38px minmax(0, 1fr); border-radius: 16px; }
    .account-module-leaders .account-leader-policy-icon { width: 38px; height: 38px; border-radius: 12px; }
    .account-module-leaders .account-leader-policy-copy em { -webkit-line-clamp: 1; }
    .account-module-leaders .account-leader-arena { padding: 16px; gap: 17px; border-radius: 18px; }
    .account-module-leaders .account-leader-arena-copy { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; }
    .account-module-leaders .account-leader-arena-copy > span { width: 48px; height: 48px; border-radius: 14px; }
    .account-module-leaders .account-leader-arena-copy h2 { font-size: 24px; }
    .account-module-leaders .account-leader-arena-copy p { font-size: 11px; }
    .account-module-leaders .account-leader-formula { padding: 15px; border-radius: 17px; }
    .account-module-leaders .account-leader-formula > div { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
    .account-module-leaders .account-leader-formula article { min-height: 98px; padding: 10px; grid-template-columns: 29px minmax(0, 1fr); gap: 3px 7px; }
    .account-module-leaders .account-leader-formula article > span { width: 29px; height: 29px; border-radius: 9px; }
    .account-module-leaders .account-leader-formula article strong { font-size: 15px; }
    .account-module-leaders .account-leader-formula article small { font-size: 8px; }
    .account-module-leaders .account-leader-prizes { padding: 15px; border-radius: 17px; }
    .account-module-leaders .account-leader-prizes ol { grid-template-columns: 1fr; align-items: stretch; }
    .account-module-leaders .account-leader-prizes li,
    .account-module-leaders .account-leader-prizes li.is-rank-1 { min-height: 72px; padding: 10px 12px; grid-template-columns: 36px auto minmax(0, 1fr) auto; align-content: center; align-items: center; justify-items: start; }
    .account-module-leaders .account-leader-prizes li.is-rank-1 { grid-row: 1; }
    .account-module-leaders .account-leader-prizes li.is-rank-2 { grid-row: 2; }
    .account-module-leaders .account-leader-prizes li.is-rank-3 { grid-row: 3; }
    .account-module-leaders .account-leader-prizes li > span { grid-column: 1; grid-row: 1 / 3; }
    .account-module-leaders .account-leader-prizes li > small { grid-column: 2; grid-row: 1; }
    .account-module-leaders .account-leader-prizes li > strong { grid-column: 2; grid-row: 2; font-size: 21px; }
    .account-module-leaders .account-leader-prizes li > .account-coin { grid-column: 4; grid-row: 1 / 3; margin: 0; }
    .account-module-leaders .account-leader-current { padding: 15px; gap: 14px; border-radius: 17px; }
    .account-module-leaders .account-leader-current-rank { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; }
    .account-module-leaders .account-leader-current-rank > span { width: 48px; height: 48px; border-radius: 14px; }
    .account-module-leaders .account-leader-entry { padding: 11px; grid-template-columns: 41px 40px minmax(0, 1fr); gap: 8px; border-radius: 14px; }
    .account-module-leaders .account-leader-entry-rank { grid-column: 1; grid-row: 1; grid-template-columns: 14px minmax(0, 1fr); gap: 3px; font-size: 13px; }
    .account-module-leaders .account-leader-entry-rank > i { font-size: 9px; }
    .account-module-leaders .account-leader-avatar { width: 40px; height: 40px; grid-column: 2; grid-row: 1; border-radius: 12px; }
    .account-module-leaders .account-leader-entry-person { grid-column: 3; grid-row: 1; }
    .account-module-leaders .account-leader-entry-person > strong { font-size: 12px; }
    .account-module-leaders .account-leader-entry-person > small { font-size: 8px; }
    .account-module-leaders .account-leader-entry-person > em { grid-column: 1; grid-row: 3; width: fit-content; }
    .account-module-leaders .account-leader-entry-result { grid-column: 2 / -1; grid-row: 2; flex-wrap: wrap; justify-content: space-between; padding-top: 7px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
    .account-module-leaders .account-leader-history article { grid-template-columns: 37px 34px minmax(0, 1fr); }
    .account-module-leaders .account-leader-history article > span { width: 34px; height: 34px; border-radius: 10px; }
    .account-module-leaders .account-leader-history article > p { grid-column: 3; justify-items: start; }
    .account-module-leaders .account-leader-rule-list article { min-height: 0; padding: 12px; grid-template-columns: 38px minmax(0, 1fr); gap: 9px; }
    .account-module-leaders .account-leader-rule-icon { width: 38px; height: 38px; border-radius: 12px; }
    .account-module-leaders .account-leader-rule-value { min-width: 0; grid-row: 2; }
    .account-module-leaders .account-leader-rule-value.is-experience { grid-column: 1; }
    .account-module-leaders .account-leader-rule-value.is-rating { grid-column: 2; }
    .account-module-leaders .account-leader-level-table { max-height: 430px; }
    .account-module-leaders .account-leader-level-table > div { grid-template-columns: 36px minmax(0, 1fr); }
    .account-module-leaders .account-leader-level-table > div > strong { grid-column: 2; text-align: left; }
    .account-module-leaders .account-leader-status-list { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-status-list article.is-current { grid-column: auto; }
}

@media (max-width: 390px) {
    .account-module-leaders .account-leader-hero { padding: 17px; }
    .account-module-leaders .account-leader-hero-copy { grid-template-columns: 50px minmax(0, 1fr); gap: 12px 10px; }
    .account-module-leaders .account-leader-hero-copy > .account-module-hero-mark { width: 50px; height: 50px; border-radius: 16px; }
    .account-module-leaders .account-leader-hero-copy h2 { font-size: 29px; }
    .account-module-leaders .account-leader-hero-stage { padding: 12px; grid-template-columns: 88px minmax(0, 1fr); gap: 8px; }
    .account-module-leaders .account-leader-hero-radar { width: 82px; height: 82px; }
    .account-module-leaders .account-leader-hero-radar > span { inset: 21px; border-radius: 12px; font-size: 16px; }
    .account-module-leaders .account-leader-progression article { min-height: 104px; padding: 11px; grid-template-columns: 34px minmax(0, 1fr); gap: 7px; }
    .account-module-leaders .account-leader-progression article > span { width: 34px; height: 34px; }
    .account-module-leaders .account-leader-progression strong { font-size: 16px; }
    .account-module-leaders .account-leader-level-copy strong { font-size: 14px; }
    .account-module-leaders .account-leader-level-progress > span { align-items: flex-start; flex-direction: column; gap: 3px; }
    .account-module-leaders .account-leader-level-progress > span em { text-align: left; }
    .account-module-leaders .account-leader-zone { padding: 14px; }
    .account-module-leaders .account-leader-formula article { grid-template-columns: 1fr; justify-items: start; }
    .account-module-leaders .account-leader-formula article > span { grid-row: auto; }
    .account-module-leaders .account-leader-formula article small { grid-column: 1; }
    .account-module-leaders .account-leader-arena dl > div { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-arena dd { text-align: left; }
    .account-module-leaders .account-leader-prizes li,
    .account-module-leaders .account-leader-prizes li.is-rank-1 { grid-template-columns: 34px auto minmax(0, 1fr); }
    .account-module-leaders .account-leader-prizes li > .account-coin { grid-column: 3; }
    .account-module-leaders .account-leader-entry { grid-template-columns: 37px 38px minmax(0, 1fr); }
    .account-module-leaders .account-leader-entry-rank { grid-template-columns: 1fr; justify-items: center; }
    .account-module-leaders .account-leader-entry-rank > i { display: none; }
    .account-module-leaders .account-leader-entry-result { grid-column: 2 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .account-module-leaders .account-leaders *,
    .account-module-leaders .account-leaders *::before,
    .account-module-leaders .account-leaders *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

.account-module-leaders .account-leaders-coming-soon {
    justify-content: flex-start;
    text-align: left;
}

/* Support: one complete account-native queue and conversation surface. */
.account-module-support {
    --module-accent: #25f4ee;
    --module-accent-rgb: 37, 244, 238;
    --module-secondary: #fe2c55;
}

.account-module-support .account-support-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-module-support .account-support-overview-card {
    min-height: 148px;
}

.account-module-support .account-support-overview-card > div > strong {
    font-variant-numeric: tabular-nums;
}

.account-module-support .account-support-overview-card > div > p {
    padding-right: 0;
}

.account-module-support .account-support-hero {
    min-height: 0;
    justify-content: space-between;
    padding: 24px 26px;
    border-color: rgba(37, 244, 238, 0.2);
    border-radius: 24px;
    background:
        linear-gradient(112deg, rgba(37, 244, 238, 0.105), transparent 42%),
        linear-gradient(292deg, rgba(254, 44, 85, 0.07), transparent 38%),
        var(--account-panel);
    box-shadow: 0 22px 58px rgba(0, 0, 0, 0.24);
}

.account-module-support .account-support-hero::after {
    position: absolute;
    right: 26px;
    bottom: 0;
    left: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(37, 244, 238, 0.46), rgba(254, 44, 85, 0.32), transparent);
    content: "";
}

.account-module-support .account-support-hero-copy {
    position: relative;
    z-index: 1;
    display: flex;
    min-width: 0;
    gap: 17px;
    align-items: center;
}

.account-module-support .account-support-hero-copy > div { min-width: 0; }

.account-module-support .account-support-hero-icon {
    display: grid;
    width: 56px;
    height: 56px;
    max-width: none;
    place-items: center;
    flex: 0 0 56px;
    margin: 0;
    border: 1px solid rgba(37, 244, 238, 0.28);
    border-radius: 17px;
    background: rgba(37, 244, 238, 0.09);
    color: var(--cyan);
    font-size: 22px;
    box-shadow: inset 0 0 24px rgba(37, 244, 238, 0.045);
}

.account-module-support .account-support-hero p { margin-bottom: 5px; }
.account-module-support .account-support-hero h2 { font-size: clamp(25px, 3vw, 36px); }
.account-module-support .account-support-hero-copy > div > span { max-width: 680px; margin-top: 7px; }
.account-module-support .account-support-hero > .account-button { position: relative; z-index: 1; flex: 0 0 auto; }

.account-support-metrics {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
}

.account-support-metrics > article {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.16);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease;
}

.account-support-metrics > article:hover {
    border-color: rgba(37, 244, 238, 0.3);
    background: linear-gradient(145deg, rgba(37, 244, 238, 0.065), rgba(255, 255, 255, 0.018));
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.account-support-metrics > article > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.18);
    border-radius: 13px;
    background: rgba(37, 244, 238, 0.07);
    color: var(--cyan);
    font-size: 15px;
}

.account-support-metrics > article.is-waiting_user > i { border-color: rgba(254, 44, 85, 0.22); background: rgba(254, 44, 85, 0.075); color: var(--pink); }
.account-support-metrics > article.is-completed > i { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.045); color: #d8d8de; }
.account-support-metrics > article > span { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: baseline; }
.account-support-metrics small { min-width: 0; overflow: hidden; color: #aaaab3; font-size: 10px; font-weight: 850; letter-spacing: 0.04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.account-support-metrics strong { grid-column: 2; grid-row: 1 / span 2; color: #fff; font-size: 26px; font-variant-numeric: tabular-nums; letter-spacing: -0.04em; }
.account-support-metrics em { min-width: 0; overflow: hidden; color: #777781; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }

.account-support-layout {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    margin-top: 20px;
}

.account-support-layout.has-ticket { grid-template-columns: minmax(310px, 0.84fr) minmax(0, 1.16fr); }
.account-support-layout > * { min-width: 0; }
.account-module-support .account-support-history-panel,
.account-module-support .account-support-thread-panel,
.account-module-support .account-support-guide { margin: 0; }

.account-module-support .account-support-history-panel.is-empty {
    min-height: 0;
}

.account-module-support .account-support-history-panel.is-empty > .account-empty {
    min-height: 112px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 17px;
    background:
        linear-gradient(105deg, rgba(37, 244, 238, 0.055), transparent 44%),
        linear-gradient(285deg, rgba(254, 44, 85, 0.035), transparent 38%),
        rgba(255, 255, 255, 0.018);
    text-align: left;
}

.account-module-support .account-support-history-panel.is-empty > .account-empty > span {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(37, 244, 238, 0.22);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(37, 244, 238, 0.14), rgba(254, 44, 85, 0.065));
    color: var(--cyan);
    box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.18), 2px -2px 0 rgba(254, 44, 85, 0.14);
}

.account-module-support .account-support-history-panel.is-empty > .account-empty > div {
    display: block;
    width: auto;
    max-width: 720px;
}

.account-module-support .account-support-history-panel.is-empty > .account-empty strong {
    font-size: 15px;
}

.account-module-support .account-support-history-panel.is-empty > .account-empty p {
    max-width: 680px;
    margin: 5px 0 9px;
    font-size: 11px;
}

.account-module-support .account-support-history-panel.is-empty > .account-empty a {
    min-height: 31px;
    padding: 5px 10px;
    border: 1px solid rgba(37, 244, 238, 0.18);
    border-radius: 999px;
    background: rgba(37, 244, 238, 0.055);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}

.account-module-support .account-support-history-panel.is-empty > .account-empty a:hover {
    border-color: rgba(37, 244, 238, 0.4);
    background: rgba(37, 244, 238, 0.12);
    transform: translateX(3px);
}

.account-module-support .account-support-history-panel > header > a {
    flex: 0 0 auto;
    white-space: nowrap;
}

.account-module-support .account-support-history-panel > header,
.account-module-support .account-support-thread-panel > header { align-items: flex-start; }
.account-module-support .account-support-history-panel > header > div,
.account-module-support .account-support-thread-panel > header > div { align-items: flex-start; }
.account-module-support .account-support-history-panel > header > div > span,
.account-module-support .account-support-thread-panel > header > div > span { display: grid; min-width: 0; gap: 3px; }
.account-module-support .account-support-history-panel > header h2,
.account-module-support .account-support-thread-panel > header h2 { margin: 0; }
.account-module-support .account-support-history-panel > header p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.account-support-count {
    display: grid;
    min-width: 34px;
    height: 30px;
    place-items: center;
    padding: 0 9px;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 10px;
    background: rgba(37, 244, 238, 0.065);
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.account-support-ticket-list { display: grid; gap: 9px; }
.account-support-ticket {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr) 20px;
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.021);
    color: inherit;
    text-decoration: none;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease;
}

.account-support-ticket:hover,
.account-support-ticket:focus-visible,
.account-support-ticket.is-current {
    border-color: rgba(37, 244, 238, 0.3);
    background: linear-gradient(105deg, rgba(37, 244, 238, 0.065), rgba(255, 255, 255, 0.018));
    box-shadow: inset 3px 0 0 rgba(37, 244, 238, 0.72);
    transform: translateX(3px);
}
.account-support-ticket.is-current { border-color: rgba(37, 244, 238, 0.38); }
.account-support-ticket-icon {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.17);
    border-radius: 13px;
    background: rgba(37, 244, 238, 0.065);
    color: var(--cyan);
    font-size: 13px;
}
.account-support-ticket-copy { display: grid; min-width: 0; gap: 4px; }
.account-support-ticket-topline { display: flex; min-width: 0; gap: 8px; align-items: center; justify-content: space-between; }
.account-support-ticket-topline > small { min-width: 0; overflow: hidden; color: #7f7f89; font-size: 9px; font-weight: 800; letter-spacing: 0.035em; text-overflow: ellipsis; white-space: nowrap; }
.account-support-ticket-topline .account-badge { flex: 0 0 auto; }
.account-support-ticket-copy > strong { min-width: 0; overflow: hidden; font-size: 13px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.account-support-ticket-copy > p { min-width: 0; margin: 0; overflow: hidden; color: #aaaab2; font-size: 10.5px; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap; }
.account-support-ticket-meta { display: flex; min-width: 0; gap: 9px; align-items: center; color: #707079; font-size: 8.5px; }
.account-support-ticket-meta > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-support-ticket-meta i { margin-right: 5px; color: #8e8e97; }
.account-support-ticket-meta time { margin-left: auto; flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.account-support-ticket-meta b { display: grid; min-width: 20px; height: 20px; place-items: center; flex: 0 0 auto; border-radius: 7px; background: rgba(255, 255, 255, 0.045); color: #aaaab2; font-size: 8px; }
.account-support-ticket > i:last-child { color: #5f5f68; font-size: 9px; transition: color 180ms ease, transform 180ms var(--ease); }
.account-support-ticket:hover > i:last-child,
.account-support-ticket.is-current > i:last-child { color: var(--cyan); transform: translateX(2px); }

.account-support-thread-head > div { min-width: 0; }
.account-support-thread-head > .account-icon-button {
    display: grid;
    padding: 0;
    place-items: center;
}
.account-support-thread-head > .account-icon-button > i {
    display: block;
    width: auto;
    margin: 0;
    line-height: 1;
}
.account-support-thread-head small { color: var(--cyan); font-size: 9px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.account-support-thread-head h2 { min-width: 0; overflow-wrap: anywhere; font-size: 18px; line-height: 1.25; }
.account-support-thread-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 15px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.018);
}
.account-support-thread-facts > span { display: grid; min-width: 0; gap: 4px; padding: 2px 7px; border-left: 1px solid rgba(255, 255, 255, 0.07); }
.account-support-thread-facts > span:first-child { border-left: 0; }
.account-support-thread-facts small { color: #74747e; font-size: 8px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.account-support-thread-facts strong { min-width: 0; overflow: hidden; color: #d6d6dc; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.account-support-thread-facts strong.is-waiting_user { color: var(--pink); }
.account-support-thread-facts strong.is-open,
.account-support-thread-facts strong.is-in_progress { color: var(--cyan); }

.account-support-thread {
    display: grid;
    gap: 11px;
    margin: 0;
    max-height: clamp(280px, 42vh, 460px);
    padding: 2px 9px 5px 0;
    overflow-x: hidden;
    overflow-y: auto;
    list-style: none;
    scrollbar-color: rgba(37, 244, 238, 0.56) rgba(255, 255, 255, 0.045);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}
.account-support-thread::-webkit-scrollbar { width: 9px; }
.account-support-thread::-webkit-scrollbar-track { border-radius: 999px; background: rgba(255, 255, 255, 0.045); }
.account-support-thread::-webkit-scrollbar-thumb { border: 2px solid #0d0d10; border-radius: 999px; background: rgba(37, 244, 238, 0.56); }
.account-support-thread::-webkit-scrollbar-thumb:hover { background: rgba(37, 244, 238, 0.78); }
.account-support-thread > li { display: flex; min-width: 0; gap: 9px; align-items: flex-start; }
.account-support-thread > li.is-user { flex-direction: row-reverse; }
.account-support-message-avatar {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    flex: 0 0 34px;
    border: 1px solid rgba(37, 244, 238, 0.19);
    border-radius: 11px;
    background: rgba(37, 244, 238, 0.065);
    color: var(--cyan);
    font-size: 10px;
}
.account-support-thread > li.is-user .account-support-message-avatar { border-color: rgba(254, 44, 85, 0.2); background: rgba(254, 44, 85, 0.065); color: var(--pink); }
.account-support-thread > li.is-system .account-support-message-avatar { border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.04); color: #c4c4ca; }
.account-support-thread article {
    width: min(86%, 640px);
    min-width: 0;
    padding: 12px 13px;
    border: 1px solid rgba(37, 244, 238, 0.13);
    border-radius: 5px 15px 15px;
    background: rgba(37, 244, 238, 0.04);
}
.account-support-thread > li.is-user article { border-color: rgba(254, 44, 85, 0.13); border-radius: 15px 5px 15px 15px; background: rgba(254, 44, 85, 0.035); }
.account-support-thread > li.is-system article { border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.025); }
.account-support-thread article > header { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.account-support-thread article strong { color: #ededf1; font-size: 10px; }
.account-support-thread article time { color: #666671; font-size: 8px; font-variant-numeric: tabular-nums; }
.account-support-thread article p { margin: 8px 0 0; color: #c8c8ce; font-size: 11px; line-height: 1.6; overflow-wrap: anywhere; }
.account-support-message-attachments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-top: 10px;
}
.account-support-message-attachments > a {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.28);
    color: #d8d8dd;
    text-decoration: none;
    transition: border-color 180ms ease, transform 180ms var(--ease);
}
.account-support-message-attachments > a:hover { border-color: rgba(37, 244, 238, 0.42); transform: translateY(-1px); }
.account-support-message-attachments img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.account-support-message-attachments span { display: flex; min-width: 0; gap: 5px; padding: 6px 7px; align-items: center; font-size: 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-support-message-attachments span i { color: var(--cyan); }

.account-support-reply {
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
}
.account-support-reply-heading { display: flex; gap: 10px; align-items: center; }
.account-support-reply-heading > span { display: grid; width: 36px; height: 36px; place-items: center; flex: 0 0 36px; border-radius: 11px; background: rgba(37, 244, 238, 0.07); color: var(--cyan); font-size: 11px; }
.account-support-reply-heading > div { min-width: 0; }
.account-support-reply-heading strong { font-size: 12px; }
.account-support-reply-heading p { margin: 2px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.45; }
.account-support-reply textarea { min-height: 118px; resize: vertical; }
.account-support-reply-actions { display: flex; gap: 14px; align-items: center; justify-content: flex-end; }
.account-support-upload { padding: 12px; }

.account-support-closed {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.025);
}
.account-support-closed > i { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 38px; border-radius: 12px; background: rgba(255, 255, 255, 0.045); color: #aaaab2; }
.account-support-closed > div { min-width: 0; flex: 1; }
.account-support-closed strong { font-size: 11px; }
.account-support-closed p { margin: 3px 0 0; color: var(--muted); font-size: 9.5px; line-height: 1.5; }

.account-module-support .account-support-guide {
    display: grid;
    min-height: 320px;
    align-content: center;
    gap: 18px;
    padding: 28px;
    background:
        linear-gradient(145deg, rgba(37, 244, 238, 0.045), transparent 46%),
        var(--account-panel);
}
.account-support-guide-mark { display: grid; width: 52px; height: 52px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.22); border-radius: 16px; background: rgba(37, 244, 238, 0.07); color: var(--cyan); font-size: 18px; }
.account-support-guide > div small { color: var(--cyan); font-size: 9px; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }
.account-support-guide h2 { margin: 5px 0 7px; font-size: 23px; }
.account-support-guide p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.account-support-guide ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.account-support-guide li { display: flex; gap: 9px; align-items: center; color: #bdbdc4; font-size: 10px; line-height: 1.4; }
.account-support-guide li i { width: 18px; color: var(--cyan); text-align: center; }
.account-support-pagination { margin-top: 13px; }

@media (max-width: 1120px) {
    .account-module-support .account-support-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-support-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-support-layout,
    .account-support-layout.has-ticket { grid-template-columns: minmax(0, 1fr); }
    .account-module-support .account-support-guide { min-height: 230px; }
}

@media (max-width: 720px) {
    .account-module-support .account-support-hero { align-items: flex-start; padding: 20px; }
    .account-module-support .account-support-hero-copy { align-items: flex-start; }
    .account-module-support .account-support-hero > .account-button { width: 100%; }
    .account-support-thread-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-support-thread-facts > span:nth-child(3) { border-left: 0; }
}

@media (max-width: 520px) {
    .account-module-support .account-support-hero,
    .account-module-support .account-support-hero-copy { flex-direction: column; }
    .account-module-support .account-support-hero { gap: 18px; }
    .account-module-support .account-support-hero-copy { gap: 13px; }
    .account-module-support .account-support-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .account-module-support .account-support-overview-card { min-height: 124px; padding: 15px; }
    .account-support-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .account-support-metrics > article { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 11px; border-radius: 15px; }
    .account-support-metrics > article > i { width: 34px; height: 34px; border-radius: 10px; font-size: 12px; }
    .account-support-metrics small { font-size: 8px; }
    .account-support-metrics strong { font-size: 21px; }
    .account-support-metrics em { font-size: 8px; }
    .account-support-ticket { grid-template-columns: minmax(0, 1fr) 16px; padding: 12px; }
    .account-support-ticket-icon { display: none; }
    .account-support-ticket-topline { align-items: flex-start; flex-direction: column-reverse; gap: 6px; }
    .account-support-ticket-meta { flex-wrap: wrap; gap: 5px 9px; }
    .account-support-ticket-meta > span { width: 100%; }
    .account-support-ticket-meta time { margin-left: 0; }
    .account-support-thread-facts { grid-template-columns: minmax(0, 1fr); }
    .account-support-thread-facts > span { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 7px 3px 2px; }
    .account-support-thread-facts > span:first-child { border-top: 0; }
    .account-support-thread article { width: calc(100% - 43px); }
    .account-support-reply-actions,
    .account-support-closed { align-items: stretch; flex-direction: column; }
    .account-support-reply-actions .account-button,
    .account-support-closed .account-button { width: 100%; }
    .account-support-closed > i { display: none; }
    .account-module-support .account-support-guide { min-height: 0; padding: 20px; }
}

@media (max-width: 360px) {
    .account-module-support .account-support-overview { grid-template-columns: minmax(0, 1fr); }
    .account-support-metrics { grid-template-columns: minmax(0, 1fr); }
    .account-support-metrics > article > span { grid-template-columns: minmax(0, 1fr) auto; }
    .account-support-thread > li { gap: 7px; }
    .account-support-message-avatar { width: 30px; height: 30px; flex-basis: 30px; }
    .account-support-thread article { width: calc(100% - 37px); padding: 10px; }
    .account-support-thread article > header { align-items: flex-start; flex-direction: column; gap: 3px; }
    .account-support-thread { max-height: 380px; padding-right: 5px; }
    .account-support-message-attachments,
    .support-upload-preview { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .account-module-support .account-support-metrics > article,
    .account-module-support .account-support-ticket,
    .account-module-support .account-support-ticket > i:last-child {
        transition: none !important;
        transform: none !important;
    }
}
@media (max-width: 380px) {
    .account-leader-hero { padding: 18px; }
    .account-leader-hero > div:first-child { grid-template-columns: 54px minmax(0,1fr); gap: 12px; }
    .account-leader-hero .account-module-hero-mark { width: 54px; height: 54px; }
    .account-leader-summary dl { grid-template-columns: 1fr; }
    .account-leader-list article { padding: 10px; grid-template-columns: 36px minmax(0,1fr); }
    .account-leader-avatar { grid-column: 1; grid-row: 2; width: 36px; height: 36px; }
    .account-leader-list article > div { grid-column: 2; grid-row: 1 / span 2; }
    .account-leader-list article > span { grid-column: 2; }
    .account-leader-progression { grid-template-columns: 1fr; }
    .account-leader-rule-list article { grid-template-columns: minmax(0,1fr) auto; }
    .account-leader-rule-list article > span:last-child { grid-column: 2; }
    .account-leader-level-table > div { grid-template-columns: 30px minmax(0,1fr); }
    .account-leader-level-table > div strong { grid-column: 2; }
    .account-leader-battle ol { width: 100%; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
}

.account-referral-hero,
.account-reward-stage,
.account-cashback-hero,
.account-disabled-feature,
.account-support-head {
    position: relative;
    display: flex;
    min-height: 210px;
    gap: 24px;
    align-items: center;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 25px;
    background:
        radial-gradient(circle at 0 0, rgba(37, 244, 238, 0.15), transparent 38%),
        radial-gradient(circle at 100% 100%, rgba(254, 44, 85, 0.15), transparent 40%),
        var(--account-panel);
}

.account-referral-hero > div:first-child,
.account-reward-stage > div:nth-child(2),
.account-cashback-hero > div:nth-child(2) { min-width: 230px; flex: 1; }
.account-referral-hero p,
.account-reward-stage p,
.account-cashback-hero p,
.account-disabled-feature p,
.account-support-head p { margin: 0 0 4px; color: var(--cyan); font-size: 10px; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.account-referral-hero h2,
.account-reward-stage h2,
.account-cashback-hero h2,
.account-disabled-feature h2,
.account-support-head h2 { margin: 0; font-size: clamp(25px, 3vw, 38px); letter-spacing: -0.04em; }
.account-referral-hero > div:first-child > span,
.account-disabled-feature span,
.account-support-head span { display: block; max-width: 620px; margin-top: 7px; color: var(--muted); font-size: 12px; line-height: 1.55; }

.account-copy-field {
    display: flex;
    min-width: min(100%, 410px);
    gap: 8px;
}

.account-copy-field input { min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 11px; }
.account-rate-list article { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 13px; background: rgba(255, 255, 255, 0.025); }
.account-rate-list strong { font-size: 12px; }
.account-rate-list span { color: var(--cyan); font-size: 16px; font-weight: 900; }

.account-capsule {
    position: relative;
    display: grid;
    width: 118px;
    height: 118px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(37, 244, 238, 0.35);
    border-radius: 38px;
    background: linear-gradient(145deg, rgba(37, 244, 238, 0.19), rgba(254, 44, 85, 0.15));
    box-shadow: inset 0 0 30px rgba(37, 244, 238, 0.08), -5px 5px 0 rgba(37, 244, 238, 0.55), 5px -5px 0 rgba(254, 44, 85, 0.55);
}

.account-capsule > i { color: #fff; font-size: 43px; animation: account-capsule 2.4s var(--ease) infinite; }
.account-capsule > span { position: absolute; inset: 12px; border: 1px dashed rgba(255, 255, 255, 0.22); border-radius: 30px; animation: account-spin 9s linear infinite; }
@keyframes account-capsule { 50% { transform: translateY(-6px) rotate(-4deg); } }
@keyframes account-spin { to { transform: rotate(360deg); } }
.account-reward-stage > div:nth-child(2) > strong { display: block; margin-top: 8px; color: var(--cyan); font-size: 25px; }
.account-reward-stage > div:nth-child(2) > span { color: var(--muted); font-size: 12px; }
.account-reward-claim { width: min(100%, 420px); }

.account-captcha {
    margin: 0;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 17px;
    background: rgba(0, 0, 0, 0.28);
}

.account-captcha legend { padding: 0 7px; font-size: 11px; font-weight: 800; }
.account-captcha .captcha-target-gift img { width: 48px; height: 48px; }
.account-captcha .captcha-target-gift b { font-size: 10px; }
.account-captcha .captcha-grid { gap: 4px; }
.account-captcha .captcha-grid button { min-height: 54px; }
.account-captcha .captcha-grid img { width: 43px; height: 43px; }
.account-captcha .captcha-grid span { display: none; }

.account-prize-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.account-prize-grid article { overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; background: rgba(255, 255, 255, 0.025); }
.account-prize-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.account-prize-grid article > div { display: grid; gap: 5px; padding: 15px; }
.account-prize-grid strong { font-size: 14px; }
.account-prize-grid p { display: -webkit-box; margin: 0; overflow: hidden; color: var(--muted); font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.account-prize-grid span { color: var(--cyan); font-weight: 900; }
.account-prize-grid small { color: #777780; font-size: 10px; }

.account-cashback-ring {
    position: relative;
    display: grid;
    width: 120px;
    height: 120px;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    background: conic-gradient(var(--cyan) calc(var(--account-progress) * 1%), rgba(255, 255, 255, 0.09) 0);
}

.account-cashback-ring::before { position: absolute; inset: 9px; border-radius: 50%; background: #0e0e11; content: ""; }
.account-cashback-ring span { position: relative; color: #fff; font-size: 21px; font-weight: 900; }
.account-cashback-hero h2 { color: #fff; }
.account-cashback-hero > div:nth-child(2) > span { color: var(--muted); font-size: 12px; }
.account-progress { width: min(100%, 420px); height: 8px; margin-top: 13px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, 0.08); }
.account-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), #fff, var(--pink)); }

.account-condition-list { display: grid; gap: 9px; }
.account-condition-list p { display: flex; gap: 10px; align-items: center; margin: 0; padding: 11px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 13px; background: rgba(255, 255, 255, 0.02); }
.account-condition-list i { color: var(--cyan); }
.account-condition-list span { flex: 1; color: var(--muted); font-size: 11px; }
.account-condition-list strong { color: #fff; font-size: 13px; }

.account-balance-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.account-balance-overview article {
    position: relative;
    display: grid;
    min-height: 140px;
    gap: 5px;
    align-content: center;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--account-panel);
}

.account-balance-overview article.is-primary { border-color: rgba(37, 244, 238, 0.25); background: linear-gradient(140deg, rgba(37, 244, 238, 0.11), rgba(254, 44, 85, 0.045)), var(--account-panel); }
.account-balance-overview span { color: var(--muted); font-size: 11px; }
.account-balance-overview strong { font-size: clamp(18px, 2vw, 25px); }
.account-balance-overview i { position: absolute; right: 17px; bottom: 15px; color: rgba(255, 255, 255, 0.12); font-size: 30px; }

.account-disabled-feature > i {
    display: grid;
    width: 84px;
    height: 84px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.05);
    color: #8d8d95;
    font-size: 29px;
}

.account-method-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.account-method-list article { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 15px; background: rgba(255, 255, 255, 0.025); }
.account-method-list article > i { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 13px; background: var(--account-cyan-soft); color: var(--cyan); }
.account-method-list article > div { display: grid; }
.account-method-list strong { font-size: 13px; }
.account-method-list small { color: var(--muted); font-size: 10px; }
.account-method-list article > span:not(.account-badge) { color: #d7d7db; font-size: 11px; }

@keyframes buy-coins-enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes buy-coins-alert {
    0%,
    100% {
        transform: translateX(0);
    }
    35% {
        transform: translateX(-4px);
    }
    70% {
        transform: translateX(4px);
    }
}

.buy-coins {
    --buy-cyan: 37, 244, 238;
    --buy-pink: 254, 44, 85;
    position: relative;
    display: grid;
    min-width: 0;
    gap: 16px;
    padding: 16px;
    border: 1px solid rgba(var(--buy-cyan), 0.16);
    border-radius: 29px;
    background:
        radial-gradient(circle at 4% 3%, rgba(var(--buy-cyan), 0.085), transparent 28%),
        radial-gradient(circle at 96% 97%, rgba(var(--buy-pink), 0.07), transparent 30%),
        linear-gradient(145deg, rgba(14, 15, 20, 0.985), rgba(6, 6, 9, 0.995));
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.38),
        inset 0 1px rgba(255, 255, 255, 0.04);
    isolation: isolate;
    transition:
        border-color 200ms ease,
        box-shadow 200ms ease;
}

.buy-coins:hover {
    border-color: rgba(var(--buy-cyan), 0.27);
    box-shadow:
        -2px 2px 0 rgba(var(--buy-cyan), 0.14),
        2px -2px 0 rgba(var(--buy-pink), 0.13),
        0 31px 76px rgba(0, 0, 0, 0.4),
        inset 0 1px rgba(255, 255, 255, 0.045);
}

.buy-coins::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 30px;
    left: 30px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--buy-cyan), 0.96),
        rgba(var(--buy-pink), 0.88),
        transparent
    );
    content: "";
    pointer-events: none;
}

.buy-coins > * {
    position: relative;
    z-index: 1;
}

.buy-coins__summary,
.buy-coins__limits-card,
.buy-coins__payment,
.buy-coins__human-check,
.buy-coins__submit {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 23px;
    background: linear-gradient(145deg, rgba(19, 20, 26, 0.985), rgba(9, 9, 13, 0.995));
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.29),
        inset 0 1px rgba(255, 255, 255, 0.035);
    animation: buy-coins-enter 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition:
        border-color 190ms ease,
        background 190ms ease,
        box-shadow 190ms ease,
        transform 190ms var(--ease);
}

.buy-coins__summary:hover,
.buy-coins__limits-card:hover,
.buy-coins__payment:hover,
.buy-coins__human-check:hover,
.buy-coins__submit:hover {
    border-color: rgba(var(--buy-cyan), 0.34);
    background: linear-gradient(
        145deg,
        rgba(var(--buy-cyan), 0.055),
        rgba(var(--buy-pink), 0.025) 54%,
        rgba(9, 9, 13, 0.995)
    );
    box-shadow:
        -3px 3px 0 rgba(var(--buy-cyan), 0.22),
        3px -3px 0 rgba(var(--buy-pink), 0.2),
        0 25px 52px rgba(0, 0, 0, 0.34),
        inset 0 1px rgba(255, 255, 255, 0.045);
    transform: translateY(-3px);
}

.buy-coins__summary::before,
.buy-coins__limits-card::before,
.buy-coins__payment::before,
.buy-coins__human-check::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 22px;
    left: 22px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--buy-cyan), 0.92),
        rgba(var(--buy-pink), 0.82),
        transparent
    );
    content: "";
    pointer-events: none;
}

.buy-coins__summary {
    display: grid;
    grid-template-areas:
        "heading result"
        "amount result";
    grid-template-columns: minmax(0, 1fr) minmax(255px, 0.42fr);
    gap: 20px 26px;
    padding: 24px;
    border-color: rgba(var(--buy-cyan), 0.18);
    background:
        radial-gradient(circle at 5% 12%, rgba(var(--buy-cyan), 0.12), transparent 33%),
        radial-gradient(circle at 94% 88%, rgba(var(--buy-pink), 0.075), transparent 34%),
        linear-gradient(145deg, rgba(18, 19, 25, 0.99), rgba(8, 8, 12, 0.995));
}

.buy-coins__summary-heading {
    display: flex;
    min-width: 0;
    grid-area: heading;
    align-items: center;
    gap: 14px;
}

.buy-coins__summary-heading > span {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    border: 1px solid rgba(var(--buy-cyan), 0.23);
    border-radius: 18px;
    background: linear-gradient(
        145deg,
        rgba(var(--buy-cyan), 0.12),
        rgba(var(--buy-pink), 0.07)
    );
    box-shadow: 0 13px 27px rgba(0, 0, 0, 0.27);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease);
}

.buy-coins__summary:hover .buy-coins__summary-heading > span {
    border-color: rgba(var(--buy-cyan), 0.48);
    box-shadow:
        -2px 2px 0 rgba(var(--buy-cyan), 0.24),
        2px -2px 0 rgba(var(--buy-pink), 0.22),
        0 15px 30px rgba(0, 0, 0, 0.3);
    transform: rotate(-3deg) scale(1.03);
}

.buy-coins__summary-heading img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.34));
}

.buy-coins__summary-heading > span > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: rgba(5, 5, 7, 0.78);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.buy-coins__summary-heading > span > i {
    position: absolute;
    right: -5px;
    bottom: -4px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    background: #101014;
    color: rgb(var(--buy-cyan));
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.34);
    font-size: 8px;
}

.buy-coins__summary-heading small,
.buy-coins__payment-heading small,
.buy-coins__result small {
    color: #85858f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.buy-coins__summary-heading h2 {
    margin: 3px 0 0;
    color: #fff;
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.05;
}

.buy-coins__amount-tools {
    display: grid;
    min-width: 0;
    grid-area: amount;
    gap: 12px;
}

.buy-coins__amount-field {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.buy-coins__amount-control {
    display: grid;
    position: relative;
    isolation: isolate;
    min-width: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 8px 10px 8px 16px;
    border: 1px solid rgba(var(--buy-cyan), 0.16);
    border-radius: 17px;
    background:
        linear-gradient(
            105deg,
            rgba(var(--buy-cyan), 0.055),
            transparent 31%,
            rgba(var(--buy-pink), 0.024)
        ),
        rgba(6, 7, 10, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 -1px rgba(0, 0, 0, 0.42),
        0 12px 28px rgba(0, 0, 0, 0.18);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        transform 180ms var(--ease);
}

.buy-coins__amount-control::after {
    position: absolute;
    z-index: 0;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--buy-cyan), 0.9),
        rgba(var(--buy-pink), 0.75),
        transparent
    );
    content: "";
    opacity: 0.34;
    pointer-events: none;
    transform: scaleX(0.55);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.buy-coins__amount-control > * {
    position: relative;
    z-index: 1;
}

.buy-coins__amount-control:hover {
    border-color: rgba(var(--buy-cyan), 0.3);
    background:
        linear-gradient(
            105deg,
            rgba(var(--buy-cyan), 0.07),
            transparent 34%,
            rgba(var(--buy-pink), 0.032)
        ),
        rgba(6, 7, 10, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 14px 30px rgba(0, 0, 0, 0.21);
    transform: none;
}

.buy-coins__amount-control:focus-within {
    border-color: rgba(var(--buy-cyan), 0.46);
    background:
        linear-gradient(
            105deg,
            rgba(var(--buy-cyan), 0.085),
            transparent 36%,
            rgba(var(--buy-pink), 0.04)
        ),
        rgba(5, 6, 9, 0.94);
    box-shadow:
        0 0 0 3px rgba(var(--buy-cyan), 0.055),
        0 16px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    transform: none;
}

.buy-coins__amount-control:focus-within::after {
    opacity: 1;
    transform: scaleX(1);
}

.buy-coins__amount-control:has(input[aria-invalid="true"]) {
    border-color: rgba(255, 94, 94, 0.64);
    box-shadow: 0 0 0 3px rgba(255, 94, 94, 0.08);
}

.buy-coins__amount-control b {
    display: grid;
    min-width: 94px;
    min-height: 36px;
    grid-auto-flow: column;
    gap: 6px;
    align-items: center;
    place-items: center;
    padding: 0 9px;
    border: 1px solid rgba(var(--buy-cyan), 0.18);
    border-radius: 11px;
    background: rgba(var(--buy-cyan), 0.065);
    color: rgb(var(--buy-cyan));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.09em;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}

.buy-coins__amount-control b img {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 4px 8px rgba(var(--buy-cyan), 0.16));
}

.buy-coins__amount-control:focus-within b {
    border-color: rgba(var(--buy-cyan), 0.42);
    background: rgba(var(--buy-cyan), 0.11);
    color: #a8fffc;
    box-shadow:
        0 0 18px rgba(var(--buy-cyan), 0.08),
        inset 0 1px rgba(255, 255, 255, 0.06);
}

.buy-coins__amount-control input {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: clamp(29px, 3.7vw, 40px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.05;
    caret-color: rgb(var(--buy-cyan));
}

.buy-coins__amount-control input::placeholder {
    color: #4a4a54;
}

.buy-coins__amount-control input:focus::placeholder {
    color: #34343d;
}

.buy-coins__amount-control input:focus-visible {
    outline: 0 !important;
    outline-offset: 0 !important;
}

.buy-coins__quick-values {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.buy-coins__limits-card {
    display: grid;
    grid-template-columns: minmax(190px, 0.26fr) minmax(0, 1fr);
    gap: 16px;
    align-items: stretch;
    padding: 14px 16px;
    border-color: rgba(var(--buy-cyan), 0.16);
    background:
        linear-gradient(110deg, rgba(var(--buy-cyan), 0.065), transparent 31%),
        linear-gradient(145deg, rgba(17, 18, 23, 0.985), rgba(8, 8, 12, 0.995));
    animation-delay: 70ms;
}

.buy-coins__limits-card > header {
    display: grid;
    min-width: 0;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.075);
}

.buy-coins__limits-card > header > span {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(var(--buy-cyan), 0.2);
    border-radius: 11px;
    background: rgba(var(--buy-cyan), 0.075);
    color: rgb(var(--buy-cyan));
    font-size: 11px;
    transition:
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease);
}

.buy-coins__limits-card:hover > header > span {
    background: rgba(var(--buy-cyan), 0.13);
    box-shadow: 0 9px 21px rgba(var(--buy-cyan), 0.09);
    transform: rotate(-5deg) scale(1.04);
}

.buy-coins__limits-card > header h3 {
    min-width: 0;
    margin: 0;
    color: #fff;
    font-size: 14px;
    line-height: 1.2;
}

.buy-coins__limits-card > header > b {
    padding: 4px 6px;
    border: 1px solid rgba(var(--buy-cyan), 0.17);
    border-radius: 7px;
    background: rgba(var(--buy-cyan), 0.06);
    color: rgb(var(--buy-cyan));
    font-size: 8px;
    letter-spacing: 0.08em;
}

.buy-coins__limits-card dl {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.buy-coins__limits-card dl > div {
    display: grid;
    min-width: 0;
    gap: 5px;
    align-content: center;
    padding: 3px 14px;
}

.buy-coins__limits-card dl > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.buy-coins__limits-card dt {
    overflow: hidden;
    color: #777780;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1.3;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.buy-coins__limits-card dd {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px;
    align-items: baseline;
    margin: 0;
}

.buy-coins__limits-card dd strong {
    color: #fff;
    font-size: clamp(14px, 1.45vw, 18px);
    line-height: 1;
    white-space: nowrap;
}

.buy-coins__limits-card dd .account-coin {
    --account-coin-font-size: clamp(14px, 1.45vw, 18px);
    --account-coin-icon-size: 26px;
    --account-coin-unit-size: 8px;
    min-height: 29px;
}

.buy-coins__limits-card dd small {
    color: rgb(var(--buy-cyan));
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.055em;
}

.buy-coins__quick-values button {
    min-width: 0;
    padding: 7px 6px;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    color: #cfcfd5;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    transition:
        border-color 170ms ease,
        background 170ms ease,
        color 170ms ease,
        box-shadow 170ms ease,
        transform 170ms var(--ease);
}

.buy-coins__quick-values .account-coin {
    --account-coin-font-size: 10px;
    --account-coin-icon-size: 18px;
    --account-coin-unit-size: 8px;
    min-height: 20px;
    justify-content: center;
}

.buy-coins__quick-values button:hover,
.buy-coins__quick-values button:focus-visible,
.buy-coins__quick-values button.is-active {
    border-color: rgba(var(--buy-cyan), 0.46);
    background: rgba(var(--buy-cyan), 0.09);
    color: rgb(var(--buy-cyan));
    outline: 0;
    box-shadow:
        -2px 2px 0 rgba(var(--buy-cyan), 0.17),
        2px -2px 0 rgba(var(--buy-pink), 0.15);
    transform: translateY(-2px);
}

.buy-coins__result {
    display: grid;
    min-width: 0;
    grid-area: result;
    align-content: center;
    gap: 17px;
    padding-left: 23px;
    border-left: 1px solid rgba(255, 255, 255, 0.085);
}

.buy-coins__result > div {
    display: grid;
    min-width: 0;
    gap: 7px;
    transition: transform 180ms var(--ease);
}

.buy-coins__summary:hover .buy-coins__result > div {
    transform: translateX(2px);
}

.buy-coins__result > div + div {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.buy-coins__result strong {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 13px;
}

.buy-coins__result strong > i {
    color: rgba(var(--buy-cyan), 0.8);
    font-size: 10px;
}

.buy-coins__result .account-coin {
    --account-coin-font-size: 18px;
    --account-coin-icon-size: 31px;
    --account-coin-unit-size: 10px;
    min-height: 35px;
}

.buy-coins__result output .account-coin {
    --account-coin-font-size: 25px;
    --account-coin-icon-size: 41px;
    --account-coin-unit-size: 11px;
    min-height: 45px;
}

.buy-coins__checkout-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(350px, 0.84fr) minmax(430px, 1.16fr);
    gap: 16px;
    align-items: start;
}

.buy-coins__purchase-column {
    display: grid;
    min-width: 0;
    align-self: stretch;
    align-content: space-between;
    gap: 12px;
}

.buy-coins__payment,
.buy-coins__human-check {
    padding: 18px;
    animation-delay: 80ms;
}

.buy-coins__payment {
    display: grid;
    align-content: start;
    gap: 14px;
    margin: 0;
    border-color: rgba(var(--buy-pink), 0.16);
}

.buy-coins__payment:hover {
    border-color: rgba(var(--buy-pink), 0.38);
}

.buy-coins__payment-heading {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.buy-coins__payment-heading > span {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid rgba(var(--buy-pink), 0.24);
    border-radius: 13px;
    background: rgba(var(--buy-pink), 0.075);
    color: rgb(var(--buy-pink));
    font-size: 16px;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms var(--ease);
}

.buy-coins__payment:hover .buy-coins__payment-heading > span {
    border-color: rgba(var(--buy-pink), 0.5);
    background: rgba(var(--buy-pink), 0.14);
    transform: rotate(-4deg) scale(1.04);
}

.buy-coins__payment-heading small {
    display: block;
}

.buy-coins__provider-list {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 9px;
}

.buy-coins__provider-list label:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

.buy-coins__provider-list label {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    gap: 11px;
    align-items: center;
    padding: 10px 11px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease);
}

.buy-coins__provider-list label:hover,
.buy-coins__provider-list label:focus-within {
    border-color: rgba(var(--buy-cyan), 0.38);
    background: rgba(var(--buy-cyan), 0.055);
    box-shadow:
        -2px 2px 0 rgba(var(--buy-cyan), 0.18),
        2px -2px 0 rgba(var(--buy-pink), 0.16),
        0 11px 24px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.buy-coins__provider-list label:has(input:checked) {
    border-color: rgba(var(--buy-cyan), 0.46);
    background: linear-gradient(
        105deg,
        rgba(var(--buy-cyan), 0.1),
        rgba(var(--buy-pink), 0.035)
    );
    box-shadow:
        inset 3px 0 rgba(var(--buy-cyan), 0.8),
        0 10px 24px rgba(0, 0, 0, 0.21);
}

.buy-coins__provider-list input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.buy-coins__provider-list label:has(input:focus-visible) {
    outline: 2px solid rgba(var(--buy-cyan), 0.84);
    outline-offset: 2px;
}

.buy-coins__provider-list label > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: rgba(var(--buy-cyan), 0.09);
    color: rgb(var(--buy-cyan));
    font-size: 22px;
    transition:
        background 180ms ease,
        transform 180ms var(--ease);
}

.buy-coins__provider-list label:hover > span {
    background: rgba(var(--buy-cyan), 0.15);
    transform: scale(1.05) rotate(-3deg);
}

.buy-coins__provider-list label > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.buy-coins__provider-list strong {
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buy-coins__provider-mode {
    display: block;
    width: fit-content;
    max-width: 100%;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: #c8c8cf;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.buy-coins__provider-list label > i {
    color: rgb(var(--buy-cyan));
    font-size: 16px;
}

.buy-coins__provider-list .buy-coins__provider-selected {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 160ms ease, transform 160ms var(--ease), visibility 160ms ease;
}

.buy-coins__provider-list label:has(input:checked) .buy-coins__provider-selected {
    visibility: visible;
    opacity: 1;
    transform: scale(1);
}

.buy-coins__human-check {
    display: grid;
    min-height: 0;
    align-content: start;
    gap: 11px;
    border-color: rgba(var(--buy-cyan), 0.16);
    transition:
        border-color 190ms ease,
        background 190ms ease,
        box-shadow 190ms ease,
        transform 190ms var(--ease);
}

.buy-coins__human-check > header {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.buy-coins__human-check > header > span {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid rgba(var(--buy-cyan), 0.23);
    border-radius: 13px;
    background: rgba(var(--buy-cyan), 0.08);
    color: rgb(var(--buy-cyan));
    font-size: 17px;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms var(--ease);
}

.buy-coins__human-check:hover > header > span {
    border-color: rgba(var(--buy-cyan), 0.5);
    background: rgba(var(--buy-cyan), 0.14);
    transform: rotate(-4deg) scale(1.04);
}

.buy-coins__human-check > header div {
    min-width: 0;
}

.buy-coins__human-check > header h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
}

.buy-coins__human-check > header p {
    margin: 3px 0 0;
    color: #85858f;
    font-size: 9px;
    line-height: 1.4;
}

.buy-coins__human-check .account-captcha-account-topup {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.buy-coins__human-check .account-captcha-account-topup > legend {
    margin-bottom: 6px;
    padding: 0;
    color: #85858f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.buy-coins__human-check .captcha-head {
    gap: 9px;
    margin-bottom: 10px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.buy-coins__human-check .captcha-head:hover {
    border-color: rgba(var(--buy-cyan), 0.25);
    background: rgba(var(--buy-cyan), 0.035);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.16);
}

.buy-coins__human-check .captcha-target {
    min-width: 0;
    gap: 8px;
}

.buy-coins__human-check .captcha-target > .captcha-target-gift {
    width: 66px;
    min-width: 66px;
    min-height: 58px;
    flex: 0 0 66px;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 4px;
    border-color: rgba(var(--buy-pink), 0.27);
    background: rgba(var(--buy-pink), 0.055);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease);
}

.buy-coins__human-check .captcha-target > .captcha-target-gift:hover {
    border-color: rgba(var(--buy-pink), 0.52);
    box-shadow:
        -2px 2px 0 rgba(var(--buy-cyan), 0.16),
        2px -2px 0 rgba(var(--buy-pink), 0.19);
    transform: translateY(-2px) rotate(-2deg);
}

.buy-coins__human-check .captcha-target-gift img {
    width: 40px;
    height: 40px;
}

.buy-coins__human-check .captcha-target-gift b {
    max-width: 58px;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.buy-coins__human-check .captcha-target small {
    color: #92929b;
    font-size: 9px;
}

.buy-coins__human-check .captcha-refresh {
    flex: 0 0 auto;
    border-color: rgba(var(--buy-cyan), 0.2);
    color: rgb(var(--buy-cyan));
    transition:
        border-color 170ms ease,
        background 170ms ease,
        box-shadow 170ms ease,
        transform 170ms var(--ease);
}

.buy-coins__human-check .captcha-refresh:hover,
.buy-coins__human-check .captcha-refresh:focus-visible {
    border-color: rgba(var(--buy-cyan), 0.54);
    background: rgba(var(--buy-cyan), 0.1);
    outline: 0;
    box-shadow:
        -2px 2px 0 rgba(var(--buy-cyan), 0.18),
        2px -2px 0 rgba(var(--buy-pink), 0.16);
    transform: translateY(-2px) rotate(18deg);
}

.buy-coins__human-check .captcha-reel {
    padding: 8px;
    overflow: visible;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.buy-coins__human-check .captcha-reel:hover {
    border-color: rgba(var(--buy-cyan), 0.25);
    box-shadow:
        inset 0 12px 24px rgba(0, 0, 0, 0.42),
        inset 0 -12px 24px rgba(0, 0, 0, 0.42),
        0 10px 24px rgba(0, 0, 0, 0.18);
}

.buy-coins__human-check .captcha-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.buy-coins__human-check .captcha-grid button {
    min-width: 0;
    min-height: 62px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.026);
    transition:
        border-color 170ms ease,
        background 170ms ease,
        box-shadow 170ms ease,
        transform 170ms var(--ease);
}

.buy-coins__human-check .captcha-grid button:hover,
.buy-coins__human-check .captcha-grid button:focus-visible {
    border-color: rgba(var(--buy-cyan), 0.42);
    background: rgba(var(--buy-cyan), 0.065);
    outline: 0;
    box-shadow:
        -2px 2px 0 rgba(var(--buy-cyan), 0.15),
        2px -2px 0 rgba(var(--buy-pink), 0.13),
        0 8px 18px rgba(0, 0, 0, 0.22);
    transform: translateY(-3px) scale(1.015);
}

.buy-coins__human-check .captcha-grid button.is-selected {
    border-color: rgba(var(--buy-cyan), 0.74);
    background: linear-gradient(
        145deg,
        rgba(var(--buy-cyan), 0.15),
        rgba(var(--buy-pink), 0.055)
    );
    box-shadow:
        -2px 2px 0 rgba(var(--buy-cyan), 0.24),
        2px -2px 0 rgba(var(--buy-pink), 0.22),
        inset 0 0 0 1px rgba(var(--buy-cyan), 0.17);
    transform: translateY(-2px);
}

.buy-coins__human-check .captcha-grid button img {
    width: 46px;
    height: 46px;
}

.buy-coins__human-check .captcha-grid button span,
.buy-coins__human-check [data-field-error="captcha"] {
    display: none;
}

.buy-coins__human-check.is-complete {
    border-color: rgba(var(--buy-cyan), 0.42);
    background: linear-gradient(
        145deg,
        rgba(var(--buy-cyan), 0.055),
        rgba(9, 9, 13, 0.995)
    );
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.29),
        inset 3px 0 rgba(var(--buy-cyan), 0.67);
}

.buy-coins__human-check.is-invalid {
    border-color: rgba(255, 94, 94, 0.54);
    background: linear-gradient(
        145deg,
        rgba(255, 94, 94, 0.075),
        rgba(9, 9, 13, 0.995)
    );
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.29),
        inset 3px 0 rgba(255, 94, 94, 0.74);
    animation: buy-coins-alert 260ms ease both;
}

.buy-coins__submit {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 8px;
    padding: 10px 11px 11px;
    border-radius: 16px;
    background: rgba(12, 12, 17, 0.94);
    animation-delay: 120ms;
}

.buy-coins__submit p {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    margin: 0;
    color: #90909a;
    font-size: 9px;
    line-height: 1.4;
}

.buy-coins__submit p i {
    flex: 0 0 auto;
    color: rgba(var(--buy-cyan), 0.8);
}

.buy-coins__submit .account-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
}

.buy-coins__submit .account-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: saturate(0.45);
    box-shadow: none;
    transform: none;
}

.buy-coins.is-busy {
    cursor: progress;
}

.buy-coins.is-busy .account-button {
    opacity: 0.72;
}

.account-topup-history-panel {
    --dashboard-panel-accent: 37, 244, 238;
    --dashboard-panel-secondary: 254, 44, 85;
    min-width: 0;
    margin-top: 17px;
    border-color: rgba(37, 244, 238, 0.15);
    animation-delay: 150ms;
    animation-fill-mode: none;
    transition:
        border-color 190ms ease,
        box-shadow 190ms ease,
        transform 190ms var(--ease);
}

.account-topup-history-panel:hover {
    border-color: rgba(37, 244, 238, 0.28);
    box-shadow:
        -3px 3px 0 rgba(37, 244, 238, 0.18),
        3px -3px 0 rgba(254, 44, 85, 0.16),
        0 24px 52px rgba(0, 0, 0, 0.28);
    transform: translateY(-2px);
}

.account-topup-history-panel > header > div > i {
    color: var(--cyan);
    transition: transform 180ms var(--ease);
}

.account-topup-history-panel:hover > header > div > i {
    transform: rotate(-10deg) scale(1.08);
}

.account-topup-empty {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.025);
    text-align: left;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease);
}

.account-topup-empty:hover {
    border-color: rgba(37, 244, 238, 0.3);
    background: linear-gradient(
        135deg,
        rgba(37, 244, 238, 0.06),
        rgba(254, 44, 85, 0.025)
    );
    box-shadow:
        -2px 2px 0 rgba(37, 244, 238, 0.18),
        2px -2px 0 rgba(254, 44, 85, 0.16),
        0 13px 28px rgba(0, 0, 0, 0.21);
    transform: translateY(-2px);
}

.account-topup-empty > span {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 15px;
    background: rgba(37, 244, 238, 0.075);
    color: var(--cyan);
    font-size: 19px;
    transition:
        background 180ms ease,
        transform 180ms var(--ease);
}

.account-topup-empty:hover > span {
    background: rgba(37, 244, 238, 0.13);
    transform: rotate(-5deg) scale(1.05);
}

.account-topup-empty h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
}

.account-topup-empty p {
    margin: 4px 0 0;
    color: #85858f;
    font-size: 11px;
    line-height: 1.45;
}

.account-topup-order-list {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.account-topup-order {
    display: grid;
    min-width: 0;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 17px;
    background: linear-gradient(
        125deg,
        rgba(255, 255, 255, 0.035),
        rgba(37, 244, 238, 0.018)
    );
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease);
}

.account-topup-order:hover {
    border-color: rgba(37, 244, 238, 0.3);
    background: linear-gradient(
        135deg,
        rgba(37, 244, 238, 0.065),
        rgba(254, 44, 85, 0.028)
    );
    box-shadow:
        -2px 2px 0 rgba(37, 244, 238, 0.2),
        2px -2px 0 rgba(254, 44, 85, 0.18),
        0 13px 28px rgba(0, 0, 0, 0.21);
    transform: translateY(-2px);
}

.account-topup-order-icon {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 15px;
    background: rgba(37, 244, 238, 0.075);
    color: var(--cyan);
    font-size: 21px;
    transition:
        background 180ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease);
}

.account-topup-order:hover .account-topup-order-icon {
    background: rgba(37, 244, 238, 0.14);
    box-shadow:
        -2px 2px 0 rgba(37, 244, 238, 0.17),
        2px -2px 0 rgba(254, 44, 85, 0.14);
    transform: rotate(-4deg) scale(1.05);
}

.account-topup-order-main {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.account-topup-order-main > header {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 4px 10px;
    align-items: baseline;
}

.account-topup-order-main > header strong {
    color: #fff;
    font-size: 14px;
}

.account-topup-order-main > header time {
    color: #85858e;
    font-size: 10px;
}

.account-topup-order-values {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 9px;
}

.account-topup-order-values > span {
    display: flex;
    min-width: 150px;
    flex: 1 1 170px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
    transition:
        border-color 170ms ease,
        background 170ms ease,
        transform 170ms var(--ease);
}

.account-topup-order-values > span:hover {
    border-color: rgba(37, 244, 238, 0.22);
    background: rgba(37, 244, 238, 0.045);
    transform: translateY(-1px);
}

.account-topup-order-values small {
    color: #85858e;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}

.account-topup-order-values b {
    color: #fff;
    font-size: 13px;
}

.account-topup-order-values .account-coin {
    --account-coin-font-size: 14px;
    --account-coin-icon-size: 23px;
    --account-coin-unit-size: 10px;
    min-height: 30px;
}

/* Top-up amounts and administrator-managed values must stay inside their own cards. */
.account-module-top-up :is(
    .buy-coins__result output,
    .buy-coins__result strong,
    .buy-coins__limits-card dd,
    .buy-coins__limits-card dd strong,
    .account-topup-order-values > span,
    .account-topup-order-values b
) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: normal;
}

.account-module-top-up .buy-coins__result output {
    display: block;
    width: 100%;
}

.account-module-top-up :is(
    .buy-coins__result,
    .buy-coins__limits-card,
    .account-topup-order-values
) .account-coin {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    white-space: normal;
}

.account-module-top-up :is(
    .buy-coins__result,
    .buy-coins__limits-card,
    .account-topup-order-values
) .account-coin > .account-coin-value {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.account-module-top-up :is(
    .buy-coins__result,
    .buy-coins__limits-card,
    .account-topup-order-values
) .account-coin > small {
    min-width: 0;
    flex: 0 0 auto;
    overflow-wrap: normal;
    white-space: nowrap;
}

.account-module-top-up .buy-coins__limits-card dt {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.account-topup-order-details {
    min-width: 0;
}

.account-topup-order-details > summary {
    display: inline-flex;
    gap: 7px;
    align-items: center;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    transition:
        color 170ms ease,
        transform 170ms var(--ease);
}

.account-topup-order-details > summary:hover,
.account-topup-order-details > summary:focus-visible {
    color: #fff;
    outline: 0;
    transform: translateX(3px);
}

.account-topup-order-details > summary::-webkit-details-marker {
    display: none;
}

.account-topup-order-details > summary i {
    font-size: 9px;
    transition: transform 170ms ease;
}

.account-topup-order-details[open] > summary i {
    transform: rotate(180deg);
}

.account-topup-order-details dl {
    display: grid;
    min-width: 0;
    gap: 7px;
    margin: 10px 0 0;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
}

.account-topup-order-details dl > div {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(112px, 0.38fr) minmax(0, 1fr);
    gap: 10px;
}

.account-topup-order-details dt,
.account-topup-order-details dd {
    min-width: 0;
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
}

.account-topup-order-details dt {
    color: #85858e;
}

.account-topup-order-details dd {
    color: #d7d7dc;
}

.account-topup-order-details code {
    color: #fff;
    font-family: "JetBrains Mono", Consolas, monospace;
    font-size: 10px;
    overflow-wrap: anywhere;
    word-break: break-all;
}

.account-topup-order > .account-badge {
    align-self: start;
    white-space: nowrap;
}

.account-topup-pagination {
    margin-top: 15px;
}

@media (max-width: 1240px) {
    .buy-coins__checkout-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .buy-coins__purchase-column {
        display: contents;
    }

    .buy-coins__payment {
        grid-column: 1;
        grid-row: 1;
    }

    .buy-coins__human-check {
        grid-column: 1;
        grid-row: 2;
    }

    .buy-coins__submit {
        grid-column: 1;
        grid-row: 3;
    }

    .buy-coins__human-check .account-captcha-account-topup {
        width: min(100%, 560px);
    }
}

@media (max-width: 1240px) {
    .buy-coins__summary {
        grid-template-areas:
            "heading"
            "amount"
            "result";
        grid-template-columns: 1fr;
        gap: 17px;
        padding: 20px;
    }

    .buy-coins__result {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
        padding: 17px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.085);
        border-left: 0;
    }

    .buy-coins__result > div + div {
        padding: 0 0 0 14px;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.075);
    }

    .buy-coins__limits-card {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 17px 18px;
    }

    .buy-coins__limits-card > header {
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    }

    .buy-coins__limits-card dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .buy-coins__limits-card dl > div {
        padding: 10px;
    }

    .buy-coins__limits-card dl > div + div {
        border-left: 0;
    }

    .buy-coins__limits-card dl > div:nth-child(even) {
        border-left: 1px solid rgba(255, 255, 255, 0.07);
    }

    .buy-coins__limits-card dl > div:nth-child(n + 3) {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .buy-coins__payment,
    .buy-coins__human-check {
        padding: 18px;
    }

    .buy-coins__submit {
        display: grid;
        padding: 12px 13px;
    }

    .buy-coins__submit .account-button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 520px) {
    .buy-coins {
        gap: 13px;
        padding: 9px;
        border-radius: 22px;
    }

    .buy-coins__summary,
    .buy-coins__limits-card,
    .buy-coins__payment,
    .buy-coins__human-check {
        border-radius: 19px;
    }

    .buy-coins__summary {
        padding: 16px;
    }

    .buy-coins__summary-heading > span {
        width: 50px;
        height: 50px;
        flex-basis: 50px;
        border-radius: 15px;
    }

    .buy-coins__summary-heading img {
        width: 34px;
        height: 34px;
    }

    .buy-coins__summary-heading > span > span {
        width: 38px;
        height: 38px;
    }

    .buy-coins__summary-heading > span > i {
        right: -4px;
        bottom: -3px;
        width: 20px;
        height: 20px;
        border-radius: 6px;
        font-size: 7px;
    }

    .buy-coins__summary-heading h2 {
        font-size: 21px;
    }

    .buy-coins__amount-control {
        padding: 7px 8px 7px 12px;
    }

    .buy-coins__amount-control b {
        min-width: 88px;
        min-height: 34px;
        padding-inline: 7px;
    }

    .buy-coins__amount-control input {
        font-size: 30px;
    }

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

    .buy-coins__quick-values button {
        min-height: 38px;
    }

    .buy-coins__limits-card {
        padding: 14px;
    }

    .buy-coins__result {
        grid-template-columns: minmax(0, 1fr);
    }

    .buy-coins__result > div + div {
        padding: 13px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.075);
        border-left: 0;
    }

    .buy-coins__payment,
    .buy-coins__human-check {
        padding: 15px;
    }

    .buy-coins__provider-list label {
        grid-template-columns: 44px minmax(0, 1fr) 17px;
        gap: 9px;
        padding: 10px;
    }

    .buy-coins__provider-list {
        grid-template-columns: 1fr;
    }

    .buy-coins__provider-list label:last-child:nth-child(odd) {
        grid-column: auto;
    }

    .buy-coins__provider-list label > span {
        width: 44px;
        height: 44px;
        border-radius: 13px;
        font-size: 21px;
    }

    .buy-coins__human-check > header > span {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .buy-coins__human-check > header h3 {
        font-size: 15px;
    }

    .buy-coins__human-check .captcha-target > .captcha-target-gift {
        width: 58px;
        min-width: 58px;
        flex-basis: 58px;
    }

    .buy-coins__human-check .captcha-target-gift img {
        width: 34px;
        height: 34px;
    }

    .buy-coins__human-check .captcha-target small {
        font-size: 8px;
    }

    .buy-coins__human-check .captcha-grid {
        gap: 5px;
    }

    .buy-coins__human-check .captcha-grid button {
        min-height: 50px;
        border-radius: 11px;
    }

    .buy-coins__human-check .captcha-grid button img {
        width: 36px;
        height: 36px;
    }

    .account-topup-order {
        grid-template-columns: 42px minmax(0, 1fr);
        gap: 11px;
        padding: 12px;
    }

    .account-topup-order-icon {
        width: 42px;
        height: 42px;
        border-radius: 13px;
        font-size: 18px;
    }

    .account-topup-order > .account-badge {
        grid-column: 2;
        grid-row: 2;
        justify-self: start;
    }

    .account-topup-order-values {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-topup-order-values > span {
        min-width: 0;
        flex-wrap: wrap;
    }

    .account-topup-order-details dl > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }
}

@media (max-width: 360px) {
    .buy-coins__limits-card dl {
        grid-template-columns: minmax(0, 1fr);
    }

    .buy-coins__limits-card dl > div:nth-child(even) {
        border-left: 0;
    }

    .buy-coins__limits-card dl > div:nth-child(n + 2) {
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
}

/* Leaders follow the same flat section hierarchy as the account dashboard. */
.account-module-leaders .account-leaderboard > .account-panel,
.account-module-leaders .account-leaderboard-two-column > .account-panel,
.account-module-leaders .account-leaderboard-catalogues > .account-panel {
    margin-top: 0;
}

.account-module-leaders .account-leader-section > header > div > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.account-module-leaders .account-leader-section > header > div > div > p {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.account-module-leaders .account-leaderboard-policy-name {
    color: #fff;
    font-size: 16px;
    font-weight: 850;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.account-module-leaders .account-leaderboard-policy-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.account-module-leaders .account-leaderboard-card-progress {
    width: 100%;
    height: 6px;
    grid-column: 1 / -1;
    grid-row: 4;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
    accent-color: var(--cyan);
}

.account-module-leaders .account-leaderboard-card-progress::-webkit-progress-bar {
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.075);
}

.account-module-leaders .account-leaderboard-card-progress::-webkit-progress-value {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pink), var(--cyan));
}

.account-module-leaders .account-leaderboard-card-progress::-moz-progress-bar {
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pink), var(--cyan));
}

.account-module-leaders .account-leaders.is-leader-reveal-ready .account-leader-section[data-leader-reveal]:not(.is-leader-revealed) {
    opacity: 0;
    animation: none !important;
    transform: translateY(16px);
}

.account-module-leaders .account-leaders.is-leader-reveal-ready .account-leader-section[data-leader-reveal].is-leader-revealed {
    opacity: 1;
    animation: account-dashboard-panel-in 420ms var(--ease) both !important;
    transform: none;
}

.account-module-leaders .account-leader-section:hover {
    border-color: rgba(var(--dashboard-panel-accent), 0.42) !important;
    box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.34), 3px -3px 0 rgba(254, 44, 85, 0.34), 0 28px 70px rgba(0, 0, 0, 0.34) !important;
    transform: translateY(-4px) !important;
}

@media (max-width: 620px) {
    .account-module-leaders .account-leader-section > header {
        gap: 12px;
    }

    .account-module-leaders .account-leaderboard-privacy {
        width: 100%;
        justify-content: center;
    }

    .account-module-leaders .account-leaderboard-policy-stats {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-module-leaders .account-leader-section[data-leader-reveal] {
        opacity: 1 !important;
        animation: none !important;
        transform: none !important;
    }
}

@media (max-width: 320px) {
    html:has(.account-module-top-up) {
        scrollbar-width: none;
    }

    html:has(.account-module-top-up)::-webkit-scrollbar {
        display: none;
        width: 0;
        height: 0;
    }
}

@media (hover: none) {
    .buy-coins:hover,
    .buy-coins__summary:hover,
    .buy-coins__limits-card:hover,
    .buy-coins__payment:hover,
    .buy-coins__human-check:hover,
    .buy-coins__submit:hover,
    .account-topup-history-panel:hover,
    .account-topup-empty:hover,
    .account-topup-order:hover {
        box-shadow: initial;
        transform: none;
    }
}

/* Leaders and rewards: distinct user journeys with one cohesive account surface. */
.account-leaders,
.account-rewards {
    display: grid;
    gap: 22px;
}

.account-leaders > *,
.account-rewards > * {
    min-width: 0;
}

.account-leader-zone {
    position: relative;
    min-width: 0;
    padding: clamp(18px, 2.2vw, 26px);
    display: grid;
    gap: 16px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 23px;
    background:
        radial-gradient(circle at 0 0, rgba(37, 244, 238, 0.07), transparent 30%),
        rgba(13, 13, 16, 0.92);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.24);
}

.account-leader-competition {
    border-color: rgba(37, 244, 238, 0.18);
    box-shadow: -4px 4px 0 rgba(37, 244, 238, 0.13), 0 22px 52px rgba(0, 0, 0, 0.26);
}

.account-leader-guide {
    border-color: rgba(254, 44, 85, 0.16);
    background:
        radial-gradient(circle at 100% 0, rgba(254, 44, 85, 0.065), transparent 31%),
        rgba(13, 13, 16, 0.92);
}

.account-leader-zone > .account-panel,
.account-leader-zone > .account-leader-summary,
.account-leader-zone > .account-leader-battle,
.account-leader-zone > .account-leader-current,
.account-leader-zone > .account-leader-catalogues {
    margin: 0;
}

.account-leader-zone-heading > div,
.account-reward-section-heading > div {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.account-leader-zone-heading > div > span,
.account-reward-section-heading > div > span {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 14px;
    color: var(--cyan);
    background: rgba(37, 244, 238, 0.075);
    box-shadow: inset -2px 0 0 rgba(254, 44, 85, 0.54);
}

.account-leader-zone-heading > div > div,
.account-reward-section-heading > div > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.account-leader-zone-heading p {
    margin: 0;
    color: var(--cyan);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.account-leader-zone-heading h2,
.account-reward-section-heading h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(19px, 2.6vw, 25px);
    line-height: 1.12;
}

.account-leader-zone-heading small,
.account-reward-section-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.5;
}

.account-leader-level-progress {
    padding: 15px 16px;
    display: grid;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.2);
}

.account-leader-level-progress > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #fff;
    font-size: 11px;
}

.account-leader-level-progress > span em {
    color: var(--cyan);
    font-style: normal;
    font-weight: 850;
    white-space: nowrap;
}

.account-leader-level-progress > i {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.account-leader-level-progress > i > b {
    display: block;
    width: var(--leader-level-progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--pink));
}

.account-leader-level-progress > small {
    color: var(--muted);
    font-size: 9px;
}

.account-leader-progression article:last-child strong {
    font-size: 15px;
}

.account-reward-hero {
    position: relative;
    min-width: 0;
    padding: clamp(22px, 4vw, 38px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(350px, 0.7fr);
    align-items: center;
    gap: 24px;
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 23px;
    background:
        radial-gradient(circle at 15% 0, rgba(37, 244, 238, 0.14), transparent 38%),
        linear-gradient(145deg, rgba(20, 20, 24, 0.98), rgba(8, 8, 10, 0.98));
    box-shadow: -5px 5px 0 rgba(37, 244, 238, 0.2), 5px -5px 0 rgba(254, 44, 85, 0.16), 0 30px 70px rgba(0, 0, 0, 0.35);
}

.account-reward-hero::after {
    position: absolute;
    right: -85px;
    bottom: -110px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(254, 44, 85, 0.14);
    border-radius: 50%;
    content: "";
}

.account-reward-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
}

.account-reward-hero-copy > .account-module-hero-mark {
    width: 70px;
    height: 70px;
}

.account-reward-hero-copy > div {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.account-reward-hero-copy p {
    margin: 0;
    color: var(--cyan);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.account-reward-hero-copy h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(25px, 4vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.035em;
}

.account-reward-hero-copy > div > span {
    max-width: 660px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.account-reward-overview {
    position: relative;
    z-index: 1;
    min-width: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.account-reward-overview > div {
    min-width: 0;
    padding: 13px 11px;
    display: grid;
    gap: 5px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.035);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}

.account-reward-overview > div:hover {
    border-color: rgba(37, 244, 238, 0.28);
    background: rgba(37, 244, 238, 0.045);
    transform: translateY(-2px);
}

.account-reward-overview dt {
    color: var(--muted);
    font-size: 9px;
    line-height: 1.35;
}

.account-reward-overview dd {
    margin: 0;
    color: #fff;
    font-size: 24px;
    font-weight: 950;
}

.account-reward-navigation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.account-reward-navigation > a {
    min-width: 0;
    min-height: 58px;
    padding: 11px 13px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    color: #f2f3f6;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-reward-navigation > a:hover,
.account-reward-navigation > a:focus-visible {
    border-color: rgba(37, 244, 238, 0.3);
    outline: none;
    background: rgba(37, 244, 238, 0.04);
    box-shadow: -3px 3px 0 rgba(254, 44, 85, 0.16);
    transform: translateY(-2px);
}

.account-reward-navigation i {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(37, 244, 238, 0.075);
}

.account-reward-navigation span {
    min-width: 0;
    font-size: 11px;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.account-reward-navigation b {
    color: var(--cyan);
    font-size: 11px;
    white-space: nowrap;
}

.account-module-rewards .account-reward-rule-panel,
.account-module-rewards .account-reward-catalog-panel,
.account-module-rewards .account-reward-history-panel,
.account-module-rewards .account-reward-rule-panel + .account-panel,
.account-module-rewards .account-reward-catalog-panel + .account-reward-history-panel {
    margin-top: 0;
}

.account-reward-section-heading {
    align-items: center;
    gap: 16px;
}

.account-reward-section-heading > strong {
    flex: 0 0 auto;
    padding: 7px 10px;
    border: 1px solid rgba(37, 244, 238, 0.18);
    border-radius: 999px;
    color: var(--cyan);
    background: rgba(37, 244, 238, 0.055);
    font-size: 10px;
}

.account-module-rewards .account-reward-rule-card {
    min-height: 250px;
    padding: 17px;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 11px;
}

.account-module-rewards .account-reward-rule-card.is-ready {
    opacity: 1;
    box-shadow: inset 0 0 24px rgba(37, 244, 238, 0.025);
}

.account-module-rewards .account-reward-rule-card.is-claimed {
    opacity: 1;
}

.account-module-rewards .account-reward-card-details {
    display: grid;
    align-content: start;
    gap: 5px;
}

.account-module-rewards .account-reward-card-details small {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.4;
}

.account-module-rewards .account-reward-card-claim {
    width: 100%;
    min-height: 40px;
    align-self: end;
    margin-top: 2px;
}

.account-reward-claim-dialog {
    width: min(760px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    margin: auto;
    padding: 0;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 25px;
    color: #fff;
    background:
        radial-gradient(circle at 0 0, rgba(37, 244, 238, 0.12), transparent 37%),
        radial-gradient(circle at 100% 100%, rgba(254, 44, 85, 0.12), transparent 39%),
        #111115;
    box-shadow: -4px 4px 0 rgba(37, 244, 238, 0.3), 4px -4px 0 rgba(254, 44, 85, 0.28), 0 34px 100px rgba(0, 0, 0, 0.68);
}

.account-reward-claim-dialog:not([open]) {
    display: none;
}

.account-reward-claim-dialog::backdrop {
    background: rgba(3, 3, 5, 0.86);
    backdrop-filter: blur(13px) saturate(0.88);
}

.account-reward-claim-form {
    padding: 22px;
    display: grid;
    gap: 16px;
}

.account-reward-claim-form > *,
.account-reward-claim-form .account-captcha,
.account-reward-claim-form .captcha-head,
.account-reward-claim-form .captcha-reel,
.account-reward-claim-form .captcha-grid {
    min-width: 0;
    max-width: 100%;
}

.account-reward-claim-form > header,
.account-reward-claim-form > header > div,
.account-reward-claim-form > header > div > div,
.account-reward-claim-form > footer {
    display: flex;
    align-items: center;
}

.account-reward-claim-form > header {
    justify-content: space-between;
    gap: 18px;
}

.account-reward-claim-form > header > div {
    min-width: 0;
    gap: 13px;
}

.account-reward-claim-form > header > div > span {
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.25);
    border-radius: 15px;
    color: var(--cyan);
    background: rgba(37, 244, 238, 0.085);
    box-shadow: inset -2px 0 0 rgba(254, 44, 85, 0.62);
}

.account-reward-claim-form > header > div > div {
    min-width: 0;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
}

.account-reward-claim-form > header p {
    margin: 0;
    color: var(--cyan);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.account-reward-claim-form > header h2 {
    margin: 0;
    font-size: clamp(21px, 4vw, 29px);
    line-height: 1.1;
}

.account-reward-selected {
    min-width: 0;
    padding: 12px 13px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 15px;
    background: rgba(37, 244, 238, 0.045);
}

.account-reward-selected > span {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(37, 244, 238, 0.08);
}

.account-reward-selected > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.account-reward-selected small {
    color: var(--muted);
    font-size: 9px;
}

.account-reward-selected strong {
    font-size: 12px;
    overflow-wrap: anywhere;
}

.account-reward-selected > b {
    color: var(--cyan);
    font-size: 11px;
    white-space: nowrap;
}

.account-reward-claim-form .account-captcha {
    width: 100%;
    padding: 18px;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
}

.account-reward-claim-form .account-captcha .captcha-grid button {
    min-height: 70px;
}

.account-reward-claim-form .account-captcha .captcha-grid img {
    width: 52px;
    height: 52px;
}

.account-reward-claim-form > footer {
    justify-content: flex-end;
    gap: 10px;
}

@media (max-width: 900px) {
    .account-reward-hero {
        grid-template-columns: 1fr;
    }

    .account-reward-overview {
        max-width: 600px;
    }
}

@media (max-width: 620px) {
    .account-leaders,
    .account-rewards {
        gap: 15px;
    }

    .account-leader-zone {
        padding: 15px;
        gap: 13px;
        border-radius: 19px;
    }

    .account-leader-zone-heading > div,
    .account-reward-section-heading > div {
        align-items: flex-start;
    }

    .account-leader-level-progress > span {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }

    .account-leader-level-progress > span em {
        white-space: normal;
    }

    .account-reward-hero {
        padding: 19px;
        gap: 18px;
        border-radius: 20px;
    }

    .account-reward-hero-copy {
        grid-template-columns: 54px minmax(0, 1fr);
        align-items: start;
        gap: 13px;
    }

    .account-reward-hero-copy > .account-module-hero-mark {
        width: 54px;
        height: 54px;
    }

    .account-reward-overview,
    .account-reward-navigation {
        grid-template-columns: 1fr;
    }

    .account-reward-overview > div {
        padding: 10px 12px;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .account-reward-overview dd {
        font-size: 20px;
    }

    .account-module-rewards .account-reward-rule-panel,
    .account-module-rewards .account-reward-rule-panel + .account-panel {
        margin-top: 0;
    }

    .account-reward-section-heading {
        align-items: flex-start;
    }

    .account-reward-section-heading > strong {
        margin-top: 5px;
    }

    .account-module-rewards .account-reward-rule-card {
        min-height: 0;
    }

    .account-reward-claim-dialog {
        width: calc(100vw - 16px);
        max-height: calc(100dvh - 12px);
        border-radius: 20px;
    }

    .account-reward-claim-form {
        padding: 15px;
        gap: 13px;
    }

    .account-reward-claim-form > header {
        align-items: flex-start;
    }

    .account-reward-claim-form > header > div > span {
        width: 43px;
        height: 43px;
        border-radius: 13px;
    }

    .account-reward-selected {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .account-reward-selected > b {
        grid-column: 2;
    }

    .account-reward-claim-form .account-captcha {
        padding: 13px;
    }

    .account-reward-claim-form .account-captcha .captcha-grid button {
        min-height: 58px;
    }

    .account-reward-claim-form .account-captcha .captcha-grid img {
        width: 45px;
        height: 45px;
    }

    .account-reward-claim-form > footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .account-reward-claim-form > footer .account-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .buy-coins,
    .buy-coins__summary,
    .buy-coins__limits-card,
    .buy-coins__payment,
    .buy-coins__human-check,
    .buy-coins__submit,
    .buy-coins__quick-values button,
    .buy-coins__provider-list label,
    .buy-coins__amount-control,
    .buy-coins__human-check .captcha-target-gift,
    .buy-coins__human-check .captcha-refresh,
    .buy-coins__human-check .captcha-reel,
    .buy-coins__human-check .captcha-grid button,
    .account-topup-history-panel,
    .account-topup-empty,
    .account-topup-order,
    .account-topup-order-icon,
    .account-topup-order-values > span,
    .account-topup-order-details > summary,
    .account-topup-order-details > summary i {
        transition: none !important;
        animation: none !important;
    }
}

.account-notification-list article {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.022);
}

.account-notification-list article.is-unread { border-color: rgba(37, 244, 238, 0.24); background: linear-gradient(90deg, rgba(37, 244, 238, 0.06), transparent); }
.account-notification-list article > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: var(--account-pink-soft); color: var(--pink); }
.account-notification-list article > div { display: grid; gap: 3px; }
.account-notification-list strong { font-size: 14px; }
.account-notification-list p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.account-notification-list time { color: #75757d; font-size: 9px; }
.account-notification-list a { margin-top: 5px; }

.account-support-head { justify-content: space-between; }
.account-support-head > div { display: flex; gap: 18px; align-items: center; }
.account-support-head > div > i { display: grid; width: 78px; height: 78px; place-items: center; flex: 0 0 auto; border-radius: 25px; background: linear-gradient(135deg, var(--account-cyan-soft), var(--account-pink-soft)); color: var(--cyan); font-size: 29px; }

.account-ticket-list > article {
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.024);
}

.account-ticket-list article > header { display: flex; justify-content: space-between; gap: 12px; align-items: start; }
.account-ticket-list article > header > div { display: grid; }
.account-ticket-list strong { font-size: 14px; }
.account-ticket-list small,
.account-ticket-list time { color: var(--muted); font-size: 10px; }
.account-ticket-list article > p { margin: 11px 0 2px; color: #c5c5cb; font-size: 12px; }
.account-ticket-list details { margin-top: 13px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.account-ticket-list summary { color: var(--cyan); font-size: 12px; font-weight: 800; cursor: pointer; }
.account-ticket-list details .account-form { margin-top: 13px; }

.account-toast {
    display: flex;
    gap: 10px;
    align-items: center;
    width: min(390px, calc(100vw - 30px));
    padding: 13px 15px;
    border: 1px solid rgba(37, 244, 238, 0.35);
    border-radius: 14px;
    background: rgba(12, 12, 15, 0.97);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 12px;
    animation: account-toast-in 220ms var(--ease);
}

.account-toast.is-error { border-color: rgba(254, 44, 85, 0.48); }
.account-toast > i { color: var(--cyan); }
.account-toast.is-error > i { color: var(--pink); }
.account-toast.is-leaving { opacity: 0; transform: translateY(-8px); transition: 180ms ease; }
@keyframes account-toast-in { from { opacity: 0; transform: translateY(10px); } }

.account-station-chooser {
    position: fixed;
    z-index: 710;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 190ms ease, visibility 190ms ease;
}

.account-station-chooser.is-open { visibility: visible; opacity: 1; }

.account-station-chooser-dialog {
    display: grid;
    width: min(820px, 100%);
    max-height: min(760px, calc(100vh - 44px));
    gap: 17px;
    padding: 24px;
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.28);
    border-radius: 25px;
    background:
        linear-gradient(145deg, rgba(37, 244, 238, 0.065), transparent 35%),
        linear-gradient(325deg, rgba(254, 44, 85, 0.07), transparent 38%),
        #101013;
    box-shadow: -5px 5px 0 rgba(37, 244, 238, 0.16), 5px -5px 0 rgba(254, 44, 85, 0.16), 0 38px 100px rgba(0, 0, 0, 0.7);
    transform: translateY(18px) scale(0.985);
    transition: transform 190ms var(--ease);
}

.account-station-chooser.is-open .account-station-chooser-dialog { transform: translateY(0) scale(1); }
.account-station-chooser-dialog > header { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.account-station-chooser-dialog > header > div { display: flex; min-width: 0; gap: 14px; align-items: center; }
.account-station-chooser-dialog > header > div > span { display: grid; width: 54px; height: 54px; place-items: center; flex: 0 0 auto; border-radius: 17px; background: linear-gradient(135deg, var(--account-cyan-soft), var(--account-pink-soft)); color: var(--cyan); font-size: 20px; }
.account-station-chooser-dialog h2 { margin: 0; font-size: 24px; }
.account-station-chooser-dialog header p { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.45; }

.account-station-chooser-search {
    display: flex;
    min-height: 48px;
    gap: 10px;
    align-items: center;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.34);
    color: var(--cyan);
}

.account-station-chooser-search:focus-within { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.1); }
.account-station-chooser-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 15px; }

.account-station-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2px 4px 2px 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}

.account-station-choice {
    display: grid;
    min-width: 0;
    grid-template-columns: 58px minmax(0, 1fr) 38px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.025);
    color: #fff;
    text-align: left;
    cursor: pointer;
    transition: border-color 170ms ease, background 170ms ease, transform 170ms var(--ease), box-shadow 170ms ease;
}

.account-station-choice:hover,
.account-station-choice:focus-visible { border-color: rgba(37, 244, 238, 0.42); outline: 0; background: rgba(37, 244, 238, 0.07); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.28), 2px -2px 0 rgba(254, 44, 85, 0.24); transform: translateY(-2px); }
.account-station-choice.is-current { border-color: rgba(254, 44, 85, 0.42); background: rgba(254, 44, 85, 0.075); }
.account-station-choice[data-station-active="true"] { border-color: rgba(37, 244, 238, 0.82); background: linear-gradient(105deg, rgba(37, 244, 238, 0.19), rgba(254, 44, 85, 0.15)); color: #fff; box-shadow: inset 4px 0 0 var(--cyan), inset -4px 0 0 var(--pink), 0 0 24px rgba(37, 244, 238, 0.12); }
.account-station-choice > span { display: grid; width: 58px; height: 58px; place-items: center; overflow: hidden; border-radius: 16px; background: #09090b; color: var(--cyan); }
.account-station-choice[data-station-active="true"] > span { background: linear-gradient(135deg, rgba(37, 244, 238, 0.34), rgba(254, 44, 85, 0.32)); color: #fff; }
.account-station-choice > span img { width: 100%; height: 100%; object-fit: cover; }
.account-station-choice > div { display: grid; min-width: 0; gap: 3px; }
.account-station-choice strong { overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.account-station-choice small { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-station-choice > i { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: var(--account-cyan-soft); color: var(--cyan); }
.account-station-choice[data-station-active="true"] > i { background: linear-gradient(135deg, var(--cyan), var(--pink)); color: #fff; }
.account-station-choice-empty { margin: 0; padding: 24px; border: 1px dashed rgba(255, 255, 255, 0.13); border-radius: 16px; color: var(--muted); text-align: center; }
.account-station-choice-empty[hidden],
.account-station-choice[hidden] { display: none !important; }
body.account-station-open { overflow: hidden; }

.account-confirm-layer {
    position: fixed;
    z-index: 720;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    visibility: hidden;
    background: rgba(0, 0, 0, 0.76);
    backdrop-filter: blur(9px);
    opacity: 0;
    transition: opacity 180ms ease, visibility 180ms ease;
}

.account-confirm-layer.is-open { visibility: visible; opacity: 1; }

.account-confirm-dialog {
    display: grid;
    width: min(440px, 100%);
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 17px;
    align-items: center;
    padding: 23px;
    border: 1px solid rgba(37, 244, 238, 0.28);
    border-radius: 23px;
    background:
        linear-gradient(145deg, rgba(37, 244, 238, 0.07), transparent 42%),
        linear-gradient(325deg, rgba(254, 44, 85, 0.08), transparent 46%),
        #111114;
    box-shadow: -5px 5px 0 rgba(37, 244, 238, 0.18), 5px -5px 0 rgba(254, 44, 85, 0.16), 0 34px 90px rgba(0, 0, 0, 0.62);
    transform: translateY(14px) scale(0.98);
    transition: transform 180ms var(--ease);
}

.account-confirm-layer.is-open .account-confirm-dialog { transform: translateY(0) scale(1); }
.account-confirm-icon { display: grid; width: 62px; height: 62px; place-items: center; border-radius: 20px; background: linear-gradient(135deg, var(--account-cyan-soft), var(--account-pink-soft)); color: var(--cyan); font-size: 23px; }
.account-confirm-dialog > div:nth-child(2) { display: grid; gap: 5px; }
.account-confirm-dialog p { margin: 0; color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.account-confirm-dialog strong { font-size: 15px; line-height: 1.45; }
.account-confirm-actions { display: flex; grid-column: 1 / -1; gap: 9px; justify-content: flex-end; padding-top: 4px; }
body.account-confirm-open { overflow: hidden; }

/* Distinct, data-backed account modules share the accepted dashboard language. */
.account-shell {
    --module-accent: var(--cyan);
    --module-accent-rgb: 37, 244, 238;
    --module-secondary: var(--pink);
}

.account-module-dashboard { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }
.account-module-profile { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #ffffff; }
.account-module-security { --module-accent: #fe2c55; --module-accent-rgb: 254, 44, 85; --module-secondary: #25f4ee; }
.account-module-stations { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }
.account-module-friends { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }
.account-module-chat { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }
.account-module-games { --module-accent: #fe2c55; --module-accent-rgb: 254, 44, 85; --module-secondary: #ffffff; }
.account-module-games_history { --module-accent: #fe2c55; --module-accent-rgb: 254, 44, 85; --module-secondary: #25f4ee; }
.account-module-leaders { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #ffffff; }
.account-module-referrals { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }
.account-module-rewards { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }
.account-module-cashback { --module-accent: #fe2c55; --module-accent-rgb: 254, 44, 85; --module-secondary: #25f4ee; }
.account-module-balance { --module-accent: #f7f7fa; --module-accent-rgb: 247, 247, 250; --module-secondary: #25f4ee; }
.account-module-top-up { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }
.account-module-payouts { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }

.exchange-coins,
.exchange-coins-disabled,
.account-exchange-history {
    --exchange-cyan: 37, 244, 238;
    --exchange-pink: 254, 44, 85;
}

.exchange-coins,
.exchange-coins-disabled {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(var(--exchange-cyan), 0.16);
    border-radius: 29px;
    background:
        radial-gradient(circle at 4% 3%, rgba(var(--exchange-cyan), 0.085), transparent 28%),
        radial-gradient(circle at 96% 97%, rgba(var(--exchange-pink), 0.07), transparent 30%),
        linear-gradient(145deg, rgba(14, 15, 20, 0.985), rgba(6, 6, 9, 0.995));
    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.38),
        inset 0 1px rgba(255, 255, 255, 0.04);
    isolation: isolate;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}

.exchange-coins {
    display: grid;
    gap: 16px;
    padding: 16px;
}

.exchange-coins:hover,
.exchange-coins-disabled:hover {
    border-color: rgba(var(--exchange-cyan), 0.27);
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.14),
        2px -2px 0 rgba(var(--exchange-pink), 0.13),
        0 31px 76px rgba(0, 0, 0, 0.4),
        inset 0 1px rgba(255, 255, 255, 0.045);
}

.exchange-coins::before,
.exchange-coins-disabled::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 30px;
    left: 30px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--exchange-cyan), 0.96),
        rgba(var(--exchange-pink), 0.88),
        transparent
    );
    content: "";
    pointer-events: none;
}

.exchange-coins > *,
.exchange-coins-disabled > * {
    position: relative;
    z-index: 1;
}

.exchange-coins__summary,
.exchange-coins__limits,
.exchange-coins__methods,
.exchange-coins__recipient,
.exchange-coins__human-check,
.exchange-coins__submit {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 23px;
    background: linear-gradient(145deg, rgba(19, 20, 26, 0.985), rgba(9, 9, 13, 0.995));
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.29),
        inset 0 1px rgba(255, 255, 255, 0.035);
    animation: buy-coins-enter 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
    transition:
        border-color 190ms ease,
        background 190ms ease,
        box-shadow 190ms ease,
        transform 190ms var(--ease);
}

.exchange-coins__summary:hover,
.exchange-coins__limits:hover,
.exchange-coins__methods:hover,
.exchange-coins__recipient:hover,
.exchange-coins__human-check:hover,
.exchange-coins__submit:hover {
    border-color: rgba(var(--exchange-cyan), 0.34);
    background: linear-gradient(
        145deg,
        rgba(var(--exchange-cyan), 0.055),
        rgba(var(--exchange-pink), 0.025) 54%,
        rgba(9, 9, 13, 0.995)
    );
    box-shadow:
        -3px 3px 0 rgba(var(--exchange-cyan), 0.22),
        3px -3px 0 rgba(var(--exchange-pink), 0.2),
        0 25px 52px rgba(0, 0, 0, 0.34),
        inset 0 1px rgba(255, 255, 255, 0.045);
    transform: translateY(-3px);
}

.exchange-coins__summary::before,
.exchange-coins__limits::before,
.exchange-coins__methods::before,
.exchange-coins__recipient::before,
.exchange-coins__human-check::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 22px;
    left: 22px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--exchange-cyan), 0.92),
        rgba(var(--exchange-pink), 0.82),
        transparent
    );
    content: "";
    pointer-events: none;
}

.exchange-coins__summary {
    display: grid;
    grid-template-areas:
        "heading result"
        "amount result"
        "balances balances";
    grid-template-columns: minmax(0, 1fr) minmax(255px, 0.42fr);
    gap: 20px 26px;
    padding: 24px;
    border-color: rgba(var(--exchange-cyan), 0.18);
    background:
        radial-gradient(circle at 5% 12%, rgba(var(--exchange-cyan), 0.12), transparent 33%),
        radial-gradient(circle at 94% 88%, rgba(var(--exchange-pink), 0.075), transparent 34%),
        linear-gradient(145deg, rgba(18, 19, 25, 0.99), rgba(8, 8, 12, 0.995));
}

.exchange-coins__summary-heading {
    display: flex;
    min-width: 0;
    grid-area: heading;
    align-items: center;
    gap: 14px;
}

.exchange-coins__summary-heading > span {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    flex: 0 0 58px;
    place-items: center;
    border: 1px solid rgba(var(--exchange-cyan), 0.23);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(var(--exchange-cyan), 0.12), rgba(var(--exchange-pink), 0.07));
    box-shadow: 0 13px 27px rgba(0, 0, 0, 0.27);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.exchange-coins__summary:hover .exchange-coins__summary-heading > span {
    border-color: rgba(var(--exchange-cyan), 0.48);
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.24),
        2px -2px 0 rgba(var(--exchange-pink), 0.22),
        0 15px 30px rgba(0, 0, 0, 0.3);
    transform: rotate(-3deg) scale(1.03);
}

.exchange-coins__summary-heading > span > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: rgba(5, 5, 7, 0.78);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.exchange-coins__summary-heading img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 6px 9px rgba(0, 0, 0, 0.34));
}

.exchange-coins__summary-heading > span > i {
    position: absolute;
    right: -5px;
    bottom: -4px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    background: #101014;
    color: rgb(var(--exchange-cyan));
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.34);
    font-size: 8px;
}

.exchange-coins__summary-heading small,
.exchange-coins__methods header small,
.exchange-coins__recipient header small,
.exchange-coins__result small {
    color: #85858f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.exchange-coins__summary-heading h2 {
    margin: 3px 0 0;
    color: #fff;
    font-size: clamp(22px, 2.5vw, 30px);
    line-height: 1.05;
}

.exchange-coins__amount-tools {
    display: grid;
    min-width: 0;
    grid-area: amount;
    gap: 12px;
}

.exchange-coins__amount-field > span:first-child {
    display: block;
    margin-bottom: 8px;
    color: #a7a7ae;
    font-size: 10px;
    font-weight: 800;
}

.exchange-coins__amount-control {
    position: relative;
    display: grid;
    min-width: 0;
    overflow: hidden;
    isolation: isolate;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    padding: 8px 10px 8px 16px;
    border: 1px solid rgba(var(--exchange-cyan), 0.16);
    border-radius: 17px;
    background:
        linear-gradient(
            105deg,
            rgba(var(--exchange-cyan), 0.055),
            transparent 31%,
            rgba(var(--exchange-pink), 0.024)
        ),
        rgba(6, 7, 10, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 -1px rgba(0, 0, 0, 0.42),
        0 12px 28px rgba(0, 0, 0, 0.18);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease,
        transform 180ms var(--ease);
}

.exchange-coins__amount-control::after {
    position: absolute;
    z-index: 0;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--exchange-cyan), 0.9),
        rgba(var(--exchange-pink), 0.75),
        transparent
    );
    content: "";
    opacity: 0.34;
    pointer-events: none;
    transform: scaleX(0.55);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.exchange-coins__amount-control > * {
    position: relative;
    z-index: 1;
}

.exchange-coins__amount-control:hover {
    border-color: rgba(var(--exchange-cyan), 0.3);
    background:
        linear-gradient(
            105deg,
            rgba(var(--exchange-cyan), 0.07),
            transparent 34%,
            rgba(var(--exchange-pink), 0.032)
        ),
        rgba(6, 7, 10, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 14px 30px rgba(0, 0, 0, 0.21);
    transform: none;
}

.exchange-coins__amount-control:focus-within {
    border-color: rgba(var(--exchange-cyan), 0.46);
    background:
        linear-gradient(
            105deg,
            rgba(var(--exchange-cyan), 0.085),
            transparent 36%,
            rgba(var(--exchange-pink), 0.04)
        ),
        rgba(5, 6, 9, 0.94);
    box-shadow:
        0 0 0 3px rgba(var(--exchange-cyan), 0.055),
        0 16px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
    transform: none;
}

.exchange-coins__amount-control:focus-within::after {
    opacity: 1;
    transform: scaleX(1);
}

.exchange-coins__amount-control:has(input[aria-invalid="true"]) {
    border-color: rgba(255, 94, 94, 0.64);
    box-shadow: 0 0 0 3px rgba(255, 94, 94, 0.08);
}

.exchange-coins__amount-control input {
    width: 100%;
    min-width: 0;
    min-height: 54px;
    padding: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    caret-color: rgb(var(--exchange-cyan));
    font: inherit;
    font-size: clamp(29px, 3.7vw, 40px);
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: 1.05;
}

.exchange-coins__amount-control input::placeholder {
    color: #4a4a54;
}

.exchange-coins__amount-control input:focus::placeholder {
    color: #34343d;
}

.exchange-coins__amount-control input:focus,
.exchange-coins__amount-control input:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

.exchange-coins__amount-control b {
    display: grid;
    min-width: 94px;
    min-height: 36px;
    grid-auto-flow: column;
    place-items: center;
    align-items: center;
    gap: 6px;
    padding: 0 9px;
    border: 1px solid rgba(var(--exchange-cyan), 0.18);
    border-radius: 11px;
    background: rgba(var(--exchange-cyan), 0.065);
    color: rgb(var(--exchange-cyan));
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.04);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.09em;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease,
        color 180ms ease;
}

.exchange-coins__amount-control b img {
    width: 20px;
    height: 20px;
    filter: drop-shadow(0 4px 8px rgba(var(--exchange-cyan), 0.16));
}

.exchange-coins__amount-control:focus-within b {
    border-color: rgba(var(--exchange-cyan), 0.42);
    background: rgba(var(--exchange-cyan), 0.11);
    color: #a8fffc;
    box-shadow:
        0 0 18px rgba(var(--exchange-cyan), 0.08),
        inset 0 1px rgba(255, 255, 255, 0.06);
}

.exchange-coins__quick-values {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.exchange-coins__quick-values button {
    min-width: 0;
    padding: 7px 6px;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    color: #cfcfd5;
    cursor: pointer;
    transition: border-color 170ms ease, background 170ms ease, color 170ms ease, box-shadow 170ms ease, transform 170ms var(--ease);
}

.exchange-coins__quick-values button:hover,
.exchange-coins__quick-values button:focus-visible {
    border-color: rgba(var(--exchange-cyan), 0.46);
    outline: 0;
    background: rgba(var(--exchange-cyan), 0.09);
    color: rgb(var(--exchange-cyan));
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.17),
        2px -2px 0 rgba(var(--exchange-pink), 0.15);
    transform: translateY(-2px);
}

.exchange-coins__quick-values button.is-active {
    border-color: rgba(255, 255, 255, 0.18);
    outline: 0;
    background: rgba(255, 255, 255, 0.065);
    color: #fff;
    box-shadow: none;
    transform: none;
}

.exchange-coins__quick-values .account-coin {
    --account-coin-icon-size: 18px;
    --account-coin-font-size: 10px;
    --account-coin-unit-size: 8px;
    min-height: 20px;
    justify-content: center;
}

.exchange-coins__result {
    display: grid;
    min-width: 0;
    grid-area: result;
    align-content: center;
    gap: 17px;
    padding-left: 23px;
    border-left: 1px solid rgba(255, 255, 255, 0.085);
}

.exchange-coins__result > div {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.exchange-coins__result > div + div {
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
}

.exchange-coins__result strong {
    color: #fff;
    font-size: 21px;
}

.exchange-coins__result .account-coin {
    --account-coin-icon-size: 31px;
    --account-coin-font-size: 18px;
    --account-coin-unit-size: 10px;
}

.exchange-coins__balances {
    display: grid;
    min-width: 0;
    grid-area: balances;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin: 0;
}

.exchange-coins__balances > div {
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.2);
    transition: border-color 170ms ease, transform 170ms var(--ease);
}

.exchange-coins__balances > div:hover {
    border-color: rgba(var(--exchange-cyan), 0.25);
    transform: translateY(-1px);
}

.exchange-coins__balances dt {
    margin-bottom: 5px;
    color: #85858e;
    font-size: 9px;
    text-transform: uppercase;
}

.exchange-coins__balances dd {
    margin: 0;
}

.exchange-coins__balances .account-coin {
    --account-coin-icon-size: 23px;
    --account-coin-font-size: 15px;
    --account-coin-unit-size: 9px;
}

.exchange-coins__limits {
    display: grid;
    grid-template-columns: minmax(190px, 0.26fr) minmax(0, 1fr);
    align-items: stretch;
    gap: 16px;
    padding: 14px 16px;
    border-color: rgba(var(--exchange-cyan), 0.16);
    background:
        linear-gradient(110deg, rgba(var(--exchange-cyan), 0.065), transparent 31%),
        linear-gradient(145deg, rgba(17, 18, 23, 0.985), rgba(8, 8, 12, 0.995));
}

.exchange-coins__limits > header {
    display: grid;
    min-width: 0;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.075);
}

.exchange-coins__limits > header > span,
.exchange-coins__methods header > span,
.exchange-coins__recipient header > span {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid rgba(var(--exchange-cyan), 0.2);
    border-radius: 13px;
    background: rgba(var(--exchange-cyan), 0.075);
    color: rgb(var(--exchange-cyan));
    transition: background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.exchange-coins__limits:hover > header > span,
.exchange-coins__recipient:hover header > span {
    background: rgba(var(--exchange-cyan), 0.13);
    transform: rotate(-5deg) scale(1.04);
}

.exchange-coins__limits h3,
.exchange-coins__methods h3,
.exchange-coins__recipient h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
}

.exchange-coins__limits > header > b {
    padding: 4px 6px;
    border: 1px solid rgba(var(--exchange-cyan), 0.17);
    border-radius: 7px;
    background: rgba(var(--exchange-cyan), 0.06);
    color: rgb(var(--exchange-cyan));
    font-size: 8px;
}

.exchange-coins__limits dl {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
}

.exchange-coins__limits dl > div {
    display: grid;
    min-width: 0;
    align-content: center;
    gap: 5px;
    padding: 3px 14px;
}

.exchange-coins__limits dl > div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.exchange-coins__limits dt {
    overflow: hidden;
    color: #777780;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.exchange-coins__limits dd {
    margin: 0;
}

.exchange-coins__limits .account-coin {
    --account-coin-icon-size: 26px;
    --account-coin-font-size: clamp(14px, 1.45vw, 18px);
    --account-coin-unit-size: 8px;
}

.exchange-coins__checkout {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(350px, 0.84fr) minmax(430px, 1.16fr);
    align-items: start;
    gap: 16px;
}

.exchange-coins__methods,
.exchange-coins__recipient,
.exchange-coins__human-check {
    padding: 18px;
}

.exchange-coins__side {
    display: grid;
    min-width: 0;
    align-content: start;
    gap: 16px;
}

.exchange-coins__methods {
    margin: 0;
    border-color: rgba(var(--exchange-pink), 0.16);
}

.exchange-coins__methods > header,
.exchange-coins__recipient > header {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.exchange-coins__methods header > span {
    border-color: rgba(var(--exchange-pink), 0.24);
    background: rgba(var(--exchange-pink), 0.075);
    color: rgb(var(--exchange-pink));
}

.exchange-coins__methods:hover header > span {
    border-color: rgba(var(--exchange-pink), 0.5);
    background: rgba(var(--exchange-pink), 0.14);
    transform: rotate(-4deg) scale(1.04);
}

.exchange-coins__method-list {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
}

.exchange-coins__method-list label {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 11px;
    min-height: 78px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.exchange-coins__method-list input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.exchange-coins__method-list label:hover,
.exchange-coins__method-list label:focus-within {
    border-color: rgba(var(--exchange-cyan), 0.38);
    background: rgba(var(--exchange-cyan), 0.055);
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.18),
        2px -2px 0 rgba(var(--exchange-pink), 0.16),
        0 11px 24px rgba(0, 0, 0, 0.22);
    transform: translateY(-2px);
}

.exchange-coins__method-list label:has(input:checked) {
    border-color: rgba(var(--exchange-cyan), 0.46);
    background: linear-gradient(105deg, rgba(var(--exchange-cyan), 0.1), rgba(var(--exchange-pink), 0.035));
    box-shadow:
        inset 3px 0 rgba(var(--exchange-cyan), 0.8),
        0 10px 24px rgba(0, 0, 0, 0.21);
}

.exchange-coins__method-list label:has(input:focus-visible) {
    outline: 2px solid rgba(var(--exchange-cyan), 0.84);
    outline-offset: 2px;
}

.exchange-coins__method-list label > span {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border-radius: 14px;
    background: rgba(var(--exchange-cyan), 0.09);
    color: rgb(var(--exchange-cyan));
    font-size: 22px;
    transition: background 180ms ease, transform 180ms var(--ease);
}

.exchange-coins__method-list label:hover > span {
    background: rgba(var(--exchange-cyan), 0.15);
    transform: scale(1.05) rotate(-3deg);
}

.exchange-coins__method-list label > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.exchange-coins__method-list strong {
    color: #fff;
    font-size: 13px;
    white-space: normal;
}

.exchange-coins__method-list label > div > b {
    width: fit-content;
    max-width: 100%;
    padding: 2px 6px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.035);
    color: #c8c8cf;
    font-size: 8px;
    line-height: 1.25;
    text-transform: uppercase;
}

.exchange-coins__method-list small {
    color: #777781;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.35;
}

.exchange-coins__method-list label > i {
    color: transparent;
    font-size: 16px;
}

.exchange-coins__method-list label:has(input:checked) > i {
    color: rgb(var(--exchange-cyan));
}

.exchange-coins__recipient {
    display: grid;
    align-content: start;
    border-color: rgba(var(--exchange-cyan), 0.16);
}

.exchange-coins__recipient > label > span:first-child {
    display: block;
    margin-bottom: 8px;
    color: #aaaab2;
    font-size: 10px;
    font-weight: 800;
}

.exchange-coins__recipient > label + label {
    margin-top: 12px;
}

.exchange-coins__recipient-label {
    display: flex !important;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.exchange-coins__recipient-label > span {
    min-width: 0;
}

.exchange-coins__recipient-label > b {
    flex: 0 0 auto;
    padding: 3px 7px;
    border: 1px solid rgba(var(--exchange-cyan), 0.2);
    border-radius: 999px;
    color: rgb(var(--exchange-cyan));
    background: rgba(var(--exchange-cyan), 0.07);
    font-size: 9px;
    letter-spacing: 0.05em;
}

.exchange-coins__recipient-control {
    position: relative;
    display: grid;
    min-height: 55px;
    overflow: hidden;
    isolation: isolate;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid rgba(var(--exchange-cyan), 0.16);
    border-radius: 15px;
    background:
        linear-gradient(
            105deg,
            rgba(var(--exchange-cyan), 0.055),
            transparent 31%,
            rgba(var(--exchange-pink), 0.024)
        ),
        rgba(6, 7, 10, 0.86);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.045),
        inset 0 -1px rgba(0, 0, 0, 0.42),
        0 12px 28px rgba(0, 0, 0, 0.18);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        background 180ms ease;
}

.exchange-coins__recipient-control::after {
    position: absolute;
    z-index: 0;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(var(--exchange-cyan), 0.9),
        rgba(var(--exchange-pink), 0.75),
        transparent
    );
    content: "";
    opacity: 0.34;
    pointer-events: none;
    transform: scaleX(0.55);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}

.exchange-coins__recipient-control > * {
    position: relative;
    z-index: 1;
}

.exchange-coins__recipient-control:hover {
    border-color: rgba(var(--exchange-cyan), 0.3);
    background:
        linear-gradient(
            105deg,
            rgba(var(--exchange-cyan), 0.07),
            transparent 34%,
            rgba(var(--exchange-pink), 0.032)
        ),
        rgba(6, 7, 10, 0.9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 14px 30px rgba(0, 0, 0, 0.21);
}

.exchange-coins__recipient-control:focus-within {
    border-color: rgba(var(--exchange-cyan), 0.46);
    background:
        linear-gradient(
            105deg,
            rgba(var(--exchange-cyan), 0.085),
            transparent 36%,
            rgba(var(--exchange-pink), 0.04)
        ),
        rgba(5, 6, 9, 0.94);
    box-shadow:
        0 0 0 3px rgba(var(--exchange-cyan), 0.055),
        0 16px 34px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.065);
}

.exchange-coins__recipient-control:focus-within::after {
    opacity: 1;
    transform: scaleX(1);
}

.exchange-coins__recipient-control:has(input[aria-invalid="true"]) {
    border-color: rgba(255, 94, 94, 0.64);
}

.exchange-coins__recipient-control i {
    color: #a7a7ae;
    text-align: center;
}

.exchange-coins__recipient-control input {
    width: 100%;
    min-width: 0;
    height: 53px;
    padding: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 720;
}

.exchange-coins__recipient-control input:focus,
.exchange-coins__recipient-control input:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

.exchange-coins__network-confirm {
    display: grid;
    min-width: 0;
    grid-template-columns: 22px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 12px;
    color: #aaaab2;
    cursor: pointer;
    font-size: 11px;
    font-weight: 780;
}

.exchange-coins__network-confirm > input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.exchange-coins__network-confirm > span {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(var(--exchange-cyan), 0.25);
    border-radius: 7px;
    color: transparent;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.exchange-coins__network-confirm:hover > span {
    border-color: rgba(var(--exchange-cyan), 0.48);
}

.exchange-coins__network-confirm > input:checked + span {
    border-color: rgba(var(--exchange-cyan), 0.64);
    color: #071012;
    background: rgb(var(--exchange-cyan));
    box-shadow: 0 7px 18px rgba(var(--exchange-cyan), 0.15);
}

.exchange-coins__network-confirm > input:focus-visible + span {
    outline: 2px solid rgba(var(--exchange-cyan), 0.8);
    outline-offset: 2px;
}

.exchange-coins__network-confirm b,
.exchange-coins__network-confirm em {
    min-width: 0;
    font: inherit;
}

.exchange-coins__network-confirm em {
    color: rgb(var(--exchange-cyan));
    font-style: normal;
}

.exchange-coins__memo[hidden],
.exchange-coins__network-confirm[hidden],
.exchange-coins__recipient-label > b[hidden] {
    display: none !important;
}

.exchange-coins__human-check {
    display: grid;
    min-height: 0;
    align-content: start;
    gap: 11px;
    border-color: rgba(var(--exchange-cyan), 0.16);
    transition:
        border-color 190ms ease,
        background 190ms ease,
        box-shadow 190ms ease,
        transform 190ms var(--ease);
}

.exchange-coins__human-check > header {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
}

.exchange-coins__human-check > header > span {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    place-items: center;
    border: 1px solid rgba(var(--exchange-cyan), 0.23);
    border-radius: 13px;
    background: rgba(var(--exchange-cyan), 0.08);
    color: rgb(var(--exchange-cyan));
    font-size: 17px;
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms var(--ease);
}

.exchange-coins__human-check:hover > header > span {
    border-color: rgba(var(--exchange-cyan), 0.5);
    background: rgba(var(--exchange-cyan), 0.14);
    transform: rotate(-4deg) scale(1.04);
}

.exchange-coins__human-check > header div {
    min-width: 0;
}

.exchange-coins__human-check > header h3 {
    margin: 0;
    color: #fff;
    font-size: 16px;
}

.exchange-coins__human-check > header p {
    margin: 3px 0 0;
    color: #85858f;
    font-size: 9px;
    line-height: 1.4;
}

.exchange-coins__human-check .account-captcha-account-payout {
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.exchange-coins__human-check .account-captcha-account-payout > legend {
    margin-bottom: 6px;
    padding: 0;
    color: #85858f;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.exchange-coins__human-check .captcha-head {
    gap: 9px;
    margin-bottom: 10px;
    padding: 8px 9px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 14px;
    background: rgba(0, 0, 0, 0.18);
    transition:
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease;
}

.exchange-coins__human-check .captcha-head:hover {
    border-color: rgba(var(--exchange-cyan), 0.25);
    background: rgba(var(--exchange-cyan), 0.035);
    box-shadow: 0 9px 20px rgba(0, 0, 0, 0.16);
}

.exchange-coins__human-check .captcha-target {
    min-width: 0;
    gap: 8px;
}

.exchange-coins__human-check .captcha-target > .captcha-target-gift {
    width: 66px;
    min-width: 66px;
    min-height: 58px;
    flex: 0 0 66px;
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 4px;
    border-color: rgba(var(--exchange-pink), 0.27);
    background: rgba(var(--exchange-pink), 0.055);
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease,
        transform 180ms var(--ease);
}

.exchange-coins__human-check .captcha-target > .captcha-target-gift:hover {
    border-color: rgba(var(--exchange-pink), 0.52);
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.16),
        2px -2px 0 rgba(var(--exchange-pink), 0.19);
    transform: translateY(-2px) rotate(-2deg);
}

.exchange-coins__human-check .captcha-target-gift img {
    width: 40px;
    height: 40px;
}

.exchange-coins__human-check .captcha-target-gift b {
    max-width: 58px;
    overflow: hidden;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.exchange-coins__human-check .captcha-target small {
    color: #92929b;
    font-size: 9px;
}

.exchange-coins__human-check .captcha-refresh {
    flex: 0 0 auto;
    border-color: rgba(var(--exchange-cyan), 0.2);
    color: rgb(var(--exchange-cyan));
    transition:
        border-color 170ms ease,
        background 170ms ease,
        box-shadow 170ms ease,
        transform 170ms var(--ease);
}

.exchange-coins__human-check .captcha-refresh:hover,
.exchange-coins__human-check .captcha-refresh:focus-visible {
    border-color: rgba(var(--exchange-cyan), 0.54);
    background: rgba(var(--exchange-cyan), 0.1);
    outline: 0;
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.18),
        2px -2px 0 rgba(var(--exchange-pink), 0.16);
    transform: translateY(-2px) rotate(18deg);
}

.exchange-coins__human-check .captcha-reel {
    padding: 8px;
    overflow: visible;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.exchange-coins__human-check .captcha-reel:hover {
    border-color: rgba(var(--exchange-cyan), 0.25);
    box-shadow:
        inset 0 12px 24px rgba(0, 0, 0, 0.42),
        inset 0 -12px 24px rgba(0, 0, 0, 0.42),
        0 10px 24px rgba(0, 0, 0, 0.18);
}

.exchange-coins__human-check .captcha-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.exchange-coins__human-check .captcha-grid button {
    min-width: 0;
    min-height: 62px;
    padding: 5px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.026);
    transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease, transform 170ms var(--ease);
}

.exchange-coins__human-check .captcha-grid button:hover,
.exchange-coins__human-check .captcha-grid button:focus-visible {
    border-color: rgba(var(--exchange-cyan), 0.42);
    background: rgba(var(--exchange-cyan), 0.065);
    outline: 0;
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.15),
        2px -2px 0 rgba(var(--exchange-pink), 0.13),
        0 8px 18px rgba(0, 0, 0, 0.22);
    transform: translateY(-3px) scale(1.015);
}

.exchange-coins__human-check .captcha-grid button.is-selected {
    border-color: rgba(var(--exchange-cyan), 0.74);
    background: linear-gradient(
        145deg,
        rgba(var(--exchange-cyan), 0.15),
        rgba(var(--exchange-pink), 0.055)
    );
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.24),
        2px -2px 0 rgba(var(--exchange-pink), 0.22),
        inset 0 0 0 1px rgba(var(--exchange-cyan), 0.17);
    transform: translateY(-2px);
}

.exchange-coins__human-check .captcha-grid button img {
    width: 46px;
    height: 46px;
}

.exchange-coins__human-check .captcha-grid button span,
.exchange-coins__human-check [data-field-error="captcha"] {
    display: none;
}

.exchange-coins__human-check.is-complete {
    border-color: rgba(var(--exchange-cyan), 0.42);
    background: linear-gradient(
        145deg,
        rgba(var(--exchange-cyan), 0.055),
        rgba(9, 9, 13, 0.995)
    );
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.29),
        inset 3px 0 rgba(var(--exchange-cyan), 0.67);
}

.exchange-coins__human-check.is-invalid {
    border-color: rgba(255, 94, 94, 0.54);
    background: linear-gradient(
        145deg,
        rgba(255, 94, 94, 0.075),
        rgba(9, 9, 13, 0.995)
    );
    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.29),
        inset 3px 0 rgba(255, 94, 94, 0.74);
    animation: buy-coins-alert 260ms ease both;
}

.exchange-coins__submit {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
    border-radius: 17px;
}

.exchange-coins__calculation {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.exchange-coins__calculation > span {
    display: grid;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.2);
}

.exchange-coins__calculation small {
    color: #85858e;
    font-size: 8px;
    text-transform: uppercase;
}

.exchange-coins__calculation strong {
    color: #fff;
    font-size: 13px;
}

.exchange-coins__calculation em {
    color: #8d8d96;
    font-size: 9px;
    font-style: normal;
}

.exchange-coins__rate {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
}

.exchange-coins__rate .account-coin {
    --account-coin-icon-size: 18px;
    --account-coin-font-size: 11px;
    --account-coin-unit-size: 8px;
    min-height: 22px;
}

.exchange-coins__confirmation {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    padding: 14px 2px 2px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.exchange-coins__confirmation > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.04);
    color: #c9c9cf;
}

.exchange-coins__confirmation > div {
    display: grid;
    min-width: 0;
    gap: 7px;
}

.exchange-coins__confirmation small,
.exchange-coins__confirmation label > span {
    color: #85858e;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.exchange-coins__confirmation h3,
.exchange-coins__confirmation p {
    margin: 0;
}

.exchange-coins__confirmation h3 {
    color: #fff;
    font-size: 15px;
}

.exchange-coins__confirmation label {
    display: grid;
    width: min(100%, 290px);
    gap: 6px;
}

.exchange-coins__confirmation input {
    width: 100%;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;
    outline: 0;
    background: rgba(6, 7, 10, 0.86);
    color: #fff;
    font: inherit;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.32em;
}

.exchange-coins__confirmation input:focus {
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: none;
}

.exchange-coins__confirmation input[aria-invalid="true"] {
    border-color: rgba(255, 94, 94, 0.64);
}

.exchange-coins__confirmation p {
    color: #8d8d96;
    font-size: 9px;
    line-height: 1.5;
}

.exchange-coins__confirmation a {
    color: rgb(var(--exchange-cyan));
}

.exchange-coins__submit .account-button {
    min-width: 190px;
    justify-content: center;
    justify-self: end;
}

.exchange-coins__submit .account-button:disabled {
    opacity: 0.42;
    cursor: not-allowed;
    filter: saturate(0.45);
    box-shadow: none;
    transform: none;
}

.exchange-coins-disabled {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: 17px;
    padding: 24px;
}

.exchange-coins-disabled__mark {
    position: relative;
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    border: 1px solid rgba(var(--exchange-cyan), 0.23);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(var(--exchange-cyan), 0.12), rgba(var(--exchange-pink), 0.07));
}

.exchange-coins-disabled__mark > span {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: rgba(5, 5, 7, 0.78);
}

.exchange-coins-disabled__mark img {
    width: 40px;
    height: 40px;
}

.exchange-coins-disabled__mark > i {
    position: absolute;
    right: -5px;
    bottom: -4px;
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 7px;
    background: #101014;
    color: rgb(var(--exchange-cyan));
    font-size: 8px;
}

.exchange-coins-disabled small {
    color: #85858f;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.exchange-coins-disabled h2 {
    margin: 5px 0;
    color: #fff;
    font-size: 20px;
}

.exchange-coins-disabled p {
    max-width: 610px;
    margin: 0;
    color: #8d8d96;
    font-size: 11px;
    line-height: 1.5;
}

.exchange-coins-disabled dl {
    display: grid;
    grid-template-columns: repeat(2, minmax(150px, 1fr));
    gap: 8px;
    margin: 0;
}

.exchange-coins-disabled dl > div {
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.exchange-coins-disabled dt {
    margin-bottom: 5px;
    color: #85858e;
    font-size: 8px;
    text-transform: uppercase;
}

.exchange-coins-disabled dd {
    margin: 0;
}

.account-exchange-history {
    --dashboard-panel-accent: 37, 244, 238;
    --dashboard-panel-secondary: 254, 44, 85;
    min-width: 0;
    margin-top: 17px;
    border-color: rgba(var(--exchange-cyan), 0.16);
    animation-delay: 150ms;
    animation-fill-mode: none;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-exchange-history:hover {
    border-color: rgba(var(--exchange-cyan), 0.27);
    box-shadow:
        -3px 3px 0 rgba(var(--exchange-cyan), 0.16),
        3px -3px 0 rgba(var(--exchange-pink), 0.15),
        0 22px 55px rgba(0, 0, 0, 0.31);
    transform: translateY(-2px);
}

.account-exchange-empty {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 14px;
    padding: 17px 18px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.025);
    text-align: left;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-exchange-empty:hover {
    border-color: rgba(var(--exchange-cyan), 0.3);
    background: linear-gradient(135deg, rgba(var(--exchange-cyan), 0.055), rgba(var(--exchange-pink), 0.03));
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.16),
        2px -2px 0 rgba(var(--exchange-pink), 0.16),
        0 13px 28px rgba(0, 0, 0, 0.21);
    transform: translateY(-2px);
}

.account-exchange-empty > span,
.account-exchange-request__icon {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid rgba(var(--exchange-cyan), 0.22);
    border-radius: 15px;
    background: rgba(var(--exchange-cyan), 0.075);
    color: rgb(var(--exchange-cyan));
    font-size: 19px;
    transition: background 180ms ease, transform 180ms var(--ease);
}

.account-exchange-empty:hover > span {
    background: rgba(var(--exchange-cyan), 0.13);
    transform: rotate(-5deg) scale(1.05);
}

.account-exchange-empty h3 {
    margin: 0;
    color: #fff;
    font-size: 14px;
}

.account-exchange-empty p {
    margin: 4px 0 0;
    color: #85858f;
    font-size: 11px;
    line-height: 1.45;
}

.account-exchange-list {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.account-exchange-request {
    display: grid;
    min-width: 0;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: start;
    gap: 13px;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 17px;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.035), rgba(var(--exchange-cyan), 0.018));
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-exchange-request:hover {
    border-color: rgba(var(--exchange-cyan), 0.3);
    background: linear-gradient(135deg, rgba(var(--exchange-cyan), 0.06), rgba(var(--exchange-pink), 0.028));
    box-shadow:
        -2px 2px 0 rgba(var(--exchange-cyan), 0.18),
        2px -2px 0 rgba(var(--exchange-pink), 0.18),
        0 13px 28px rgba(0, 0, 0, 0.21);
    transform: translateY(-2px);
}

.account-exchange-request__main {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.account-exchange-request__main > header {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
}

.account-exchange-request__main > header strong {
    color: #fff;
    font-size: 14px;
}

.account-exchange-request__main > header time,
.account-exchange-request__values small {
    color: #85858e;
    font-size: 9px;
}

.account-exchange-request__values {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    gap: 9px;
}

.account-exchange-request__values > span {
    display: flex;
    min-width: 150px;
    flex: 1 1 170px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.2);
}

.account-exchange-request__details > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgb(var(--exchange-cyan));
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
}

.account-exchange-request__details > summary::-webkit-details-marker {
    display: none;
}

.account-exchange-request__details dl {
    display: grid;
    min-width: 0;
    gap: 7px;
    margin: 10px 0 0;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.22);
}

.account-exchange-request__details dl > div {
    display: grid;
    grid-template-columns: minmax(110px, 0.38fr) minmax(0, 1fr);
    gap: 10px;
}

.account-exchange-request__details dt {
    color: #81818a;
    font-size: 9px;
}

.account-exchange-request__details dd {
    min-width: 0;
    margin: 0;
    color: #d9d9de;
    font-size: 10px;
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .exchange-coins__summary {
        grid-template-areas: "heading" "amount" "result" "balances";
        grid-template-columns: 1fr;
    }

    .exchange-coins__result {
        padding: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border-top: 1px solid rgba(255, 255, 255, 0.075);
        border-left: 0;
    }

    .exchange-coins__result > div {
        padding-top: 16px;
    }

    .exchange-coins__result > div + div {
        padding-left: 16px;
        border-top: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.075);
    }

    .exchange-coins__limits,
    .exchange-coins__checkout {
        grid-template-columns: 1fr;
    }

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

    .exchange-coins__limits > header {
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.075);
    }

    .exchange-coins-disabled {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .exchange-coins-disabled dl {
        grid-column: 1 / -1;
    }
}

@media (max-width: 620px) {
    .exchange-coins {
        padding: 11px;
        border-radius: 23px;
    }

    .exchange-coins__summary,
    .exchange-coins__limits,
    .exchange-coins__methods,
    .exchange-coins__recipient,
    .exchange-coins__human-check {
        padding: 15px;
        border-radius: 18px;
    }

    .exchange-coins__side,
    .exchange-coins__method-list {
        grid-template-columns: 1fr;
    }

    .exchange-coins__quick-values,
    .exchange-coins__limits dl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .exchange-coins__limits dl > div:nth-child(odd) {
        border-left: 0;
    }

    .exchange-coins__limits dl > div:nth-child(n + 3) {
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }

    .exchange-coins__method-list,
    .exchange-coins__submit {
        display: grid;
        grid-template-columns: 1fr;
    }

    .exchange-coins__submit .account-button {
        width: 100%;
        min-width: 0;
    }

    .exchange-coins__calculation {
        grid-template-columns: 1fr;
    }

    .exchange-coins-disabled {
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .exchange-coins-disabled dl {
        grid-column: auto;
        width: 100%;
    }
}

@media (max-width: 520px) {
    .exchange-coins__human-check {
        border-radius: 19px;
    }

    .exchange-coins__human-check > header > span {
        width: 39px;
        height: 39px;
        flex-basis: 39px;
    }

    .exchange-coins__human-check > header h3 {
        font-size: 15px;
    }

    .exchange-coins__human-check .captcha-target > .captcha-target-gift {
        width: 58px;
        min-width: 58px;
        flex-basis: 58px;
    }

    .exchange-coins__human-check .captcha-target-gift img {
        width: 34px;
        height: 34px;
    }

    .exchange-coins__human-check .captcha-target small {
        font-size: 8px;
    }

    .exchange-coins__human-check .captcha-grid {
        gap: 5px;
    }

    .exchange-coins__human-check .captcha-grid button {
        min-height: 50px;
        border-radius: 11px;
    }

    .exchange-coins__human-check .captcha-grid button img {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 380px) {
    .exchange-coins__summary {
        gap: 16px;
        padding: 13px;
    }

    .exchange-coins__summary-heading > span {
        width: 52px;
        height: 52px;
        flex-basis: 52px;
    }

    .exchange-coins__amount-control {
        padding-left: 12px;
    }

    .exchange-coins__amount-control input {
        font-size: 28px;
    }

    .exchange-coins__result,
    .exchange-coins__balances,
    .exchange-coins__limits dl,
    .exchange-coins-disabled dl {
        grid-template-columns: 1fr;
    }

    .exchange-coins__result > div + div {
        padding-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.075);
        border-left: 0;
    }

    .exchange-coins__limits dl > div + div {
        padding-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
        border-left: 0;
    }

    .account-exchange-request {
        grid-template-columns: 42px minmax(0, 1fr);
        padding: 11px;
    }

    .account-exchange-request__icon {
        width: 42px;
        height: 42px;
    }

    .account-exchange-request > .account-badge {
        grid-column: 2;
        justify-self: start;
    }

    .account-exchange-request__details dl > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}

.buy-coins__human-check .captcha-target > .captcha-target-gift,
.exchange-coins__human-check .captcha-target > .captcha-target-gift {
    width: min(160px, 46%);
    min-width: 136px;
    min-height: 64px;
    flex: 0 1 160px;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    gap: 7px;
    padding: 6px;
}

.buy-coins__human-check .captcha-target-gift b,
.exchange-coins__human-check .captcha-target-gift b {
    display: block;
    width: 100%;
    max-width: none;
    overflow: visible;
    font-size: 9px;
    line-height: 1.2;
    text-align: left;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-box-orient: initial;
    -webkit-line-clamp: unset;
}

.buy-coins__human-check .captcha-grid button,
.exchange-coins__human-check .captcha-grid button {
    display: grid;
    min-height: 78px;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    justify-items: center;
    gap: 4px;
}

.buy-coins__human-check .captcha-grid button span,
.exchange-coins__human-check .captcha-grid button span {
    display: block;
    width: 100%;
    min-width: 0;
    color: #a7a7af;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

.buy-coins__human-check .captcha-grid button.is-selected span,
.exchange-coins__human-check .captcha-grid button.is-selected span {
    color: #f1f1f3;
}

@media (max-width: 520px) {
    .buy-coins__human-check .captcha-target,
    .exchange-coins__human-check .captcha-target {
        align-items: stretch;
        flex-direction: column;
        gap: 6px;
    }

    .buy-coins__human-check .captcha-target > .captcha-target-gift,
    .exchange-coins__human-check .captcha-target > .captcha-target-gift {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .buy-coins__human-check .captcha-grid button,
    .exchange-coins__human-check .captcha-grid button {
        min-height: 72px;
    }

    .buy-coins__human-check .captcha-grid button span,
    .exchange-coins__human-check .captcha-grid button span {
        font-size: 7px;
    }
}

/* Payout amounts and administrator-managed labels must stay inside their own cards. */
.account-module-payouts :is(
    .exchange-coins__result output,
    .exchange-coins__result strong,
    .exchange-coins__balances dd,
    .exchange-coins__limits dd,
    .exchange-coins__calculation strong,
    .account-exchange-request__values > span,
    .account-exchange-request__values b
) {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.account-module-payouts :is(
    .exchange-coins__result,
    .exchange-coins__balances,
    .exchange-coins__limits,
    .exchange-coins__calculation,
    .account-exchange-request__values
) .account-coin {
    width: fit-content;
    min-width: 0;
    max-width: 100%;
    flex: 0 1 auto;
    white-space: normal;
}

.account-module-payouts :is(
    .exchange-coins__result,
    .exchange-coins__balances,
    .exchange-coins__limits,
    .exchange-coins__calculation,
    .account-exchange-request__values
) .account-coin > .account-coin-value {
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.account-module-payouts :is(
    .exchange-coins__result,
    .exchange-coins__balances,
    .exchange-coins__limits,
    .exchange-coins__calculation,
    .account-exchange-request__values
) .account-coin > small {
    min-width: 0;
    flex: 0 1 auto;
}

.account-module-payouts .account-exchange-request__values .account-coin {
    --account-coin-icon-size: 20px;
    --account-coin-font-size: 13px;
    --account-coin-unit-size: 8px;
    min-height: 29px;
}

.account-module-payouts :is(
    .exchange-coins__quick-values button,
    .exchange-coins__method-list strong,
    .exchange-coins__recipient-label > span,
    .exchange-coins__recipient-label > b,
    .exchange-coins__network-confirm b
) {
    overflow-wrap: anywhere;
}

.account-module-payouts .exchange-coins__method-list label > div > b {
    max-width: none;
    overflow-wrap: normal;
    word-break: normal;
    white-space: nowrap;
}

@media (max-width: 1240px) {
    .account-module-payouts .exchange-coins__checkout {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 380px) {
    .account-module-payouts .exchange-coins__quick-values button {
        min-height: 40px;
        line-height: 1.2;
    }

    .account-module-payouts .exchange-coins__result .account-coin {
        --account-coin-icon-size: 25px;
        --account-coin-font-size: 15px;
        --account-coin-unit-size: 8px;
        min-height: 33px;
        gap: 3px;
    }

    .account-module-payouts :is(
        .exchange-coins__balances,
        .exchange-coins__limits
    ) .account-coin {
        --account-coin-icon-size: 21px;
        --account-coin-font-size: 13px;
        --account-coin-unit-size: 8px;
        min-height: 29px;
        gap: 3px;
    }

    .account-module-payouts .exchange-coins__result strong {
        font-size: clamp(17px, 6.2vw, 21px);
        line-height: 1.18;
    }

    .account-module-payouts .exchange-coins__calculation strong {
        line-height: 1.25;
    }
}
.account-module-notifications { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #ffffff; }
.account-module-support { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }

.account-shell .account-page-heading {
    position: relative;
    min-height: 138px;
    padding: 23px 25px;
    overflow: hidden;
    border: 1px solid rgba(var(--module-accent-rgb), 0.2);
    border-radius: 24px;
    background:
        linear-gradient(115deg, rgba(var(--module-accent-rgb), 0.105), transparent 42%),
        radial-gradient(circle at 88% 12%, rgba(var(--module-accent-rgb), 0.12), transparent 33%),
        rgba(13, 13, 16, 0.9);
    box-shadow: 0 22px 64px rgba(0, 0, 0, 0.27);
}

.account-shell .account-page-heading::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
    background-size: 29px 29px;
    content: "";
    mask-image: linear-gradient(90deg, #000, transparent 72%);
    pointer-events: none;
}

.account-shell .account-page-heading > * { position: relative; z-index: 1; }
.account-shell .account-page-heading p { color: var(--module-accent); }
.account-shell .account-page-heading p span { background: linear-gradient(90deg, var(--module-accent) 50%, var(--module-secondary) 50%); }

.account-heading-side { display: flex; gap: 13px; align-items: center; }
.account-heading-signal {
    position: relative;
    display: grid;
    width: 118px;
    height: 72px;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    padding: 9px 12px;
    overflow: hidden;
    border: 1px solid rgba(var(--module-accent-rgb), 0.26);
    border-radius: 23px;
    background: linear-gradient(145deg, rgba(var(--module-accent-rgb), 0.16), rgba(254, 44, 85, 0.06));
    color: var(--module-accent);
    font-size: 20px;
    box-shadow: inset 0 0 24px rgba(var(--module-accent-rgb), 0.04);
    transition: border-color 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease;
}
.account-heading-signal > b { position: relative; display: flex; width: 31px; height: 34px; gap: 3px; align-items: end; justify-content: center; opacity: 0.82; }
.account-heading-signal > b i { width: 3px; border-radius: 9px; background: currentColor; animation: account-heading-bars 1.15s ease-in-out infinite alternate; }
.account-heading-signal > b i:nth-child(1) { height: 9px; animation-delay: -0.8s; }
.account-heading-signal > b i:nth-child(2) { height: 24px; animation-delay: -0.45s; }
.account-heading-signal > b i:nth-child(3) { height: 15px; animation-delay: -0.2s; }
.account-heading-signal > b i:nth-child(4) { height: 29px; animation-delay: -0.65s; }
.account-heading-signal > b i:nth-child(5) { height: 12px; animation-delay: -0.1s; }
.account-heading-signal > i { position: relative; z-index: 1; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(var(--module-accent-rgb), 0.22); border-radius: 14px; background: rgba(var(--module-accent-rgb), 0.1); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); }
.account-page-heading:hover .account-heading-signal { border-color: rgba(var(--module-accent-rgb), 0.48); box-shadow: -3px 3px 0 rgba(var(--module-accent-rgb), 0.34), 3px -3px 0 rgba(254, 44, 85, 0.3); transform: rotate(-3deg) scale(1.035); }
@keyframes account-heading-bars { to { height: 5px; } }

.account-workspace > :not(.account-page-heading) { animation: account-module-enter 420ms var(--ease) both; }
.account-workspace > :nth-child(3) { animation-delay: 55ms; }
.account-workspace > :nth-child(4) { animation-delay: 105ms; }
.account-workspace > :nth-child(5) { animation-delay: 155ms; }
@keyframes account-module-enter { from { opacity: 0; transform: translateY(13px); } }

.account-shell:not(.account-module-dashboard) .account-panel > header > div > i { color: var(--module-accent); transition: color 180ms ease, transform 180ms var(--ease), background 180ms ease, box-shadow 180ms ease; }
.account-shell:not(.account-module-dashboard) .account-panel:hover > header > div > i { color: var(--module-secondary); transform: rotate(-5deg) scale(1.1); }
.account-shell :is(input, select, textarea):focus-visible,
.account-shell :is(button, a, summary):focus-visible { outline: 2px solid var(--module-accent); outline-offset: 3px; }
.account-table tbody tr,
.account-session-list article,
.account-event-list article,
.account-method-list article,
.account-notification-list article,
.account-ticket-list > article,
.account-rate-list article,
.account-rank-list article,
.account-activity-list article { transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease; }
.account-table tbody tr:hover,
.account-session-list article:hover,
.account-event-list article:hover,
.account-method-list article:hover,
.account-notification-list article:hover,
.account-ticket-list > article:hover,
.account-rate-list article:hover,
.account-rank-list article:hover,
.account-activity-list article:hover { background: rgba(var(--module-accent-rgb), 0.055); box-shadow: inset 3px 0 0 var(--module-accent); transform: translateX(3px); }

/* Profile: every editable surface follows the accepted account dashboard language. */
.account-shell.account-module-profile .account-profile-panel {
    --profile-panel-accent: 37, 244, 238;
    --profile-panel-secondary: 254, 44, 85;
    position: relative;
    overflow: hidden;
    border-color: rgba(var(--profile-panel-accent), 0.2);
    background:
        radial-gradient(circle at 100% 0, rgba(var(--profile-panel-accent), 0.105), transparent 40%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.026), transparent 48%),
        var(--account-panel);
    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.24);
    isolation: isolate;
    animation: account-profile-panel-in 420ms var(--ease) both;
}

.account-shell.account-module-profile .account-profile-panel.is-preferences {
    --profile-panel-accent: 254, 44, 85;
    --profile-panel-secondary: 37, 244, 238;
    animation-delay: 90ms;
}

.account-profile-captcha-open { overflow: hidden; }
.account-profile-captcha-layer {
    position: fixed;
    z-index: 1250;
    inset: 0;
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow: hidden;
    background: transparent;
    opacity: 0;
    visibility: hidden;
    transition: opacity 180ms ease, visibility 180ms ease;
}
.account-profile-captcha-layer:not([open]) { display: none; }
.account-profile-captcha-layer::backdrop { background: transparent; }
.account-profile-captcha-layer.is-open { opacity: 1; visibility: visible; }
.account-profile-captcha-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: rgba(3, 3, 5, 0.84);
    backdrop-filter: blur(13px) saturate(0.88);
    cursor: default;
}
.account-profile-captcha-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 760px);
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    padding: 22px;
    overflow: auto;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 26px;
    background:
        radial-gradient(circle at 0 0, rgba(37, 244, 238, 0.12), transparent 37%),
        radial-gradient(circle at 100% 100%, rgba(254, 44, 85, 0.12), transparent 39%),
        #111115;
    box-shadow: -4px 4px 0 rgba(37, 244, 238, 0.32), 4px -4px 0 rgba(254, 44, 85, 0.3), 0 34px 100px rgba(0, 0, 0, 0.68);
    opacity: 0;
    transform: translateY(20px) scale(0.965);
    transition: opacity 190ms ease, transform 190ms var(--ease);
}
.account-profile-captcha-layer.is-open .account-profile-captcha-dialog { opacity: 1; transform: translateY(0) scale(1); }
.account-profile-captcha-dialog > header,
.account-profile-captcha-dialog > header > div,
.account-profile-captcha-dialog > header > div > div,
.account-profile-captcha-dialog > footer { display: flex; align-items: center; }
.account-profile-captcha-dialog > header { justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.account-profile-captcha-dialog > header > div { min-width: 0; gap: 13px; }
.account-profile-captcha-dialog > header > div > span {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.26);
    border-radius: 15px;
    background: rgba(37, 244, 238, 0.09);
    color: var(--cyan);
    box-shadow: inset -2px 0 0 rgba(254, 44, 85, 0.65);
}
.account-profile-captcha-dialog > header > div > div { min-width: 0; align-items: flex-start; flex-direction: column; gap: 2px; }
.account-profile-captcha-dialog > header p { margin: 0; color: var(--cyan); font-size: 11px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; }
.account-profile-captcha-dialog h2 { margin: 0; color: #fff; font-size: clamp(22px, 4vw, 30px); line-height: 1.05; }
.account-profile-captcha-dialog .account-captcha {
    width: 100%;
    margin: 0;
    padding: 18px;
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.3);
}
.account-profile-captcha-dialog .account-captcha .captcha-grid button { min-height: 70px; }
.account-profile-captcha-dialog .account-captcha .captcha-grid img { width: 52px; height: 52px; }
.account-profile-captcha-dialog > footer { justify-content: flex-end; gap: 10px; margin-top: 17px; }

.account-shell.account-module-profile .account-profile-panel::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 24px;
    left: 24px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, rgba(var(--profile-panel-accent), 0.98), rgba(var(--profile-panel-secondary), 0.88), transparent);
    opacity: 0.54;
    content: "";
    transform: scaleX(0.86);
    transition: opacity 190ms ease, transform 190ms var(--ease);
}

.account-shell.account-module-profile .account-profile-panel::after {
    position: absolute;
    z-index: 0;
    right: -72px;
    bottom: -84px;
    width: 188px;
    height: 188px;
    border: 1px solid rgba(var(--profile-panel-accent), 0.1);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(var(--profile-panel-secondary), 0.02);
    content: "";
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-shell.account-module-profile .account-profile-panel > * { position: relative; z-index: 1; }
.account-shell.account-module-profile .account-profile-panel:hover { border-color: rgba(var(--profile-panel-accent), 0.43); box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.32), 3px -3px 0 rgba(254, 44, 85, 0.32), 0 30px 78px rgba(0, 0, 0, 0.36); transform: translateY(-4px); }
.account-shell.account-module-profile .account-profile-panel:hover::before { opacity: 1; transform: scaleX(1.05); }
.account-shell.account-module-profile .account-profile-panel:hover::after { border-color: rgba(var(--profile-panel-accent), 0.24); box-shadow: 0 0 0 28px rgba(var(--profile-panel-secondary), 0.045); transform: translate(-9px, -9px) scale(1.07); }
.account-shell.account-module-profile .account-profile-panel > header { margin-bottom: 20px; }
.account-shell.account-module-profile .account-profile-panel > header > div > i {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--profile-panel-accent), 0.2);
    border-radius: 13px;
    background: rgba(var(--profile-panel-accent), 0.08);
    color: rgb(var(--profile-panel-accent));
    box-shadow: inset 0 0 18px rgba(var(--profile-panel-accent), 0.035);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}
.account-shell.account-module-profile .account-profile-panel:hover > header > div > i { border-color: rgba(var(--profile-panel-accent), 0.42); background: rgba(var(--profile-panel-accent), 0.15); color: rgb(var(--profile-panel-accent)); box-shadow: 0 10px 26px rgba(var(--profile-panel-accent), 0.13); transform: rotate(-6deg) scale(1.1); }

.account-profile-fields { gap: 14px; }
.account-profile-field {
    --profile-field-accent: 37, 244, 238;
    position: relative;
    min-height: 128px;
    align-content: start;
    padding: 16px;
    overflow: hidden;
    border: 1px solid rgba(var(--profile-field-accent), 0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--profile-field-accent), 0.085), transparent 48%),
        rgba(255, 255, 255, 0.022);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    isolation: isolate;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-profile-field.is-display-name,
.account-profile-field.is-timezone { --profile-field-accent: 254, 44, 85; }
.account-profile-field.is-bio,
.account-profile-field.is-email,
.account-profile-field.is-language { --profile-field-accent: 255, 255, 255; }
.account-profile-field::before {
    position: absolute;
    z-index: 0;
    top: 17px;
    bottom: 17px;
    left: 0;
    width: 3px;
    border-radius: 0 999px 999px 0;
    background: rgb(var(--profile-field-accent));
    content: "";
    opacity: 0.46;
    transform: scaleY(0.6);
    transition: opacity 180ms ease, transform 180ms var(--ease);
}
.account-profile-field > * { position: relative; z-index: 1; }
.account-profile-field:is(:hover, :focus-within) { border-color: rgba(var(--profile-field-accent), 0.4); background-color: rgba(var(--profile-field-accent), 0.04); box-shadow: inset 3px 0 0 rgba(var(--profile-field-accent), 0.68), 0 18px 42px rgba(0, 0, 0, 0.24); transform: translateY(-3px); }
.account-profile-field:is(:hover, :focus-within)::before { opacity: 1; transform: scaleY(1); }
.account-profile-field-label { display: flex !important; gap: 9px !important; align-items: center; color: #e5e5e9 !important; }
.account-profile-field-label > i { display: grid; width: 29px; height: 29px; place-items: center; flex: 0 0 auto; border: 1px solid rgba(var(--profile-field-accent), 0.18); border-radius: 9px; background: rgba(var(--profile-field-accent), 0.08); color: rgb(var(--profile-field-accent)); font-size: 11px; transition: background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.account-profile-field:is(:hover, :focus-within) .account-profile-field-label > i { background: rgba(var(--profile-field-accent), 0.16); box-shadow: 0 7px 18px rgba(var(--profile-field-accent), 0.11); transform: rotate(-5deg) scale(1.06); }
.account-profile-field :is(input, select, textarea) { border-color: rgba(var(--profile-field-accent), 0.16); background: rgba(4, 4, 6, 0.62); }
.account-profile-field :is(input, select, textarea):hover { border-color: rgba(var(--profile-field-accent), 0.29); }
.account-profile-field :is(input, select, textarea):focus { border-color: rgba(var(--profile-field-accent), 0.72); box-shadow: 0 0 0 3px rgba(var(--profile-field-accent), 0.09); }
.account-profile-field.is-bio { min-height: 206px; }
.account-profile-field.is-bio textarea { min-height: 122px; }
.account-profile-field.is-email input:disabled { border-style: dashed; background: rgba(255, 255, 255, 0.018); }
.account-profile-counter { justify-self: end; padding: 4px 8px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px; background: rgba(255, 255, 255, 0.035); }
.account-profile-counter b { color: var(--cyan); }
.account-profile-field-help { display: flex; gap: 7px; align-items: flex-start; }
.account-profile-field-help > i { margin-top: 2px; color: var(--pink); }
.account-profile-volume { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 15px; align-items: center; }
.account-profile-volume input[type="range"] { --account-volume-progress: 0%; appearance: none; min-height: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), #fff 52%, var(--pink)) 0 / var(--account-volume-progress) 100% no-repeat, rgba(255, 255, 255, 0.085); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 22px rgba(37, 244, 238, 0.08); cursor: pointer; transition: none; }
.account-profile-volume input[type="range"]::-webkit-slider-thumb { width: 23px; height: 23px; appearance: none; border: 3px solid #0b0b0d; border-radius: 50%; background: var(--cyan); box-shadow: 3px 3px 0 var(--pink), 0 7px 18px rgba(0, 0, 0, 0.35); transition: transform 160ms var(--ease), box-shadow 160ms ease; }
.account-profile-volume input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid #0b0b0d; border-radius: 50%; background: var(--cyan); box-shadow: 3px 3px 0 var(--pink), 0 7px 18px rgba(0, 0, 0, 0.35); }
.account-profile-volume input[type="range"]:hover::-webkit-slider-thumb { box-shadow: 4px 4px 0 var(--pink), 0 9px 22px rgba(0, 0, 0, 0.42); transform: scale(1.1); }
.account-profile-volume input[type="range"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 7px; }
.account-profile-volume output { display: inline-flex; min-width: 58px; min-height: 38px; align-items: center; justify-content: center; padding: 7px 10px; border: 1px solid rgba(37, 244, 238, 0.24); border-radius: 12px; background: rgba(37, 244, 238, 0.08); color: var(--cyan); font-size: 13px; font-weight: 900; }

.account-profile-switches { gap: 13px; }
.account-profile-switch {
    --profile-switch-accent: 37, 244, 238;
    position: relative;
    min-height: 96px;
    grid-template-columns: 45px 42px minmax(0, 1fr);
    gap: 12px !important;
    padding: 16px;
    overflow: hidden;
    border-color: rgba(var(--profile-switch-accent), 0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--profile-switch-accent), 0.085), transparent 48%),
        rgba(255, 255, 255, 0.024);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    isolation: isolate;
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}
.account-profile-switch:nth-child(2),
.account-profile-switch:nth-child(5) { --profile-switch-accent: 254, 44, 85; }
.account-profile-switch:nth-child(4) { --profile-switch-accent: 255, 255, 255; }
.account-profile-switch::before { position: absolute; z-index: 0; inset: 0 auto 0 0; width: 3px; border-radius: 18px; background: rgb(var(--profile-switch-accent)); content: ""; opacity: 0.4; transform: translateX(-2px); transition: opacity 180ms ease, transform 180ms var(--ease); }
.account-profile-switch > * { position: relative; z-index: 1; }
.account-profile-switch:hover { border-color: rgba(var(--profile-switch-accent), 0.4); background-color: rgba(var(--profile-switch-accent), 0.045); box-shadow: inset 3px 0 0 rgba(var(--profile-switch-accent), 0.7), 0 18px 42px rgba(0, 0, 0, 0.24); transform: translateY(-3px); }
.account-profile-switch:hover::before { opacity: 1; transform: translateX(0); }
.account-profile-switch > span { border-color: rgba(var(--profile-switch-accent), 0.28); }
.account-profile-switch input:checked + span { border-color: rgb(var(--profile-switch-accent)); background: rgba(var(--profile-switch-accent), 0.22); box-shadow: 0 0 0 3px rgba(var(--profile-switch-accent), 0.07); }
.account-profile-switch input:checked + span::after { background: rgb(var(--profile-switch-accent)); }
.account-profile-switch input:focus-visible + span { outline-color: rgb(var(--profile-switch-accent)); }
.account-switch-icon { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(var(--profile-switch-accent), 0.18); border-radius: 13px; background: rgba(var(--profile-switch-accent), 0.08); color: rgb(var(--profile-switch-accent)); font-size: 14px; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.account-profile-switch:hover .account-switch-icon { border-color: rgba(var(--profile-switch-accent), 0.38); background: rgba(var(--profile-switch-accent), 0.15); box-shadow: 0 9px 22px rgba(var(--profile-switch-accent), 0.12); transform: rotate(-6deg) scale(1.08); }
.account-profile-switch > div { min-width: 0; }
.account-profile-switch strong { font-size: 14px; }
.account-profile-switch small { font-size: 11px; line-height: 1.5; }

.account-profile-actions {
    position: relative;
    display: flex;
    min-height: 88px;
    align-items: center;
    justify-content: flex-end;
    padding: 17px 20px;
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 20px;
    background:
        radial-gradient(circle at 12% 50%, rgba(37, 244, 238, 0.1), transparent 34%),
        radial-gradient(circle at 88% 50%, rgba(254, 44, 85, 0.09), transparent 34%),
        rgba(15, 15, 18, 0.92);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
    animation: account-profile-panel-in 420ms 150ms var(--ease) both;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}
.account-profile-actions::before { position: absolute; top: 0; right: 22px; left: 22px; height: 2px; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--pink), transparent); content: ""; opacity: 0.55; transform: scaleX(0.82); transition: opacity 180ms ease, transform 180ms var(--ease); }
.account-profile-actions:hover { border-color: rgba(37, 244, 238, 0.4); box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.28), 3px -3px 0 rgba(254, 44, 85, 0.28), 0 26px 68px rgba(0, 0, 0, 0.32); transform: translateY(-3px); }
.account-profile-actions:hover::before { opacity: 1; transform: scaleX(1.04); }
.account-profile-save { position: relative; min-width: 300px; min-height: 54px; overflow: hidden; border-radius: 15px; }
.account-profile-save::before { position: absolute; top: -50%; left: -28%; width: 24%; height: 200%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent); content: ""; opacity: 0; transform: skewX(-18deg); transition: left 460ms var(--ease), opacity 160ms ease; }
.account-profile-save:hover::before { left: 112%; opacity: 0.72; }

.account-profile-form + .account-profile-gifts { margin-top: 32px; }
.account-shell.account-module-profile .account-profile-gifts {
    position: relative;
    padding: clamp(20px, 3vw, 28px);
    overflow: hidden;
    border-color: rgba(37, 244, 238, 0.24);
    background:
        radial-gradient(circle at 100% 0, rgba(254, 44, 85, 0.1), transparent 38%),
        radial-gradient(circle at 0 100%, rgba(37, 244, 238, 0.08), transparent 42%),
        var(--account-panel);
    box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.2), 3px -3px 0 rgba(254, 44, 85, 0.2), 0 24px 68px rgba(0, 0, 0, 0.28);
}
.account-shell.account-module-profile .account-profile-gifts::before { position: absolute; top: 0; right: 26px; left: 26px; height: 2px; border-radius: 0 0 999px 999px; background: linear-gradient(90deg, transparent, var(--cyan), #fff, var(--pink), transparent); content: ""; opacity: 0.72; }
.account-shell.account-module-profile .account-profile-gifts > header { margin-bottom: 10px; }
.account-shell.account-module-profile .account-profile-gifts > header > div > i { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.28); border-radius: 14px; background: rgba(37, 244, 238, 0.09); color: var(--cyan); }
.account-shell.account-module-profile .account-profile-gifts > header > a { display: inline-flex; min-height: 42px; gap: 8px; align-items: center; padding: 8px 13px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 12px; color: #fff; font-size: 14px; font-weight: 850; text-decoration: none; }
.account-shell.account-module-profile .account-profile-gifts > header > a:hover,
.account-shell.account-module-profile .account-profile-gifts > header > a:focus-visible { border-color: rgba(37, 244, 238, 0.5); outline: 0; background: rgba(37, 244, 238, 0.08); color: var(--cyan); }
.account-shell.account-module-profile .account-profile-gifts > .account-panel-copy { margin: 0 0 18px; font-size: 15px; line-height: 1.6; }
.account-profile-gift-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 360px));
    justify-content: start;
    gap: 13px;
}
.account-profile-gift-grid > article { display: grid; min-width: 0; grid-template-columns: 84px minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 17px; background: rgba(255, 255, 255, 0.035); transition: border-color 180ms ease, background 180ms ease, transform 180ms ease; }
.account-profile-gift-grid > article:hover { border-color: rgba(37, 244, 238, 0.34); background: rgba(37, 244, 238, 0.055); transform: translateY(-2px); }
.account-profile-gift-grid > article > span { display: grid; width: 84px; aspect-ratio: 1; place-items: center; border-radius: 15px; background: radial-gradient(circle, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.018) 68%); }
.account-profile-gift-grid > article > span > img { width: 76%; height: 76%; object-fit: contain; }
.account-profile-gift-grid > article > div { display: grid; min-width: 0; gap: 5px; }
.account-profile-gift-grid strong { overflow: hidden; color: #fff; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-gift-grid small,
.account-profile-gift-grid em { color: var(--muted); font-size: 14px; font-style: normal; line-height: 1.45; }
.account-profile-gift-grid em { color: var(--cyan); }
@keyframes account-profile-panel-in {
    from { opacity: 0; transform: translateY(14px) scale(0.99); }
}

/* Account chat */
.account-chat-layout {
    display: grid;
    height: clamp(650px, calc(100dvh - 255px), 820px);
    min-width: 0;
    max-height: 820px;
    grid-template-columns: minmax(230px, 278px) minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.17);
    border-radius: 26px;
    background: rgba(10, 10, 13, 0.94);
    box-shadow: 0 28px 82px rgba(0, 0, 0, 0.32);
    transition: border-color 200ms ease, box-shadow 220ms ease;
}
.account-chat-layout:hover { border-color: rgba(37, 244, 238, 0.27); box-shadow: 0 30px 88px rgba(0, 0, 0, 0.38), 0 0 34px rgba(37, 244, 238, 0.035); }

.account-chat-rooms {
    position: relative;
    display: block;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.075);
    background:
        linear-gradient(160deg, rgba(37, 244, 238, 0.075), transparent 34%),
        linear-gradient(335deg, rgba(254, 44, 85, 0.06), transparent 42%),
        #0d0d10;
}
.account-chat-directory-scroll { display: grid; width: 100%; height: 100%; min-width: 0; min-height: 0; grid-template-rows: auto auto auto auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto; padding: 18px 13px 13px; scrollbar-width: none; }
.account-chat-directory-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.account-chat-directory-scrollbar { position: absolute; z-index: 7; top: 14px; right: 5px; bottom: 14px; display: block; width: 6px; overflow: hidden; border-radius: 999px; background: transparent; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.account-chat-directory-scrollbar.is-visible { opacity: 1; }
.account-chat-directory-scrollbar > i { position: absolute; top: 0; right: 0; display: block; width: 100%; height: 46px; border-radius: 999px; background: linear-gradient(180deg, rgba(37, 244, 238, 0.88), rgba(37, 244, 238, 0.5)); box-shadow: 0 0 9px rgba(37, 244, 238, 0.2); transform: translateY(var(--account-chat-directory-thumb-top, 0)); transition: height 120ms ease, transform 90ms linear; }
.account-chat-directory-scroll > header { display: flex; gap: 11px; align-items: center; padding: 5px 7px 17px; }
.account-chat-directory-scroll > header > span { display: grid; width: 42px; height: 42px; place-items: center; flex: 0 0 auto; border-radius: 13px; background: linear-gradient(135deg, rgba(37, 244, 238, 0.16), rgba(254, 44, 85, 0.13)); color: var(--cyan); }
.account-chat-rooms h2 { margin: 0; font-size: 18px; }
.account-chat-rooms header p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.account-chat-directory-scroll > header p b { color: #fff; font-weight: 850; }
.account-chat-directory-scroll > nav { display: grid; align-content: start; gap: 7px; min-height: auto; overflow: visible; padding: 2px 7px 14px 3px; }
.account-chat-directory-list::-webkit-scrollbar,
.account-chat-stream::-webkit-scrollbar { width: 7px; height: 7px; }
.account-chat-directory-list::-webkit-scrollbar-track,
.account-chat-stream::-webkit-scrollbar-track { margin-block: 9px; border-radius: 999px; background: transparent; }
.account-chat-directory-list::-webkit-scrollbar-thumb,
.account-chat-stream::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(37, 244, 238, 0.48); background-clip: padding-box; }
.account-chat-directory-list::-webkit-scrollbar-thumb:hover,
.account-chat-stream::-webkit-scrollbar-thumb:hover { background-color: rgba(254, 44, 85, 0.62); }
.account-module-chat ::-webkit-scrollbar-button { display: none !important; width: 0 !important; min-width: 0 !important; height: 0 !important; min-height: 0 !important; background: transparent !important; }
.account-module-chat ::-webkit-scrollbar-track-piece,
.account-module-chat ::-webkit-scrollbar-corner { background: transparent; }
.account-chat-directory-scroll > nav > a {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 11px 9px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 15px;
    color: #bdbdc4;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease;
}
.account-chat-directory-scroll > nav > a::before { position: absolute; inset: 0 auto 0 0; width: 3px; border-radius: 15px; background: linear-gradient(var(--cyan), var(--pink)); content: ""; opacity: 0; transform: translateX(-3px); transition: inherit; }
.account-chat-directory-scroll > nav > a:hover,
.account-chat-directory-scroll > nav > a.is-current { border-color: rgba(37, 244, 238, 0.17); background: rgba(255, 255, 255, 0.05); color: #fff; transform: translateX(2px); }
.account-chat-directory-scroll > nav > a.is-current { background: linear-gradient(90deg, rgba(37, 244, 238, 0.105), rgba(254, 44, 85, 0.045)); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2); }
.account-chat-directory-scroll > nav > a.is-current::before { opacity: 1; transform: none; }
.account-chat-directory-scroll > nav > a > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.055); color: #d7d7dc; }
.account-chat-directory-scroll > nav > a > .account-chat-room-avatar { overflow: hidden; background: linear-gradient(135deg, rgba(37, 244, 238, 0.9), #fff 52%, rgba(254, 44, 85, 0.9)); color: #08080a; font-size: 11px; font-weight: 900; }
.account-chat-room-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-chat-directory-scroll > nav > a.is-current > span { background: rgba(37, 244, 238, 0.12); color: var(--cyan); }
.account-chat-directory-scroll > nav > a.is-current > .account-chat-room-avatar { background: linear-gradient(135deg, rgba(37, 244, 238, 0.96), #fff 52%, rgba(254, 44, 85, 0.96)); color: #08080a; }
.account-chat-directory-scroll > nav > a > div { display: grid; min-width: 0; gap: 2px; }
.account-chat-directory-scroll > nav strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-directory-scroll > nav small { overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-directory-scroll > nav em { display: flex; gap: 5px; align-items: center; color: #83838b; font-size: 12px; font-style: normal; }
.account-chat-directory-scroll > nav em i { font-size: 9px; }
.account-chat-directory-scroll > nav em .account-chat-online-dot { margin-left: 5px; color: var(--success); font-size: 6px; filter: drop-shadow(0 0 4px rgba(56, 217, 150, 0.75)); }
.account-chat-directory-scroll > nav > a > b { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 11px; line-height: 22px; text-align: center; }
.account-chat-online { display: grid; min-width: 0; min-height: auto; grid-template-rows: auto auto; padding: 10px 3px 4px; overflow: visible; border-top: 1px solid rgba(255, 255, 255, 0.075); }
.account-chat-directory-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; margin: 0 3px 8px; }
.account-chat-directory-tabs > button { display: flex; min-width: 0; min-height: 34px; gap: 5px; align-items: center; justify-content: center; padding: 5px 7px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 10px; background: rgba(255, 255, 255, 0.025); color: #9999a1; font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; }
.account-chat-directory-tabs > button span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-directory-tabs > button b { min-width: 18px; height: 18px; padding-inline: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.065); color: #d7d7dc; font-size: 9px; line-height: 18px; text-align: center; }
.account-chat-directory-tabs > button.is-active { border-color: rgba(37, 244, 238, 0.26); background: rgba(37, 244, 238, 0.075); color: #fff; }
.account-chat-directory-tabs > button.is-active i { color: var(--cyan); }
.account-chat-directory-panel { display: grid; min-height: 0; grid-template-rows: auto auto auto; }
.account-chat-directory-panel[hidden] { display: none; }
.account-chat-directory-search { display: grid; min-width: 0; grid-template-columns: 28px minmax(0, 1fr); align-items: center; margin: 0 3px 7px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; background: rgba(255, 255, 255, 0.025); color: #777780; transition: border-color 160ms ease, color 160ms ease; }
.account-chat-directory-search:focus-within { border-color: rgba(37, 244, 238, 0.32); color: var(--cyan); }
.account-chat-directory-search > i { justify-self: center; font-size: 10px; }
.account-chat-directory-search input { width: 100%; min-width: 0; height: 32px; padding: 5px 8px 5px 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 11px; }
.account-chat-online > header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; padding: 0 6px 8px; }
.account-chat-online > header > div { display: flex; min-width: 0; gap: 7px; align-items: center; color: #d8d8dd; font-size: 12px; }
.account-chat-online > header i { color: var(--success); filter: drop-shadow(0 0 5px rgba(56, 217, 150, 0.5)); }
.account-chat-online > header b { min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid rgba(56, 217, 150, 0.2); border-radius: 999px; background: rgba(56, 217, 150, 0.075); color: var(--success); font-size: 11px; line-height: 20px; text-align: center; }
.account-chat-directory-list { display: grid; min-height: 0; max-height: none; grid-auto-rows: max-content; gap: 5px; align-content: start; overflow: visible; padding: 1px 3px 3px; }
.account-chat-online article { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 28px; gap: 6px; align-self: start; align-items: center; padding: 6px; border: 1px solid transparent; border-radius: 12px; background: rgba(255, 255, 255, 0.022); transition: border-color 170ms ease, background 170ms ease, transform 170ms var(--ease); }
.account-chat-online article.has-no-action { grid-template-columns: minmax(0, 1fr); }
.account-chat-online article:hover { border-color: rgba(37, 244, 238, 0.16); background: rgba(37, 244, 238, 0.045); transform: translateX(2px); }
.account-chat-online article > a { display: grid; min-width: 0; grid-template-columns: 32px minmax(0, 1fr); gap: 8px; align-items: center; color: #e5e5e9; }
.account-chat-online article > a > span:last-child { display: grid; min-width: 0; }
.account-chat-online article strong,
.account-chat-online article small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-online article strong { font-size: 12px; }
.account-chat-online article small { color: var(--muted); font-size: 10px; }
.account-chat-online article small i { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--success); box-shadow: 0 0 6px rgba(56, 217, 150, 0.65); }
.account-chat-online article small i.is-away { background: var(--warning); box-shadow: none; }
.account-chat-online-avatar { display: grid; width: 32px; height: 32px; place-items: center; overflow: hidden; border-radius: 10px; background: linear-gradient(135deg, rgba(37, 244, 238, 0.9), #fff 52%, rgba(254, 44, 85, 0.9)); color: #08080a; font-size: 10px; font-weight: 900; }
.account-chat-online-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-chat-online article form { margin: 0; }
.account-chat-online article form button { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.15); border-radius: 9px; background: rgba(37, 244, 238, 0.055); color: var(--cyan); font-size: 10px; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms var(--ease); }
.account-chat-online article form button:hover { border-color: rgba(254, 44, 85, 0.42); background: rgba(254, 44, 85, 0.1); color: #fff; transform: translateY(-1px); }
.account-chat-online [data-chat-online-empty] { margin: 3px 6px 7px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.account-chat-online [data-chat-online-empty][hidden] { display: none; }
.account-chat-online [data-chat-friends-empty] { margin: 3px 6px 7px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.account-chat-online [data-chat-friends-empty][hidden] { display: none; }
.account-chat-directory-pagination { display: flex; gap: 7px; align-items: center; justify-content: center; padding: 7px 3px 0; }
.account-chat-directory-pagination button { display: grid; width: 27px; height: 27px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 9px; background: rgba(255, 255, 255, 0.03); color: #b7b7bd; font-size: 9px; cursor: pointer; }
.account-chat-directory-pagination button:disabled { opacity: 0.34; cursor: default; }
.account-chat-directory-pagination span { min-width: 46px; color: #8d8d95; font-size: 10px; font-weight: 800; text-align: center; }
.account-chat-rules { display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 11px 10px; border-top: 1px solid rgba(255, 255, 255, 0.075); color: #bfc0c6; font-size: 13px; font-weight: 750; }
.account-chat-rules > i:first-child { color: var(--cyan); }
.account-chat-rules > i:last-child { margin-left: auto; color: var(--pink); transition: transform 180ms var(--ease); }
.account-chat-rules:hover > i:last-child { transform: translateX(3px); }

.account-chat-stage { position: relative; display: grid; min-width: 0; min-height: 0; overflow: hidden; grid-template-rows: auto auto minmax(0, 1fr) auto; background: radial-gradient(circle at 90% 0, rgba(254, 44, 85, 0.07), transparent 30%), #111115; }
.account-chat-stage-head { position: relative; z-index: 4; display: flex; min-width: 0; grid-row: 1; justify-content: space-between; gap: 18px; align-items: center; padding: 17px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.075); background: rgba(8, 8, 10, 0.96); }
.account-chat-stage-head > div:first-child { display: grid; min-width: 0; grid-template-columns: 45px minmax(0, 1fr); gap: 3px 12px; align-items: center; }
.account-chat-stage-head > div:first-child > span { display: grid; width: 45px; height: 45px; grid-column: 1; grid-row: 1 / 3; place-items: center; border: 1px solid rgba(37, 244, 238, 0.18); border-radius: 14px; background: rgba(37, 244, 238, 0.08); color: var(--cyan); }
.account-chat-stage-head > div:first-child > .account-chat-stage-avatar { overflow: hidden; background: linear-gradient(135deg, rgba(37, 244, 238, 0.94), #fff 52%, rgba(254, 44, 85, 0.94)); color: #08080a; font-size: 13px; font-weight: 900; }
.account-chat-stage-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-chat-stage-head > div:first-child > div { min-width: 0; grid-column: 2; grid-row: 1; }
.account-chat-stage-head h2 { margin: 0; font-size: 20px; }
.account-chat-stage-head p { max-width: 600px; margin: 3px 0 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-stage-head > div:first-child.is-direct p { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.account-chat-history-scope { display: flex; width: fit-content; min-width: 0; grid-column: 2; grid-row: 2; gap: 5px; align-items: center; margin-top: 1px; color: #92929a; font-size: 10px; font-weight: 700; }
.account-chat-history-scope i { color: var(--cyan); }
.account-chat-stage-head dl { display: flex; flex: 0 0 auto; gap: 8px; margin: 0; }
.account-chat-stage-head dl > div { display: grid; min-width: 70px; gap: 1px; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 12px; background: rgba(255, 255, 255, 0.035); text-align: center; }
.account-chat-stage-head dt { color: var(--muted); font-size: 11px; }
.account-chat-stage-head dd { margin: 0; color: var(--cyan); font-size: 15px; font-weight: 850; }
.account-chat-stage-actions { display: flex; flex: 0 0 auto; gap: 8px; align-items: center; }
.account-chat-dialog-menu { position: relative; }
.account-chat-dialog-menu > summary { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 11px; background: rgba(255, 255, 255, 0.035); color: #c9c9ce; list-style: none; cursor: pointer; }
.account-chat-dialog-menu > summary::-webkit-details-marker { display: none; }
.account-chat-dialog-menu > div { position: absolute; z-index: 30; top: calc(100% + 8px); right: 0; display: grid; width: min(270px, calc(100vw - 36px)); gap: 4px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 13px; background: #19191e; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.5); }
.account-chat-dialog-menu form { margin: 0; }
.account-chat-dialog-menu button { display: flex; width: 100%; gap: 8px; align-items: center; padding: 10px; border: 0; border-radius: 9px; background: transparent; color: #d9d9de; font: inherit; font-size: 12px; cursor: pointer; }
.account-chat-dialog-menu button:hover { background: rgba(255, 255, 255, 0.055); }
.account-chat-dialog-menu button.is-danger { color: #ff718c; }
.account-chat-restriction { display: flex; grid-row: 2; gap: 12px; align-items: center; margin: 13px 17px 0; padding: 12px 14px; border: 1px solid rgba(255, 202, 92, 0.24); border-radius: 15px; background: rgba(255, 202, 92, 0.07); color: var(--warning); }
.account-chat-restriction > i { font-size: 20px; }
.account-chat-restriction > div { display: grid; gap: 2px; }
.account-chat-restriction span,
.account-chat-restriction small { color: #c8bd9e; font-size: 13px; }
.account-chat-restriction.is-global { border-color: rgba(254, 44, 85, 0.3); background: linear-gradient(105deg, rgba(254, 44, 85, 0.09), rgba(37, 244, 238, 0.045)); color: #ff7590; }
.account-chat-restriction.is-global > div { min-width: 0; flex: 1 1 auto; }
.account-chat-restriction.is-global > form { flex: 0 0 auto; margin: 0 0 0 auto; }
.account-chat-restriction.is-global .account-button { min-height: 38px; padding: 7px 11px; white-space: nowrap; }

.account-chat-stream { min-width: 0; min-height: 0; grid-row: 3; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto; padding: 20px 16px 20px 20px; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: rgba(37, 244, 238, 0.4) rgba(255, 255, 255, 0.025); }
.account-chat-stream:focus-visible { outline: 1px solid rgba(37, 244, 238, 0.42); outline-offset: -3px; }
.account-chat-message-list { display: grid; gap: 17px; }
.account-chat-system-message { position: relative; display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: center; padding: 12px 14px; overflow: hidden; border: 1px solid rgba(37, 244, 238, 0.22); border-radius: 16px; background: linear-gradient(112deg, rgba(37, 244, 238, 0.085), rgba(255, 255, 255, 0.025) 48%, rgba(254, 44, 85, 0.065)); box-shadow: inset 3px 0 0 rgba(37, 244, 238, 0.62), 0 12px 28px rgba(0, 0, 0, 0.14); animation: account-chat-message-in 260ms var(--ease) both; }
.account-chat-system-message::after { position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, var(--cyan), rgba(255, 255, 255, 0.42), var(--pink)); content: ''; }
.account-chat-system-message.is-mute { border-color: rgba(254, 44, 85, 0.28); box-shadow: inset 3px 0 0 rgba(254, 44, 85, 0.72), 0 12px 28px rgba(0, 0, 0, 0.16); }
.account-chat-system-message.is-warning { border-color: rgba(255, 202, 92, 0.27); box-shadow: inset 3px 0 0 rgba(255, 202, 92, 0.76), 0 12px 28px rgba(0, 0, 0, 0.16); }
.account-chat-system-message.is-dice { border-color: rgba(37, 244, 238, 0.32); background: radial-gradient(circle at 8% 10%, rgba(37, 244, 238, 0.13), transparent 34%), linear-gradient(112deg, rgba(37, 244, 238, 0.085), rgba(255, 255, 255, 0.025) 48%, rgba(254, 44, 85, 0.095)); box-shadow: inset 3px 0 0 rgba(37, 244, 238, 0.78), 0 14px 32px rgba(0, 0, 0, 0.2); }
.account-chat-system-message > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.28); border-radius: 13px; background: rgba(37, 244, 238, 0.09); color: var(--cyan); font-size: 17px; }
.account-chat-system-message.is-mute > span { border-color: rgba(254, 44, 85, 0.3); background: rgba(254, 44, 85, 0.1); color: #ff7590; }
.account-chat-system-message.is-warning > span { border-color: rgba(255, 202, 92, 0.3); background: rgba(255, 202, 92, 0.09); color: var(--warning); }
.account-chat-system-message.is-dice > span { border-color: rgba(37, 244, 238, 0.44); background: linear-gradient(145deg, rgba(37, 244, 238, 0.16), rgba(254, 44, 85, 0.1)); box-shadow: -1px 1px 0 rgba(37, 244, 238, 0.5), 1px -1px 0 rgba(254, 44, 85, 0.38); color: #fff; }
.account-chat-system-message > span > i { animation: account-chat-system-icon 3.2s ease-in-out infinite; }
.account-chat-system-message.is-dice > span > i { animation: account-chat-dice-badge 2.8s ease-in-out infinite; }
@keyframes account-chat-system-icon { 0%, 82%, 100% { transform: scale(1) rotate(0); } 88% { transform: scale(1.08) rotate(-5deg); } 94% { transform: scale(1.04) rotate(4deg); } }
@keyframes account-chat-dice-badge { 0%, 76%, 100% { filter: drop-shadow(0 0 0 transparent); transform: rotate(0) scale(1); } 84% { filter: drop-shadow(0 0 7px rgba(37, 244, 238, 0.8)); transform: rotate(-12deg) scale(1.1); } 92% { transform: rotate(9deg) scale(1.06); } }
.account-chat-system-message > div { min-width: 0; }
.account-chat-system-message header { display: flex; gap: 10px; align-items: center; }
.account-chat-system-message header strong { color: #f6f6f8; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.account-chat-system-message header time { margin-left: auto; color: #85858d; font-size: 11px; white-space: nowrap; }
.account-chat-system-message p { margin: 5px 0 0; overflow-wrap: anywhere; color: #d7d7dc; font-size: 13px; line-height: 1.5; }
.account-chat-dice-result { display: flex; width: fit-content; gap: 6px; align-items: center; margin-top: 7px; padding: 5px 8px; border: 1px solid rgba(37, 244, 238, 0.2); border-radius: 10px; background: rgba(4, 4, 7, 0.28); color: var(--cyan); }
.account-chat-dice-result > i { color: #fff; font-size: 18px; filter: drop-shadow(0 0 7px rgba(37, 244, 238, 0.38)); }
.account-chat-dice-result > b { min-width: 10px; color: var(--cyan); font-size: 12px; text-align: center; }
.account-chat-dice-result > em { color: var(--pink); font-size: 12px; font-style: normal; font-weight: 900; }
.account-chat-dice-next { position: relative; display: flex; width: fit-content; gap: 6px; align-items: center; margin-top: 6px; color: #9ca8aa; font-size: 11px; font-weight: 700; }
.account-chat-dice-next::before { box-sizing: border-box; width: 13px; height: 13px; flex: 0 0 13px; border: 1.5px solid var(--cyan); border-radius: 50%; background: radial-gradient(circle at center, var(--cyan) 0 1px, transparent 1.5px); box-shadow: 0 0 7px rgba(37, 244, 238, 0.2); content: ""; }
.account-chat-dice-next::after { position: absolute; top: 50%; left: 6px; width: 4px; height: 1.5px; border-radius: 99px; background: var(--cyan); content: ""; transform: translateY(-50%) rotate(-48deg); transform-origin: left center; }
.account-chat-empty[hidden] { display: none; }
.account-chat-empty .account-empty { min-height: 86px; justify-content: flex-start; padding: 14px 16px; }
.account-chat-empty .account-empty > span { width: 38px; height: 38px; border-radius: 12px; }
.account-chat-empty .account-empty p { margin-bottom: 0; }
.account-chat-latest { position: sticky; z-index: 8; bottom: 0; display: flex; width: max-content; min-height: 38px; gap: 8px; align-items: center; margin: 15px auto 0; padding: 7px 13px; border: 1px solid rgba(37, 244, 238, 0.33); border-radius: 999px; background: rgba(13, 13, 17, 0.96); box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48), -1px 1px 0 rgba(37, 244, 238, 0.28), 1px -1px 0 rgba(254, 44, 85, 0.22); color: #f4f4f6; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; backdrop-filter: blur(12px); transition: border-color 170ms ease, background 170ms ease, color 170ms ease, transform 170ms var(--ease); }
.account-chat-latest[hidden] { display: none; }
.account-chat-latest > i { color: var(--cyan); }
.account-chat-latest:hover,
.account-chat-latest:focus-visible { border-color: rgba(254, 44, 85, 0.52); outline: 0; background: #18181d; color: #fff; transform: translateY(-2px); }
.account-chat-message { position: relative; z-index: 0; display: grid; min-width: 0; grid-template-columns: 44px minmax(0, 1fr); gap: 11px; align-items: start; animation: account-chat-message-in 260ms var(--ease) both; }
.account-chat-message.has-open-menu { z-index: 12; }
@keyframes account-chat-message-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } }
.account-chat-avatar { display: grid; width: 44px; height: 44px; place-items: center; overflow: hidden; border: 2px solid #111115; border-radius: 14px; background: linear-gradient(135deg, var(--cyan), #fff 48%, var(--pink)); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.65), 2px -2px 0 rgba(254, 44, 85, 0.65); color: #050505; font-size: 14px; font-weight: 900; }
.account-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-chat-bubble { min-width: 0; padding: 13px 15px 10px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 5px 18px 18px; background: rgba(255, 255, 255, 0.032); transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.account-chat-message:hover .account-chat-bubble { border-color: rgba(37, 244, 238, 0.18); background: rgba(37, 244, 238, 0.035); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18); transform: translateX(2px); }
.account-chat-message.is-own .account-chat-bubble { border-color: rgba(254, 44, 85, 0.13); background: linear-gradient(110deg, rgba(254, 44, 85, 0.047), rgba(37, 244, 238, 0.025)); }
.account-chat-bubble > header { display: flex; min-width: 0; gap: 8px; align-items: center; }
.account-chat-bubble > header > div { display: flex; min-width: 0; gap: 6px; align-items: center; }
.account-chat-bubble > header strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-bubble > header span { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-bubble > header > div > i { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #606068; }
.account-chat-bubble > header > div > i.is-online { background: var(--success); box-shadow: 0 0 8px rgba(56, 217, 150, 0.72); }
.account-chat-bubble > header > div > i.is-away { background: var(--warning); }
.account-chat-profile-link { display: grid; width: 27px; height: 27px; place-items: center; flex: 0 0 auto; border: 1px solid rgba(37, 244, 238, 0.18); border-radius: 9px; background: rgba(37, 244, 238, 0.055); color: var(--cyan); font-size: 11px; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease, transform 160ms var(--ease); }
.account-chat-profile-link:hover,
.account-chat-profile-link:focus-visible { border-color: rgba(254, 44, 85, 0.5); outline: 0; background: rgba(254, 44, 85, 0.12); color: #fff; box-shadow: 2px 2px 0 rgba(37, 244, 238, 0.38); transform: translateY(-2px) rotate(-4deg); }
.account-chat-bubble > header time { margin-left: auto; color: #777780; font-size: 11px; white-space: nowrap; }
.account-chat-bubble > header em { color: #8f8f97; font-size: 11px; font-style: normal; }
.account-chat-bubble blockquote { margin: 10px 0 8px; padding: 8px 10px; overflow: hidden; border-left: 3px solid var(--cyan); border-radius: 0 10px 10px 0; background: rgba(37, 244, 238, 0.05); }
.account-chat-bubble blockquote span { color: var(--cyan); font-size: 11px; font-weight: 800; }
.account-chat-bubble blockquote p { margin: 2px 0 0; overflow: hidden; color: #a9a9b0; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-copy { margin: 8px 0 5px; overflow-wrap: anywhere; color: #ececf0; font-size: 14px; line-height: 1.55; }
.account-chat-copy a { color: var(--cyan); text-decoration: underline; text-decoration-color: rgba(37, 244, 238, 0.36); text-underline-offset: 3px; }
.account-chat-copy mark { padding: 0 2px; border-radius: 4px; background: rgba(254, 44, 85, 0.11); color: #ff7590; }
.account-chat-reactions { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.account-chat-reactions:empty { display: none; }
.account-chat-reactions form { margin: 0; }
.account-chat-reactions button { display: inline-flex; min-height: 28px; gap: 5px; align-items: center; padding: 3px 8px; border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 999px; background: rgba(255, 255, 255, 0.035); color: #d9d9dd; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease); }
.account-chat-reactions button:hover,
.account-chat-reactions button.is-reacted { border-color: rgba(37, 244, 238, 0.3); background: rgba(37, 244, 238, 0.09); transform: translateY(-1px); }
.account-chat-reactions button b { color: var(--muted); font-size: 11px; }
.account-chat-bubble > footer { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; margin-top: 6px; }
.account-chat-bubble > footer > button,
.account-chat-bubble > footer > form > button,
.account-chat-bubble > footer > details > summary { display: inline-flex; min-height: 30px; gap: 6px; align-items: center; padding: 4px 7px; border: 0; border-radius: 8px; background: transparent; color: #85858e; font: inherit; font-size: 11px; font-weight: 700; list-style: none; cursor: pointer; transition: background 160ms ease, color 160ms ease; }
.account-chat-gift { display: inline-flex; min-height: 30px; gap: 6px; align-items: center; padding: 4px 7px; border-radius: 8px; color: #a8a8af; font-size: 11px; font-weight: 750; transition: background 160ms ease, color 160ms ease, transform 160ms var(--ease); }
.account-chat-gift > i { color: var(--pink); }
.account-chat-gift:hover,
.account-chat-gift:focus-visible { outline: 0; background: rgba(254, 44, 85, 0.1); color: #fff; transform: translateY(-1px); }
.account-chat-bubble > footer > :is(button, form > button, details > summary):hover { background: rgba(255, 255, 255, 0.055); color: #fff; }
.account-chat-bubble > footer .is-danger:hover { color: #ff718c; }
.account-chat-bubble details { position: relative; }
.account-chat-bubble summary::-webkit-details-marker { display: none; }
.account-chat-reaction-picker > div,
.account-chat-more > div { position: absolute; z-index: 9; bottom: calc(100% + 7px); display: flex; gap: 5px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 13px; background: #19191e; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.45); }
.account-chat-reaction-picker > div { left: 0; }
.account-chat-reaction-picker > div form { margin: 0; }
.account-chat-reaction-picker > div button { width: 34px; height: 34px; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.045); font-size: 18px; cursor: pointer; transition: transform 160ms var(--ease), background 160ms ease; }
.account-chat-reaction-picker > div button:hover { background: rgba(37, 244, 238, 0.1); transform: scale(1.13) rotate(-4deg); }
.account-chat-more { margin-left: auto; }
.account-chat-more > div { right: 0; display: grid; width: min(310px, 82vw); max-height: min(440px, calc(100dvh - 180px)); gap: 5px; overflow-x: hidden; overflow-y: auto; }
.account-chat-bubble details.is-drop-down > div { top: calc(100% + 7px); bottom: auto; }
.account-chat-message:nth-child(-n + 3) .account-chat-more > div,
.account-chat-message:nth-child(-n + 3) .account-chat-reaction-picker > div { top: calc(100% + 7px); bottom: auto; }
.account-chat-more > div > form > button,
.account-chat-more > div > .account-chat-more-action { display: flex; width: 100%; gap: 8px; align-items: center; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; color: #d4d4d9; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.account-chat-more > div > form > button:hover,
.account-chat-more > div > .account-chat-more-action:hover:not(:disabled) { background: rgba(255, 255, 255, 0.055); }
.account-chat-more > div > .account-chat-more-action:focus-visible { outline: 1px solid rgba(37, 244, 238, 0.42); background: rgba(37, 244, 238, 0.07); }
.account-chat-more > div > .account-chat-more-action:disabled { color: #72727a; cursor: default; opacity: 0.66; }
.account-chat-more .is-danger { color: #ff718c; }

.account-chat-composer { position: relative; z-index: 3; display: grid; min-width: 0; grid-row: 4; gap: 9px; padding: 13px 17px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); background: rgba(9, 9, 11, 0.94); box-shadow: 0 -16px 38px rgba(0, 0, 0, 0.2); }
.account-chat-context { display: grid; min-width: 0; grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 9px; align-items: center; padding: 8px 9px; border: 1px solid rgba(37, 244, 238, 0.16); border-radius: 12px; background: rgba(37, 244, 238, 0.05); }
.account-chat-context[hidden] { display: none; }
.account-chat-context > i { color: var(--cyan); text-align: center; }
.account-chat-context > div { display: grid; min-width: 0; }
.account-chat-context span { color: var(--cyan); font-size: 11px; font-weight: 800; }
.account-chat-context strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-context > button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 9px; background: rgba(255, 255, 255, 0.05); color: var(--muted); cursor: pointer; }
.account-chat-composer > label { display: block; }
.account-chat-composer textarea { width: 100%; min-height: 78px; max-height: 180px; padding: 12px 13px; resize: vertical; border: 1px solid rgba(255, 255, 255, 0.105); border-radius: 15px; outline: 0; background: rgba(255, 255, 255, 0.035); color: #fff; font: inherit; font-size: 14px; line-height: 1.5; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.account-chat-composer textarea:focus { border-color: rgba(37, 244, 238, 0.45); background: rgba(37, 244, 238, 0.035); box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.075); }
.account-chat-composer > footer { display: flex; min-width: 0; gap: 10px; align-items: center; }
.account-chat-composer > footer > span { display: flex; align-self: stretch; align-items: center; margin-left: auto; color: var(--muted); font-size: 12px; line-height: 1; }
.account-chat-dice-button { display: inline-flex; min-height: 38px; gap: 5px; align-items: center; padding: 7px 9px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 11px; background: rgba(255, 255, 255, 0.035); color: #c9c9cf; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, color 180ms ease, opacity 180ms ease, transform 180ms var(--ease); }
.account-chat-dice-button > i { color: #a4a4ab; font-size: 13px; transition: color 180ms ease, transform 180ms var(--ease); }
.account-chat-dice-button > b { min-width: 31px; padding: 3px 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.065); color: #a9a9b0; font-size: 9px; line-height: 1; text-align: center; }
.account-chat-dice-button.is-ready { border-color: rgba(37, 244, 238, 0.42); background: linear-gradient(135deg, rgba(37, 244, 238, 0.11), rgba(254, 44, 85, 0.075)); box-shadow: -1px 1px 0 rgba(37, 244, 238, 0.4), 1px -1px 0 rgba(254, 44, 85, 0.3); color: #fff; }
.account-chat-dice-button.is-ready > i:first-child { color: var(--cyan); }
.account-chat-dice-button.is-ready > i:nth-child(2) { color: var(--pink); }
.account-chat-dice-button:hover:not(:disabled),
.account-chat-dice-button:focus-visible { border-color: rgba(254, 44, 85, 0.56); outline: 0; background: linear-gradient(135deg, rgba(37, 244, 238, 0.14), rgba(254, 44, 85, 0.12)); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.42), 2px -2px 0 rgba(254, 44, 85, 0.38); transform: translateY(-2px); }
.account-chat-dice-button:disabled { cursor: default; opacity: 0.72; }
.account-chat-dice-button[hidden] { display: none; }
.account-chat-dice-button.is-rolling > i:first-child { animation: account-chat-dice-roll-left 520ms linear infinite; }
.account-chat-dice-button.is-rolling > i:nth-child(2) { animation: account-chat-dice-roll-right 520ms linear infinite; }
.account-chat-dice-button.is-landed { animation: account-chat-dice-land 620ms var(--ease); }
@keyframes account-chat-dice-roll-left { to { transform: rotate(360deg) scale(1.14); } }
@keyframes account-chat-dice-roll-right { to { transform: rotate(-360deg) scale(1.14); } }
@keyframes account-chat-dice-land { 35% { box-shadow: 0 0 0 5px rgba(37, 244, 238, 0.1), -2px 2px 0 rgba(37, 244, 238, 0.45), 2px -2px 0 rgba(254, 44, 85, 0.4); transform: translateY(-3px) scale(1.04); } }
.account-chat-emoji { position: relative; }
.account-chat-emoji > summary { display: inline-flex; min-height: 38px; gap: 7px; align-items: center; padding: 7px 10px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 11px; background: rgba(255, 255, 255, 0.035); color: #cacacf; font-size: 12px; font-weight: 750; list-style: none; cursor: pointer; }
.account-chat-emoji > summary,
.account-chat-composer > footer > .account-button { justify-content: center; line-height: 1; }
.account-chat-emoji > summary > i,
.account-chat-composer > footer > .account-button > i,
.account-chat-sidebar-opener > i,
.account-chat-sidebar-close > i { display: grid; place-items: center; line-height: 1; }
.account-chat-emoji > summary::-webkit-details-marker { display: none; }
.account-chat-emoji > .account-chat-emoji-panel { position: absolute; bottom: calc(100% + 8px); left: 0; display: grid; width: min(344px, calc(100vw - 44px)); max-height: 300px; gap: 10px; overflow-x: hidden; overflow-y: auto; padding: 11px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 14px; background: #19191e; box-shadow: 0 18px 46px rgba(0, 0, 0, 0.48); scrollbar-width: thin; scrollbar-color: rgba(37, 244, 238, 0.42) transparent; }
.account-chat-emoji-panel section { display: grid; gap: 5px; }
.account-chat-emoji-panel section > strong { color: #8e8e96; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; }
.account-chat-emoji-panel section > div { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.account-chat-emoji-panel button { display: grid; width: 34px; height: 34px; place-items: center; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.04); font-size: 18px; cursor: pointer; transition: background 150ms ease, transform 150ms var(--ease); }
.account-chat-emoji-panel button:hover { background: rgba(254, 44, 85, 0.11); transform: scale(1.12); }
.account-chat-composer .account-button { min-width: 126px; }

.account-chat-sidebar-opener,
.account-chat-sidebar-close,
.account-chat-sidebar-backdrop { display: none; }

.account-chat-gift-dialog {
    width: min(820px, calc(100vw - 34px));
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 26px;
    background: transparent;
    color: #fff;
}
.account-chat-gift-dialog:not([open]) { display: none; }
.account-chat-gift-dialog::backdrop { background: rgba(2, 2, 4, 0.88); backdrop-filter: blur(11px) saturate(0.88); }
.account-chat-gift-card {
    display: grid;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    gap: 18px;
    padding: clamp(20px, 3.2vw, 30px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 26px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        radial-gradient(circle at 8% 0, rgba(37, 244, 238, 0.09), transparent 28%),
        radial-gradient(circle at 92% 4%, rgba(254, 44, 85, 0.08), transparent 27%),
        #0b0b0e;
    background-size: 24px 24px, 24px 24px, auto, auto, auto;
    background-clip: padding-box;
    box-shadow: -5px 5px 0 rgba(37, 244, 238, 0.68), 5px -5px 0 rgba(254, 44, 85, 0.68), 0 34px 92px rgba(0, 0, 0, 0.68);
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 244, 238, 0.46) transparent;
}
.account-chat-gift-card::-webkit-scrollbar { width: 8px; }
.account-chat-gift-card::-webkit-scrollbar-track { margin-block: 15px; background: transparent; }
.account-chat-gift-card::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 999px; background: rgba(37, 244, 238, 0.5); background-clip: padding-box; }
.account-chat-gift-card::-webkit-scrollbar-button,
.account-chat-gift-card::-webkit-scrollbar-button:single-button,
.account-chat-gift-card::-webkit-scrollbar-button:vertical,
.account-chat-gift-card::-webkit-scrollbar-button:vertical:decrement,
.account-chat-gift-card::-webkit-scrollbar-button:vertical:increment,
.account-chat-gift-card::-webkit-scrollbar-button:vertical:start:decrement,
.account-chat-gift-card::-webkit-scrollbar-button:vertical:end:increment,
.account-chat-gift-card::-webkit-scrollbar-button:single-button:vertical:decrement,
.account-chat-gift-card::-webkit-scrollbar-button:single-button:vertical:increment,
.account-chat-gift-card::-webkit-scrollbar-button:start:decrement,
.account-chat-gift-card::-webkit-scrollbar-button:end:increment {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    border: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}
@supports selector(::-webkit-scrollbar) {
    .account-chat-gift-card {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
}
.account-chat-gift-card > header { display: grid; min-width: 0; grid-template-columns: 54px minmax(0, 1fr) 42px; gap: 14px; align-items: center; }
.account-chat-gift-card > header > span { display: grid; width: 54px; height: 54px; place-items: center; border: 1px solid rgba(254, 44, 85, 0.3); border-radius: 17px; background: rgba(254, 44, 85, 0.1); color: var(--pink); font-size: 19px; box-shadow: inset 0 0 22px rgba(254, 44, 85, 0.07); }
.account-chat-gift-card > header > div { min-width: 0; }
.account-chat-gift-card > header small { color: var(--cyan); font-size: 11px; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; }
.account-chat-gift-card > header h2 { margin: 3px 0; font-size: clamp(24px, 4vw, 32px); line-height: 1.06; }
.account-chat-gift-card > header p { margin: 0; overflow: hidden; color: var(--muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-gift-card > header p strong { color: #fff; }
.account-chat-gift-card > header > button { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 13px; background: rgba(255, 255, 255, 0.055); color: #fff; font-size: 16px; cursor: pointer; transition: border-color 170ms ease, background 170ms ease, color 170ms ease, transform 170ms var(--ease); }
.account-chat-gift-card > header > button:hover,
.account-chat-gift-card > header > button:focus-visible { border-color: rgba(254, 44, 85, 0.58); outline: 0; background: rgba(254, 44, 85, 0.13); color: var(--pink); transform: rotate(5deg); }
.account-chat-action-dialog { width: min(760px, calc(100vw - 34px)); }
.account-chat-action-card { min-width: 0; }
.account-chat-action-card > header p { overflow: visible; overflow-wrap: anywhere; text-overflow: clip; white-space: normal; }
.account-chat-action-card.is-report > header > span { border-color: rgba(255, 202, 92, 0.34); background: rgba(255, 202, 92, 0.09); color: var(--warning); }
.account-chat-action-card.is-moderation > header > span { border-color: rgba(37, 244, 238, 0.34); background: rgba(37, 244, 238, 0.1); color: var(--cyan); }
.account-chat-action-form { display: grid; min-width: 0; gap: 13px; }
.account-chat-action-field { display: grid; min-width: 0; gap: 7px; color: #d8d8dd; font-size: 12px; font-weight: 800; }
.account-chat-action-field :is(select, textarea) { width: 100%; min-width: 0; border: 1px solid rgba(255, 255, 255, 0.115); border-radius: 13px; outline: 0; background: rgba(255, 255, 255, 0.035); color: #fff; font: inherit; font-size: 13px; transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease; }
.account-chat-action-field select {
    min-height: 46px;
    padding: 8px 11px;
    background-color: #111116;
    color-scheme: dark;
    accent-color: var(--cyan);
}
.account-chat-action-field select option {
    background-color: #111116;
    color: #f4f4f7;
}
.account-chat-action-field select option:checked {
    background-color: #164443;
    color: #fff;
}
.account-chat-action-field textarea { min-height: 118px; max-height: 230px; padding: 11px 12px; resize: vertical; line-height: 1.5; }
.account-chat-action-field :is(select, textarea):focus { border-color: rgba(37, 244, 238, 0.46); background: rgba(37, 244, 238, 0.035); box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.07); }
.account-chat-action-form > footer { display: flex; gap: 9px; justify-content: flex-end; }
.account-chat-action-form > footer .account-button { min-height: 46px; }
.account-chat-action-form > footer .account-button-primary { min-width: 170px; }
.account-chat-moderation-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-chat-moderation-grid > article { display: grid; min-width: 0; align-content: start; gap: 13px; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; background: rgba(255, 255, 255, 0.025); }
.account-chat-moderation-grid > article[hidden] { display: none; }
.account-chat-moderation-grid > article > header { display: grid; min-width: 0; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
.account-chat-moderation-grid > article > header > span { display: grid; width: 40px; height: 40px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: rgba(255, 255, 255, 0.04); color: var(--cyan); }
.account-chat-moderation-grid > article.is-mute > header > span { color: var(--pink); }
.account-chat-moderation-grid > article.is-warning > header > span { color: var(--warning); }
.account-chat-moderation-grid > article.is-unmute { grid-column: 1 / -1; }
.account-chat-moderation-grid > article.is-unmute > header > span { color: var(--success); }
.account-chat-moderation-grid > article > header > div { display: grid; min-width: 0; gap: 3px; }
.account-chat-moderation-grid > article > header strong { color: #fff; font-size: 14px; }
.account-chat-moderation-grid > article > header small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.account-chat-moderation-grid .account-button { width: 100%; min-width: 0; min-height: 43px; justify-content: center; padding-inline: 10px; }
.account-chat-moderation-grid .account-button-success { border-color: rgba(56, 217, 150, 0.3); background: rgba(56, 217, 150, 0.09); color: #8af0c1; }
.account-chat-action-card-footer { display: flex; justify-content: flex-end; }
.account-chat-action-card-footer .account-button { min-width: 132px; justify-content: center; }
.account-chat-gift-form { display: grid; min-width: 0; gap: 15px; }
.account-chat-gift-tools { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.account-chat-gift-tools > label { display: grid; min-width: 0; grid-template-columns: 38px minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 13px; background: rgba(255, 255, 255, 0.035); color: #7d7d86; transition: border-color 170ms ease, color 170ms ease, box-shadow 170ms ease; }
.account-chat-gift-tools > label:focus-within { border-color: rgba(37, 244, 238, 0.46); color: var(--cyan); box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.07); }
.account-chat-gift-tools > label > i { justify-self: center; }
.account-chat-gift-tools input { width: 100%; min-width: 0; height: 46px; padding: 7px 11px 7px 0; border: 0; outline: 0; background: transparent; color: #fff; font: inherit; font-size: 13px; }
.account-chat-gift-tools > div { display: grid; min-width: 174px; align-content: center; justify-items: end; gap: 3px; padding: 6px 11px; border: 1px solid rgba(37, 244, 238, 0.14); border-radius: 13px; background: rgba(37, 244, 238, 0.045); }
.account-chat-gift-tools > div > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.account-chat-gift-tools > div > strong { min-width: 0; }
.account-chat-gift-tools .account-coin { justify-content: flex-end; }
.account-chat-gift-tools .account-coin img { width: 22px; height: 22px; }
.account-chat-gift-tools .account-coin-value { font-size: 15px; }
.account-chat-gift-tools .account-coin small { font-size: 10px; }
.account-chat-gift-grid { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; transition: opacity 160ms ease; }
.account-chat-gift-dialog.is-loading .account-chat-gift-grid { opacity: 0.42; pointer-events: none; }
.account-chat-gift-dialog.is-loading { cursor: progress; }
.account-chat-gift-option { position: relative; display: grid; min-width: 0; align-content: start; justify-items: center; gap: 6px; padding: 11px 9px 10px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 16px; background: rgba(255, 255, 255, 0.026); text-align: center; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
.account-chat-gift-option:hover { border-color: rgba(37, 244, 238, 0.32); background: rgba(37, 244, 238, 0.045); transform: translateY(-2px); }
.account-chat-gift-option:has(input:checked) { border-color: rgba(254, 44, 85, 0.58); background: linear-gradient(145deg, rgba(254, 44, 85, 0.1), rgba(37, 244, 238, 0.045)); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.34), 2px -2px 0 rgba(254, 44, 85, 0.34); }
.account-chat-gift-option:has(input:focus-visible) { outline: 2px solid var(--cyan); outline-offset: 2px; }
.account-chat-gift-option > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.account-chat-gift-option > span { display: grid; width: 100%; max-width: 92px; aspect-ratio: 1; place-items: center; border-radius: 14px; background: radial-gradient(circle, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.015) 67%); }
.account-chat-gift-option > span img { width: 82%; height: 82%; object-fit: contain; }
.account-chat-gift-option > strong { width: 100%; overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-chat-gift-option > small { min-width: 0; color: var(--cyan); }
.account-chat-gift-option > small .account-coin { justify-content: center; gap: 3px; }
.account-chat-gift-option > small .account-coin img { width: 18px; height: 18px; }
.account-chat-gift-option > small .account-coin-value { font-size: 12px; }
.account-chat-gift-option > small .account-coin small { font-size: 9px; }
.account-chat-gift-option > em { color: #9a9aa2; font-size: 10px; font-style: normal; line-height: 1.25; }
.account-chat-gift-option.is-unaffordable { cursor: not-allowed; filter: saturate(0.45); opacity: 0.58; }
.account-chat-gift-option.is-unaffordable:hover { border-color: rgba(255, 255, 255, 0.09); background: rgba(255, 255, 255, 0.026); transform: none; }
.account-chat-gift-empty { margin: 0; padding: 24px 14px; border: 1px dashed rgba(255, 255, 255, 0.12); border-radius: 14px; color: var(--muted); text-align: center; }
.account-chat-gift-empty[hidden] { display: none; }
.account-chat-gift-pagination { display: flex; gap: 9px; align-items: center; justify-content: center; }
.account-chat-gift-pagination button { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 11px; background: rgba(255, 255, 255, 0.04); color: #d6d6db; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; }
.account-chat-gift-pagination button:hover:not(:disabled) { border-color: rgba(37, 244, 238, 0.42); background: rgba(37, 244, 238, 0.08); color: var(--cyan); }
.account-chat-gift-pagination button:disabled { opacity: 0.3; cursor: default; }
.account-chat-gift-pagination span { min-width: 62px; color: #aaaab2; font-size: 12px; font-weight: 850; text-align: center; }
.account-chat-gift-message { display: grid; gap: 7px; color: #d8d8dd; font-size: 12px; font-weight: 800; }
.account-chat-gift-message textarea { width: 100%; min-height: 68px; max-height: 130px; padding: 10px 12px; resize: vertical; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 13px; outline: 0; background: rgba(255, 255, 255, 0.035); color: #fff; font: inherit; font-size: 13px; line-height: 1.45; transition: border-color 170ms ease, box-shadow 170ms ease; }
.account-chat-gift-message textarea:focus { border-color: rgba(37, 244, 238, 0.46); box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.07); }
.account-chat-gift-form > footer { display: flex; gap: 9px; justify-content: flex-end; }
.account-chat-gift-form > footer .account-button { min-height: 46px; }
.account-chat-gift-form > footer [data-chat-gift-submit] { min-width: 170px; }
.account-chat-gift-form > footer [data-chat-gift-submit] b { font-size: 10px; font-weight: 800; }

@media (max-width: 1400px) {
    .account-dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .account-balance-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1181px) and (max-width: 1400px) {
    .account-gift-value-card { grid-column: span 2; }
}

@media (max-width: 1180px) {
    .account-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-radio-card { grid-column: span 1; }
}

@media (max-width: 1020px) {
    .account-page .inner-page-main { padding-top: 104px; }
    .account-shell { grid-template-columns: 300px minmax(0, 1fr); gap: 18px; }
}

@media (max-width: 900px) {
    body.account-navigation-open { overflow: hidden; }
    body.account-chat-directory-open { overflow: hidden; }
    .account-shell { grid-template-columns: 1fr; gap: 18px; }
    .account-workspace { width: 100%; min-width: 0; }
    .account-sidebar {
        position: fixed;
        z-index: 1305;
        inset: 0 auto 0 0;
        width: min(340px, calc(100vw - 52px));
        max-height: none;
        border-radius: 0 26px 26px 0;
        box-shadow: 30px 0 90px rgba(0, 0, 0, 0.72);
        opacity: 0;
        transform: translateX(-108%);
        visibility: hidden;
        transition: opacity 220ms ease, transform 260ms var(--ease), visibility 220ms ease;
    }
    .account-sidebar.is-navigation-open { opacity: 1; transform: translateX(0); visibility: visible; }
    .account-sidebar-scroll { max-height: 100vh; max-height: 100dvh; overflow-y: auto; }
    .account-sidebar-scrollbar { display: block; top: 18px; bottom: 18px; }
    .account-menu-toggle { position: absolute; z-index: 10; top: 14px; right: 14px; display: grid; border-color: rgba(254, 44, 85, 0.32); background: rgba(8, 8, 10, 0.82); color: var(--pink); }
    .account-menu-toggle[aria-expanded="true"] { border-color: var(--pink); background: rgba(254, 44, 85, 0.12); color: var(--pink); }
    .account-sidebar-opener { display: grid; width: 48px; height: 48px; place-items: center; flex: 0 0 auto; border: 1px solid rgba(37, 244, 238, 0.3); border-radius: 15px; background: rgba(37, 244, 238, 0.08); color: var(--cyan); cursor: pointer; transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease); }
    .account-sidebar-opener:hover,
    .account-sidebar-opener:focus-visible { border-color: rgba(254, 44, 85, 0.46); outline: 0; background: linear-gradient(135deg, rgba(37, 244, 238, 0.12), rgba(254, 44, 85, 0.1)); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.32), 2px -2px 0 rgba(254, 44, 85, 0.3); transform: translateY(-2px); }
    .account-sidebar-backdrop { position: fixed; z-index: 1295; inset: 0 0 0 min(340px, calc(100vw - 52px)); width: auto; height: 100%; border: 0; background: rgba(0, 0, 0, 0.74); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; cursor: default; transition: opacity 220ms ease, visibility 220ms ease; }
    .account-sidebar.is-navigation-open + .account-sidebar-backdrop { display: block; opacity: 1; visibility: visible; }
    .account-sidebar .account-navigation { display: grid; min-height: auto; max-height: none; padding: 20px 13px 28px; overflow: visible; border-top: 0; grid-template-columns: 1fr; gap: 18px; }
    .account-sidebar .account-navigation::-webkit-scrollbar { display: none; width: 0; height: 0; }
    .account-navigation .account-nav-group { display: grid; align-content: start; gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; }
    .account-navigation .account-nav-group > span { display: block; }
    .account-navigation .account-nav-group > a { display: grid; min-width: 0; transform: none; }
    .account-navigation .account-nav-group > a::before { display: block; }
    .account-module-chat .account-chat-layout { grid-template-columns: 1fr; animation: none !important; transform: none !important; }
    .account-module-chat .account-chat-rooms {
        position: fixed;
        z-index: 1345;
        inset: 0 auto 0 0;
        width: min(360px, calc(100vw - 48px));
        max-height: none;
        padding: 0;
        overflow: hidden;
        border: 0;
        border-right: 1px solid rgba(37, 244, 238, 0.22);
        border-radius: 0 24px 24px 0;
        box-shadow: 30px 0 90px rgba(0, 0, 0, 0.72);
        opacity: 0;
        transform: translateX(-108%);
        visibility: hidden;
        transition: opacity 220ms ease, transform 260ms var(--ease), visibility 220ms ease;
    }
    .account-module-chat .account-chat-directory-scroll { padding: 16px 11px 12px; }
    .account-module-chat .account-chat-rooms.is-chat-sidebar-open { opacity: 1; transform: translateX(0); visibility: visible; }
    .account-module-chat .account-chat-directory-scroll > header { padding-right: 3px; }
    .account-module-chat .account-chat-directory-scroll > header > div { min-width: 0; }
    .account-module-chat .account-chat-sidebar-close { display: grid; width: 38px; height: 38px; place-items: center; flex: 0 0 auto; margin-left: auto; border: 1px solid rgba(254, 44, 85, 0.28); border-radius: 11px; background: rgba(254, 44, 85, 0.08); color: var(--pink); cursor: pointer; }
    .account-module-chat .account-chat-directory-scroll > nav { display: grid; min-height: auto; max-height: none; grid-template-columns: 1fr; overflow: visible; padding-right: 7px; }
    .account-module-chat .account-chat-directory-scroll > nav small { display: block; }
    .account-module-chat .account-chat-online { min-height: auto; overflow: visible; }
    .account-module-chat .account-chat-directory-list { min-height: 0; max-height: none; grid-template-columns: 1fr; grid-auto-rows: max-content; align-content: start; overflow: visible; }
    .account-chat-sidebar-backdrop { position: fixed; z-index: 1335; inset: 0 0 0 min(360px, calc(100vw - 48px)); display: block; width: auto; height: 100%; border: 0; background: rgba(0, 0, 0, 0.74); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 220ms ease, visibility 220ms ease; }
    .account-chat-rooms.is-chat-sidebar-open + .account-chat-sidebar-backdrop { opacity: 1; visibility: visible; pointer-events: auto; }
    .account-chat-sidebar-opener { display: inline-flex; width: auto; min-width: 0; height: 42px; gap: 8px; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 12px; border: 1px solid rgba(37, 244, 238, 0.3); border-radius: 13px; background: rgba(37, 244, 238, 0.08); color: var(--cyan); font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; transition: border-color 170ms ease, background 170ms ease, color 170ms ease, transform 170ms var(--ease); }
    .account-chat-sidebar-opener > span { display: inline; color: #fff; white-space: nowrap; }
    .account-chat-sidebar-opener:hover,
    .account-chat-sidebar-opener:focus-visible { border-color: rgba(254, 44, 85, 0.48); outline: 0; background: rgba(254, 44, 85, 0.1); color: #fff; transform: translateY(-1px); }
}

@media (max-width: 820px) {
    .account-page .inner-page-main { padding-bottom: 48px; }
    .account-page-heading { min-height: 0; align-items: flex-start; }
    .account-dashboard-columns,
    .account-dashboard-columns-secondary,
    .account-security-grid { grid-template-columns: 1fr; }
    .account-user-list.is-grid { grid-template-columns: 1fr; }
    .account-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-referral-hero,
    .account-reward-stage,
    .account-cashback-hero { flex-wrap: wrap; }
    .account-copy-field { min-width: 100%; order: 3; }
    .account-reward-claim { width: 100%; }
    .account-prize-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-method-list { grid-template-columns: 1fr; }
    .account-support-head { align-items: flex-start; }
    .account-chat-layout { height: auto; min-height: 0; max-height: none; grid-template-columns: 1fr; overflow: hidden; }
    .account-chat-rooms { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.075); }
    .account-chat-directory-scroll { grid-template-rows: auto auto auto auto; }
    .account-chat-directory-scroll > nav { display: grid; max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; padding-bottom: 10px; }
    .account-chat-directory-scroll > nav > a { min-width: 0; }
    .account-chat-directory-list { max-height: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-chat-rules { width: 100%; border-top: 1px solid rgba(255, 255, 255, 0.075); }
    .account-chat-stage { height: clamp(650px, calc(100dvh - 28px), 760px); min-height: 0; }
}

@media (max-width: 620px) {
    .account-page { overflow-x: hidden; }
    .account-page .inner-page-main { padding-top: 91px; }
    .account-page .section-shell { width: min(calc(100% - 24px), var(--content)); }
    .account-identity { grid-template-columns: 48px minmax(0, 1fr) 44px; padding: 13px; }
    .account-identity .account-avatar { width: 46px; height: 46px; }
    .account-identity > .account-avatar { grid-column: 1; grid-row: 1 / 3; }
    .account-identity > div { grid-column: 2; grid-row: 1; }
    .account-role { grid-column: 2; grid-row: 2; justify-self: start; }
    .account-progression { grid-column: 1 / -1; grid-row: 3; }
    .account-admin-link { width: 100%; grid-column: 1 / -1; grid-row: 4; margin-top: 7px; }
    .account-menu-toggle { grid-column: 3; grid-row: 1 / 3; }
    .account-sidebar .account-navigation { grid-template-columns: 1fr; max-height: none; padding: 16px 10px 24px; }
    .account-nav-group > a span { display: inline; }
    .account-nav-group > a { min-width: 0; min-height: 46px; justify-content: initial; padding-inline: 12px; }
    .account-nav-group > a > i:first-child { width: auto; }
    .account-page-heading h1 { font-size: 34px; }
    .account-page-heading > div:first-child > span { font-size: 12px; }
    .account-heading-actions { display: none; }
    .account-shell .account-page-heading { min-height: 124px; align-items: center; padding: 20px; }
    .account-heading-signal { width: 96px; height: 58px; grid-template-columns: 36px minmax(0, 1fr); gap: 8px; padding: 7px 9px; border-radius: 18px; font-size: 17px; }
    .account-heading-signal > i { width: 36px; height: 36px; border-radius: 12px; }
    .account-heading-signal > b { width: 24px; height: 28px; gap: 2px; }
    .account-heading-signal > b i { width: 2px; }
    .account-dashboard-grid { grid-template-columns: 1fr; }
    .account-gift-value-card { grid-column: auto; }
    .account-feature-card { min-height: 142px; }
    .account-feature-card > div:not(.account-radio-visual) { flex: 1; }
    .account-feature-card strong { font-size: clamp(20px, 7vw, 27px); }
    .account-radio-card { grid-column: auto; }
    .account-dashboard-columns { margin-top: 13px; gap: 13px; }
    .account-panel { padding: 16px; border-radius: 18px; }
    .account-panel > header { flex-wrap: wrap; align-items: flex-start; }
    .account-panel + .account-panel,
    .account-dashboard-columns + .account-panel,
    .account-metric-grid + .account-panel,
    .account-balance-overview + .account-panel,
    .account-disabled-feature + .account-panel,
    .account-support-head + .account-panel,
    .account-referral-hero + .account-dashboard-columns,
    .account-reward-stage + .account-panel,
    .account-cashback-hero + .account-dashboard-columns { margin-top: 13px; }
    .account-form-grid,
    .account-toggle-grid { grid-template-columns: 1fr; }
    .account-form-grid > span:empty { display: none; }
    .account-profile-cover { min-height: 0; flex-direction: column; gap: 28px; align-items: center; padding: 30px 20px; text-align: center; }
    .account-profile-cover-copy { justify-items: center; }
    .account-profile-cover-copy > span { max-width: 420px; }
    .account-profile-fields { gap: 11px; }
    .account-profile-field { min-height: 118px; padding: 14px; border-radius: 16px; }
    .account-profile-field.is-bio { min-height: 192px; }
    .account-profile-switches { gap: 11px; }
    .account-profile-switch { min-height: 90px; grid-template-columns: 42px 38px minmax(0, 1fr); gap: 10px !important; padding: 14px; border-radius: 16px; text-align: left; }
    .account-profile-switch > span { width: 41px; }
    .account-profile-switch input:checked + span::after { transform: translateX(16px); }
    .account-switch-icon { width: 38px; height: 38px; border-radius: 12px; }
    .account-profile-actions { min-height: 78px; padding: 13px; border-radius: 18px; }
    .account-profile-save { width: 100%; min-width: 0; }
    .account-profile-captcha-layer { place-items: stretch; padding: 10px; }
    .account-profile-captcha-dialog { width: 100%; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); align-self: center; padding: 16px; border-radius: 20px; }
    .account-profile-captcha-dialog > header { align-items: flex-start; }
    .account-profile-captcha-dialog > header > div > span { width: 44px; height: 44px; border-radius: 13px; }
    .account-profile-captcha-dialog .account-captcha { padding: 13px; }
    .account-profile-captcha-dialog .account-captcha .captcha-grid button { min-height: 58px; }
    .account-profile-captcha-dialog .account-captcha .captcha-grid img { width: 45px; height: 45px; }
    .account-profile-captcha-dialog > footer { display: grid; grid-template-columns: 1fr 1fr; }
    .account-profile-captcha-dialog > footer .account-button { min-width: 0; padding-inline: 12px; }
    .account-search-form { display: grid; }
    .account-metric-grid,
    .account-balance-overview { grid-template-columns: 1fr; }
    .account-metric-card,
    .account-balance-overview article { min-height: 115px; }
    .account-rank-list article { grid-template-columns: 52px minmax(0, 1fr) auto; }
    .account-rank-list time { grid-column: 2 / -1; }
    .account-referral-hero,
    .account-reward-stage,
    .account-cashback-hero,
    .account-disabled-feature,
    .account-support-head { min-height: 0; padding: 20px; border-radius: 20px; }
    .account-referral-hero,
    .account-reward-stage,
    .account-cashback-hero { align-items: stretch; flex-direction: column; }
    .account-referral-hero > div:first-child,
    .account-reward-stage > div:nth-child(2),
    .account-cashback-hero > div:nth-child(2) { min-width: 0; width: 100%; }
    .account-copy-field { display: grid; }
    .account-prize-grid { grid-template-columns: 1fr; }
    .account-cashback-ring,
    .account-capsule { width: 100px; height: 100px; }
    .account-support-head,
    .account-support-head > div { align-items: flex-start; flex-direction: column; }
    .account-support-head > .account-button { width: 100%; }
    .account-notification-list article { grid-template-columns: 42px minmax(0, 1fr); }
    .account-notification-list article > form { grid-column: 2; }
    .account-station-card { grid-template-columns: 56px minmax(0, 1fr); }
    .account-station-art { width: 56px; height: 56px; }
    .account-station-card .account-card-actions { grid-column: 2; justify-content: flex-start; }
    .account-user-card { grid-template-columns: 46px minmax(0, 1fr); }
    .account-user-card .account-card-actions { grid-column: 2; justify-content: flex-start; }
    .account-session-list article { grid-template-columns: 40px minmax(0, 1fr); }
    .account-session-list article > form { grid-column: 2; }
    .account-method-list article { grid-template-columns: 40px minmax(0, 1fr); }
    .account-method-list article > span { grid-column: 2; justify-self: start; }
    .account-rank-list article { grid-template-columns: 46px minmax(0, 1fr); }
    .account-rank-list article > b,
    .account-rank-list article > time { grid-column: 2; justify-self: start; }
    .account-condition-list p { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: start; }
    .account-condition-list strong { grid-column: 2; }
    .account-activity-list article { flex-wrap: wrap; }
    .account-activity-list article > b { margin-left: auto; }
    .account-station-chooser { place-items: stretch; padding: 10px; }
    .account-station-chooser-dialog { width: 100%; max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); gap: 14px; align-self: center; padding: 16px; border-radius: 20px; }
    .account-station-chooser-dialog > header { align-items: flex-start; }
    .account-station-chooser-dialog > header > div > span { width: 46px; height: 46px; border-radius: 14px; }
    .account-station-chooser-dialog h2 { font-size: 20px; }
    .account-station-chooser-dialog header p { font-size: 13px; }
    .account-station-choice-grid { grid-template-columns: 1fr; }
    .account-station-choice { grid-template-columns: 50px minmax(0, 1fr) 38px; padding: 10px; }
    .account-station-choice > span { width: 50px; height: 50px; border-radius: 14px; }
    .account-confirm-dialog { grid-template-columns: 50px minmax(0, 1fr); padding: 18px; border-radius: 19px; }
    .account-confirm-icon { width: 50px; height: 50px; border-radius: 16px; }
    .account-confirm-actions { display: grid; grid-template-columns: 1fr 1fr; }
    .account-chat-directory-scroll { padding: 13px 10px 10px; }
    .account-chat-directory-scroll > header { padding-bottom: 11px; }
    .account-chat-directory-scroll > nav { max-height: none; grid-template-columns: 1fr; gap: 7px; padding-inline: 0 7px; }
    .account-chat-directory-scroll > nav > a { grid-template-columns: 34px minmax(0, 1fr); gap: 8px; padding: 9px 8px; border-radius: 13px; }
    .account-chat-directory-scroll > nav > a > span { width: 34px; height: 34px; border-radius: 10px; }
    .account-chat-directory-scroll > nav small { display: block; }
    .account-chat-directory-scroll > nav em { gap: 4px; font-size: 10px; }
    .account-chat-directory-scroll > nav > a > b { position: absolute; top: 5px; right: 5px; min-width: 19px; height: 19px; padding: 0 5px; font-size: 10px; line-height: 19px; }
    .account-chat-online { padding-inline: 0; }
    .account-chat-directory-list { max-height: none; grid-template-columns: 1fr; padding-inline: 0; }
    .account-chat-stage-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; }
    .account-chat-stage-head > div:first-child { display: grid; width: 100%; grid-column: 1 / -1; grid-row: 1; grid-template-columns: max-content minmax(0, 1fr); gap: 2px 8px; align-items: start; }
    .account-chat-sidebar-opener { width: auto; min-width: 0; height: 38px; grid-column: 1; grid-row: 1; justify-self: start; gap: 6px; padding: 0 9px; font-size: 11px; }
    .account-chat-sidebar-opener > span { display: inline; }
    .account-chat-stage-head > div:first-child > span { display: none; }
    .account-chat-stage-head > div:first-child > div { display: contents; }
    .account-chat-stage-head > div:first-child > div > h2 { min-width: 0; grid-column: 2; grid-row: 1; align-self: center; font-size: 18px; line-height: 1.15; }
    .account-chat-stage-head > div:first-child > div > p { min-width: 0; grid-column: 1 / -1; grid-row: 2; margin: 0; overflow: visible; overflow-wrap: anywhere; color: #a9a9b0; font-size: 11.5px; line-height: 1.3; text-overflow: clip; white-space: normal; }
    .account-chat-history-scope { width: 100%; grid-column: 1 / -1; grid-row: 3; margin-top: 0; font-size: 9px; line-height: 1.2; }
    .account-chat-stage { height: clamp(620px, calc(100dvh - 20px), 720px); grid-template-rows: auto auto minmax(0, 1fr) auto; }
    .account-chat-stage-head { align-items: flex-start; padding: 7px 9px; }
    .account-chat-stage-head > div:first-child { flex: 1 1 auto; }
    .account-chat-stage-head > div:first-child > span { display: none; }
    .account-chat-stage-head dl { display: none; }
    .account-chat-stage-actions { z-index: 2; grid-column: 2; grid-row: 1; margin-left: auto; }
    .account-chat-stream { padding: 15px 8px 15px 12px; scrollbar-gutter: auto; }
    .account-chat-restriction.is-global { align-items: stretch; flex-direction: column; }
    .account-chat-restriction.is-global > form { width: 100%; margin-left: 0; }
    .account-chat-restriction.is-global .account-button { width: 100%; justify-content: center; }
    .account-chat-system-message { grid-template-columns: 34px minmax(0, 1fr); gap: 9px; padding: 10px 11px; border-radius: 14px; }
    .account-chat-system-message > span { width: 34px; height: 34px; border-radius: 11px; font-size: 14px; }
    .account-chat-system-message header { flex-wrap: wrap; gap: 4px 8px; }
    .account-chat-system-message header time { margin-left: 0; }
    .account-chat-system-message p { font-size: 12px; }
    .account-chat-message { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; }
    .account-chat-avatar { width: 36px; height: 36px; border-radius: 12px; font-size: 12px; }
    .account-chat-bubble { padding: 11px 12px 9px; border-radius: 4px 15px 15px; }
    .account-chat-bubble > header { flex-wrap: wrap; }
    .account-chat-bubble > header > div { width: 100%; }
    .account-chat-bubble > header time { order: 2; margin-left: 0; }
    .account-chat-bubble > header em { margin-left: auto; }
    .account-chat-bubble > footer > :is(button, form > button, details > summary) span { display: none; }
    .account-chat-gift span { display: none; }
    .account-chat-reaction-picker > div { left: -48px; }
    .account-chat-composer { padding: 11px 12px 13px; }
    .account-chat-composer textarea { min-height: 64px; max-height: 112px; resize: none; }
    .account-chat-composer > footer { flex-wrap: nowrap; }
    .account-chat-composer > footer { gap: 6px; }
    .account-chat-emoji > summary > span,
    .account-chat-dice-button > span { display: none; }
    .account-chat-dice-button { flex: 0 0 auto; gap: 4px; padding-inline: 6px; }
    .account-chat-dice-button > b { min-width: 28px; padding-inline: 4px; }
    .account-chat-composer > footer > span { order: 1; margin-left: auto; }
    .account-chat-composer > footer > .account-button { order: 2; margin-left: 0; }
    .account-chat-composer .account-button { min-width: 112px; }
    .account-chat-emoji > .account-chat-emoji-panel { left: -10px; width: min(310px, calc(100vw - 38px)); max-height: 240px; }
    .account-chat-emoji-panel section > div { grid-template-columns: repeat(7, 1fr); }
    .account-chat-emoji-panel button { width: 32px; height: 32px; }
    .account-chat-latest { min-height: 36px; padding: 6px 11px; }
    .account-chat-gift-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 12px); border-radius: 19px; }
    .account-chat-gift-card { max-height: calc(100dvh - 12px); gap: 14px; padding: 14px 12px 15px; border-radius: 19px; box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.62), 3px -3px 0 rgba(254, 44, 85, 0.62), 0 26px 70px rgba(0, 0, 0, 0.68); scrollbar-gutter: auto; }
    .account-chat-gift-card > header { grid-template-columns: 44px minmax(0, 1fr) 38px; gap: 10px; }
    .account-chat-gift-card > header > span { width: 44px; height: 44px; border-radius: 13px; font-size: 16px; }
    .account-chat-gift-card > header h2 { font-size: 22px; }
    .account-chat-gift-card > header small { font-size: 9px; }
    .account-chat-gift-card > header > button { width: 38px; height: 38px; border-radius: 11px; }
    .account-chat-gift-tools { grid-template-columns: 1fr; }
    .account-chat-gift-tools > div { min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; }
    .account-chat-gift-tools .account-coin { justify-content: flex-start; }
    .account-chat-gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .account-chat-gift-option { padding: 9px 7px; border-radius: 14px; }
    .account-chat-gift-option > span { max-width: 78px; }
    .account-chat-gift-form > footer { display: grid; grid-template-columns: 1fr 1fr; }
    .account-chat-gift-form > footer .account-button,
    .account-chat-gift-form > footer [data-chat-gift-submit] { width: 100%; min-width: 0; padding-inline: 9px; }
    .account-chat-gift-form > footer [data-chat-gift-submit] { flex-wrap: wrap; }
    .account-chat-action-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 12px); }
    .account-chat-action-form > footer { display: grid; grid-template-columns: 1fr 1fr; }
    .account-chat-action-form > footer .account-button { width: 100%; min-width: 0; padding-inline: 9px; }
    .account-chat-moderation-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    .account-chat-moderation-grid > article.is-unmute { grid-column: 1; }
    .account-chat-moderation-grid > article { padding: 12px; border-radius: 15px; }
    .account-chat-action-card-footer .account-button { width: 100%; min-width: 0; }
}

@media (max-width: 390px) {
    .account-sidebar { width: min(340px, calc(100vw - 44px)); }
    .account-page .section-shell { width: min(calc(100% - 18px), var(--content)); }
    .account-page-heading { margin-bottom: 20px; }
    .account-page-heading h1 { font-size: 30px; }
    .account-heading-signal { width: 88px; height: 50px; grid-template-columns: 32px minmax(0, 1fr); gap: 7px; padding: 6px 8px; border-radius: 16px; }
    .account-heading-signal > i { width: 32px; height: 32px; border-radius: 11px; }
    .account-heading-signal > b { width: 22px; height: 26px; gap: 2px; }
    .account-progress-metric { grid-template-columns: 19px minmax(0, 1fr); gap: 4px; padding: 7px 5px; }
    .account-progress-metric strong { overflow: visible; font-size: 10px; text-overflow: clip; }
    .account-profile-cover { padding: 27px 16px; }
    .account-profile-cover h2 { font-size: 30px; }
    .account-profile-avatar-action { min-height: 40px; padding: 7px 11px; }
    .account-profile-field { padding: 13px; }
    .account-profile-volume { grid-template-columns: 1fr; gap: 11px; }
    .account-profile-volume output { justify-self: start; }
    .account-profile-switch { grid-template-columns: 40px 36px minmax(0, 1fr); gap: 8px !important; padding: 12px; }
    .account-profile-switch > span { width: 39px; }
    .account-profile-switch input:checked + span::after { transform: translateX(14px); }
    .account-switch-icon { width: 36px; height: 36px; }
    .account-profile-captcha-dialog > footer { grid-template-columns: 1fr; }
    .account-feature-card { padding: 17px; }
    .account-radio-visual { width: 72px; height: 72px; border-radius: 19px; }
    .account-station-card { grid-template-columns: 54px minmax(0, 1fr); }
    .account-station-art { width: 54px; height: 54px; }
    .account-station-card .account-card-actions { grid-column: 2; }
    .account-user-card { grid-template-columns: 46px minmax(0, 1fr); }
    .account-user-card .account-card-actions { grid-column: 2; }
    .account-session-list article { grid-template-columns: 40px minmax(0, 1fr); }
    .account-session-list article > form { grid-column: 2; }
    .account-method-list article { grid-template-columns: 40px minmax(0, 1fr); }
    .account-method-list article > span { grid-column: 2; }
    .account-chat-directory-scroll > nav > a { min-width: 0; grid-template-columns: 30px minmax(0, 1fr); gap: 6px; padding-inline: 6px; }
    .account-chat-directory-scroll > nav > a > span { width: 30px; height: 30px; }
    .account-chat-directory-scroll > nav strong { font-size: 12px; }
    .account-chat-stage { min-height: 570px; }
    .account-chat-stage-head > div:first-child > span { display: none; }
    .account-chat-bubble > header span { display: none; }
    .account-chat-copy { font-size: 13px; }
    .account-chat-emoji > div { left: -10px; }
    .account-chat-composer > footer { gap: 5px; }
    .account-chat-composer > footer > span { flex: 0 1 auto; font-size: 11px; }
    .account-chat-composer > footer > .account-button { width: 104px; min-width: 0; flex: 0 1 104px; padding-inline: 7px; }
    .account-chat-dice-button { width: 64px; min-width: 0; flex: 0 0 64px; gap: 2px; padding-inline: 3px; }
    .account-chat-dice-button > i { font-size: 11px; }
    .account-chat-dice-button > b { min-width: 24px; padding-inline: 3px; font-size: 8px; }
}

/* Rewards: real prize requests and paginated history, within the existing account language. */
.account-module-rewards .account-reward-catalog-panel + .account-reward-history-panel {
    margin-top: 20px;
}

.account-module-rewards .account-reward-rule-panel,
.account-module-rewards .account-reward-claim-panel,
.account-module-rewards .account-reward-rule-panel + .account-panel {
    margin-top: 20px;
}

.account-module-rewards .account-reward-rule-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-module-rewards .account-reward-rule-card {
    min-width: 0;
    padding: 15px;
    display: grid;
    align-content: start;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.024);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease;
}

.account-module-rewards .account-reward-rule-card:hover {
    border-color: rgba(37, 244, 238, 0.26);
    background: rgba(37, 244, 238, 0.035);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
    transform: translateY(-2px);
}

.account-module-rewards .account-reward-rule-card.is-ready {
    border-color: rgba(37, 244, 238, 0.28);
    background: linear-gradient(145deg, rgba(37, 244, 238, 0.055), rgba(254, 44, 85, 0.025));
}

.account-module-rewards .account-reward-rule-card.is-claimed {
    opacity: 1;
}

.account-module-rewards .account-reward-rule-card > header {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
}

.account-module-rewards .account-reward-rule-card > header > span:first-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 11px;
    color: var(--cyan);
    background: rgba(37, 244, 238, 0.07);
}

.account-module-rewards .account-reward-rule-card > header > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.account-module-rewards .account-reward-rule-card > header strong {
    overflow-wrap: anywhere;
}

.account-module-rewards .account-reward-rule-card > header small,
.account-module-rewards .account-reward-rule-card > small {
    color: var(--muted);
    font-size: 10px;
}

.account-module-rewards .account-reward-rule-card > header > .account-coin {
    font-size: 12px;
}

.account-module-rewards .account-reward-rule-card > p {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.account-module-rewards .account-reward-rule-card > small {
    display: flex;
    align-items: center;
    gap: 6px;
}

.account-module-rewards .account-reward-progress {
    padding-top: 3px;
    display: grid;
    gap: 7px;
}

.account-module-rewards .account-reward-progress > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--muted);
    font-size: 10px;
}

.account-module-rewards .account-reward-progress > span b {
    color: #e8ebef;
    overflow-wrap: anywhere;
}

.account-module-rewards .account-reward-progress > span em {
    flex: 0 0 auto;
    font-style: normal;
}

.account-module-rewards .account-reward-progress > i {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
}

.account-module-rewards .account-reward-progress > i > b {
    display: block;
    width: var(--reward-progress);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--cyan), var(--pink));
}

.account-module-rewards .account-reward-claim-panel .account-reward-claim {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(260px, 0.8fr) minmax(340px, 1.2fr);
    align-items: start;
    gap: 14px;
}

.account-module-rewards .account-reward-claim-panel .account-reward-claim > .account-button {
    grid-column: 1 / -1;
    justify-self: end;
    min-width: 210px;
}

.account-module-rewards .account-reward-choice {
    min-width: 0;
    margin: 0;
    padding: 12px;
    display: grid;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 17px;
    background: rgba(0, 0, 0, 0.22);
}

.account-module-rewards .account-reward-choice legend {
    padding-inline: 7px;
    font-size: 11px;
    font-weight: 800;
}

.account-module-rewards .account-reward-choice label {
    position: relative;
    cursor: pointer;
}

.account-module-rewards .account-reward-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.account-module-rewards .account-reward-choice label > span {
    min-height: 48px;
    padding: 9px 11px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    color: #f3f5f8;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}

.account-module-rewards .account-reward-choice label > span > i {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--cyan);
    background: rgba(37, 244, 238, 0.08);
}

.account-module-rewards .account-reward-choice label > span b {
    min-width: 0;
    font-size: 11px;
    overflow-wrap: anywhere;
}

.account-module-rewards .account-reward-choice label > span em {
    color: var(--cyan);
    font-size: 10px;
    font-style: normal;
    font-weight: 850;
}

.account-module-rewards .account-reward-choice input:checked + span {
    border-color: rgba(37, 244, 238, 0.42);
    background: rgba(37, 244, 238, 0.06);
    box-shadow: inset 3px 0 0 var(--cyan);
}

.account-module-rewards .account-reward-choice input:focus-visible + span {
    outline: 2px solid var(--cyan);
    outline-offset: 2px;
}

.account-module-rewards .account-prize-card {
    min-width: 0;
    transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease), box-shadow 180ms ease;
}

.account-module-rewards .account-prize-card:hover {
    border-color: rgba(37, 244, 238, 0.28);
    background: rgba(37, 244, 238, 0.035);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.2);
    transform: translateY(-3px);
}

.account-module-rewards .account-prize-card-body {
    align-content: start;
}

.account-module-rewards .account-prize-card-heading {
    display: flex;
    min-width: 0;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.account-module-rewards .account-prize-card-heading > strong {
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-module-rewards .account-prize-card-heading > .account-coin {
    flex: 0 0 auto;
    font-size: 12px;
}

.account-module-rewards .account-prize-card dl {
    margin: 5px 0 0;
    padding: 10px 0;
    display: grid;
    gap: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.075);
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.account-module-rewards .account-prize-card dl > div {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.account-module-rewards .account-prize-card dt {
    color: var(--muted);
    font-size: 10px;
}

.account-module-rewards .account-prize-card dd {
    margin: 0;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    text-align: right;
    overflow-wrap: anywhere;
}

.account-module-rewards .account-prize-redemption-form {
    margin-top: 7px;
    display: grid;
    gap: 10px;
}

.account-module-rewards .account-prize-redemption-form label {
    display: grid;
    gap: 6px;
}

.account-module-rewards .account-prize-redemption-form label > span {
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.account-module-rewards .account-prize-redemption-form label > small {
    color: var(--muted);
    font-size: 10px;
    line-height: 1.45;
}

.account-module-rewards .account-prize-redemption-form textarea {
    width: 100%;
    min-height: 82px;
    resize: vertical;
}

.account-module-rewards .account-prize-redemption-form .account-button {
    width: 100%;
}

.account-module-rewards .account-reward-history > article {
    gap: 12px;
}

.account-module-rewards .account-reward-history > article > div > em {
    margin-top: 3px;
    color: #d8d9df;
    font-size: 10px;
    font-style: normal;
    overflow-wrap: anywhere;
}

.account-module-rewards .account-reward-history > article > form {
    flex: 0 0 auto;
}

.account-module-rewards .account-reward-history > article > form .account-button {
    min-height: 36px;
    padding-inline: 12px;
}

@media (max-width: 560px) {
    .account-module-rewards .account-reward-rule-panel,
    .account-module-rewards .account-reward-claim-panel,
    .account-module-rewards .account-reward-rule-panel + .account-panel {
        margin-top: 13px;
    }

    .account-module-rewards .account-reward-rule-grid,
    .account-module-rewards .account-reward-claim-panel .account-reward-claim {
        grid-template-columns: 1fr;
    }

    .account-module-rewards .account-reward-rule-card > header {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .account-module-rewards .account-reward-rule-card > header > .account-coin {
        grid-column: 2;
        justify-self: start;
    }

    .account-module-rewards .account-reward-claim-panel .account-reward-claim > .account-button {
        grid-column: auto;
        width: 100%;
        min-width: 0;
    }

    .account-module-rewards .account-reward-catalog-panel + .account-reward-history-panel {
        margin-top: 13px;
    }

    .account-module-rewards .account-prize-card-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .account-module-rewards .account-reward-history > article > form {
        width: 100%;
        padding-left: 52px;
    }

    .account-module-rewards .account-reward-history > article > form .account-button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-equalizer i,
    .account-capsule > i,
    .account-capsule > span,
    .account-toast,
    .account-feature-card,
    .account-dashboard-panel,
    .account-profile-cover,
    .account-profile-panel,
    .account-profile-actions { animation: none !important; }
    .account-heading-signal > b i,
    .account-workspace > :not(.account-page-heading),
    .account-chat-message,
    .account-chat-system-message > span > i,
    .account-chat-dice-button { animation: none !important; }
    .account-panel,
    .account-feature-card,
    .account-station-chooser,
    .account-station-chooser-dialog,
    .account-station-choice,
    .account-coin > img,
    .account-icon-button,
    .account-button,
    .account-heading-signal,
    .account-profile-field,
    .account-profile-switch,
    .account-profile-actions,
    .account-profile-captcha-layer,
    .account-profile-captcha-dialog,
    .account-chat-bubble,
    .account-chat-directory-scroll > nav > a,
    .account-chat-reactions button,
    .account-nav-group > a,
    .account-chat-dice-button { transition-duration: 0.01ms !important; }
}

/* Gift economy and exchange */
.account-gift-overview-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 16px;
}

.account-module-gifts .account-gift-overview-card {
    --gift-overview-accent: 37, 244, 238;
    --gift-overview-secondary: 254, 44, 85;
    display: grid;
    min-height: 164px;
    grid-column: span 2;
    grid-template-columns: 43px minmax(0, 1fr);
    grid-template-rows: 53px 33px auto;
    gap: 7px 12px;
    align-content: start;
    align-items: start;
    padding: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(var(--gift-overview-accent), 0.15), transparent 48%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.027), transparent 46%),
        var(--account-panel);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.22);
    animation: account-dashboard-card-in 420ms var(--ease) both;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease), background 190ms ease;
}

.account-module-gifts .account-gift-overview-card:nth-child(2) { animation-delay: 45ms; }
.account-module-gifts .account-gift-overview-card:nth-child(3) { --gift-overview-accent: 254, 44, 85; --gift-overview-secondary: 255, 255, 255; animation-delay: 90ms; }
.account-module-gifts .account-gift-overview-card:nth-child(4) { --gift-overview-secondary: 255, 255, 255; animation-delay: 135ms; }
.account-module-gifts .account-gift-overview-card:nth-child(5) { --gift-overview-accent: 254, 44, 85; --gift-overview-secondary: 37, 244, 238; animation-delay: 180ms; }
.account-module-gifts .account-gift-overview-card:nth-child(n + 4) { grid-column: span 3; }

.account-module-gifts .account-gift-overview-card::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 20px;
    left: 20px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, rgba(var(--gift-overview-accent), 0.98), rgba(var(--gift-overview-secondary), 0.88), transparent);
    opacity: 0.48;
    content: "";
    transform: scaleX(0.82);
    transition: opacity 190ms ease, transform 190ms var(--ease);
}

.account-module-gifts .account-gift-overview-card > * { position: relative; z-index: 3; }
.account-module-gifts .account-gift-overview-card:is(:hover, :focus-visible)::before { opacity: 1; transform: scaleX(1.05); }
.account-module-gifts .account-gift-overview-card > .account-gift-overview-content {
    display: contents;
}

.account-module-gifts .account-gift-overview-card > .account-card-icon {
    grid-column: 1;
    grid-row: 1;
}

.account-module-gifts .account-gift-overview-card .account-gift-overview-label {
    min-width: 0;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    letter-spacing: 0.05em;
    line-height: 1.35;
    text-transform: uppercase;
}

.account-module-gifts .account-gift-overview-card .account-gift-overview-value {
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: center;
    color: #fff;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 900;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.account-module-gifts .account-gift-overview-card .account-gift-overview-copy {
    min-width: 0;
    grid-column: 1 / -1;
    grid-row: 3;
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.5;
    text-transform: none;
}

.account-gift-two-factor-state {
    grid-column: span 2;
    align-items: start;
}
.account-gift-two-factor-state > .account-button {
    grid-column: 1 / -1;
    justify-self: start;
}
.account-gift-two-factor-state.is-required { border-color: rgba(254, 44, 85, 0.38); }
.account-gift-two-factor-state.is-required > .account-card-icon {
    background: var(--account-pink-soft);
    color: var(--pink);
}

.account-gift-catalog-panel,
.account-gift-detail,
.account-gift-market-grid,
.account-module-gifts .account-workspace > .account-panel + .account-panel,
.account-module-gifts .account-workspace > .account-gift-market-grid + .account-panel,
.account-module-gifts .account-workspace > .account-gift-detail + .account-panel { margin-top: 18px; }

.account-gift-catalog {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 12px;
}

.account-gift-catalog-panel > header { gap: 18px; align-items: center; }
.account-gift-balance {
    display: grid;
    min-width: 210px;
    gap: 3px;
    justify-items: end;
    padding: 12px 15px;
    border: 1px solid rgba(37, 244, 238, 0.3);
    border-radius: 16px;
    background: rgba(37, 244, 238, 0.07);
    box-shadow: inset 0 0 28px rgba(37, 244, 238, 0.025);
}
.account-gift-balance > span { color: var(--muted); font-size: 14px; font-weight: 800; }
.account-gift-balance > strong { color: #fff; font-size: 22px; line-height: 1.1; }

.account-gift-catalog-tools {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.account-gift-catalog-search {
    display: grid;
    width: min(460px, 100%);
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--muted);
    transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.account-gift-catalog-search:focus-within { border-color: rgba(37, 244, 238, 0.68); color: var(--cyan); box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.08); }
.account-gift-catalog-search > i { justify-self: center; font-size: 15px; }
.account-gift-catalog-search input {
    width: 100%;
    min-height: 50px;
    padding: 11px 14px 11px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 16px;
}
.account-gift-catalog-tools > p { margin: 0; color: var(--muted); font-size: 14px; white-space: nowrap; }
.account-gift-catalog-tools > p strong { color: var(--cyan); font-size: 16px; }
.account-gift-catalog-empty { margin-top: 12px; }
.account-gift-catalog-empty[hidden] { display: none; }
.account-gift-collection-total {
    display: grid;
    min-width: 220px;
    gap: 4px;
    justify-items: end;
    padding: 12px 15px;
    border: 1px solid rgba(37, 244, 238, 0.3);
    border-radius: 16px;
    background: rgba(37, 244, 238, 0.07);
}
.account-gift-collection-total > span { color: var(--muted); font-size: 15px; font-weight: 800; }
.account-gift-collection-total > strong { color: #fff; font-size: 23px; line-height: 1.15; }
.account-gift-catalog-card {
    display: grid;
    min-width: 0;
    gap: 8px;
    padding: 11px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
    color: inherit;
    text-decoration: none;
    transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.account-gift-catalog-card:hover,
.account-gift-catalog-card:focus-visible,
.account-gift-catalog-card.is-selected {
    border-color: rgba(37, 244, 238, 0.48);
    background: rgba(37, 244, 238, 0.055);
    transform: translateY(-2px);
}

.account-gift-image {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    overflow: hidden;
    border-radius: 15px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.015) 68%);
}

.account-gift-image img { width: 78%; height: 78%; object-fit: contain; }
.account-gift-catalog-card > .account-gift-image { height: 154px; aspect-ratio: auto; border-radius: 13px; }
.account-gift-catalog-card > .account-gift-image img { width: 118px; height: 118px; max-width: 70%; max-height: 78%; }
.account-gift-catalog-card > div { display: grid; min-width: 0; gap: 4px; }
.account-gift-catalog-card > div strong { overflow: hidden; color: #fff; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.account-gift-catalog-card > div span { color: var(--cyan); font-weight: 900; }
.account-gift-catalog-card footer,
.account-gift-catalog-card > p { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
.account-gift-catalog-card footer small,
.account-gift-catalog-card > p span { color: var(--muted); font-size: 13px; }
.account-gift-catalog-card footer b { flex: 0 0 auto; font-size: 13px; }
.account-gift-catalog-card footer small,
.account-gift-catalog-card > p span { white-space: nowrap; }
.account-gift-catalog-card > p { padding-top: 8px; overflow-x: auto; border-top: 1px solid rgba(255, 255, 255, 0.07); font-variant-numeric: tabular-nums; scrollbar-width: thin; }

.account-gift-detail {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.account-gift-selected,
.account-gift-charts { margin-top: 0 !important; }
.account-module-gifts .account-gift-detail > .account-panel,
.account-module-gifts .account-gift-market-grid > .account-panel { margin-top: 0 !important; }
.account-gift-purchase-layout { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 14px; align-items: start; }
.account-gift-selected-price {
    display: flex;
    min-width: 0;
    grid-column: 1 / -1;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border: 1px solid rgba(37, 244, 238, 0.22);
    border-radius: 16px;
    background: rgba(37, 244, 238, 0.055);
}
.account-gift-selected-price > p { margin: 0; color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.35; text-transform: uppercase; }
.account-gift-selected-price > strong { min-width: max-content; flex: 0 0 auto; color: #fff; line-height: 1; }
.account-gift-selected-image { display: grid; width: 140px; max-width: 100%; aspect-ratio: 1; place-items: center; border-radius: 20px; background: radial-gradient(circle, rgba(254, 44, 85, 0.12), rgba(37, 244, 238, 0.035) 68%); }
.account-gift-selected-image img { width: 82%; height: 82%; object-fit: contain; }
.account-gift-selected-copy { min-width: 0; }
.account-gift-selected-copy dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; }
.account-gift-selected-copy dl.is-registration-rose { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-gift-selected-copy dl div { display: grid; min-width: 0; align-content: start; gap: 4px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; background: rgba(255, 255, 255, 0.025); }
.account-gift-owned-card dl { display: grid; gap: 8px; margin: 0; }
.account-gift-owned-card dl div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.account-gift-selected-copy dt,
.account-gift-owned-card dt { color: var(--muted); font-size: 14px; }
.account-gift-selected-copy dd { margin: 0; color: #fff; font-size: 14px; font-weight: 900; text-align: left; }
.account-gift-owned-card dd { margin: 0; color: #fff; font-size: 14px; font-weight: 900; text-align: right; }
.account-gift-owned-card dd:is(.is-positive, .is-negative),
.account-module-gifts .account-activity-list > article > b:is(.is-positive, .is-negative) { display: inline-flex; align-items: center; gap: 5px; }
.account-gift-change-sign { display: inline-block; flex: 0 0 auto; font-size: 24px !important; font-weight: 900; line-height: 1; }
.account-gift-purchase-form { margin-top: 18px; }
.account-gift-purchase-form .account-button { width: 100%; }

.account-gift-charts > header { align-items: flex-start; flex-direction: column; }
.account-gift-charts > header nav { display: flex; width: 100%; gap: 5px; }
.account-gift-charts { width: 100%; }
.account-gift-charts > header h2 { font-size: clamp(20px, 2.4vw, 25px); }
.account-gift-charts > header nav a { flex: 1; padding: 8px 12px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 999px; color: var(--muted); font-size: 14px; font-weight: 800; text-align: center; text-decoration: none; }
.account-gift-charts > header nav a.is-current { border-color: rgba(37, 244, 238, 0.42); background: var(--account-cyan-soft); color: var(--cyan); }
.account-gift-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.account-gift-chart-grid figure { min-width: 0; margin: 0; padding: 13px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(0, 0, 0, 0.22); }
.account-gift-chart-grid figcaption { display: flex; min-width: 0; align-items: flex-start; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.account-gift-chart-grid figcaption span { color: var(--muted); font-size: 14px; }
.account-gift-chart-grid figcaption strong { color: #fff; font-size: 16px; }
.account-gift-chart-grid figure > div { position: relative; min-width: 0; height: 160px; }
.account-gift-chart-grid canvas { display: block; width: 100%; height: 100%; }
.account-gift-chart-grid canvas:focus-visible { border-radius: 10px; outline: 2px solid rgba(37, 244, 238, 0.72); outline-offset: 2px; }
.account-gift-chart-grid figure.is-activity { grid-column: 1 / -1; }
.account-gift-chart-tooltip {
    position: absolute;
    z-index: 3;
    top: 7px;
    display: grid;
    min-width: 140px;
    max-width: min(230px, calc(100% - 16px));
    gap: 5px;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 11px;
    background: rgba(10, 10, 13, 0.96);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
    color: #fff;
    pointer-events: none;
    transform: translateX(-50%);
}
.account-gift-chart-tooltip[hidden] { display: none; }
.account-gift-chart-tooltip strong { font-size: 13px; color: var(--muted); }
.account-gift-chart-tooltip > span { display: grid; gap: 2px; }
.account-gift-chart-tooltip b { font-size: 13px; }
.account-gift-chart-legend { display: flex; flex-wrap: wrap; gap: 7px 12px; margin: 9px 0 0; color: var(--muted); font-size: 13px; }
.account-gift-chart-legend span { display: inline-flex; align-items: center; gap: 5px; }
.account-gift-chart-legend span::before { width: 8px; height: 8px; border-radius: 50%; background: #f8f8f8; content: ""; }
.account-gift-chart-legend .is-buy::before { background: var(--cyan); }
.account-gift-chart-legend .is-sell::before { background: var(--pink); }
.account-gift-chart-legend .is-trades::before { background: #ffd966; }

.account-gift-owned-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.account-gift-collection-panel.has-single-gift { width: min(590px, 100%); }
.account-gift-collection-panel.has-single-gift .account-gift-owned-grid { grid-template-columns: minmax(0, 1fr); }
.account-gift-owned-card {
    display: grid;
    min-width: 0;
    gap: 14px;
    padding: 21px;
    border: 1px solid var(--line);
    border-radius: 21px;
    background: radial-gradient(circle at 100% 0, rgba(37, 244, 238, 0.09), transparent 45%), var(--account-panel);
    box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}
.account-gift-owned-card:hover { border-color: rgba(37, 244, 238, 0.32); box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.35), 3px -3px 0 rgba(254, 44, 85, 0.35), 0 24px 60px rgba(0, 0, 0, 0.3); transform: translateY(-3px); }
.account-gift-owned-card > header { display: grid; min-width: 0; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; align-items: center; }
.account-gift-owned-card > header .account-gift-image { width: 92px; }
.account-gift-owned-card > header > div { display: grid; min-width: 0; gap: 4px; justify-items: start; }
.account-gift-owned-card > header strong { overflow: hidden; max-width: 100%; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.account-gift-owned-card > header small { color: var(--muted); }
.account-gift-owned-card dl { padding: 12px 0; border-block: 1px solid rgba(255, 255, 255, 0.07); }
.account-gift-inline-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 12px;
    align-items: end;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}
.account-gift-inline-form label { display: grid; min-width: 0; gap: 6px; color: var(--muted); font-size: 14px; }
.account-gift-inline-form .account-gift-display-toggle {
    display: flex;
    min-height: 46px;
    grid-column: 1 / -1;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.16);
    color: #e2e2e6;
    cursor: pointer;
}
.account-gift-inline-form .account-gift-display-toggle input {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    margin: 0;
    appearance: none;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 7px;
    background: rgba(255, 255, 255, 0.055);
    cursor: pointer;
}
.account-gift-inline-form .account-gift-display-toggle input::after { color: #030303; font-size: 14px; font-weight: 1000; content: "\2713"; opacity: 0; transform: scale(0.65); transition: opacity 150ms ease, transform 150ms ease; }
.account-gift-inline-form .account-gift-display-toggle input:checked { border-color: var(--cyan); background: var(--cyan); box-shadow: 2px 2px 0 rgba(254, 44, 85, 0.65); }
.account-gift-inline-form .account-gift-display-toggle input:checked::after { opacity: 1; transform: scale(1); }
.account-gift-inline-form .account-gift-display-toggle input:focus-visible { outline: 2px solid rgba(37, 244, 238, 0.72); outline-offset: 3px; }
.account-gift-inline-form .account-gift-position-field {
    display: grid;
    min-height: 50px;
    grid-template-columns: minmax(0, 1fr) 72px;
    grid-column: 1;
    gap: 10px;
    align-items: center;
    padding: 6px 7px 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.16);
}
.account-gift-inline-form .account-gift-position-field > span { color: #dedee3; font-size: 14px; font-weight: 800; }
.account-gift-inline-form .account-button { width: 100%; min-height: 50px; grid-column: 2; font-size: 14px; }
.account-gift-inline-form .account-gift-position-field input[type="number"] {
    width: 100%;
    height: 36px;
    min-width: 0;
    min-height: 0;
    padding: 4px 8px;
    border-radius: 9px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.055);
    color: #fff;
    font-size: 16px;
    font-weight: 900;
    text-align: center;
}
.account-gift-order-range {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(37, 244, 238, 0.35);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(37, 244, 238, 0.1), rgba(254, 44, 85, 0.055));
    box-shadow: inset 0 0 28px rgba(37, 244, 238, 0.025);
}
.account-gift-order-range-heading { display: grid; min-width: 0; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: center; }
.account-gift-order-range-heading > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: rgba(37, 244, 238, 0.12); color: var(--cyan); font-size: 17px; }
.account-gift-order-range-heading > span { color: #fff; font-size: 15px; font-weight: 850; line-height: 1.35; }
.account-gift-order-range-values { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.account-gift-order-range-values > div { display: grid; min-width: 0; gap: 6px; align-content: center; padding: 10px 8px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 13px; background: rgba(0, 0, 0, 0.18); }
.account-gift-order-range-values small { color: var(--muted); font-size: 12px; font-weight: 800; line-height: 1.25; }
.account-gift-order-range-values b { display: flex; min-width: 0; align-items: center; color: #fff; font-variant-numeric: tabular-nums; }
.account-gift-order-range-values > em { display: grid; place-items: center; color: var(--muted-strong); font-size: 18px; font-style: normal; font-weight: 900; }
.account-gift-order-range p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.account-gift-action { width: fit-content; max-width: 100%; border: 1px solid rgba(37, 244, 238, 0.17); border-radius: 15px; background: rgba(37, 244, 238, 0.035); }
.account-gift-action[open] { width: 100%; }
.account-gift-action > summary { display: flex; width: fit-content; max-width: 100%; min-height: 44px; align-items: center; gap: 9px; padding: 11px 13px; color: var(--cyan); font-size: 13px; font-weight: 900; cursor: pointer; list-style: none; }
.account-gift-action > summary::-webkit-details-marker { display: none; }
.account-gift-action > .account-form { width: 100%; padding: 0 13px 13px; box-sizing: border-box; }
.account-gift-action.is-create { margin-bottom: 14px; }
.account-gift-action[open] > summary { margin-bottom: 4px; }
.account-gift-deal-form { gap: 14px; }
.account-gift-deal-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.account-gift-deal-range {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 13px;
    background: rgba(0, 0, 0, 0.17);
}
.account-gift-deal-range > span { color: var(--muted); font-size: 14px; font-weight: 800; }
.account-gift-deal-range > strong { display: grid; min-width: 0; gap: 8px; }
.account-gift-deal-range > strong > span { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 10px; }
.account-gift-deal-range > strong small { color: var(--muted); font-size: 13px; font-weight: 800; }
.account-gift-deal-preview {
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 14px;
    border: 1px solid rgba(37, 244, 238, 0.3);
    border-radius: 17px;
    background: rgba(37, 244, 238, 0.045);
}
.account-gift-deal-preview > header { display: grid; min-width: 0; grid-template-columns: 44px minmax(0, 1fr); gap: 11px; align-items: center; }
.account-gift-deal-preview > header > i { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 13px; background: rgba(37, 244, 238, 0.12); color: var(--cyan); font-size: 17px; }
.account-gift-deal-preview > header > div { display: grid; min-width: 0; gap: 3px; }
.account-gift-deal-preview > header strong { color: #fff; font-size: 16px; line-height: 1.25; }
.account-gift-deal-preview > header span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.account-gift-deal-preview dl { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 9px; margin: 0; }
.account-gift-deal-preview dl > div { display: flex; min-width: 0; min-height: 64px; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 11px; border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 13px; background: rgba(0, 0, 0, 0.19); }
.account-gift-deal-preview dt { min-width: 0; flex: 1 1 auto; color: var(--muted); font-size: 14px; font-weight: 800; line-height: 1.4; }
.account-gift-deal-preview dt small { display: inline-flex; margin-left: 4px; padding: 2px 6px; border-radius: 999px; background: rgba(254, 44, 85, 0.12); color: var(--pink); font-size: 12px; }
.account-gift-deal-preview dd { display: flex; min-width: 0; flex: 0 0 auto; margin: 0; align-items: center; justify-content: flex-end; color: #fff; font-weight: 900; }
.account-gift-deal-preview dl > .is-total { border-color: rgba(37, 244, 238, 0.34); background: rgba(37, 244, 238, 0.075); }
.account-gift-deal-preview dl > .is-shortage { border-color: rgba(254, 44, 85, 0.34); background: rgba(254, 44, 85, 0.08); }
.account-gift-deal-preview dl > .is-shortage dt,
.account-gift-deal-preview dl > .is-shortage dd { color: #ff9caf; }
.account-gift-deal-preview > p { display: flex; align-items: flex-start; gap: 9px; margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.account-gift-deal-preview > p i { margin-top: 3px; color: var(--cyan); }
.account-gift-deal-form > .account-button { width: fit-content; max-width: 100%; min-height: 48px; justify-self: start; padding: 10px 15px; }
.account-gift-deal-form.has-insufficient-balance > .account-button { border-color: rgba(254, 44, 85, 0.34); }
.account-gift-listing-state { display: grid; gap: 3px; padding: 11px 13px; border-radius: 13px; background: rgba(254, 44, 85, 0.07); }
.account-gift-listing-state span { color: #fff; font-weight: 800; }
.account-gift-listing-state time { color: var(--muted); font-size: 13px; }
.account-gift-callout {
    display: grid;
    min-width: 0;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 14px 0 0;
    padding: 13px 14px;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 15px;
    background: rgba(37, 244, 238, 0.045);
    color: #dfdfe4;
    font-size: 14px;
    line-height: 1.55;
}
.account-gift-callout > i {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: rgba(37, 244, 238, 0.11);
    color: var(--cyan);
    font-size: 16px;
}
.account-gift-callout > span { min-width: 0; }
.account-gift-callout:is(.is-risk, .is-lock) { border-color: rgba(254, 44, 85, 0.22); background: rgba(254, 44, 85, 0.05); }
.account-gift-callout:is(.is-risk, .is-lock) > i { background: rgba(254, 44, 85, 0.12); color: var(--pink); }
.account-gift-escrow-note { margin: 0; }
.account-gift-no-regift { margin-top: 0; }
.account-gift-special-policy { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0 0; padding: 11px 12px; border: 1px solid rgba(37, 244, 238, 0.2); border-radius: 13px; background: rgba(37, 244, 238, 0.04); color: var(--muted); font-size: 14px; line-height: 1.55; }
.account-gift-special-policy i { margin-top: 2px; color: var(--cyan); }
.account-gift-system-form { display: flex; justify-content: flex-start; }
.account-gift-system-form .account-button { width: fit-content; max-width: 100%; min-height: 48px; flex-wrap: nowrap; padding: 9px 14px; font-size: 13px; white-space: nowrap; }

.account-gift-two-factor-dialog {
    width: min(620px, calc(100vw - 34px));
    max-width: none;
    padding: 0;
    border: 0;
    overflow: visible;
    border-radius: 26px;
    background: transparent;
    color: #fff;
}
.account-gift-two-factor-dialog:not([open]) { display: none; }
.account-gift-two-factor-dialog::backdrop { background: rgba(2, 2, 4, 0.86); backdrop-filter: blur(11px) saturate(0.88); }
.account-gift-two-factor-card {
    display: grid;
    gap: 22px;
    padding: clamp(24px, 4.5vw, 38px);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 26px;
    background:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        #0b0b0d;
    background-size: 24px 24px;
    box-shadow: -6px 6px 0 rgba(37, 244, 238, 0.78), 6px -6px 0 rgba(254, 44, 85, 0.78), 0 34px 92px rgba(0, 0, 0, 0.64);
}
.account-gift-two-factor-card > header { display: grid; grid-template-columns: 58px minmax(0, 1fr) 44px; gap: 15px; align-items: center; }
.account-gift-two-factor-card > header > span { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.32); border-radius: 18px; background: rgba(37, 244, 238, 0.1); color: var(--cyan); font-size: 21px; box-shadow: inset 0 0 24px rgba(37, 244, 238, 0.06); }
.account-gift-two-factor-card > header div { min-width: 0; }
.account-gift-two-factor-card > header small { color: var(--cyan); font-size: 14px; font-weight: 900; letter-spacing: 0.12em; }
.account-gift-two-factor-card > header h2 { margin: 4px 0 0; font-size: clamp(24px, 4vw, 32px); line-height: 1.08; }
.account-gift-two-factor-card > header button { display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 13px; background: rgba(255, 255, 255, 0.06); color: #fff; font-size: 17px; cursor: pointer; transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease; }
.account-gift-two-factor-card > header button:hover,
.account-gift-two-factor-card > header button:focus-visible { border-color: rgba(254, 44, 85, 0.64); outline: 0; background: rgba(254, 44, 85, 0.13); color: var(--pink); transform: rotate(4deg) scale(1.05); }
.account-gift-two-factor-card > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.6; }
.account-gift-two-factor-field { display: grid; gap: 10px; color: #fff; font-size: 15px; font-weight: 800; }
.account-gift-two-factor-field input { min-height: 74px; padding-right: 20px; padding-left: calc(20px + 0.38em); border-color: rgba(255, 255, 255, 0.2); letter-spacing: 0.38em; text-align: center; font-size: clamp(24px, 5vw, 34px); font-variant-numeric: tabular-nums; font-weight: 900; }
.account-gift-two-factor-field input:hover { border-color: rgba(254, 44, 85, 0.56); box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.34), 3px -3px 0 rgba(254, 44, 85, 0.34); }
.account-gift-two-factor-field input:focus { border-color: var(--cyan); box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.48), 3px -3px 0 rgba(254, 44, 85, 0.48), 0 0 0 3px rgba(37, 244, 238, 0.1); }
.account-gift-two-factor-card > footer { display: flex; justify-content: flex-end; gap: 9px; }
.account-gift-two-factor-card > footer .account-button { min-height: 50px; font-size: 14px; }
.account-gift-two-factor-missing { padding: 14px 15px; border: 1px solid rgba(254, 44, 85, 0.24); border-radius: 15px; background: var(--account-pink-soft); color: #fff !important; font-size: 15px !important; }
.account-gift-two-factor-missing i { margin-right: 7px; color: var(--pink); }

.account-gift-market-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.account-gift-market-grid > .account-panel { min-width: 0; margin: 0; }
.account-gift-order-list { display: grid; gap: 10px; }
.account-gift-order-list > article { display: grid; min-width: 0; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 15px; background: rgba(255, 255, 255, 0.02); }
.account-gift-order-list > article > img { width: 64px; height: 64px; padding: 7px; object-fit: contain; border-radius: 13px; background: rgba(255, 255, 255, 0.045); }
.account-gift-order-list > article > div { display: grid; min-width: 0; gap: 3px; }
.account-gift-order-list strong { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.account-gift-order-list small,
.account-gift-order-list em { color: var(--muted); font-size: 13px; font-style: normal; }
.account-gift-order-list span { color: var(--cyan); font-weight: 900; }
.account-gift-order-list form { display: grid; min-width: 0; gap: 6px; }
.account-gift-order-list select { max-width: 130px; }
.account-gift-final-note { margin-top: 15px; }
.account-module-gifts .account-badge { min-height: 30px; font-size: 13px; }
.account-module-gifts .account-form-note { font-size: 14px; line-height: 1.55; }

@media (max-width: 1180px) {
    .account-gift-overview-grid,
    .account-gift-catalog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-gift-detail,
    .account-gift-market-grid { grid-template-columns: 1fr; }
    .account-gift-selected,
    .account-gift-charts { width: min(560px, 100%); }
    .account-module-gifts .account-gift-overview-grid > .account-gift-overview-card { grid-column: auto; }
    .account-module-gifts .account-gift-overview-grid > .account-gift-two-factor-state { grid-column: 1 / -1; }
    .account-gift-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-gift-chart-grid figure.is-activity { grid-column: 1 / -1; }
}

@media (min-width: 1181px) and (max-width: 1400px) {
    .account-gift-chart-grid { grid-template-columns: 1fr; }
    .account-gift-chart-grid figure.is-activity { grid-column: auto; }
}

@media (max-width: 760px) {
    .account-gift-owned-grid { grid-template-columns: 1fr; }
    .account-gift-purchase-layout { grid-template-columns: 130px minmax(0, 1fr); }
    .account-gift-selected-image { width: 130px; }
}

@media (max-width: 620px) {
    .account-gift-overview-grid { grid-template-columns: 1fr; gap: 11px; }
    .account-module-gifts .account-gift-overview-grid > .account-gift-overview-card,
    .account-module-gifts .account-gift-overview-grid > .account-gift-two-factor-state { min-height: 0; grid-column: 1; }
    .account-gift-two-factor-state { align-items: flex-start; flex-wrap: wrap; }
    .account-gift-two-factor-state > .account-button { grid-column: 1 / -1; width: 100%; }
    .account-gift-catalog-panel > header { align-items: stretch; flex-direction: column; }
    .account-gift-balance { width: 100%; min-width: 0; justify-items: start; }
    .account-gift-catalog-tools { align-items: stretch; flex-direction: column; }
    .account-gift-catalog-search { width: 100%; }
    .account-gift-catalog-tools > p { align-self: flex-end; }
    .account-gift-catalog { grid-template-columns: 1fr; gap: 11px; }
    .account-gift-catalog-card { padding: 11px; border-radius: 16px; }
    .account-gift-catalog-card > .account-gift-image { height: 154px; }
    .account-gift-catalog-card > p { align-items: center; flex-direction: row; gap: 8px; }
    .account-gift-purchase-layout { grid-template-columns: 1fr; }
    .account-gift-selected-price { align-items: flex-start; flex-direction: column; }
    .account-gift-selected-image { max-width: 220px; justify-self: center; }
    .account-gift-selected-copy dl { grid-template-columns: 1fr; }
    .account-gift-charts > header nav { width: 100%; }
    .account-gift-charts > header nav a { flex: 1; text-align: center; }
    .account-gift-chart-grid { grid-template-columns: 1fr; }
    .account-gift-chart-grid figure.is-activity { grid-column: auto; }
    .account-gift-inline-form { grid-template-columns: 1fr; }
    .account-gift-inline-form .account-gift-position-field,
    .account-gift-inline-form .account-button { grid-column: 1; }
    .account-gift-deal-fields,
    .account-gift-deal-preview dl { grid-template-columns: 1fr; }
    .account-gift-deal-preview dl > .is-total { grid-column: auto; }
    .account-gift-order-list > article { grid-template-columns: 54px minmax(0, 1fr); }
    .account-gift-order-list > article > img { width: 54px; height: 54px; }
    .account-gift-order-list > article > :is(form, .account-badge) { grid-column: 2; justify-self: start; }
    .account-gift-order-list form .account-button { width: 100%; }
    .account-gift-two-factor-card > footer { align-items: stretch; flex-direction: column-reverse; }
    .account-gift-two-factor-card > footer .account-button { width: 100%; }
}

@media (max-width: 390px) {
    .account-gift-catalog-card > div strong { font-size: 15px; }
    .account-gift-catalog-card footer { align-items: center; flex-direction: row; gap: 8px; }
    .account-gift-two-factor-card { padding: 20px 17px; border-radius: 20px; box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.78), 3px -3px 0 rgba(254, 44, 85, 0.78), 0 24px 64px rgba(0, 0, 0, 0.6); }
    .account-gift-two-factor-card > header { grid-template-columns: 48px minmax(0, 1fr) 40px; gap: 10px; }
    .account-gift-two-factor-card > header > span { width: 48px; height: 48px; border-radius: 15px; }
    .account-gift-two-factor-card > header button { width: 40px; height: 40px; }
    .account-gift-order-range { padding: 13px; }
    .account-gift-order-range-heading { grid-template-columns: 1fr; gap: 0; }
    .account-gift-order-range-heading > i { display: none; }
    .account-gift-order-range-values { grid-template-columns: 1fr; gap: 8px; }
    .account-gift-order-range-values > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 8px; }
    .account-gift-order-range-values > em { display: none; }
    .account-gift-deal-preview { padding: 13px; }
    .account-gift-deal-preview dl > div { align-items: flex-start; flex-direction: column; }
    .account-gift-deal-preview dd { justify-content: flex-start; }
    .account-profile-gift-grid { grid-template-columns: minmax(0, 1fr); }
    .account-gift-owned-card > header { grid-template-columns: 74px minmax(0, 1fr); }
    .account-gift-owned-card > header .account-gift-image { width: 74px; }
    .account-gift-owned-card dl div { align-items: flex-start; flex-direction: column; gap: 3px; }
    .account-gift-owned-card dd { text-align: left; }
}

/* Gift lists: shared search, pagination and stable responsive composition. */
.account-gift-catalog-panel > header > .account-gift-balance,
.account-gift-collection-panel > header > .account-gift-collection-total {
    display: grid;
}

.account-gift-catalog {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
}

.account-gift-catalog-card > .account-gift-image { height: 118px; }
.account-gift-catalog-card > .account-gift-image img { width: 92px; height: 92px; }

.account-gift-catalog-search {
    display: flex;
    width: min(650px, 100%);
    gap: 8px;
    align-items: center;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
}
.account-gift-catalog-search > label {
    display: grid;
    min-width: 220px;
    flex: 1 1 360px;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.22);
    color: var(--muted);
    transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.account-gift-catalog-search > label:focus-within {
    border-color: rgba(37, 244, 238, 0.68);
    color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.08);
}
.account-gift-catalog-search > label > i { justify-self: center; font-size: 15px; }
.account-gift-catalog-search > label input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    padding: 10px 13px 10px 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff;
    font-size: 15px;
}
.account-gift-catalog-search > .account-button { min-height: 48px; flex: 0 0 auto; }
.account-gift-search-reset {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    padding: 8px 4px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}
.account-gift-search-reset:hover { color: var(--cyan); }

.account-pagination {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(105px, auto) minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-top: 16px;
    padding-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.account-pagination-summary,
.account-pagination-position { margin: 0; color: var(--muted); font-size: 13px; font-weight: 750; }
.account-pagination-summary { display: grid; gap: 2px; }
.account-pagination-summary strong { color: #fff; font-size: 15px; font-variant-numeric: tabular-nums; }
.account-pagination-pages { display: flex; min-width: 0; gap: 6px; align-items: center; justify-content: center; }
.account-pagination-page,
.account-pagination-arrow {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    flex: 0 0 38px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.035);
    color: #dedee3;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms var(--ease);
}
.account-pagination-page:hover,
.account-pagination-arrow:hover { border-color: rgba(37, 244, 238, 0.42); background: rgba(37, 244, 238, 0.08); color: var(--cyan); transform: translateY(-1px); }
.account-pagination-page.is-current { border-color: var(--cyan); background: var(--cyan); color: #030303; box-shadow: 2px 2px 0 rgba(254, 44, 85, 0.72); }
.account-pagination-arrow.is-disabled { opacity: 0.32; }
.account-pagination-gap { display: grid; width: 18px; place-items: center; color: var(--muted); }
.account-pagination-position { justify-self: end; white-space: nowrap; }

.account-gift-owned-card { grid-template-columns: minmax(0, 1fr); }

.account-gift-my-order-list { display: grid; gap: 10px; }
.account-gift-my-order {
    display: grid;
    min-width: 0;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(37, 244, 238, 0.045), rgba(255, 255, 255, 0.018));
}
.account-gift-order-art,
.account-gift-deal-art {
    position: relative;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    flex: 0 0 auto;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 15px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
}
.account-gift-order-art img,
.account-gift-deal-art img { width: 82%; height: 82%; object-fit: contain; }
.account-gift-my-order-body { display: grid; min-width: 0; gap: 9px; }
.account-gift-my-order-body > header { display: flex; min-width: 0; gap: 10px; align-items: center; justify-content: space-between; }
.account-gift-my-order-body > header strong { overflow: hidden; color: #fff; text-overflow: ellipsis; white-space: nowrap; }
.account-gift-my-order-body dl { display: flex; min-width: 0; gap: 18px; margin: 0; }
.account-gift-my-order-body dl > div { display: grid; min-width: 0; gap: 3px; }
.account-gift-my-order-body dt { color: var(--muted); font-size: 12px; font-weight: 800; }
.account-gift-my-order-body dd { margin: 0; color: #fff; font-size: 13px; font-weight: 800; }
.account-gift-my-order > form .account-button { min-height: 42px; }

.account-gift-history-panel .account-activity-list > article {
    display: grid;
    min-width: 0;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
}
.account-gift-deal-art { overflow: visible; }
.account-gift-deal-art img { overflow: hidden; border-radius: 12px; }
.account-gift-deal-art > i {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border: 2px solid #0b0b0e;
    border-radius: 9px;
    background: #172624;
    color: var(--cyan);
    font-size: 10px;
}

.account-exchange-request__txid {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    gap: 7px;
    color: rgb(var(--exchange-cyan));
    text-decoration: none;
}

.account-exchange-request__txid code {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-exchange-request__txid:hover,
.account-exchange-request__txid:focus-visible {
    color: #fff;
    outline: 0;
}
.account-gift-deal-art > i.is-negative { background: #30131b; color: #ff7991; }
.account-gift-history-panel .account-activity-list > article > div { min-width: 0; }
.account-gift-history-panel .account-activity-list > article > div strong { white-space: normal; }
.account-gift-history-panel .account-activity-list > article > b { justify-self: end; }

.account-gift-chart-grid figure { position: relative; }
.account-gift-chart-grid figure:has(.account-gift-chart-tooltip:not([hidden])) { z-index: 8; }
.account-gift-chart-grid figure > div { overflow: visible; }
.account-gift-chart-tooltip { z-index: 20; }

@media (max-width: 620px) {
    .account-shell .account-page-heading {
        display: grid;
        min-height: 0;
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        align-items: start;
        padding: 16px;
    }
    .account-shell .account-page-heading > div:first-child {
        width: 100%;
        max-width: none;
        order: 2;
    }
    .account-shell .account-heading-side {
        width: 100%;
        order: 1;
        justify-content: space-between;
    }
    .account-shell .account-heading-signal {
        width: 48px;
        height: 48px;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 4px;
        border-radius: 14px;
    }
    .account-shell .account-heading-signal > i { width: 38px; height: 38px; border-radius: 11px; }
    .account-shell .account-heading-signal > b { display: none; }
    .account-shell .account-page-heading h1 { font-size: 31px; }
    .account-shell .account-page-heading > div:first-child > span { font-size: 14px; line-height: 1.5; }

    .account-gift-catalog-panel > header,
    .account-gift-collection-panel > header { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; }
    .account-gift-catalog-panel > header > .account-gift-balance,
    .account-gift-collection-panel > header > .account-gift-collection-total {
        width: 100%;
        min-width: 0;
        justify-items: start;
        box-sizing: border-box;
    }
    .account-gift-balance > strong,
    .account-gift-collection-total > strong { max-width: 100%; }

    .account-gift-catalog-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; }
    .account-gift-catalog-search > label { width: 100%; min-width: 0; }
    .account-gift-catalog-search > .account-button { padding-inline: 13px; }
    .account-gift-search-reset { grid-column: 1 / -1; justify-self: start; }
    .account-gift-catalog-card > .account-gift-image { height: 108px; }
    .account-gift-catalog-card > .account-gift-image img { width: 84px; height: 84px; }

    .account-pagination { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    .account-pagination-summary { grid-template-columns: auto 1fr; gap: 5px; align-items: baseline; justify-self: center; }
    .account-pagination-pages { width: 100%; overflow-x: auto; justify-content: flex-start; padding: 3px; scrollbar-width: thin; }
    .account-pagination-position { justify-self: center; }

    .account-gift-collection-panel.has-single-gift { width: 100%; }
    .account-gift-owned-card { gap: 12px; padding: 14px; }
    .account-gift-owned-card > header { grid-template-columns: 72px minmax(0, 1fr); gap: 11px; }
    .account-gift-owned-card > header .account-gift-image { width: 72px; }
    .account-gift-owned-card dl div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; justify-items: start; }
    .account-gift-owned-card dd { max-width: 100%; text-align: left; }
    .account-gift-inline-form { width: 100%; padding: 10px; box-sizing: border-box; }
    .account-gift-inline-form .account-gift-position-field { grid-template-columns: minmax(0, 1fr) 64px; }
    .account-gift-system-form,
    .account-gift-system-form .account-button { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
    .account-gift-system-form .account-button { flex-wrap: wrap; justify-content: flex-start; padding-inline: 12px; white-space: normal; }

    .account-gift-action { width: 100%; min-width: 0; box-sizing: border-box; }
    .account-gift-action > summary { width: 100%; box-sizing: border-box; }
    .account-gift-action > .account-form { min-width: 0; }
    .account-gift-deal-form { grid-template-columns: minmax(0, 1fr); }
    .account-gift-order-range,
    .account-gift-deal-preview { min-width: 0; padding: 10px; }
    .account-gift-order-range-values { grid-template-columns: minmax(0, 1fr); }
    .account-gift-order-range-values > em { display: none; }
    .account-gift-order-range-values > div { display: grid; min-width: 0; justify-items: start; }
    .account-gift-deal-range > strong > span { display: grid; min-width: 0; gap: 4px; justify-items: start; }
    .account-gift-deal-preview dl > div { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 5px; justify-items: start; }
    .account-gift-deal-preview dd { width: 100%; max-width: 100%; justify-content: flex-start; }
    .account-gift-deal-form > .account-button { width: 100%; justify-self: stretch; }

    .account-gift-order-list > article > :is(form, .account-badge) { grid-column: 1 / -1; justify-self: stretch; }
    .account-gift-order-list form { width: 100%; grid-template-columns: minmax(0, 1fr) auto; }
    .account-gift-order-list select { width: 100%; max-width: none; }

    .account-gift-my-order { grid-template-columns: 54px minmax(0, 1fr); gap: 10px; }
    .account-gift-order-art { width: 54px; height: 54px; }
    .account-gift-my-order-body > header { align-items: flex-start; flex-direction: column; }
    .account-gift-my-order-body dl { display: grid; gap: 8px; }
    .account-gift-my-order > form { grid-column: 1 / -1; }
    .account-gift-my-order > form .account-button { width: 100%; }

    .account-gift-history-panel .account-activity-list > article { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; }
    .account-gift-deal-art { width: 52px; height: 52px; }
    .account-gift-history-panel .account-activity-list > article > b { grid-column: 1 / -1; justify-self: start; margin: 0; }
}

@media (max-width: 390px) {
    .account-shell .account-heading-signal { width: 48px; height: 48px; grid-template-columns: 1fr; padding: 4px; }
    .account-shell .account-heading-signal > i { width: 38px; height: 38px; }
    .account-gift-catalog-search { grid-template-columns: minmax(0, 1fr); }
    .account-gift-catalog-search > .account-button { width: 100%; }
    .account-gift-order-list form { grid-template-columns: minmax(0, 1fr); }
}

/* Account security: the same restrained visual system as the finished profile page. */
.account-shell.account-module-security {
    --module-accent: var(--cyan);
    --module-accent-rgb: 37, 244, 238;
    --module-secondary: var(--pink);
}

.account-security-hero {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) 216px;
    gap: 22px 28px;
    align-items: center;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.22);
    border-radius: 28px;
    background:
        radial-gradient(circle at 93% 15%, rgba(37, 244, 238, 0.15), transparent 28%),
        radial-gradient(circle at 8% 110%, rgba(254, 44, 85, 0.09), transparent 38%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.035), transparent 42%),
        rgba(12, 12, 15, 0.96);
    box-shadow: 0 24px 72px rgba(0, 0, 0, 0.3);
    isolation: isolate;
    animation: account-security-enter 440ms var(--ease) both;
}

.account-security-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    background:
        linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
    background-size: 27px 27px;
    content: "";
    mask-image: linear-gradient(105deg, #000, transparent 72%);
}

.account-security-hero::after {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 28px;
    left: 28px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), rgba(255, 255, 255, 0.9), var(--pink), transparent);
    opacity: 0.64;
    content: "";
}

.account-security-hero-copy {
    display: grid;
    min-width: 0;
    gap: 10px;
    align-content: center;
}

.account-security-kicker {
    display: inline-flex;
    width: fit-content;
    gap: 8px;
    align-items: center;
    color: var(--cyan);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.account-security-kicker i { font-size: 14px; }
.account-security-hero h2 {
    max-width: 660px;
    margin: 0;
    color: #fff;
    font-size: clamp(30px, 4vw, 46px);
    line-height: 1.03;
    letter-spacing: -0.045em;
}

.account-security-hero-copy > p {
    max-width: 670px;
    margin: 0;
    color: #b9b9c0;
    font-size: 15px;
    line-height: 1.65;
}

.account-security-hero-status {
    display: inline-flex;
    width: fit-content;
    min-height: 38px;
    gap: 9px;
    align-items: center;
    margin-top: 3px;
    padding: 8px 12px;
    border: 1px solid rgba(54, 230, 154, 0.24);
    border-radius: 12px;
    background: rgba(54, 230, 154, 0.075);
    color: var(--success);
    font-size: 12px;
    font-weight: 850;
}

.account-security-hero-status.is-attention {
    border-color: rgba(255, 204, 77, 0.28);
    background: rgba(255, 204, 77, 0.075);
    color: var(--warning);
}

.account-security-hero-visual {
    position: relative;
    display: grid;
    width: 190px;
    height: 190px;
    place-items: center;
    justify-self: center;
}

.account-security-hero-visual::before,
.account-security-hero-visual::after {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(37, 244, 238, 0.15);
    border-radius: 50%;
    content: "";
    animation: account-security-orbit 18s linear infinite;
}

.account-security-hero-visual::after {
    inset: 33px;
    border-color: rgba(254, 44, 85, 0.13);
    animation-direction: reverse;
    animation-duration: 13s;
}

.account-security-hero-visual > span {
    position: relative;
    z-index: 2;
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.35);
    border-radius: 29px;
    background: linear-gradient(145deg, rgba(37, 244, 238, 0.2), rgba(37, 244, 238, 0.055));
    box-shadow: -4px 4px 0 rgba(37, 244, 238, 0.23), 4px -4px 0 rgba(254, 44, 85, 0.2), 0 20px 55px rgba(0, 0, 0, 0.4);
    color: var(--cyan);
    font-size: 38px;
    animation: account-security-shield 3.4s ease-in-out infinite;
}

.account-security-hero-visual > i {
    position: absolute;
    z-index: 3;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 11px;
    background: #17171b;
    color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
    font-size: 13px;
}

.account-security-hero-visual > i:nth-of-type(1) { top: 8px; right: 22px; color: var(--cyan); }
.account-security-hero-visual > i:nth-of-type(2) { right: 2px; bottom: 31px; color: var(--pink); }
.account-security-hero-visual > i:nth-of-type(3) { bottom: 8px; left: 25px; }

.account-security-metrics {
    display: grid;
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    padding-top: 19px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.account-security-metrics article {
    display: grid;
    min-width: 0;
    min-height: 74px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.026);
    transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease);
}

.account-security-metrics article:hover { border-color: rgba(37, 244, 238, 0.27); background: rgba(37, 244, 238, 0.045); transform: translateY(-2px); }
.account-security-metrics article > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--cyan);
}

.account-security-metrics article > span.is-pink { color: var(--pink); }
.account-security-metrics article > span.is-white { color: #fff; }
.account-security-metrics article > div { display: grid; min-width: 0; gap: 3px; }
.account-security-metrics small { overflow: hidden; color: #8e8e97; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.account-security-metrics strong { color: #fff; font-size: 19px; font-weight: 900; line-height: 1.15; }

.account-security-core-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.18fr) minmax(340px, 0.82fr);
    gap: 20px;
    align-items: start;
    margin-top: 20px;
}

.account-security-card {
    --security-card-accent: 37, 244, 238;
    --security-card-secondary: 254, 44, 85;
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-color: rgba(var(--security-card-accent), 0.2);
    background:
        radial-gradient(circle at 105% -5%, rgba(var(--security-card-accent), 0.11), transparent 37%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.027), transparent 47%),
        var(--account-panel);
    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.25);
    isolation: isolate;
    animation: account-security-enter 440ms var(--ease) both;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-security-card.is-password { --security-card-accent: 254, 44, 85; --security-card-secondary: 37, 244, 238; animation-delay: 70ms; }
.account-security-card.is-sessions { --security-card-accent: 255, 255, 255; --security-card-secondary: 37, 244, 238; margin-top: 20px; animation-delay: 120ms; }
.account-security-card.is-events { --security-card-accent: 37, 244, 238; --security-card-secondary: 254, 44, 85; margin-top: 20px; animation-delay: 170ms; }
.account-security-card::before {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 24px;
    left: 24px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, rgba(var(--security-card-accent), 0.98), rgba(var(--security-card-secondary), 0.82), transparent);
    opacity: 0.54;
    content: "";
    transform: scaleX(0.86);
    transition: opacity 190ms ease, transform 190ms var(--ease);
}

.account-security-card::after {
    position: absolute;
    z-index: -1;
    right: -78px;
    bottom: -98px;
    width: 205px;
    height: 205px;
    border: 1px solid rgba(var(--security-card-accent), 0.09);
    border-radius: 50%;
    box-shadow: 0 0 0 32px rgba(var(--security-card-secondary), 0.018);
    content: "";
    transition: transform 220ms var(--ease), border-color 220ms ease;
}

.account-security-card:hover { border-color: rgba(var(--security-card-accent), 0.36); box-shadow: 0 25px 68px rgba(0, 0, 0, 0.31); transform: translateY(-2px); }
.account-security-card:hover::before { opacity: 0.88; transform: scaleX(1); }
.account-security-card:hover::after { border-color: rgba(var(--security-card-accent), 0.16); transform: translate(-8px, -8px) scale(1.05); }

.account-security-card > header { position: relative; z-index: 1; align-items: flex-start; }
.account-security-card > header > div { align-items: center; }
.account-security-card > header > div > i {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(var(--security-card-accent), 0.22);
    border-radius: 14px;
    background: rgba(var(--security-card-accent), 0.085);
    color: rgb(var(--security-card-accent));
    box-shadow: inset -2px 0 0 rgba(var(--security-card-secondary), 0.45);
    transition: transform 180ms var(--ease), background 180ms ease, border-color 180ms ease;
}

.account-security-card:hover > header > div > i { border-color: rgba(var(--security-card-accent), 0.42); background: rgba(var(--security-card-accent), 0.14); transform: rotate(-5deg) scale(1.06); }
.account-security-card > header > div > div { display: grid; min-width: 0; gap: 2px; }
.account-security-card > header small { color: rgb(var(--security-card-accent)); font-size: 10px; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; }
.account-security-card > header h2 { font-size: 20px; line-height: 1.2; }
.account-security-card > .account-panel-copy { position: relative; z-index: 1; margin-top: -2px; font-size: 14px; line-height: 1.6; }
.account-security-count {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid rgba(var(--security-card-accent), 0.18);
    border-radius: 999px;
    background: rgba(var(--security-card-accent), 0.06);
    color: rgb(var(--security-card-accent)) !important;
    font-size: 11px !important;
    font-weight: 850;
    white-space: nowrap;
}

.account-security-status-callout {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    padding: 15px;
    border: 1px solid rgba(54, 230, 154, 0.2);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(54, 230, 154, 0.08), rgba(255, 255, 255, 0.018));
}

.account-security-status-callout.is-pending { border-color: rgba(255, 204, 77, 0.24); background: linear-gradient(135deg, rgba(255, 204, 77, 0.085), rgba(255, 255, 255, 0.018)); }
.account-security-status-callout.is-attention { border-color: rgba(254, 44, 85, 0.24); background: linear-gradient(135deg, rgba(254, 44, 85, 0.08), rgba(255, 255, 255, 0.018)); }
.account-security-status-callout > span {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    border: 1px solid rgba(54, 230, 154, 0.24);
    border-radius: 16px;
    background: rgba(54, 230, 154, 0.09);
    color: var(--success);
    font-size: 19px;
}

.account-security-status-callout.is-pending > span { border-color: rgba(255, 204, 77, 0.27); background: rgba(255, 204, 77, 0.09); color: var(--warning); }
.account-security-status-callout.is-attention > span { border-color: rgba(254, 44, 85, 0.27); background: rgba(254, 44, 85, 0.09); color: #ff6f8b; }
.account-security-status-callout > div { display: grid; min-width: 0; gap: 4px; }
.account-security-status-callout strong { color: #fff; font-size: 15px; }
.account-security-status-callout p { margin: 0; color: #a9a9b1; font-size: 12px; line-height: 1.55; }

.account-security-info-strip {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    margin: 0 0 18px;
    padding: 11px 13px;
    border: 1px solid rgba(37, 244, 238, 0.15);
    border-radius: 14px;
    background: rgba(37, 244, 238, 0.045);
}

.account-security-info-strip > i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 11px; background: rgba(37, 244, 238, 0.09); color: var(--cyan); }
.account-security-info-strip p { margin: 0; color: #ababB3; font-size: 11px; line-height: 1.5; }

.account-security-benefits {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

.account-security-benefits li { display: grid; min-width: 0; grid-template-columns: 36px minmax(0, 1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 13px; background: rgba(255, 255, 255, 0.023); color: #c8c8ce; font-size: 12px; }
.account-security-benefits i { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: rgba(37, 244, 238, 0.07); color: var(--cyan); }

.account-security-form { position: relative; z-index: 1; }
.account-security-form .account-button { width: fit-content; min-width: 0; min-height: 44px; padding-inline: 16px; }
.account-security-code-field input { font-variant-numeric: tabular-nums; letter-spacing: 0.25em; }
.account-security-form-footer { display: flex; min-width: 0; gap: 14px; align-items: center; justify-content: space-between; }
.account-security-form-footer > p { display: flex; min-width: 0; gap: 8px; align-items: flex-start; margin: 0; color: #85858e; font-size: 10px; line-height: 1.5; }
.account-security-form-footer > p i { flex: 0 0 auto; margin-top: 2px; color: var(--cyan); }
.account-security-form-footer .account-button { flex: 0 0 auto; }

.account-security-danger-zone {
    position: relative;
    z-index: 1;
    margin-top: 18px;
    border: 1px solid rgba(254, 44, 85, 0.16);
    border-radius: 16px;
    background: rgba(254, 44, 85, 0.025);
    overflow: hidden;
}

.account-security-danger-zone > summary,
.account-security-history > summary {
    display: flex;
    min-height: 50px;
    gap: 13px;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    color: #dadade;
    cursor: pointer;
    list-style: none;
}

.account-security-danger-zone > summary::-webkit-details-marker,
.account-security-history > summary::-webkit-details-marker { display: none; }
.account-security-danger-zone > summary > span,
.account-security-history > summary > span { display: flex; min-width: 0; gap: 9px; align-items: center; }
.account-security-danger-zone > summary > span > i { color: #ff6f8b; }
.account-security-danger-zone > summary > i,
.account-security-history > summary > i { color: #7f7f87; font-size: 11px; transition: transform 180ms var(--ease); }
.account-security-danger-zone[open] > summary > i,
.account-security-history[open] > summary > i { transform: rotate(180deg); }
.account-security-danger-zone > div { display: grid; gap: 16px; padding: 0 14px 15px; border-top: 1px solid rgba(254, 44, 85, 0.1); }
.account-security-danger-zone > div > p { margin: 14px 0 0; color: #9b9ba3; font-size: 11px; line-height: 1.55; }

.account-security-setup-grid {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.account-security-qr-card {
    display: grid;
    min-width: 0;
    gap: 13px;
    justify-items: center;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 19px;
    background: rgba(255, 255, 255, 0.03);
    width: min(100%, 320px);
    justify-self: center;
    text-align: center;
}

.account-security-qr-frame {
    position: relative;
    display: grid;
    width: 100%;
    max-width: 224px;
    aspect-ratio: 1;
    place-items: center;
    padding: 10px;
    border: 1px solid rgba(37, 244, 238, 0.28);
    border-radius: 19px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.34), -3px 3px 0 rgba(37, 244, 238, 0.28), 3px -3px 0 rgba(254, 44, 85, 0.24);
}

.account-security-qr-code { display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; border-radius: 10px; background: #fff; }
.account-security-qr-code canvas { display: block; width: 100% !important; height: 100% !important; object-fit: contain; }
.account-security-qr-code img,
.account-security-qr-code svg { width: 100% !important; height: 100% !important; object-fit: contain; }
.account-security-qr-code.is-error::before { color: #7e182b; content: "QR"; font-size: 42px; font-weight: 950; }
.account-security-qr-frame > span { position: absolute; display: grid; width: 31px; height: 31px; place-items: center; border: 3px solid #fff; border-radius: 10px; background: #070709; color: var(--cyan); font-size: 12px; box-shadow: 0 5px 14px rgba(0, 0, 0, 0.3); }
.account-security-qr-card > div:nth-child(2) { display: grid; gap: 4px; }
.account-security-qr-card strong { color: #fff; font-size: 14px; }
.account-security-qr-card p { margin: 0; color: #92929b; font-size: 10px; line-height: 1.5; }
.account-security-download { width: 100% !important; justify-content: center; }

.account-security-enrollment { display: grid; min-width: 0; gap: 14px; }
.account-security-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.account-security-steps li { display: grid; min-width: 0; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 13px; background: rgba(255, 255, 255, 0.022); }
.account-security-steps li > span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.22); border-radius: 11px; background: rgba(37, 244, 238, 0.07); color: var(--cyan); font-size: 12px; font-weight: 900; }
.account-security-steps li > div { display: grid; min-width: 0; gap: 2px; }
.account-security-steps strong { color: #f1f1f3; font-size: 12px; }
.account-security-steps p { margin: 0; color: #85858e; font-size: 10px; line-height: 1.4; }

.account-security-manual-key { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 42px; gap: 9px; align-items: stretch; padding: 10px; border: 1px solid rgba(37, 244, 238, 0.17); border-radius: 14px; background: rgba(37, 244, 238, 0.045); }
.account-security-manual-key > div { display: grid; min-width: 0; gap: 4px; }
.account-security-manual-key small { color: #85858e; font-size: 10px; font-weight: 800; }
.account-security-manual-key code { min-width: 0; overflow-wrap: anywhere; color: var(--cyan); font-family: "Courier New", monospace; font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }
.account-security-manual-key .account-icon-button { width: 42px; height: 42px; align-self: center; color: var(--cyan); }

.account-security-expiry { display: flex; min-width: 0; gap: 7px; align-items: center; margin: 0; color: #8c8c95; font-size: 10px; }
.account-security-expiry i { color: var(--warning); }
.account-security-expiry strong { color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.account-security-expiry strong.is-expiring { color: var(--warning); }
.account-security-expiry strong.is-expired { color: #ff6f8b; }
.account-security-setup-grid.is-expired { opacity: 0.68; }
.account-security-form.is-confirm {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
    overflow: visible;
}
.account-security-form.is-confirm .account-button {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    min-height: 48px;
    height: auto;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
    padding: 12px 15px;
    overflow: visible;
    line-height: 1.3;
    text-align: center;
    white-space: normal;
}
.account-security-form.is-confirm .account-button > i { flex: 0 0 auto; }

.account-security-session-grid {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.account-security-session {
    display: grid;
    min-width: 0;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.024);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}

.account-security-session:hover { border-color: rgba(37, 244, 238, 0.25); background: rgba(37, 244, 238, 0.04); box-shadow: 0 15px 34px rgba(0, 0, 0, 0.2); transform: translateY(-2px); }
.account-security-session.is-current { border-color: rgba(54, 230, 154, 0.25); background: linear-gradient(135deg, rgba(54, 230, 154, 0.065), rgba(255, 255, 255, 0.018)); }
.account-security-session-icon { position: relative; display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.17); border-radius: 15px; background: rgba(37, 244, 238, 0.065); color: var(--cyan); }
.account-security-session-icon > span { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid #101014; border-radius: 50%; background: var(--success); box-shadow: 0 0 10px rgba(54, 230, 154, 0.5); }
.account-security-session-copy { display: grid; min-width: 0; gap: 4px; }
.account-security-session-copy > div { display: flex; min-width: 0; gap: 8px; align-items: center; justify-content: space-between; }
.account-security-session-copy strong { min-width: 0; overflow: hidden; color: #fff; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.account-security-session-copy p { margin: 0; color: #86868f; font-size: 10px; }
.account-security-session dl { display: grid; min-width: 0; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; }
.account-security-session dl > div { display: grid; min-width: 0; gap: 3px; padding: 9px 10px; border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 11px; background: rgba(0, 0, 0, 0.15); }
.account-security-session dt { color: #73737c; font-size: 9px; font-weight: 800; }
.account-security-session dd { min-width: 0; margin: 0; overflow: hidden; color: #d2d2d7; font-size: 10px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.account-security-session > form,
.account-security-current-note { grid-column: 1 / -1; }
.account-security-session > form .account-button { width: fit-content; min-height: 38px; padding: 7px 11px; font-size: 10px; }
.account-security-current-note { display: flex; gap: 7px; align-items: center; margin: 0; color: var(--success); font-size: 10px; font-weight: 800; }

.account-security-history { position: relative; z-index: 1; margin-top: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; background: rgba(255, 255, 255, 0.018); }
.account-security-history > summary > span > i { color: var(--cyan); }
.account-security-history > summary small { display: grid; min-width: 24px; height: 24px; place-items: center; padding: 0 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); color: #bdbdc4; font-size: 10px; }
.account-security-history-list { display: grid; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.account-security-history-list article { display: grid; min-width: 0; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.055); }
.account-security-history-list article:last-child { border-bottom: 0; }
.account-security-history-list article > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, 0.045); color: #85858d; }
.account-security-history-list article > div { display: grid; min-width: 0; gap: 2px; }
.account-security-history-list strong { overflow: hidden; color: #d7d7db; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.account-security-history-list small { color: #777780; font-size: 9px; }

.account-security-event-list {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.account-security-event-list article { display: grid; min-width: 0; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 14px; background: rgba(255, 255, 255, 0.022); transition: border-color 180ms ease, background 180ms ease, transform 180ms var(--ease); }
.account-security-event-list article:hover { border-color: rgba(37, 244, 238, 0.22); background: rgba(37, 244, 238, 0.04); transform: translateY(-2px); }
.account-security-event-list article > span { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.16); border-radius: 13px; background: rgba(37, 244, 238, 0.06); color: var(--cyan); }
.account-security-event-list article > span.is-warning { border-color: rgba(255, 204, 77, 0.2); background: rgba(255, 204, 77, 0.07); color: var(--warning); }
.account-security-event-list article > span.is-critical { border-color: rgba(254, 44, 85, 0.22); background: rgba(254, 44, 85, 0.08); color: #ff6f8b; }
.account-security-event-list article > div { display: grid; min-width: 0; gap: 3px; }
.account-security-event-list strong { overflow: hidden; color: #e5e5e8; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-security-event-list time { color: #7f7f88; font-size: 10px; }
.account-security-event-list em { justify-self: end; }

.account-security-captcha-host { position: absolute; width: 0; height: 0; overflow: visible; }
.account-security-captcha-open { overflow: hidden; }
.account-security-captcha-layer { z-index: 1280; }
.account-security-captcha-dialog > header > div > span { border-color: rgba(254, 44, 85, 0.28); background: rgba(254, 44, 85, 0.09); color: var(--pink); box-shadow: inset 2px 0 0 rgba(37, 244, 238, 0.65); }

@keyframes account-security-enter {
    from { opacity: 0; transform: translateY(15px) scale(0.992); }
}

@keyframes account-security-orbit {
    to { transform: rotate(360deg); }
}

@keyframes account-security-shield {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@media (max-width: 1180px) {
    .account-security-core-grid { grid-template-columns: minmax(0, 1fr); }
    .account-security-card.is-password { animation-delay: 90ms; }
    .account-security-setup-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
    .account-security-hero { grid-template-columns: minmax(0, 1fr) 150px; padding: 22px; }
    .account-security-hero-visual { width: 145px; height: 145px; }
    .account-security-hero-visual > span { width: 74px; height: 74px; border-radius: 23px; font-size: 30px; }
    .account-security-hero-visual > i { width: 30px; height: 30px; border-radius: 10px; font-size: 11px; }
    .account-security-metrics { grid-template-columns: minmax(0, 1fr); }
    .account-security-metrics article { min-height: 64px; }
    .account-security-setup-grid { grid-template-columns: minmax(0, 1fr); }
    .account-security-qr-card { width: min(100%, 310px); justify-self: center; }
    .account-security-session-grid,
    .account-security-event-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .account-security-hero { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 18px; border-radius: 22px; }
    .account-security-hero h2 { font-size: clamp(29px, 10vw, 38px); }
    .account-security-hero-copy > p { font-size: 14px; }
    .account-security-hero-visual { display: none; }
    .account-security-hero-status { width: 100%; box-sizing: border-box; }
    .account-security-metrics { padding-top: 15px; }
    .account-security-core-grid { margin-top: 14px; gap: 14px; }
    .account-security-card.is-sessions,
    .account-security-card.is-events { margin-top: 14px; }
    .account-security-card > header { display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px; }
    .account-security-card > header > .account-badge,
    .account-security-card > header > .account-security-count { justify-self: start; }
    .account-security-status-callout { grid-template-columns: 44px minmax(0, 1fr); padding: 13px; }
    .account-security-status-callout > span { width: 44px; height: 44px; border-radius: 14px; font-size: 16px; }
    .account-security-form-footer { align-items: stretch; flex-direction: column; }
    .account-security-form-footer .account-button,
    .account-security-form .account-button { max-width: 100%; white-space: normal; }
    .account-security-form.is-confirm { grid-template-columns: minmax(0, 1fr); }
    .account-security-form.is-confirm .account-button { width: 100%; justify-content: center; }
    .account-security-session dl { grid-template-columns: minmax(0, 1fr); }
    .account-security-session > form .account-button { width: 100%; justify-content: center; }
    .account-security-history-list article { grid-template-columns: 36px minmax(0, 1fr); }
    .account-security-history-list article > em { grid-column: 2; justify-self: start; }
    .account-security-event-list article { grid-template-columns: 42px minmax(0, 1fr); }
    .account-security-event-list article > em { grid-column: 2; justify-self: start; }
    .account-security-captcha-dialog > footer { display: grid; grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 390px) {
    .account-security-kicker { font-size: 10px; }
    .account-security-hero { padding: 16px; }
    .account-security-metrics article { grid-template-columns: 38px minmax(0, 1fr); padding: 10px; }
    .account-security-metrics article > span { width: 38px; height: 38px; }
    .account-security-card { padding: 16px; border-radius: 20px; }
    .account-security-card > header > div > i { width: 40px; height: 40px; border-radius: 13px; }
    .account-security-card > header h2 { font-size: 18px; }
    .account-security-qr-card { padding: 12px; }
    .account-security-session { grid-template-columns: 42px minmax(0, 1fr); padding: 12px; }
    .account-security-session-icon { width: 42px; height: 42px; border-radius: 13px; }
    .account-security-session-copy > div { align-items: flex-start; flex-direction: column; }
    .account-security-event-list article { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .account-security-hero,
    .account-security-card,
    .account-security-hero-visual::before,
    .account-security-hero-visual::after,
    .account-security-hero-visual > span { animation: none !important; }
}

.account-security-hero-copy {
    position: relative;
    padding-left: 18px;
}

.account-security-hero-copy::before {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 2px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--cyan), rgba(255, 255, 255, 0.72) 48%, var(--pink));
    box-shadow: 0 0 16px rgba(37, 244, 238, 0.2);
    content: "";
    opacity: 0.72;
    transition: opacity 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease);
}

.account-security-hero-copy::after {
    position: absolute;
    top: 8px;
    left: -3px;
    width: 8px;
    height: 8px;
    border: 2px solid #101014;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 15px rgba(37, 244, 238, 0.68);
    content: "";
    animation: account-security-copy-signal 4.2s ease-in-out infinite;
}

.account-security-hero:hover .account-security-hero-copy::before { opacity: 1; box-shadow: 0 0 22px rgba(37, 244, 238, 0.38); transform: scaleY(1.035); }
.account-security-hero-copy > * { animation: account-security-copy-reveal 470ms var(--ease) both; }
.account-security-hero-copy > h2 { animation-delay: 55ms; transition: text-shadow 220ms ease, transform 220ms var(--ease); }
.account-security-hero-copy > p { animation-delay: 100ms; transition: color 220ms ease, transform 220ms var(--ease); }
.account-security-hero-copy > .account-security-hero-status { animation-delay: 145ms; transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease, transform 220ms var(--ease); }
.account-security-hero:hover .account-security-hero-copy > h2 { text-shadow: 0 0 34px rgba(37, 244, 238, 0.11); transform: translateX(3px); }
.account-security-hero:hover .account-security-hero-copy > p { color: #c6c6cc; transform: translateX(2px); }
.account-security-hero:hover .account-security-hero-status { border-color: rgba(54, 230, 154, 0.4); box-shadow: 0 9px 25px rgba(54, 230, 154, 0.08); transform: translateX(3px); }
.account-security-kicker > i { animation: account-security-fingerprint 2.6s ease-in-out infinite; }

.account-security-session-network {
    display: grid;
    min-width: 0;
    grid-column: 1 / -1;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border: 1px solid rgba(37, 244, 238, 0.12);
    border-radius: 12px;
    background: rgba(37, 244, 238, 0.035);
}

.account-country-flag {
    display: grid;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.045);
    line-height: 1;
}
.account-country-flag img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-country-flag.is-unknown { color: #8d8d96; }
.account-security-session-network > .account-country-flag {
    width: 38px;
    height: 29px;
    border-radius: 8px;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.24);
    font-size: 15px;
}

.account-security-session-network > div { display: grid; min-width: 0; gap: 2px; }
.account-security-session-network small { color: #75757e; font-size: 9px; font-weight: 850; }
.account-security-session-network code { min-width: 0; overflow: hidden; color: #d8d8dc; font-family: "Courier New", monospace; font-size: 11px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.account-security-history-list small { display: flex; min-width: 0; gap: 5px; align-items: center; flex-wrap: wrap; }
.account-security-history-list .account-country-flag.is-compact { width: 22px; height: 16px; flex: 0 0 auto; border-radius: 4px; }
.account-security-history-list small code { color: #aaaab1; font-family: "Courier New", monospace; font-size: 9px; font-weight: 800; }

.account-security-card.is-events > .account-empty {
    min-height: 108px;
    justify-content: flex-start;
    padding: 17px;
    text-align: left;
}

.account-security-card.is-events > .account-empty > span { background: rgba(37, 244, 238, 0.065); color: var(--cyan); }
.account-security-card.is-events > .account-empty > div { width: 100%; max-width: none; }

@keyframes account-security-copy-signal {
    0%, 100% { top: 8px; background: var(--cyan); box-shadow: 0 0 15px rgba(37, 244, 238, 0.68); }
    50% { top: calc(100% - 17px); background: var(--pink); box-shadow: 0 0 15px rgba(254, 44, 85, 0.58); }
}

@keyframes account-security-copy-reveal {
    from { opacity: 0; transform: translateX(-10px); }
}

@keyframes account-security-fingerprint {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(37, 244, 238, 0)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 7px rgba(37, 244, 238, 0.65)); transform: scale(1.12); }
}

@media (max-width: 390px) {
    .account-security-hero-copy { padding-left: 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .account-security-hero-copy::after,
    .account-security-hero-copy > *,
    .account-security-kicker > i { animation: none !important; }
}


/* Compact scalable game catalogue */
.account-module-games .account-page-heading {
    min-height: 92px;
    padding: 17px 22px;
}
.account-module-games .account-page-heading h1 { font-size: clamp(34px, 4vw, 47px); }
.account-module-games .account-page-heading > div { gap: 5px; }

.account-game-catalog {
    display: grid;
    gap: 12px;
    padding: 16px;
}
.account-game-catalog-toolbar {
    display: flex;
    min-width: 0;
    min-height: 32px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 2px;
}
.account-game-catalog-toolbar > span,
.account-game-catalog-toolbar > a { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 850; }
.account-game-catalog-toolbar > span { color: #8d8c95; letter-spacing: 0.08em; text-transform: uppercase; }
.account-game-catalog-toolbar > span i { color: var(--cyan); }
.account-game-catalog-toolbar > a { color: #9b9aa3; text-decoration: none; transition: color 160ms ease; }
.account-game-catalog-toolbar > a:hover { color: var(--cyan); }

.account-game-grid {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(220px, 250px));
    gap: 12px;
    align-items: start;
    justify-content: start;
}

.account-game-card {
    display: grid;
    width: 100%;
    min-width: 0;
    max-width: 250px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 14px;
    background: #111116;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
    transition: border-color 170ms ease, box-shadow 170ms ease, transform 170ms var(--ease);
}
.account-game-card:hover { border-color: rgba(37, 244, 238, 0.22); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3); transform: translateY(-2px); }

.account-game-card-visual { position: relative; display: block; width: 100%; height: 88px; overflow: hidden; background: #160f2d; }
.account-game-card-visual::after { position: absolute; inset: auto 0 0; height: 35px; background: linear-gradient(transparent, rgba(5, 5, 8, 0.62)); content: ""; pointer-events: none; }
.account-game-card-visual img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: filter 180ms ease, transform 260ms var(--ease); }
.account-game-card:hover .account-game-card-visual img { filter: saturate(1.07); transform: scale(1.025); }
.account-game-card-visual > span { position: absolute; z-index: 1; top: 7px; left: 7px; display: inline-flex; min-height: 22px; align-items: center; gap: 4px; padding: 4px 7px; border: 1px solid rgba(54, 230, 154, 0.25); border-radius: 999px; background: rgba(7, 10, 10, 0.8); color: #59dda5; font-size: 8px; font-weight: 950; letter-spacing: 0.06em; text-transform: uppercase; backdrop-filter: blur(7px); }

.account-game-card-body { display: grid; min-width: 0; gap: 9px; padding: 12px; }
.account-game-card-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 8px; }
.account-game-card-head h2 { min-width: 0; margin: 0; overflow: hidden; color: #f5f4f7; font-size: 20px; font-weight: 950; letter-spacing: -0.03em; line-height: 1.08; text-overflow: ellipsis; white-space: nowrap; }
.account-game-card-head > span { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; color: #ffd567; font-size: 10px; font-weight: 900; }
.account-game-card-description { display: -webkit-box; min-height: 50px; margin: 0; overflow: hidden; color: #aaa9b1; font-size: 11px; line-height: 1.52; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.account-game-card-tags { display: flex; min-width: 0; gap: 4px; overflow: hidden; }
.account-game-card-tags span { min-width: 0; overflow: hidden; padding: 4px 6px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 6px; background: rgba(255, 255, 255, 0.03); color: #9998a1; font-size: 8px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }

.account-game-card-result { display: flex; min-width: 0; min-height: 32px; align-items: center; justify-content: space-between; gap: 7px; padding: 7px 8px; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 8px; background: rgba(0, 0, 0, 0.15); }
.account-game-card-result span { min-width: 0; overflow: hidden; color: #92919a; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.account-game-card-result span b { color: #d4d3d8; }
.account-game-card-result strong { flex: 0 0 auto; color: #d4d3d8; font-size: 10px; }
.account-game-card-result strong.is-positive { color: #54dda4; }
.account-game-card-result strong.is-negative { color: #ff718c; }

.account-game-card-actions { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.account-game-card-actions a { display: flex; min-width: 0; min-height: 38px; align-items: center; justify-content: center; gap: 5px; padding: 8px; border: 1px solid rgba(37, 244, 238, 0.2); border-radius: 8px; background: rgba(37, 244, 238, 0.065); color: #dffefd; font-size: 10px; font-weight: 900; text-decoration: none; transition: border-color 160ms ease, background 160ms ease; }
.account-game-card-actions a:last-child { border-color: rgba(154, 111, 255, 0.2); background: rgba(154, 111, 255, 0.065); color: #eee8ff; }
.account-game-card-actions a:hover { border-color: rgba(37, 244, 238, 0.4); background: rgba(37, 244, 238, 0.11); }
.account-game-card-actions a:last-child:hover { border-color: rgba(154, 111, 255, 0.42); background: rgba(154, 111, 255, 0.12); }
.account-game-card-actions img { width: 14px; height: 14px; object-fit: contain; }

@media (max-width: 520px) {
    .account-module-games .account-page-heading { min-height: 82px; padding: 14px 16px; }
    .account-module-games .account-page-heading h1 { font-size: 32px; }
    .account-game-catalog { padding: 10px; border-radius: 16px; }
    .account-game-grid { grid-template-columns: minmax(0, 250px); }
    .account-game-card { max-width: 250px; }
    .account-game-catalog-toolbar { align-items: flex-start; flex-direction: column; gap: 5px; }
}

@media (prefers-reduced-motion: reduce) {
    .account-game-card,
    .account-game-card-visual img,
    .account-game-card-actions a { transition: none !important; }
}

/* Game history: real rounds, scalable filters and bounded responsive records. */
.account-module-games_history .account-page-heading {
    min-height: 92px;
    padding: 17px 22px;
}
.account-module-games_history .account-page-heading h1 { font-size: clamp(34px, 4vw, 47px); }

.account-game-history-overview {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 16px;
}

.account-game-history-panel { min-width: 0; }
.account-game-history-filters {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
    gap: 10px;
    align-items: end;
    margin-bottom: 12px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 16px;
    background: linear-gradient(120deg, rgba(37, 244, 238, 0.035), rgba(254, 44, 85, 0.025));
}
.account-game-history-filters > label { display: grid; min-width: 0; gap: 6px; }
.account-game-history-filters > label > span:first-child { color: #a4a3ab; font-size: 10px; font-weight: 850; letter-spacing: 0.075em; text-transform: uppercase; }
.account-game-history-select {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(3, 3, 5, 0.38);
    color: #8d8c95;
    transition: border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.account-game-history-select:focus-within { border-color: rgba(37, 244, 238, 0.55); color: var(--cyan); box-shadow: 0 0 0 3px rgba(37, 244, 238, 0.07); }
.account-game-history-select > i { justify-self: center; font-size: 13px; }
.account-game-history-select select {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 8px 10px 8px 0;
    border: 0;
    outline: 0;
    background: #0d0d11;
    color: #f2f1f4;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
}
.account-game-history-filters > .account-button { min-height: 44px; padding-inline: 15px; }
.account-game-history-reset {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 6px;
    padding: 8px 4px;
    color: #9a99a2;
    font-size: 11px;
    font-weight: 850;
    text-decoration: none;
    transition: color 170ms ease;
}
.account-game-history-reset:hover { color: var(--cyan); }

.account-game-history-scope {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 0 2px;
}
.account-game-history-scope p { display: flex; min-width: 0; gap: 7px; align-items: baseline; margin: 0; }
.account-game-history-scope p span { overflow: hidden; color: #f4f3f6; font-size: 13px; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.account-game-history-scope p strong,
.account-game-history-scope small { color: #85848d; font-size: 10px; font-weight: 750; }
.account-game-history-scope small { white-space: nowrap; }

.account-game-history-list { display: grid; min-width: 0; gap: 9px; }
.account-game-history-item {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 108px minmax(0, 1fr) minmax(190px, 215px);
    gap: 14px;
    align-items: stretch;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.078);
    border-radius: 17px;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.028), rgba(255, 255, 255, 0.012));
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}
.account-game-history-item::before {
    position: absolute;
    inset: 12px auto 12px 0;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background: #8a8992;
    content: "";
}
.account-game-history-item.is-positive::before { background: #54dda4; box-shadow: 0 0 13px rgba(84, 221, 164, 0.36); }
.account-game-history-item.is-negative::before { background: #ff718c; box-shadow: 0 0 13px rgba(255, 113, 140, 0.3); }
.account-game-history-item:hover { border-color: rgba(37, 244, 238, 0.2); background: linear-gradient(120deg, rgba(37, 244, 238, 0.04), rgba(254, 44, 85, 0.025)); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24); transform: translateY(-2px); }

.account-game-history-visual {
    position: relative;
    display: grid;
    min-width: 0;
    height: 80px;
    place-items: center;
    align-self: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 12px;
    background: #171022;
    color: var(--cyan);
}
.account-game-history-visual::after { position: absolute; inset: 42% 0 0; background: linear-gradient(transparent, rgba(4, 4, 7, 0.84)); content: ""; pointer-events: none; }
.account-game-history-visual > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: filter 180ms ease, transform 240ms var(--ease); }
.account-game-history-item:hover .account-game-history-visual > img { filter: saturate(1.08); transform: scale(1.035); }
.account-game-history-visual > i { font-size: 23px; }
.account-game-history-visual > span { position: absolute; z-index: 1; right: 6px; bottom: 5px; left: 6px; overflow: hidden; color: #e8e7eb; font-size: 8px; font-weight: 900; letter-spacing: 0.08em; text-overflow: ellipsis; white-space: nowrap; }

.account-game-history-main { display: grid; min-width: 0; gap: 7px; align-content: center; }
.account-game-history-main > header { display: flex; min-width: 0; gap: 9px; align-items: flex-start; justify-content: space-between; }
.account-game-history-main > header > div { display: grid; min-width: 0; gap: 2px; }
.account-game-history-main > header strong { overflow: hidden; color: #f7f6f8; font-size: 15px; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; }
.account-game-history-main > header small { color: #888790; font-size: 9px; font-weight: 750; }
.account-game-history-main .account-badge { min-height: 23px; padding: 4px 7px; font-size: 8px; }
.account-game-history-result { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px; align-items: center; }
.account-game-history-result > strong { color: #dedde2; font-size: 11px; font-weight: 950; letter-spacing: 0.02em; text-transform: uppercase; }
.account-game-history-item.is-positive .account-game-history-result > strong { color: #65e4ae; }
.account-game-history-result > span { padding: 3px 5px; border: 1px solid rgba(255, 213, 103, 0.16); border-radius: 5px; background: rgba(255, 213, 103, 0.055); color: #e8ce82; font-size: 7px; font-weight: 900; letter-spacing: 0.05em; }

.account-game-history-cards { display: flex; min-width: 0; gap: 4px; align-items: center; }
.account-game-history-cards > span { display: block; width: 29px; height: 38px; flex: 0 0 29px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px; background: transparent; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.24); }
.account-game-history-cards img { display: block; width: 100%; height: 100%; object-fit: cover; }
.account-game-history-rewards { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; }
.account-game-history-rewards > span { display: inline-flex; min-width: 0; align-items: center; gap: 4px; padding: 3px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.035); color: #95949c; font-size: 8px; font-weight: 800; }
.account-game-history-rewards i { color: var(--cyan); font-size: 8px; }

.account-game-history-economy {
    display: grid;
    min-width: 0;
    gap: 5px;
    align-content: center;
    margin: 0;
    padding-left: 13px;
    border-left: 1px solid rgba(255, 255, 255, 0.075);
}
.account-game-history-economy > div { display: grid; min-width: 0; grid-template-columns: 62px minmax(0, 1fr); gap: 8px; align-items: center; }
.account-game-history-economy dt { color: #888790; font-size: 9px; font-weight: 800; }
.account-game-history-economy dd { min-width: 0; margin: 0; justify-self: end; color: #e5e4e8; font-size: 10px; font-weight: 900; }
.account-game-history-economy .account-coin {
    --account-coin-font-size: 10px;
    --account-coin-icon-size: 15px;
    --account-coin-unit-size: 8px;
    width: max-content;
    min-width: 0;
    min-height: 26px;
    max-width: 100%;
    flex-wrap: nowrap;
    gap: 3px;
    padding: 2px 4px 2px 3px;
    white-space: nowrap;
}
.account-game-history-economy .account-coin-value { line-height: 15px !important; }
.account-game-history-economy .account-coin small { line-height: 12px !important; }
.account-game-history-economy .is-positive dd,
.account-game-history-economy .is-positive .account-coin-value,
.account-game-history-economy .is-positive .account-coin small { color: #65e4ae !important; }
.account-game-history-economy .is-negative dd,
.account-game-history-economy .is-negative .account-coin-value,
.account-game-history-economy .is-negative .account-coin small { color: #ff7892 !important; }

@media (max-width: 1180px) {
    .account-game-history-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .account-game-history-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-game-history-filters > .account-button { grid-column: 1; }
    .account-game-history-reset { grid-column: 2; justify-self: start; }
    .account-game-history-item { grid-template-columns: 92px minmax(0, 1fr); }
    .account-game-history-visual { height: 72px; }
    .account-game-history-economy { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 10px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.075); border-left: 0; }
    .account-game-history-economy > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
    .account-game-history-economy dd { justify-self: start; }
}

@media (max-width: 620px) {
    .account-game-history-overview { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
    .account-module-games_history .account-page-heading { min-height: 82px; padding: 14px 16px; }
    .account-module-games_history .account-page-heading h1 { font-size: 31px; }
    .account-game-history-panel { padding: 12px; border-radius: 17px; }
    .account-game-history-panel > header { align-items: flex-start; }
    .account-game-history-panel > header > a { font-size: 9px; }
    .account-game-history-filters { grid-template-columns: minmax(0, 1fr); padding: 10px; }
    .account-game-history-filters > .account-button,
    .account-game-history-reset { width: 100%; grid-column: 1; box-sizing: border-box; }
    .account-game-history-reset { justify-content: center; }
    .account-game-history-scope { align-items: flex-start; flex-direction: column; gap: 4px; }
    .account-game-history-scope p { width: 100%; align-items: flex-start; flex-direction: column; gap: 2px; }
    .account-game-history-scope p span { max-width: 100%; }
    .account-game-history-scope small { white-space: normal; }
    .account-game-history-item { grid-template-columns: 68px minmax(0, 1fr); gap: 9px; padding: 10px; border-radius: 14px; }
    .account-game-history-visual { height: 62px; border-radius: 9px; }
    .account-game-history-visual > span { right: 4px; bottom: 4px; left: 4px; font-size: 6px; }
    .account-game-history-main > header { align-items: flex-start; }
    .account-game-history-main > header strong { font-size: 13px; }
    .account-game-history-main .account-badge { padding: 3px 5px; font-size: 7px; }
    .account-game-history-result > strong { font-size: 10px; }
    .account-game-history-cards { grid-column: 1 / -1; }
    .account-game-history-cards > span { width: 27px; height: 35px; flex-basis: 27px; }
    .account-game-history-rewards { grid-column: 1 / -1; }
    .account-game-history-economy { grid-template-columns: minmax(0, 1fr); }
    .account-game-history-economy > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .account-game-history-economy dd { justify-self: auto; }
    .account-game-history-panel .account-pagination-pages { justify-content: center; }
}

/* Referrals: real partner data in the same cards and panels as /account. */
.account-module-referrals .account-referral-hero {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(220px, 0.82fr) minmax(0, 1.18fr);
    gap: 20px;
    align-items: stretch;
    padding: 22px;
    border-color: rgba(37, 244, 238, 0.2);
}

.account-module-referrals .account-referral-hero > div:first-child {
    min-width: 0;
    width: auto;
    flex: none;
}

.account-referral-intro {
    display: grid;
    align-content: center;
}

.account-module-referrals .account-referral-intro h2 {
    max-width: 460px;
    margin: 0;
    font-size: clamp(27px, 2.7vw, 35px);
    line-height: 1.02;
}

.account-module-referrals .account-referral-intro > span {
    max-width: 520px;
    margin-top: 9px;
    font-size: 12px;
    line-height: 1.6;
}

.account-referral-share {
    display: grid;
    min-width: 0;
    gap: 12px;
    align-content: center;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(254, 44, 85, 0.11), transparent 44%),
        rgba(0, 0, 0, 0.23);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
    transition: border-color 190ms ease, background 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-referral-hero:hover .account-referral-share {
    border-color: rgba(37, 244, 238, 0.25);
    background:
        radial-gradient(circle at 100% 0, rgba(254, 44, 85, 0.14), transparent 46%),
        rgba(37, 244, 238, 0.025);
    box-shadow: inset 3px 0 0 rgba(37, 244, 238, 0.7), 0 16px 38px rgba(0, 0, 0, 0.2);
    transform: translateY(-2px);
}

.account-referral-share-label {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #f6f6f8;
    font-size: 12px;
    font-weight: 900;
}

.account-referral-share-label i { color: var(--cyan); }
.account-referral-share .account-copy-field { width: 100%; min-width: 0; order: 0; }
.account-referral-share .account-copy-field input { width: 100%; }
.account-referral-share > footer { display: flex; min-width: 0; gap: 12px; align-items: center; justify-content: space-between; }
.account-referral-share > footer > span { display: flex; min-width: 0; gap: 7px; align-items: center; color: var(--muted); font-size: 10px; }
.account-referral-share > footer > span i { color: var(--cyan); }
.account-referral-share > footer form { flex: 0 0 auto; }
.account-referral-share .account-button-quiet { min-height: 36px; padding: 8px 11px; font-size: 10px; }
.account-referral-link-missing { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.account-referral-hero + .account-referral-overview,
.account-referral-overview + .account-referral-rates-panel { margin-top: 17px; }

.account-referral-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.account-module-referrals .account-referral-overview .account-feature-card {
    min-height: 150px;
    padding: 17px;
}

.account-referral-overview .account-feature-card strong { overflow: visible; font-size: clamp(20px, 1.8vw, 26px); text-overflow: clip; }
.account-referral-overview .account-feature-card > div > p { padding-right: 8px !important; }
.account-referral-overview .account-coin { --account-coin-font-size: 17px; --account-coin-icon-size: 22px; --account-coin-unit-size: 9px; min-height: 31px; max-width: 100%; flex-wrap: nowrap; white-space: nowrap; }
.account-referral-card-note .account-coin { --account-coin-font-size: 10px; --account-coin-icon-size: 15px; --account-coin-unit-size: 8px; display: inline-flex; min-height: 24px; gap: 3px; margin-left: 3px; vertical-align: middle; }
.account-referral-card-note .account-coin-value,
.account-referral-card-note .account-coin small { color: var(--muted) !important; line-height: 13px !important; }

.account-referral-rates-panel,
.account-referral-users-panel,
.account-referral-commissions-panel { border-color: rgba(37, 244, 238, 0.16); }

.account-referral-rate-groups {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px;
}

.account-referral-rate-groups.has-single-group { grid-template-columns: minmax(0, 1fr); }
.account-referral-rate-group { display: grid; min-width: 0; gap: 12px; align-content: start; padding: 15px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 17px; background: rgba(255, 255, 255, 0.022); }
.account-referral-rate-group > header { display: flex; gap: 11px; align-items: center; }
.account-referral-rate-group > header > span { display: grid; width: 40px; height: 40px; place-items: center; flex: 0 0 auto; border: 1px solid rgba(37, 244, 238, 0.22); border-radius: 13px; background: rgba(37, 244, 238, 0.075); color: var(--cyan); }
.account-referral-rate-group > header > div { display: grid; min-width: 0; gap: 2px; }
.account-referral-rate-group h3 { margin: 0; font-size: 14px; }
.account-referral-rate-group header p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.account-referral-rate-group .account-rate-list article { min-width: 0; }
.account-referral-rate-group .account-rate-list article > div { display: grid; min-width: 0; gap: 2px; }
.account-referral-rate-group .account-rate-list strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-referral-rate-group .account-rate-list small { color: var(--muted); font-size: 9px; }
.account-referral-rate-group .account-rate-list small .account-coin { --account-coin-font-size: 9px; --account-coin-icon-size: 13px; --account-coin-unit-size: 8px; display: inline-flex; min-height: 22px; gap: 2px; }
.account-referral-rate-note { display: flex; gap: 8px; align-items: flex-start; margin: 13px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.account-referral-rate-note i { margin-top: 2px; color: var(--cyan); }

.account-referral-table-wrap { overflow: hidden; }
.account-referral-table { min-width: 700px; }
.account-referral-table td { vertical-align: middle; }
.account-referral-table td:nth-child(3) > span,
.account-referral-table td:nth-child(3) > small { display: block; }
.account-referral-table td:nth-child(3) > small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.account-referral-user { display: grid; min-width: 0; color: inherit; text-decoration: none; }
.account-referral-user strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-referral-user small { color: var(--cyan); font-size: 9px; }
.account-referral-user:hover strong { color: var(--cyan); }
.account-referral-table .account-coin { --account-coin-font-size: 12px; --account-coin-icon-size: 20px; --account-coin-unit-size: 9px; min-height: 28px; justify-content: flex-start; white-space: nowrap; }

.account-referral-commission-list article { min-height: 62px; }
.account-referral-commission-list article > aside { display: grid; min-width: max-content; gap: 4px; justify-items: end; margin-left: auto; }
.account-referral-commission-list article > aside > b { display: flex; gap: 3px; align-items: center; font-size: 12px; white-space: nowrap; }
.account-referral-commission-list article > aside .account-coin { --account-coin-font-size: 11px; --account-coin-icon-size: 18px; --account-coin-unit-size: 8px; display: inline-flex; min-height: 27px; gap: 3px; white-space: nowrap; }
.account-referral-commission-list .account-badge { min-height: 21px; padding: 3px 7px; font-size: 8px; }

@media (max-width: 1180px) {
    .account-referral-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .account-module-referrals .account-referral-hero { grid-template-columns: minmax(0, 1fr); }
    .account-referral-rate-groups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .account-module-referrals .account-referral-hero { gap: 15px; padding: 17px; }
    .account-module-referrals .account-referral-intro h2 { font-size: 27px; }
    .account-referral-share { padding: 13px; border-radius: 15px; }
    .account-referral-share > footer { align-items: stretch; flex-direction: column; }
    .account-referral-share > footer form,
    .account-referral-share > footer .account-button { width: 100%; }
    .account-referral-overview { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .account-module-referrals .account-referral-overview .account-feature-card { min-height: 128px; padding: 15px; }
    .account-referral-rate-group { padding: 13px; }

    .account-referral-table-wrap { overflow: visible; border: 0; border-radius: 0; }
    .account-referral-table { display: block; min-width: 0; }
    .account-referral-table thead { display: none; }
    .account-referral-table tbody { display: grid; gap: 10px; }
    .account-referral-table tbody tr { display: grid; min-width: 0; gap: 0; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 15px; background: rgba(255, 255, 255, 0.022); }
    .account-referral-table tbody td { display: grid; min-width: 0; grid-template-columns: 92px minmax(0, 1fr); gap: 9px; align-items: center; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.065); text-align: right; }
    .account-referral-table tbody td:last-child { border-bottom: 0; }
    .account-referral-table tbody td::before { color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; content: attr(data-label); }
    .account-referral-table tbody td > :is(a, span, small, .account-coin) { min-width: 0; justify-self: end; }
    .account-referral-table tbody td:nth-child(3) > small { grid-column: 2; }
    .account-referral-user { text-align: right; }

    .account-referral-commission-list article { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
    .account-referral-commission-list article > div strong { font-size: 11px; }
    .account-referral-commission-list article > div small { white-space: normal; }
    .account-referral-commission-list article > aside { display: flex; min-width: 0; grid-column: 2; gap: 8px; align-items: center; justify-content: space-between; justify-items: stretch; margin-left: 0; }
    .account-referral-pagination .account-pagination-pages { justify-content: center; overflow: visible; }
}

/* Cashback: real balances, configured rules and bounded ledger-backed history. */
.account-module-cashback .account-cashback-hero {
    display: grid;
    min-height: 0;
    grid-template-columns: 120px minmax(0, 1fr) minmax(190px, 0.55fr);
    gap: 19px;
    align-items: center;
    padding: 22px;
    border-color: rgba(37, 244, 238, 0.2);
    background:
        radial-gradient(circle at 100% 0, rgba(254, 44, 85, 0.11), transparent 40%),
        radial-gradient(circle at 0 100%, rgba(37, 244, 238, 0.12), transparent 43%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.028), transparent 46%),
        var(--account-panel);
}
.account-module-cashback .account-cashback-hero:hover { border-color: rgba(37, 244, 238, 0.42); }

.account-module-cashback .account-cashback-ring {
    width: 116px;
    height: 116px;
    background: conic-gradient(var(--cyan) calc(var(--account-progress) * 1%), rgba(255, 255, 255, 0.085) 0);
    box-shadow: 0 0 0 1px rgba(37, 244, 238, 0.16), 0 16px 34px rgba(0, 0, 0, 0.28);
    transition: box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-module-cashback .account-cashback-ring::before {
    inset: 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: radial-gradient(circle at 35% 25%, rgba(37, 244, 238, 0.08), transparent 44%), #0e0e11;
}

.account-module-cashback .account-cashback-ring > span { display: grid; gap: 2px; justify-items: center; }
.account-module-cashback .account-cashback-ring strong { color: #fff; font-size: 20px; line-height: 1; }
.account-module-cashback .account-cashback-ring small { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: 0.07em; text-transform: uppercase; }
.account-module-cashback .account-cashback-hero:hover .account-cashback-ring { box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.48), 3px -3px 0 rgba(254, 44, 85, 0.44), 0 19px 38px rgba(0, 0, 0, 0.32); transform: rotate(-3deg) scale(1.035); }

.account-cashback-intro { display: grid; min-width: 0; align-content: center; }
.account-module-cashback .account-cashback-intro h2 { margin: 0; font-size: 0; }
.account-cashback-intro h2 .account-coin { --account-coin-font-size: 24px; --account-coin-icon-size: 31px; --account-coin-unit-size: 11px; min-height: 40px; }
.account-module-cashback .account-cashback-intro > span { max-width: 520px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.account-module-cashback .account-cashback-intro .account-progress { width: min(100%, 430px); margin-top: 11px; }

.account-cashback-state {
    display: grid;
    min-width: 0;
    gap: 8px;
    align-content: center;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, 0.095);
    border-radius: 17px;
    background: rgba(0, 0, 0, 0.24);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.025);
    transition: border-color 190ms ease, background 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-cashback-hero:hover .account-cashback-state { border-color: rgba(37, 244, 238, 0.25); background: rgba(37, 244, 238, 0.025); box-shadow: inset 3px 0 0 rgba(37, 244, 238, 0.7), 0 16px 38px rgba(0, 0, 0, 0.2); transform: translateY(-2px); }
.account-cashback-state > span { display: flex; gap: 7px; align-items: center; color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.account-cashback-state > strong { min-width: 0; font-size: 0; }
.account-cashback-state > strong .account-coin { --account-coin-font-size: 17px; --account-coin-icon-size: 23px; --account-coin-unit-size: 9px; min-width: 0; max-width: 100%; min-height: 32px; white-space: nowrap; }
.account-cashback-state > small { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; align-items: center; color: var(--muted); font-size: 9px; line-height: 1.4; }
.account-cashback-state > small .account-coin { --account-coin-font-size: 10px; --account-coin-icon-size: 15px; --account-coin-unit-size: 8px; min-width: 0; min-height: 23px; gap: 2px; padding: 1px 4px 1px 2px; }
.account-cashback-state form,
.account-cashback-state .account-button { width: 100%; }

.account-cashback-hero + .account-cashback-overview,
.account-cashback-overview + .account-cashback-terms-panel { margin-top: 17px; }
.account-cashback-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.account-module-cashback .account-cashback-overview .account-feature-card { min-height: 150px; padding: 17px; }
.account-cashback-overview .account-feature-card strong { overflow: visible; font-size: clamp(20px, 1.8vw, 26px); text-overflow: clip; }
.account-cashback-overview .account-feature-card > div > p { padding-right: 8px !important; }
.account-cashback-overview .account-coin { --account-coin-font-size: 16px; --account-coin-icon-size: 22px; --account-coin-unit-size: 9px; min-width: 0; min-height: 31px; max-width: 100%; flex-wrap: nowrap; white-space: nowrap; }
.account-cashback-overview .account-feature-card p .account-coin { --account-coin-font-size: 10px; --account-coin-icon-size: 15px; --account-coin-unit-size: 8px; display: inline-flex; min-height: 23px; gap: 2px; margin-left: 3px; padding: 1px 3px 1px 2px; vertical-align: middle; }
.account-cashback-overview .account-feature-card p .account-coin :is(.account-coin-value, small) { color: var(--muted) !important; }

.account-cashback-terms-panel,
.account-cashback-history-panel,
.account-cashback-claims-panel { border-color: rgba(37, 244, 238, 0.16); }
.account-cashback-rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.account-cashback-rule-grid article {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 10px;
    align-content: start;
    align-items: start;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.022);
    transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease);
}
.account-cashback-rule-grid article:hover { border-color: rgba(37, 244, 238, 0.28); background: rgba(37, 244, 238, 0.035); box-shadow: inset 3px 0 0 rgba(37, 244, 238, 0.68); transform: translateY(-3px); }
.account-cashback-rule-grid article > span { display: grid; width: 42px; height: 42px; place-items: center; grid-row: 1 / span 2; border: 1px solid rgba(37, 244, 238, 0.2); border-radius: 13px; background: rgba(37, 244, 238, 0.075); color: var(--cyan); }
.account-cashback-rule-grid article:nth-child(2) > span { border-color: rgba(254, 44, 85, 0.2); background: rgba(254, 44, 85, 0.075); color: var(--pink); }
.account-cashback-rule-grid article > div { display: grid; min-width: 0; gap: 4px; }
.account-cashback-rule-grid strong { font-size: 13px; }
.account-cashback-rule-grid p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.account-cashback-rule-grid article > b { grid-column: 2; color: var(--cyan); font-size: 17px; }
.account-cashback-rule-grid article > b .account-coin { --account-coin-font-size: 12px; --account-coin-icon-size: 18px; --account-coin-unit-size: 8px; min-width: 0; min-height: 27px; white-space: nowrap; }

.account-cashback-accrual-list article,
.account-cashback-claim-list article { min-height: 67px; }
.account-cashback-accrual-list article > div,
.account-cashback-claim-list article > div { gap: 3px; }
.account-cashback-accrual-list article > div > small { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px; align-items: center; line-height: 1.45; }
.account-cashback-accrual-list article > div > small .account-coin { --account-coin-font-size: 10px; --account-coin-icon-size: 15px; --account-coin-unit-size: 8px; display: inline-flex; min-width: 0; min-height: 23px; gap: 2px; padding: 1px 3px 1px 2px; white-space: nowrap; }
.account-cashback-accrual-list code,
.account-cashback-claim-list code { color: #71717a; font-size: 8px; letter-spacing: 0.05em; }
.account-cashback-accrual-list article > aside,
.account-cashback-claim-list article > aside { display: grid; min-width: max-content; gap: 3px; justify-items: end; margin-left: auto; }
.account-cashback-accrual-list article > aside > small,
.account-cashback-claim-list article > aside > small { color: var(--muted); font-size: 8px; font-weight: 850; letter-spacing: 0.06em; text-transform: uppercase; }
.account-cashback-accrual-list article > aside > b,
.account-cashback-claim-list article > aside > b { display: flex; gap: 3px; align-items: center; font-size: 12px; white-space: nowrap; }
.account-cashback-accrual-list article > aside .account-coin,
.account-cashback-claim-list article > aside .account-coin { --account-coin-font-size: 12px; --account-coin-icon-size: 19px; --account-coin-unit-size: 8px; display: inline-flex; min-width: 0; min-height: 28px; gap: 3px; white-space: nowrap; }

@media (max-width: 1180px) {
    .account-cashback-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .account-module-cashback .account-cashback-hero { grid-template-columns: 116px minmax(0, 1fr); }
    .account-cashback-state { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
    .account-cashback-state > :is(small, form) { grid-column: 1 / -1; }
    .account-cashback-rule-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .account-module-cashback .account-cashback-hero { grid-template-columns: minmax(0, 1fr); gap: 15px; padding: 17px; }
    .account-module-cashback .account-cashback-ring { width: 108px; height: 108px; justify-self: center; }
    .account-module-cashback .account-cashback-intro { justify-items: center; text-align: center; }
    .account-module-cashback .account-cashback-intro > span { font-size: 10px; }
    .account-module-cashback .account-cashback-intro .account-progress { width: 100%; }
    .account-cashback-state { display: grid; grid-template-columns: minmax(0, 1fr); padding: 13px; }
    .account-cashback-state > :is(small, form) { grid-column: 1; }
    .account-cashback-overview { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .account-module-cashback .account-cashback-overview .account-feature-card { min-height: 128px; padding: 15px; }
    .account-cashback-rule-grid article { padding: 12px; }
    .account-cashback-accrual-list article,
    .account-cashback-claim-list article { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px 10px; align-items: center; }
    .account-cashback-accrual-list article > div > strong,
    .account-cashback-claim-list article > div > strong { white-space: normal; }
    .account-cashback-accrual-list article > aside,
    .account-cashback-claim-list article > aside { display: flex; min-width: 0; grid-column: 2; gap: 8px; align-items: center; justify-content: space-between; justify-items: stretch; margin-left: 0; }
    .account-cashback-pagination .account-pagination-pages { justify-content: center; overflow: visible; }
}

/* Stations: real favourites and listening activity in the shared account language. */
.account-module-stations { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }

.account-stations-hero {
    position: relative;
    display: grid;
    min-width: 0;
    min-height: 0;
    grid-template-columns: 92px minmax(0, 1fr) minmax(148px, auto);
    gap: 18px;
    align-items: center;
    padding: 20px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 22px;
    background:
        radial-gradient(circle at 4% 14%, rgba(37, 244, 238, 0.14), transparent 34%),
        radial-gradient(circle at 96% 90%, rgba(254, 44, 85, 0.11), transparent 35%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.027), transparent 48%),
        var(--account-panel);
    box-shadow: 0 20px 58px rgba(0, 0, 0, 0.25);
    isolation: isolate;
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-stations-hero::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 22px;
    left: 22px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), var(--pink), transparent);
    opacity: 0.55;
    content: "";
    transform: scaleX(0.86);
    transition: opacity 190ms ease, transform 190ms var(--ease);
}

.account-stations-hero::after {
    position: absolute;
    z-index: 0;
    right: -42px;
    bottom: -74px;
    width: 170px;
    height: 170px;
    border: 1px solid rgba(37, 244, 238, 0.1);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(254, 44, 85, 0.025);
    content: "";
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-stations-hero:hover {
    border-color: rgba(37, 244, 238, 0.42);
    box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.34), 3px -3px 0 rgba(254, 44, 85, 0.34), 0 28px 72px rgba(0, 0, 0, 0.34);
    transform: translateY(-3px);
}

.account-stations-hero:hover::before { opacity: 1; transform: scaleX(1); }
.account-stations-hero:hover::after { border-color: rgba(37, 244, 238, 0.2); box-shadow: 0 0 0 28px rgba(254, 44, 85, 0.045); transform: translate(-8px, -8px) scale(1.04); }
.account-stations-hero > * { position: relative; z-index: 1; }

.account-stations-hero-art {
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 25px;
    background: #08080a;
    color: var(--cyan);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.3);
    font-size: 28px;
}

.account-stations-hero-art > img { width: 100%; height: 100%; object-fit: cover; }
.account-stations-hero-art > b { position: absolute; right: 7px; bottom: 7px; display: flex; width: 27px; height: 25px; gap: 2px; align-items: end; justify-content: center; padding: 5px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 9px; background: rgba(6, 6, 8, 0.86); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.34); }
.account-stations-hero-art > b > i { width: 2px; min-height: 4px; border-radius: 99px; background: linear-gradient(180deg, var(--cyan), var(--pink)); animation: account-stations-wave 780ms ease-in-out infinite alternate; }
.account-stations-hero-art > b > i:nth-child(2) { height: 12px; animation-delay: -180ms; }
.account-stations-hero-art > b > i:nth-child(3) { height: 8px; animation-delay: -360ms; }
.account-stations-hero-art > b > i:nth-child(4) { height: 14px; animation-delay: -90ms; }
.account-stations-hero-art > b > i:nth-child(5) { height: 6px; animation-delay: -270ms; }
.account-stations-hero-art.is-empty { background: linear-gradient(145deg, rgba(37, 244, 238, 0.12), rgba(254, 44, 85, 0.09)), #08080a; }

@keyframes account-stations-wave {
    from { height: 4px; }
    to { height: 14px; }
}

.account-stations-hero-copy { display: grid; min-width: 0; gap: 4px; align-content: center; }
.account-stations-hero-copy > p { margin: 0; color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.account-stations-hero-copy > h2 { overflow: hidden; margin: 0; color: #fff; font-size: clamp(22px, 2.7vw, 34px); line-height: 1.03; letter-spacing: -0.035em; text-overflow: ellipsis; white-space: nowrap; }
.account-stations-hero-copy > span { overflow: hidden; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.account-stations-hero-copy > small { display: flex; min-width: 0; gap: 6px; align-items: center; margin-top: 4px; color: #8b8b94; font-size: 10px; line-height: 1.35; }
.account-stations-hero-copy > small i { color: var(--pink); }
.account-stations-hero-actions { display: grid; min-width: 148px; gap: 8px; }
.account-stations-hero-actions .account-button { width: 100%; justify-content: center; white-space: nowrap; }

.account-stations-hero + .account-stations-overview,
.account-stations-overview + .account-stations-favorites-panel,
.account-stations-favorites-panel + .account-stations-recent-panel { margin-top: 17px; }

.account-stations-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.account-module-stations .account-stations-overview .account-feature-card { min-height: 150px; }
.account-module-stations .account-stations-overview .account-feature-card > div > p { padding-right: 0; overflow-wrap: anywhere; }

.account-stations-favorites-panel,
.account-stations-recent-panel { border-color: rgba(255, 255, 255, 0.09); }
.account-stations-panel-actions { display: flex; min-width: 0; gap: 8px; align-items: center; justify-content: flex-end; }
.account-stations-panel-actions form { margin: 0; }
.account-stations-panel-actions .account-button { white-space: nowrap; }

.account-stations-empty {
    display: grid;
    min-width: 0;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 14px;
    border: 1px dashed rgba(37, 244, 238, 0.2);
    border-radius: 17px;
    background: linear-gradient(115deg, rgba(37, 244, 238, 0.045), rgba(254, 44, 85, 0.025));
}
.account-stations-empty > span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 15px; background: rgba(37, 244, 238, 0.09); color: var(--cyan); }
.account-stations-empty > div { display: grid; min-width: 0; gap: 3px; }
.account-stations-empty strong { font-size: 13px; }
.account-stations-empty p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.account-stations-empty .account-button { white-space: nowrap; }

.account-stations-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.account-stations-card {
    display: grid;
    min-width: 0;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 52%), rgba(255, 255, 255, 0.018);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--ease), background 180ms ease;
}
.account-stations-card:hover { border-color: rgba(37, 244, 238, 0.34); background: linear-gradient(145deg, rgba(37, 244, 238, 0.07), rgba(254, 44, 85, 0.035)); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.24), 2px -2px 0 rgba(254, 44, 85, 0.22), 0 16px 32px rgba(0, 0, 0, 0.24); transform: translateY(-2px); }
.account-stations-card-art { display: grid; width: 60px; height: 60px; place-items: center; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 17px; background: #08080a; color: var(--cyan); }
.account-stations-card-art img { width: 100%; height: 100%; object-fit: cover; }
.account-stations-card-copy { display: grid; min-width: 0; gap: 3px; }
.account-stations-card-copy > strong,
.account-stations-card-copy > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-stations-card-copy > strong { color: #fff; font-size: 13px; }
.account-stations-card-copy > span { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.account-stations-card-copy > small { display: flex; min-width: 0; gap: 5px; align-items: center; color: #85858d; font-size: 9px; line-height: 1.35; }
.account-stations-card-copy > small i { flex: 0 0 auto; color: var(--pink); }
.account-stations-card-copy > small b { color: #b4b4bc; font-weight: 800; }
.account-stations-card-actions { display: flex; gap: 6px; align-items: center; }
.account-stations-card-actions form { margin: 0; }
.account-stations-card-actions .account-icon-button { width: 36px; height: 36px; border-radius: 12px; }
.account-stations-card-actions .account-icon-button.is-play { color: #050505; }
.account-stations-card-actions .account-icon-button.is-play[data-station-active="true"] { border-color: #fff; background: #fff; color: #000; box-shadow: -2px 2px 0 var(--cyan), 2px -2px 0 var(--pink); }
.account-stations-card-actions .account-icon-button.is-favorite { border-color: rgba(254, 44, 85, 0.26); background: rgba(254, 44, 85, 0.1); color: var(--pink); }
.account-stations-pagination { margin-top: 14px; }

@media (max-width: 1180px) {
    .account-stations-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .account-stations-hero { grid-template-columns: 84px minmax(0, 1fr); }
    .account-stations-hero-art { width: 84px; height: 84px; border-radius: 23px; }
    .account-stations-hero-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-stations-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 620px) {
    .account-stations-hero { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; padding: 15px; border-radius: 19px; }
    .account-stations-hero-art { width: 70px; height: 70px; border-radius: 20px; }
    .account-stations-hero-art > b { right: 4px; bottom: 4px; }
    .account-stations-hero-copy > h2 { font-size: 19px; }
    .account-stations-hero-copy > small { display: block; }
    .account-stations-hero-copy > small i { margin-right: 5px; }
    .account-stations-hero-actions { min-width: 0; gap: 7px; }
    .account-stations-hero-actions .account-button { min-width: 0; padding-right: 10px; padding-left: 10px; }
    .account-stations-overview { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .account-module-stations .account-stations-overview .account-feature-card { min-height: 126px; padding: 15px; }
    .account-stations-panel-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
    .account-stations-panel-actions .account-badge { margin-left: 0; }
    .account-stations-empty { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px; }
    .account-stations-empty > span { width: 44px; height: 44px; }
    .account-stations-empty .account-button { width: 100%; grid-column: 1 / -1; justify-content: center; }
    .account-stations-card { grid-template-columns: 52px minmax(0, 1fr); gap: 9px 10px; padding: 10px; border-radius: 16px; }
    .account-stations-card-art { width: 52px; height: 52px; border-radius: 15px; }
    .account-stations-card-actions { grid-column: 2; justify-content: flex-start; }
    .account-stations-card-actions .account-icon-button { width: 34px; height: 34px; }
    .account-stations-card-copy > small { flex-wrap: wrap; row-gap: 1px; }
    .account-stations-pagination .account-pagination-pages { justify-content: center; overflow: visible; }
}

/* Friends: real relationships, complete actions and bounded user directories. */
.account-module-friends { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }

.account-friends-hero {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 126px minmax(0, 1fr) minmax(160px, 190px);
    gap: 20px;
    align-items: center;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 24px;
    background:
        linear-gradient(rgba(37, 244, 238, 0.024) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 244, 238, 0.024) 1px, transparent 1px),
        linear-gradient(125deg, rgba(37, 244, 238, 0.095), transparent 44%, rgba(254, 44, 85, 0.065)),
        var(--account-panel);
    background-size: 28px 28px, 28px 28px, auto, auto;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.25);
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-friends-hero::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), rgba(255, 255, 255, 0.72), var(--pink));
    box-shadow: 0 0 18px rgba(37, 244, 238, 0.35);
    content: "";
}

.account-friends-hero::after {
    position: absolute;
    z-index: 0;
    right: -76px;
    bottom: -118px;
    width: 250px;
    height: 250px;
    border: 1px solid rgba(254, 44, 85, 0.13);
    border-radius: 50%;
    box-shadow: 0 0 0 36px rgba(37, 244, 238, 0.024);
    content: "";
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-friends-hero:hover { border-color: rgba(37, 244, 238, 0.42); box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.3), 3px -3px 0 rgba(254, 44, 85, 0.29), 0 28px 70px rgba(0, 0, 0, 0.34); transform: translateY(-3px); }
.account-friends-hero:hover::after { border-color: rgba(37, 244, 238, 0.2); box-shadow: 0 0 0 36px rgba(254, 44, 85, 0.04); transform: translate(-8px, -8px) scale(1.04); }
.account-friends-hero > * { position: relative; z-index: 1; }

.account-friends-hero-art {
    position: relative;
    width: 126px;
    height: 100px;
    overflow: visible;
}

.account-friends-hero-avatar,
.account-friends-hero-symbol {
    position: absolute;
    top: 15px;
    display: grid;
    width: 70px;
    height: 70px;
    place-items: center;
    overflow: hidden;
    border: 2px solid #101014;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(37, 244, 238, 0.2), rgba(254, 44, 85, 0.16)), #09090b;
    color: #fff;
    box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.65), 2px -2px 0 rgba(254, 44, 85, 0.58), 0 13px 28px rgba(0, 0, 0, 0.38);
    font-size: 19px;
}

.account-friends-hero-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-friends-hero-avatar:nth-child(1) { z-index: 3; left: 0; }
.account-friends-hero-avatar:nth-child(2) { z-index: 2; left: 28px; transform: translateY(-7px); }
.account-friends-hero-avatar:nth-child(3) { z-index: 1; left: 56px; }
.account-friends-hero-symbol { left: 14px; width: 88px; height: 78px; border-radius: 25px; color: var(--cyan); font-size: 27px; }
.account-friends-hero-art > i { position: absolute; z-index: 4; right: 5px; bottom: 2px; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; background: #101014; color: var(--pink); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.34); font-size: 11px; }

.account-friends-hero-copy { display: grid; min-width: 0; gap: 5px; align-content: center; }
.account-friends-hero-copy > p { margin: 0; color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.account-friends-hero-copy > h2 { margin: 0; color: #fff; font-size: clamp(24px, 2.7vw, 36px); line-height: 1.03; letter-spacing: -0.035em; }
.account-friends-hero-copy > span { max-width: 650px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.account-friends-hero-actions { display: grid; min-width: 0; gap: 8px; }
.account-friends-hero-actions .account-button { width: 100%; min-width: 0; min-height: 42px; justify-content: center; padding-inline: 10px; font-size: 9px; text-align: center; }

.account-friends-hero + .account-friends-overview,
.account-friends-overview + .account-friends-search-panel,
.account-friends-search-panel + .account-friends-request-grid,
.account-friends-request-grid + .account-friends-list-panel { margin-top: 17px; }
.account-workspace > .account-friends-list-panel + .account-friends-list-panel { margin-top: 17px; }
.account-friends-overview { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.account-module-friends .account-friends-overview .account-feature-card { min-height: 146px; padding: 17px; }
.account-module-friends .account-friends-overview .account-feature-card > div > p { padding-right: 0; }
.account-module-friends .account-friends-overview .account-feature-card > div > strong { font-size: clamp(23px, 2vw, 30px); }

.account-friends-search-panel,
.account-friends-list-panel { border-color: rgba(37, 244, 238, 0.14); }
.account-friends-list-panel.is-blocked { border-color: rgba(254, 44, 85, 0.13); }
.account-friends-search-panel > header,
.account-friends-list-panel > header { align-items: flex-start; margin-bottom: 12px; }
.account-friends-search-panel > header > div,
.account-friends-list-panel > header > div { min-width: 0; align-items: center; }
.account-friends-search-panel > header > div > div,
.account-friends-list-panel > header > div > div { display: grid; min-width: 0; gap: 3px; }
.account-friends-search-panel > header h2,
.account-friends-list-panel > header h2 { margin: 0; }
.account-friends-search-panel > header p,
.account-friends-list-panel > header p { margin: 0; color: var(--muted); font-size: 9.5px; font-weight: 600; line-height: 1.45; }
.account-friends-search-panel > header > .account-button { flex: 0 0 auto; }
.account-friends-search-form { align-items: stretch; }
.account-friends-search-form .account-button { min-width: 118px; justify-content: center; }
.account-friends-search-hint { display: flex; gap: 6px; align-items: center; margin-top: 8px; color: #7e7e87; font-size: 9px; line-height: 1.4; }
.account-friends-search-hint > i { color: var(--cyan); }
.account-friends-search-hint.is-invalid { color: #ff8da3; }
.account-friends-search-hint.is-invalid > i { color: var(--pink); }
.account-friends-search-results { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); }
.account-friends-section-title { display: flex; min-width: 0; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.account-friends-section-title > div { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px 7px; align-items: baseline; }
.account-friends-section-title strong { color: #f3f3f5; font-size: 12px; }
.account-friends-section-title span:not(.account-badge) { overflow: hidden; color: var(--cyan); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }

.account-friends-request-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; align-items: stretch; }
.account-friends-request-grid > .account-friends-list-panel { margin-top: 0; }
.account-friends-list,
.account-friends-grid { display: grid; min-width: 0; gap: 9px; }
.account-friends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.account-friends-list-panel > .account-empty { min-height: 0; }

@media (min-width: 701px) {
    .account-module-friends .account-empty {
        min-height: 0;
        justify-content: flex-start;
        padding: 13px 15px;
    }
    .account-module-friends .account-empty > span { width: 40px; height: 40px; border-radius: 13px; }
    .account-module-friends .account-empty > div { width: 100%; max-width: none; }
}

.account-friend-card {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 54px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    min-height: 78px;
    padding: 11px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 17px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.026), transparent 58%), rgba(255, 255, 255, 0.012);
    transition: border-color 175ms ease, background 175ms ease, box-shadow 175ms ease, transform 175ms var(--ease);
}

.account-friend-card::before { position: absolute; inset: 12px auto 12px 0; width: 3px; border-radius: 0 99px 99px 0; background: rgba(255, 255, 255, 0.2); content: ""; }
.account-friend-card.is-accepted::before,
.account-friend-card.is-available::before { background: var(--cyan); box-shadow: 0 0 13px rgba(37, 244, 238, 0.34); }
.account-friend-card.is-incoming::before { background: var(--pink); box-shadow: 0 0 13px rgba(254, 44, 85, 0.32); }
.account-friend-card.is-outgoing::before { background: #d1d1d7; }
.account-friend-card.is-blocked::before { background: #707079; }
.account-friend-card:hover { border-color: rgba(37, 244, 238, 0.28); background: linear-gradient(135deg, rgba(37, 244, 238, 0.06), rgba(254, 44, 85, 0.028)); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.19), 2px -2px 0 rgba(254, 44, 85, 0.17), 0 13px 28px rgba(0, 0, 0, 0.22); transform: translateY(-2px); }
.account-friend-card.is-blocked:hover { border-color: rgba(254, 44, 85, 0.24); }

.account-friend-avatar { display: grid; width: 52px; height: 52px; place-items: center; text-decoration: none; }
.account-friend-avatar .account-user-avatar { display: grid; width: 48px; height: 48px; place-items: center; overflow: hidden; border-radius: 15px; background: linear-gradient(145deg, rgba(37, 244, 238, 0.18), rgba(254, 44, 85, 0.14)), #09090b; color: #fff; box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.68), 2px -2px 0 rgba(254, 44, 85, 0.62); font-size: 14px; transition: transform 175ms var(--ease); }
.account-friend-avatar .account-user-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-friend-avatar:hover .account-user-avatar { transform: scale(1.045); }
.account-friend-card.is-blocked .account-user-avatar { filter: grayscale(0.5); box-shadow: -2px 2px 0 rgba(255, 255, 255, 0.18), 2px -2px 0 rgba(254, 44, 85, 0.28); }

.account-friend-copy { display: grid; min-width: 0; gap: 2px; }
.account-friend-copy > a,
.account-friend-copy > strong { overflow: hidden; color: #f5f5f7; font-size: 12.5px; font-weight: 900; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; }
.account-friend-copy > a:hover { color: var(--cyan); }
.account-friend-copy > span { overflow: hidden; color: #85858e; font-size: 9.5px; text-overflow: ellipsis; white-space: nowrap; }
.account-friend-copy > small { display: flex; min-width: 0; gap: 5px; align-items: center; overflow: hidden; color: #73737c; font-size: 8.5px; text-overflow: ellipsis; white-space: nowrap; }
.account-friend-copy > small > i:not(.fa-solid) { width: 6px; height: 6px; flex: 0 0 auto; border-radius: 50%; background: #66666e; }
.account-friend-copy > small.is-online { color: #65e4ae; }
.account-friend-copy > small.is-online > i { background: #54dda4; box-shadow: 0 0 8px rgba(84, 221, 164, 0.75); }
.account-friend-copy > small.is-away { color: #e4c765; }
.account-friend-copy > small.is-away > i { background: #d9b94f; box-shadow: 0 0 8px rgba(217, 185, 79, 0.48); }
.account-friend-copy > time { overflow: hidden; color: #686871; font-size: 7.8px; text-overflow: ellipsis; white-space: nowrap; }

.account-friend-actions { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px; align-items: center; justify-content: flex-end; }
.account-friend-actions form { display: flex; margin: 0; }
.account-friend-actions .account-icon-button { width: 34px; height: 34px; border-radius: 11px; font-size: 11px; }
.account-friend-actions .account-badge { min-height: 23px; padding: 4px 7px; font-size: 7.5px; }
.account-friend-actions .account-button { min-height: 34px; padding: 7px 10px; font-size: 8px; }
.account-friend-actions .account-icon-button:not(.is-success):not(.is-danger):not(.is-gift):hover { border-color: rgba(37, 244, 238, 0.35); color: var(--cyan); }
.account-friend-actions .account-icon-button.is-gift:hover { color: var(--pink); }

.account-friends-pagination { margin-top: 13px; }
.account-friends-pagination .account-pagination-pages { overflow: visible; }

@media (max-width: 1180px) {
    .account-friends-hero { grid-template-columns: 112px minmax(0, 1fr); }
    .account-friends-hero-art { width: 112px; }
    .account-friends-hero-actions { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-friends-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-friends-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
    .account-friends-request-grid { grid-template-columns: minmax(0, 1fr); }
    .account-friend-card { grid-template-columns: 54px minmax(0, 1fr); }
    .account-friend-actions { grid-column: 2; justify-content: flex-start; }
}

@media (max-width: 620px) {
    .account-friends-hero { grid-template-columns: 78px minmax(0, 1fr); gap: 12px; padding: 15px; border-radius: 19px; }
    .account-friends-hero-art { width: 78px; height: 72px; }
    .account-friends-hero-avatar { top: 9px; width: 52px; height: 52px; border-radius: 17px; }
    .account-friends-hero-avatar:nth-child(2) { left: 15px; transform: translateY(-5px); }
    .account-friends-hero-avatar:nth-child(3) { left: 29px; }
    .account-friends-hero-symbol { top: 7px; left: 1px; width: 67px; height: 58px; border-radius: 19px; font-size: 21px; }
    .account-friends-hero-art > i { right: 0; bottom: 0; width: 24px; height: 24px; border-radius: 8px; font-size: 9px; }
    .account-friends-hero-copy > h2 { font-size: 21px; }
    .account-friends-hero-copy > span { grid-column: 1 / -1; font-size: 9.5px; }
    .account-friends-hero-actions { gap: 7px; }
    .account-friends-hero-actions .account-button { min-height: 40px; padding: 7px; font-size: 8.5px; }
    .account-friends-overview { grid-template-columns: minmax(0, 1fr); gap: 11px; }
    .account-module-friends .account-friends-overview .account-feature-card { min-height: 124px; padding: 15px; }
    .account-friends-search-panel > header,
    .account-friends-list-panel > header { align-items: flex-start; flex-wrap: wrap; }
    .account-friends-search-panel > header > .account-button { width: 100%; justify-content: center; }
    .account-friends-search-form .account-button { width: 100%; }
    .account-friend-card { grid-template-columns: 46px minmax(0, 1fr); gap: 9px 10px; padding: 10px; border-radius: 15px; }
    .account-friend-avatar { width: 44px; height: 44px; }
    .account-friend-avatar .account-user-avatar { width: 42px; height: 42px; border-radius: 13px; }
    .account-friend-actions { gap: 5px; }
    .account-friend-actions .account-icon-button { width: 32px; height: 32px; border-radius: 10px; }
    .account-friends-pagination .account-pagination-pages { justify-content: center; overflow: visible; }
}

/* Balance: real ledger totals, clear actions and bounded transaction history. */
.account-module-balance { --module-accent: #25f4ee; --module-accent-rgb: 37, 244, 238; --module-secondary: #fe2c55; }

.account-balance-hero {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 104px minmax(0, 1fr) minmax(190px, 224px);
    gap: 20px;
    align-items: center;
    padding: 22px;
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 24px;
    background:
        linear-gradient(rgba(37, 244, 238, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37, 244, 238, 0.025) 1px, transparent 1px),
        linear-gradient(125deg, rgba(37, 244, 238, 0.095), transparent 43%, rgba(254, 44, 85, 0.055)),
        var(--account-panel);
    background-size: 28px 28px, 28px 28px, auto, auto;
    box-shadow: 0 20px 54px rgba(0, 0, 0, 0.25);
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-balance-hero::before {
    position: absolute;
    z-index: 0;
    top: 0;
    right: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--cyan), rgba(255, 255, 255, 0.7), var(--pink));
    box-shadow: 0 0 18px rgba(37, 244, 238, 0.36);
    content: "";
}

.account-balance-hero::after {
    position: absolute;
    z-index: 0;
    right: -84px;
    bottom: -118px;
    width: 270px;
    height: 270px;
    border: 1px solid rgba(254, 44, 85, 0.14);
    border-radius: 50%;
    box-shadow: 0 0 0 40px rgba(37, 244, 238, 0.025);
    content: "";
    transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease);
}

.account-balance-hero:hover { border-color: rgba(37, 244, 238, 0.42); box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.31), 3px -3px 0 rgba(254, 44, 85, 0.3), 0 28px 70px rgba(0, 0, 0, 0.34); transform: translateY(-3px); }
.account-balance-hero:hover::after { border-color: rgba(37, 244, 238, 0.2); box-shadow: 0 0 0 40px rgba(254, 44, 85, 0.04); transform: translate(-8px, -8px) scale(1.035); }
.account-balance-hero > * { position: relative; z-index: 1; }

.account-balance-hero-mark {
    position: relative;
    display: grid;
    width: 104px;
    height: 104px;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, 0.22);
    border-radius: 30px;
    background: radial-gradient(circle at 50% 42%, rgba(37, 244, 238, 0.15), rgba(254, 44, 85, 0.08) 62%, #08080a 63%);
    box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.26), 3px -3px 0 rgba(254, 44, 85, 0.24), 0 18px 38px rgba(0, 0, 0, 0.32);
}

.account-balance-hero-mark > span { display: grid; width: 76px; height: 76px; place-items: center; border-radius: 50%; background: rgba(5, 5, 7, 0.78); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.account-balance-hero-mark img { width: 66px; height: 66px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.34)); }
.account-balance-hero-mark > i { position: absolute; right: 7px; bottom: 7px; display: grid; width: 30px; height: 30px; place-items: center; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; background: #101014; color: var(--cyan); box-shadow: 0 8px 18px rgba(0, 0, 0, 0.32); font-size: 12px; }

.account-balance-hero-copy { display: grid; min-width: 0; gap: 5px; align-content: center; }
.account-balance-hero-copy > p { margin: 0; color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.account-balance-hero-copy > h2 { min-width: 0; margin: 0; font-size: 0; }
.account-balance-hero-copy > h2 .account-coin { --account-coin-font-size: clamp(26px, 3vw, 38px); --account-coin-icon-size: 39px; --account-coin-unit-size: 12px; min-width: 0; min-height: 48px; max-width: 100%; gap: 7px; background: transparent; box-shadow: none; }
.account-balance-hero-copy > span { max-width: 680px; color: var(--muted); font-size: 11px; line-height: 1.55; }

.account-balance-breakdown { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; margin-top: 8px; }
.account-balance-breakdown > span { display: grid; min-width: 0; grid-template-columns: 22px minmax(0, 1fr); gap: 1px 7px; align-items: center; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 12px; background: rgba(255, 255, 255, 0.025); transition: border-color 170ms ease, background 170ms ease, transform 170ms var(--ease); }
.account-balance-breakdown > span:hover { border-color: rgba(37, 244, 238, 0.27); background: rgba(37, 244, 238, 0.055); transform: translateY(-2px); }
.account-balance-breakdown > span > i { display: grid; width: 22px; height: 22px; place-items: center; grid-row: 1 / span 2; color: var(--cyan); font-size: 10px; }
.account-balance-breakdown > span:nth-child(2) > i { color: #bdbdc5; }
.account-balance-breakdown > span:nth-child(3) > i { color: var(--pink); }
.account-balance-breakdown > span > b { overflow: hidden; color: var(--muted); font-size: 8px; letter-spacing: 0.055em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.account-balance-breakdown .account-coin { --account-coin-font-size: 11px; --account-coin-icon-size: 16px; --account-coin-unit-size: 8px; min-width: 0; min-height: 23px; justify-self: start; gap: 2px; padding: 1px 4px 1px 2px; white-space: nowrap; }

.account-balance-actions { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-content: center; }
.account-balance-actions .account-button { min-width: 0; min-height: 42px; justify-content: center; padding-inline: 10px; font-size: 9px; text-align: center; white-space: normal; }
.account-balance-actions .account-button:last-child:nth-child(odd) { grid-column: 1 / -1; }

.account-balance-hero + .account-balance-summary,
.account-balance-summary + .account-balance-history-panel { margin-top: 17px; }
.account-balance-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.account-module-balance .account-balance-summary .account-feature-card { min-height: 148px; padding: 17px; }
.account-module-balance .account-balance-summary .account-feature-card > div > strong { display: flex; min-width: 0; align-items: center; overflow: visible; font-size: clamp(19px, 1.75vw, 25px); text-overflow: clip; }
.account-module-balance .account-balance-summary .account-feature-card > div > strong .account-coin { --account-coin-font-size: 16px; --account-coin-icon-size: 22px; --account-coin-unit-size: 9px; min-width: 0; max-width: 100%; min-height: 31px; white-space: nowrap; }
.account-module-balance .account-balance-summary .account-feature-card > div > p { padding-right: 0; }
.account-module-balance .account-balance-last-card > div > strong { font-size: 14px; line-height: 1.25; }

.account-balance-history-panel { border-color: rgba(37, 244, 238, 0.15); }
.account-balance-history-panel > header { margin-bottom: 11px; }
.account-balance-history-toolbar { display: flex; min-width: 0; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 13px; padding-bottom: 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.065); }
.account-balance-history-toolbar > p { max-width: 620px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.account-balance-history-toolbar > nav { display: flex; flex: 0 0 auto; gap: 6px; align-items: center; }
.account-balance-history-toolbar a { display: flex; min-height: 34px; align-items: center; justify-content: center; padding: 7px 11px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 11px; background: rgba(255, 255, 255, 0.025); color: #aaaab2; font-size: 9px; font-weight: 850; text-decoration: none; transition: border-color 170ms ease, background 170ms ease, color 170ms ease, box-shadow 170ms ease, transform 170ms var(--ease); }
.account-balance-history-toolbar a:hover,
.account-balance-history-toolbar a:focus-visible { border-color: rgba(37, 244, 238, 0.34); background: rgba(37, 244, 238, 0.07); color: var(--cyan); outline: 0; transform: translateY(-1px); }
.account-balance-history-toolbar a.is-current { border-color: rgba(37, 244, 238, 0.4); background: linear-gradient(125deg, rgba(37, 244, 238, 0.12), rgba(254, 44, 85, 0.07)); color: #fff; box-shadow: inset 2px 0 0 var(--cyan), inset -2px 0 0 var(--pink); }

.account-balance-transaction-list { display: grid; min-width: 0; gap: 8px; }
.account-balance-transaction {
    display: grid;
    min-width: 0;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 11px 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.026), transparent 56%), rgba(255, 255, 255, 0.012);
    transition: border-color 175ms ease, background 175ms ease, box-shadow 175ms ease, transform 175ms var(--ease);
}
.account-balance-transaction:hover { border-color: rgba(37, 244, 238, 0.28); background: linear-gradient(135deg, rgba(37, 244, 238, 0.06), rgba(254, 44, 85, 0.025)); box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.2), 2px -2px 0 rgba(254, 44, 85, 0.18), 0 13px 28px rgba(0, 0, 0, 0.21); transform: translateY(-2px); }
.account-balance-transaction.is-debit:hover { border-color: rgba(254, 44, 85, 0.28); }
.account-balance-transaction-icon { display: grid; width: 46px; height: 46px; place-items: center; border: 1px solid rgba(37, 244, 238, 0.2); border-radius: 14px; background: rgba(37, 244, 238, 0.075); color: var(--cyan); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025); }
.account-balance-transaction.is-debit .account-balance-transaction-icon { border-color: rgba(254, 44, 85, 0.22); background: rgba(254, 44, 85, 0.075); color: var(--pink); }
.account-balance-transaction.is-neutral .account-balance-transaction-icon { border-color: rgba(255, 255, 255, 0.13); background: rgba(255, 255, 255, 0.045); color: #d3d3d9; }
.account-balance-transaction-copy { display: grid; min-width: 0; gap: 4px; }
.account-balance-transaction-copy > strong { overflow: hidden; color: #f4f4f6; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-balance-transaction-copy > small { display: flex; min-width: 0; flex-wrap: wrap; gap: 4px 9px; align-items: center; color: #83838c; font-size: 8.5px; line-height: 1.35; }
.account-balance-transaction-copy > small > b { color: var(--cyan); font-weight: 850; }
.account-balance-transaction-copy code { color: #6f6f78; font-family: inherit; font-size: 8px; letter-spacing: 0.055em; }
.account-balance-transaction > aside { display: grid; min-width: max-content; gap: 4px; justify-items: end; }
.account-balance-transaction > aside > b { display: flex; min-width: 0; align-items: center; font-size: 12px; white-space: nowrap; }
.account-balance-transaction > aside > b .account-coin { --account-coin-font-size: 13px; --account-coin-icon-size: 20px; --account-coin-unit-size: 8px; min-width: 0; min-height: 29px; gap: 3px; white-space: nowrap; }
.account-balance-transaction > aside .account-badge { min-height: 21px; padding: 3px 7px; font-size: 8px; }
.account-balance-pagination { margin-top: 14px; }

@media (max-width: 1180px) {
    .account-balance-hero { grid-template-columns: 94px minmax(0, 1fr); }
    .account-balance-hero-mark { width: 94px; height: 94px; border-radius: 27px; }
    .account-balance-actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .account-balance-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .account-balance-breakdown { grid-template-columns: minmax(0, 1fr); }
    .account-balance-breakdown > span { grid-template-columns: 22px minmax(0, 1fr) auto; }
    .account-balance-breakdown > span > i { grid-row: 1; }
    .account-balance-breakdown > span > b { grid-column: 2; }
    .account-balance-breakdown .account-coin { grid-column: 3; grid-row: 1; justify-self: end; }
    .account-balance-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-balance-history-toolbar { align-items: stretch; flex-direction: column; }
    .account-balance-history-toolbar > nav { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .account-balance-history-toolbar a { min-width: 0; padding-inline: 6px; }
}

@media (max-width: 520px) {
    .account-balance-hero { grid-template-columns: 64px minmax(0, 1fr); gap: 11px; padding: 15px; border-radius: 19px; }
    .account-balance-hero-mark { width: 64px; height: 64px; border-radius: 19px; box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.24), 2px -2px 0 rgba(254, 44, 85, 0.22), 0 13px 28px rgba(0, 0, 0, 0.3); }
    .account-balance-hero-mark > span { width: 48px; height: 48px; }
    .account-balance-hero-mark img { width: 43px; height: 43px; }
    .account-balance-hero-mark > i { right: 2px; bottom: 2px; width: 23px; height: 23px; border-radius: 8px; font-size: 9px; }
    .account-balance-hero-copy > h2 .account-coin { --account-coin-font-size: 22px; --account-coin-icon-size: 29px; --account-coin-unit-size: 9px; min-height: 37px; gap: 4px; }
    .account-balance-hero-copy > span { grid-column: 1 / -1; font-size: 10px; }
    .account-balance-breakdown { grid-column: 1 / -1; margin-top: 7px; }
    .account-balance-actions { grid-column: 1 / -1; gap: 7px; }
    .account-balance-actions .account-button { min-height: 40px; padding: 7px; font-size: 8.5px; line-height: 1.2; }
    .account-balance-summary { grid-template-columns: minmax(0, 1fr); gap: 11px; }
    .account-module-balance .account-balance-summary .account-feature-card { min-height: 124px; padding: 15px; }
    .account-balance-history-panel > header .account-badge { margin-left: 0; }
    .account-balance-transaction { grid-template-columns: 40px minmax(0, 1fr); gap: 9px 10px; padding: 10px; border-radius: 15px; }
    .account-balance-transaction-icon { width: 40px; height: 40px; border-radius: 12px; }
    .account-balance-transaction-copy > strong { font-size: 11px; white-space: normal; }
    .account-balance-transaction > aside { display: flex; min-width: 0; grid-column: 2; gap: 8px; align-items: center; justify-content: space-between; justify-items: stretch; }
    .account-balance-transaction > aside > b { min-width: 0; }
    .account-balance-transaction > aside > b .account-coin { --account-coin-font-size: 11px; --account-coin-icon-size: 18px; --account-coin-unit-size: 8px; min-height: 27px; }
    .account-balance-pagination .account-pagination-pages { justify-content: center; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
    .account-game-history-item,
    .account-game-history-visual > img,
    .account-game-history-select,
    .account-game-history-reset,
    .account-referral-share,
    .account-referral-rate-group,
    .account-cashback-ring,
    .account-cashback-state,
    .account-cashback-rule-grid article,
    .account-stations-hero,
    .account-stations-hero::before,
    .account-stations-hero::after,
    .account-stations-card,
    .account-friends-hero,
    .account-friends-hero::after,
    .account-friends-hero-avatar,
    .account-friend-card,
    .account-friend-avatar .account-user-avatar,
    .account-balance-hero,
    .account-balance-hero::after,
    .account-balance-breakdown > span,
    .account-balance-history-toolbar a,
    .account-balance-transaction { transition: none !important; }
    .account-stations-hero-art > b > i { animation: none !important; }
}

@media (max-width: 900px) {
    .account-chat-stage-head > div:first-child.is-direct { width: auto; min-width: 0; grid-column: 1; grid-template-columns: max-content 45px minmax(0, 1fr); gap: 2px 7px; padding-right: 0; }
    .account-chat-stage-head > div:first-child.is-direct > .account-chat-sidebar-opener { grid-column: 1; grid-row: 1; }
    .account-chat-stage-head > div:first-child.is-direct > .account-chat-stage-avatar { display: grid; grid-column: 2; grid-row: 1; }
    .account-chat-stage-head > div:first-child.is-direct > div > h2 { min-width: 0; grid-column: 3; grid-row: 1; align-self: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .account-chat-stage-head > div:first-child.is-direct > div > p { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 390px) {
    .account-chat-stage-head > div:first-child.is-direct { grid-template-columns: max-content 34px minmax(0, 1fr); gap: 2px 5px; }
    .account-chat-stage-head > div:first-child.is-direct > .account-chat-sidebar-opener { gap: 4px; padding-inline: 6px; font-size: 10.5px; }
    .account-chat-stage-head > div:first-child.is-direct > .account-chat-stage-avatar { width: 34px; height: 34px; border-radius: 10px; }
    .account-chat-stage-head > div:first-child.is-direct > div > h2 { font-size: 16px; }
}
.account-faq-status { display: grid; gap: 14px; padding: 18px; border: 1px solid rgba(37, 244, 238, 0.16); border-radius: 20px; background: linear-gradient(135deg, rgba(37, 244, 238, 0.07), rgba(254, 44, 85, 0.035) 58%, rgba(255, 255, 255, 0.025)); }
.account-faq-status > header > div { display: flex; align-items: flex-start; gap: 12px; }
.account-faq-status > header > div > i { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border: 1px solid rgba(37, 244, 238, 0.22); border-radius: 13px; background: rgba(37, 244, 238, 0.08); color: var(--cyan); }
.account-faq-status h2 { margin: 0; color: #fff; font-size: clamp(15px, 1.7vw, 20px); }
.account-faq-status p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.account-faq-status > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.account-faq-status article { display: flex; min-width: 0; min-height: 66px; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 15px; background: rgba(0, 0, 0, 0.24); }
.account-faq-status article > span { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: rgba(255, 255, 255, 0.055); color: var(--muted); }
.account-faq-status article > div { display: grid; min-width: 0; gap: 2px; }
.account-faq-status article small { overflow: hidden; color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .035em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.account-faq-status article strong { color: #fff; font-size: 12px; }
.account-faq-status article > i { margin-left: auto; color: #707078; }
.account-faq-status article.is-enabled { border-color: rgba(37, 244, 238, 0.16); }
.account-faq-status article.is-enabled > span, .account-faq-status article.is-enabled > i { color: var(--cyan); }
.account-faq-panel > header nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.account-faq-panel > header nav a { display: inline-flex; min-height: 44px; align-items: center; gap: 7px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.085); border-radius: 12px; color: #d7d7dc; font-size: 10px; font-weight: 850; text-decoration: none; }
.account-faq-panel > header nav a:hover, .account-faq-panel > header nav a:focus-visible { border-color: rgba(37, 244, 238, 0.38); color: var(--cyan); }
.account-faq-list { display: grid; gap: 9px; }
.account-faq-list details { overflow: clip; border: 1px solid rgba(255, 255, 255, 0.075); border-radius: 15px; background: rgba(0, 0, 0, 0.22); }
.account-faq-list summary { display: grid; min-height: 58px; cursor: pointer; list-style: none; grid-template-columns: 34px minmax(0, 1fr) 24px; align-items: center; gap: 10px; padding: 10px 13px; }
.account-faq-list summary::-webkit-details-marker { display: none; }
.account-faq-list summary > span { color: var(--cyan); font-size: 10px; font-weight: 950; letter-spacing: .07em; }
.account-faq-list summary strong { color: #f5f5f6; font-size: 12px; line-height: 1.4; }
.account-faq-list summary > i { justify-self: center; color: var(--muted); transition: transform .18s ease, color .18s ease; }
.account-faq-list details[open] { border-color: rgba(37, 244, 238, 0.2); background: linear-gradient(135deg, rgba(37, 244, 238, 0.055), rgba(0, 0, 0, 0.24)); }
.account-faq-list details[open] summary > i { color: var(--cyan); transform: rotate(45deg); }
.account-faq-list details > div { padding: 0 13px 14px 57px; }
.account-faq-list details p { margin: 0; color: #aaaab2; font-size: 12px; line-height: 1.7; }
@media (max-width: 720px) { .account-faq-status > div { grid-template-columns: 1fr; } .account-faq-panel > header { align-items: flex-start; } .account-faq-panel > header nav { width: 100%; justify-content: flex-start; } }
@media (max-width: 400px) { .account-faq-status { padding: 13px; } .account-faq-list summary { grid-template-columns: 25px minmax(0, 1fr) 20px; padding-inline: 10px; } .account-faq-list details > div { padding: 0 10px 12px 45px; } }

.account-exchange-delivery,
.account-exchange-entitlements {
    margin-top: 18px;
}

.account-exchange-delivery__body {
    display: grid;
    grid-template-columns: minmax(150px, .72fr) repeat(2, minmax(180px, 1fr));
    gap: 12px;
    align-items: stretch;
}

.account-exchange-delivery__body > div,
.account-exchange-delivery__body > label {
    display: grid;
    min-width: 0;
    gap: 7px;
    padding: 14px;
    border: 1px solid rgba(37, 244, 238, .14);
    border-radius: 16px;
    background: linear-gradient(145deg, rgba(37, 244, 238, .055), rgba(0, 0, 0, .24));
}

.account-exchange-delivery__body small,
.account-exchange-delivery__body label > span:first-child {
    color: var(--muted);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.account-exchange-delivery__body strong {
    color: #fff;
    font-size: 17px;
}

.account-exchange-delivery__body > div > span {
    color: var(--cyan);
    font-size: 11px;
    font-weight: 850;
}

.account-exchange-delivery__body label > span:last-child {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    background: rgba(0, 0, 0, .28);
}

.account-exchange-delivery__body code {
    overflow-wrap: anywhere;
    color: #fff;
    font-size: 13px;
    font-weight: 850;
}

.account-exchange-delivery__body > p {
    display: flex;
    grid-column: 1 / -1;
    gap: 8px;
    align-items: center;
    margin: 0;
    color: #b8b8c0;
    font-size: 11px;
}

.account-exchange-entitlements__list {
    display: grid;
    gap: 9px;
}

.account-exchange-entitlements__list article {
    display: grid;
    min-width: 0;
    grid-template-columns: 42px minmax(0, 1fr) max-content;
    gap: 12px;
    align-items: center;
    padding: 11px 13px;
    border: 1px solid rgba(255, 255, 255, .075);
    border-radius: 15px;
    background: rgba(0, 0, 0, .22);
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.account-exchange-entitlements__list article:hover {
    border-color: rgba(37, 244, 238, .2);
    background: rgba(37, 244, 238, .04);
    transform: translateY(-1px);
}

.account-exchange-entitlements__list article > span {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(37, 244, 238, .18);
    border-radius: 13px;
    background: rgba(37, 244, 238, .075);
    color: var(--cyan);
}

.account-exchange-entitlements__list article > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.account-exchange-entitlements__list strong { color: #fff; font-size: 12px; }
.account-exchange-entitlements__list p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.account-exchange-entitlements__list small { color: var(--cyan); font-size: 10px; font-weight: 850; white-space: nowrap; }

@media (max-width: 760px) {
    .account-exchange-delivery__body { grid-template-columns: 1fr; }
    .account-exchange-delivery__body > p { grid-column: auto; }
}

@media (max-width: 440px) {
    .account-exchange-delivery__body > div,
    .account-exchange-delivery__body > label { padding: 11px; border-radius: 13px; }
    .account-exchange-entitlements__list article { grid-template-columns: 38px minmax(0, 1fr); gap: 9px; padding: 10px; }
    .account-exchange-entitlements__list article > span { width: 38px; height: 38px; border-radius: 11px; }
    .account-exchange-entitlements__list article > small { grid-column: 2; white-space: normal; }
}

/* Keep the redesigned reward flow authoritative over the older catalogue rules above. */
.account-module-rewards .account-rewards .account-reward-rule-panel,
.account-module-rewards .account-rewards .account-reward-catalog-panel,
.account-module-rewards .account-rewards .account-reward-history-panel,
.account-module-rewards .account-rewards .account-reward-rule-panel + .account-panel,
.account-module-rewards .account-rewards .account-reward-catalog-panel + .account-reward-history-panel {
    margin-top: 0;
}

.account-module-rewards .account-rewards .account-reward-rule-card {
    min-height: 250px;
    padding: 17px;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 11px;
}

.account-module-rewards .account-rewards .account-reward-rule-card.is-ready {
    opacity: 1;
    box-shadow: inset 0 0 24px rgba(37, 244, 238, 0.025);
}

@media (max-width: 620px) {
    .account-module-rewards .account-rewards .account-reward-rule-panel,
    .account-module-rewards .account-rewards .account-reward-rule-panel + .account-panel {
        margin-top: 0;
    }

    .account-module-rewards .account-rewards .account-reward-rule-card {
        min-height: 0;
    }
}

/* Leaders: keep every leaderboard value readable at the exact 320px layout. */
@media (max-width: 360px) {
    .account-module-leaders .account-leaderboard-entry {
        grid-template-columns: 48px 42px minmax(0, 1fr);
        gap: 8px;
        align-items: center;
    }

    .account-module-leaders .account-leaderboard-rank {
        min-width: 48px;
        min-height: 44px;
    }

    .account-module-leaders .account-leaderboard-avatar {
        width: 42px;
        height: 42px;
        border-radius: 13px;
    }

    .account-module-leaders .account-leaderboard-person {
        grid-column: 3;
        grid-row: 1;
    }

    .account-module-leaders .account-leaderboard-row-reward,
    .account-module-leaders .account-leaderboard-score {
        width: 100%;
        grid-column: 2 / -1;
        justify-items: start;
    }

    .account-module-leaders .account-leaderboard-row-reward {
        grid-row: 2;
    }

    .account-module-leaders .account-leaderboard-score {
        grid-row: 3;
    }

    .account-module-leaders .account-leaderboard-row-reward .account-coin {
        --account-coin-font-size: 10px;
        --account-coin-icon-size: 18px;
        --account-coin-unit-size: 7px;
        max-width: 100%;
        min-width: 0;
        min-height: 26px;
        box-sizing: border-box;
    }
}

/* Account leaders rebuilt from the shared account dashboard surface. */
.account-module-leaders .account-leaderboard {
    --leader-border: rgba(255, 255, 255, 0.1);
    --leader-hover-border: rgba(37, 244, 238, 0.46);
    --leader-hover-background: linear-gradient(145deg, rgba(37, 244, 238, 0.065), rgba(254, 44, 85, 0.035)), #111115;
    --leader-hover-shadow: -3px 3px 0 rgba(37, 244, 238, 0.34), 3px -3px 0 rgba(254, 44, 85, 0.32), 0 24px 58px rgba(0, 0, 0, 0.34);
    display: grid;
    min-width: 0;
    gap: 20px;
}

.account-module-leaders .account-leaderboard *,
.account-module-leaders .account-leaderboard *::before,
.account-module-leaders .account-leaderboard *::after {
    box-sizing: border-box;
}

.account-module-leaders .account-leaderboard > .account-panel,
.account-module-leaders .account-leaderboard .account-panel + .account-panel {
    margin: 0;
}

.account-module-leaders .account-leader-unit {
    min-width: 0;
    transition: border-color 190ms ease, background 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease) !important;
}

.account-module-leaders .account-leader-unit:is(:hover, :focus-visible, :focus-within):not(:has(.account-leader-unit:is(:hover, :focus-within))) {
    border-color: var(--leader-hover-border) !important;
    outline: 0;
    background: var(--leader-hover-background) !important;
    box-shadow: var(--leader-hover-shadow) !important;
    transform: translateY(-4px) !important;
}

.account-module-leaders .account-leaderboard .account-panel:hover > header > div > i,
.account-module-leaders .account-leaderboard .account-leader-unit:hover .account-card-icon {
    transform: none;
}

.account-module-leaders .account-leaders.account-leaderboard.is-leader-reveal-ready [data-leader-reveal].account-leader-unit {
    animation: none !important;
}

.account-module-leaders .account-leaders.account-leaderboard.is-leader-reveal-ready [data-leader-reveal].account-leader-unit:not(.is-leader-revealed) {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
}

.account-module-leaders .account-leaders.account-leaderboard.is-leader-reveal-ready [data-leader-reveal].account-leader-unit.is-leader-revealed {
    opacity: 1;
    transform: none;
    animation: account-dashboard-card-in 420ms var(--ease) var(--leader-delay, 0ms) backwards !important;
}

.account-module-leaders .account-leaderboard [data-leader-order="1"] { --leader-delay: 45ms; }
.account-module-leaders .account-leaderboard [data-leader-order="2"] { --leader-delay: 90ms; }
.account-module-leaders .account-leaderboard [data-leader-order="3"] { --leader-delay: 135ms; }
.account-module-leaders .account-leaderboard [data-leader-order="4"] { --leader-delay: 180ms; }
.account-module-leaders .account-leaderboard [data-leader-order="5"] { --leader-delay: 225ms; }
.account-module-leaders .account-leaderboard [data-leader-order="6"] { --leader-delay: 270ms; }
.account-module-leaders .account-leaderboard [data-leader-order="7"] { --leader-delay: 315ms; }
.account-module-leaders .account-leaderboard [data-leader-order="8"] { --leader-delay: 360ms; }

.account-module-leaders .account-leaderboard-summary,
.account-module-leaders .account-leaderboard-section {
    position: relative;
    display: grid;
    gap: 18px;
    overflow: visible;
    border-color: var(--leader-border);
    background:
        linear-gradient(150deg, rgba(255, 255, 255, 0.028), transparent 45%),
        var(--account-panel);
}

.account-module-leaders .account-leaderboard-summary > header,
.account-module-leaders .account-leaderboard-section > header {
    margin: 0;
}

.account-module-leaders .account-leaderboard-summary > header > div > i,
.account-module-leaders .account-leaderboard-section-heading > div > i,
.account-module-leaders .account-leaderboard-subpanel > header > div > i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 13px;
    background: rgba(37, 244, 238, 0.075);
    color: var(--cyan);
    box-shadow: inset -2px 0 0 rgba(254, 44, 85, 0.48);
}

.account-module-leaders .account-leaderboard-summary > header > div,
.account-module-leaders .account-leaderboard-section-heading > div,
.account-module-leaders .account-leaderboard-subpanel > header > div {
    min-width: 0;
}

.account-module-leaders .account-leaderboard-visibility {
    display: inline-grid;
    max-width: min(100%, 420px);
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 11px;
    border: 1px solid rgba(37, 244, 238, 0.2);
    border-radius: 13px;
    background: rgba(37, 244, 238, 0.055);
    color: #e9e9ed;
    font-size: 10px;
    font-weight: 760;
    line-height: 1.35;
}

.account-module-leaders .account-leaderboard-visibility.is-private {
    border-color: rgba(254, 44, 85, 0.2);
    background: rgba(254, 44, 85, 0.055);
}

.account-module-leaders .account-leaderboard-visibility > i:first-child { color: var(--cyan); }
.account-module-leaders .account-leaderboard-visibility.is-private > i:first-child { color: var(--pink); }
.account-module-leaders .account-leaderboard-visibility > i:last-child { color: #777780; }

.account-module-leaders .account-leaderboard-summary-copy {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
}

.account-module-leaders .account-leaderboard-summary-copy > .account-card-icon {
    width: 58px;
    height: 58px;
    border-radius: 17px;
    font-size: 21px;
}

.account-module-leaders .account-leaderboard-summary-copy > div {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.account-module-leaders .account-leaderboard-summary-copy small,
.account-module-leaders .account-leaderboard-section-heading small,
.account-module-leaders .account-leaderboard-policy > div > div > small {
    color: var(--cyan);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.account-module-leaders .account-leaderboard-summary-copy strong {
    color: #fff;
    font-size: clamp(23px, 3vw, 34px);
    font-weight: 930;
    letter-spacing: -0.035em;
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.account-module-leaders .account-leaderboard-summary-copy p,
.account-module-leaders .account-leaderboard-section-heading p,
.account-module-leaders .account-leaderboard-policy p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
}

.account-module-leaders .account-leaderboard-summary-copy > nav {
    display: flex;
    gap: 8px;
    align-items: center;
}

.account-module-leaders .account-leaderboard-summary-grid,
.account-module-leaders .account-leaderboard-policy > dl,
.account-module-leaders .account-leaderboard-current > dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin: 0;
}

.account-module-leaders .account-leaderboard-stat {
    display: grid;
    min-height: 86px;
    align-content: center;
    gap: 6px;
    padding: 13px 14px;
    border: 1px solid var(--leader-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.028);
}

.account-module-leaders .account-leaderboard-stat dt {
    display: flex;
    min-width: 0;
    gap: 7px;
    align-items: center;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.35;
}

.account-module-leaders .account-leaderboard-stat dt > i { color: var(--cyan); }
.account-module-leaders .account-leaderboard-stat dd {
    margin: 0;
    color: #fff;
    font-size: clamp(18px, 2vw, 25px);
    font-weight: 920;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.account-module-leaders .account-leaderboard-summary-grid > .account-leaderboard-stat:last-child dd {
    font-size: clamp(14px, 1.4vw, 18px);
    line-height: 1.2;
}

.account-module-leaders .account-leaderboard-section-heading > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.account-module-leaders .account-leaderboard-section-heading > div > span {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.account-module-leaders .account-leaderboard-section-heading h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(21px, 2.6vw, 28px);
    letter-spacing: -0.03em;
}

.account-module-leaders .account-leaderboard-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.account-module-leaders .account-leader-card {
    display: grid;
    min-height: 154px;
    grid-template-columns: 43px minmax(0, 1fr);
    gap: 10px 12px;
    align-content: start;
    padding: 18px;
    border-color: var(--leader-border);
    background: var(--account-panel);
}

.account-module-leaders .account-leader-card::after { content: none; }
.account-module-leaders .account-leader-card > .account-card-icon { grid-column: 1; grid-row: 1; }
.account-module-leaders .account-leader-card > div { display: contents; }
.account-module-leaders .account-leader-card > div > small { grid-column: 2; grid-row: 1; align-self: center; }
.account-module-leaders .account-leader-card > div > strong { grid-column: 1 / -1; grid-row: 2; }
.account-module-leaders .account-leader-card > div > p { grid-column: 1 / -1; grid-row: 3; margin: 0; padding: 0; }

.account-module-leaders .account-leaderboard-progress {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    padding: 16px;
    border: 1px solid var(--leader-border);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.028);
}

.account-module-leaders .account-leaderboard-level-tile {
    display: grid;
    width: 82px;
    height: 72px;
    place-items: center;
    align-content: center;
    gap: 2px;
    border: 1px solid rgba(37, 244, 238, 0.22);
    border-radius: 16px;
    background: rgba(37, 244, 238, 0.075);
    box-shadow: inset -3px 0 0 rgba(254, 44, 85, 0.42);
}

.account-module-leaders .account-leaderboard-level-tile small { color: var(--cyan); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.account-module-leaders .account-leaderboard-level-tile strong { color: #fff; font-size: 28px; line-height: 1; }
.account-module-leaders .account-leaderboard-progress > div { display: grid; min-width: 0; gap: 8px; }
.account-module-leaders .account-leaderboard-progress header,
.account-module-leaders .account-leaderboard-progress footer { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 10px; }
.account-module-leaders .account-leaderboard-progress header strong { color: var(--cyan); }
.account-module-leaders .account-leaderboard-progress progress {
    width: 100%;
    height: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.42);
    accent-color: var(--cyan);
}
.account-module-leaders .account-leaderboard-progress progress::-webkit-progress-bar { background: rgba(0, 0, 0, 0.42); }
.account-module-leaders .account-leaderboard-progress progress::-webkit-progress-value { border-radius: 999px; background: linear-gradient(90deg, var(--cyan), #fff 55%, var(--pink)); }
.account-module-leaders .account-leaderboard-progress progress::-moz-progress-bar { border-radius: 999px; background: linear-gradient(90deg, var(--cyan), #fff 55%, var(--pink)); }

.account-module-leaders :is(#leader-battle, #leader-guide) { scroll-margin-top: 100px; }

.account-module-leaders .account-leaderboard-switcher {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.account-module-leaders .account-leaderboard-policy-link {
    display: grid;
    min-height: 82px;
    grid-template-columns: 43px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--leader-border);
    border-radius: 17px;
    background: rgba(255, 255, 255, 0.028);
    color: #fff;
}

.account-module-leaders .account-leaderboard-policy-link.is-current {
    box-shadow: inset 3px 0 0 var(--cyan);
}

.account-module-leaders .account-leaderboard-policy-link > span:nth-child(2) {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.account-module-leaders .account-leaderboard-policy-link small { color: var(--cyan); font-size: 9px; font-weight: 850; text-transform: uppercase; }
.account-module-leaders .account-leaderboard-policy-link strong { color: #fff; font-size: 12px; overflow-wrap: anywhere; }
.account-module-leaders .account-leaderboard-policy-link em { color: var(--muted); font-size: 9px; font-style: normal; overflow-wrap: anywhere; }
.account-module-leaders .account-leaderboard-policy-link > i { color: #74747d; }
.account-module-leaders .account-leaderboard-policy-link.is-current > i { color: var(--cyan); }

.account-module-leaders .account-leaderboard-policy,
.account-module-leaders .account-leaderboard-subpanel {
    display: grid;
    gap: 15px;
    padding: 17px;
    border: 1px solid var(--leader-border);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.022);
}

.account-module-leaders .account-leaderboard-policy > div:first-child {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
}

.account-module-leaders .account-leaderboard-policy > div:first-child > .account-card-icon { width: 48px; height: 48px; }
.account-module-leaders .account-leaderboard-policy > div:first-child > div { display: grid; min-width: 0; gap: 3px; }
.account-module-leaders .account-leaderboard-policy h3,
.account-module-leaders .account-leaderboard-subpanel h3 { margin: 0; color: #fff; font-size: 16px; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.account-module-leaders .account-leaderboard-policy > dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.account-module-leaders .account-leaderboard-two-column,
.account-module-leaders .account-leaderboard-catalogues {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: start;
}

.account-module-leaders .account-leaderboard-subpanel > header {
    display: flex;
    min-height: 38px;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin: 0;
}

.account-module-leaders .account-leaderboard-subpanel > header > div {
    display: flex;
    gap: 10px;
    align-items: center;
}

.account-module-leaders .account-leaderboard-subpanel > header > div > i { width: 38px; height: 38px; border-radius: 12px; }
.account-module-leaders .account-leaderboard-subpanel > header > span { color: var(--muted); font-size: 10px; }
.account-module-leaders .account-leaderboard-subpanel > header > strong { color: var(--cyan); font-size: 11px; }

.account-module-leaders .account-leaderboard-formula {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.account-module-leaders .account-leaderboard-value {
    display: grid;
    min-height: 86px;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px;
    border: 1px solid var(--leader-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.026);
}

.account-module-leaders .account-leaderboard-value .account-card-icon { width: 40px; height: 40px; border-radius: 12px; }
.account-module-leaders .account-leaderboard-value > div { display: grid; min-width: 0; gap: 3px; }
.account-module-leaders .account-leaderboard-value small { color: var(--muted); font-size: 9px; line-height: 1.35; }
.account-module-leaders .account-leaderboard-value strong { color: var(--cyan); font-size: 19px; }

.account-module-leaders .account-leaderboard-prizes {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.account-module-leaders .account-leaderboard-prizes > li {
    display: grid;
    min-height: 70px;
    grid-template-columns: 40px 58px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--leader-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.026);
}

.account-module-leaders .account-leaderboard-prizes > li > span {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: rgba(37, 244, 238, 0.075);
    color: var(--cyan);
}

.account-module-leaders .account-leaderboard-prizes > li.is-rank-1 > span { color: #ffd768; }
.account-module-leaders .account-leaderboard-prizes > li > div { display: grid; min-width: 0; gap: 2px; }
.account-module-leaders .account-leaderboard-prizes small { color: var(--muted); font-size: 8px; }
.account-module-leaders .account-leaderboard-prizes strong { color: #fff; font-size: 18px; }
.account-module-leaders .account-leaderboard-prizes > li > div:last-child { justify-items: end; }

.account-module-leaders .account-leaderboard-notice {
    display: grid;
    min-height: 86px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 13px;
    border: 1px solid var(--leader-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.026);
}

.account-module-leaders .account-leaderboard-notice > i { color: var(--cyan); font-size: 24px; text-align: center; }
.account-module-leaders .account-leaderboard-notice p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }

.account-module-leaders .account-leaderboard-current {
    display: grid;
    grid-template-columns: 70px 48px minmax(150px, 0.7fr) minmax(320px, 1.3fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--leader-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.028);
}

.account-module-leaders .account-leaderboard-current > dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.account-module-leaders .account-leaderboard-current .account-leaderboard-stat { min-height: 64px; padding: 9px 10px; }

.account-module-leaders .account-leaderboard-rank {
    display: grid;
    min-width: 58px;
    min-height: 48px;
    place-items: center;
    align-content: center;
    gap: 1px;
    border: 1px solid rgba(37, 244, 238, 0.18);
    border-radius: 12px;
    background: rgba(37, 244, 238, 0.06);
}

.account-module-leaders .account-leaderboard-rank small { color: var(--muted); font-size: 8px; text-transform: uppercase; }
.account-module-leaders .account-leaderboard-rank strong { color: var(--cyan); font-size: 17px; line-height: 1; }
.account-module-leaders .account-leaderboard-rank.is-rank-1 { border-color: rgba(255, 215, 104, 0.3); background: rgba(255, 215, 104, 0.07); }
.account-module-leaders .account-leaderboard-rank.is-rank-1 strong { color: #ffd768; }
.account-module-leaders .account-leaderboard-rank.is-rank-2 strong { color: #e7e7ed; }
.account-module-leaders .account-leaderboard-rank.is-rank-3 strong { color: #e99b6b; }

.account-module-leaders .account-leaderboard-avatar {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 15px;
    background: #070709;
    box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.5), 2px -2px 0 rgba(254, 44, 85, 0.46);
}

.account-module-leaders .account-leaderboard-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-module-leaders .account-leaderboard-avatar.is-default img { width: 30px; height: 30px; object-fit: contain; }

.account-module-leaders .account-leaderboard-person {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, auto) 1fr;
    gap: 2px 7px;
    align-items: center;
}

.account-module-leaders .account-leaderboard-person > :is(a, strong) { min-width: 0; color: #fff; font-size: 13px; font-weight: 850; overflow-wrap: anywhere; }
.account-module-leaders .account-leaderboard-person > a:hover { color: var(--cyan); }
.account-module-leaders .account-leaderboard-person > span { width: fit-content; padding: 3px 6px; border-radius: 7px; background: rgba(37, 244, 238, 0.1); color: var(--cyan); font-size: 8px; font-weight: 850; }
.account-module-leaders .account-leaderboard-person > small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.35; }

.account-module-leaders .account-leaderboard-list,
.account-module-leaders .account-leaderboard-history,
.account-module-leaders .account-leaderboard-sources,
.account-module-leaders .account-leaderboard-levels,
.account-module-leaders .account-leaderboard-statuses {
    display: grid;
    gap: 9px;
}

.account-module-leaders .account-leaderboard-entry {
    display: grid;
    min-height: 74px;
    grid-template-columns: 62px 48px minmax(0, 1fr) auto auto;
    gap: 11px;
    align-items: center;
    padding: 11px 12px;
    border: 1px solid var(--leader-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}

.account-module-leaders .account-leaderboard-entry.is-viewer { box-shadow: inset 3px 0 0 var(--cyan); }
.account-module-leaders .account-leaderboard-entry.is-podium { box-shadow: inset 3px 0 0 rgba(255, 215, 104, 0.72); }
.account-module-leaders .account-leaderboard-entry.is-viewer.is-podium { box-shadow: inset 3px 0 0 var(--cyan), inset 6px 0 0 rgba(255, 215, 104, 0.72); }

.account-module-leaders .account-leaderboard-score,
.account-module-leaders .account-leaderboard-row-reward {
    display: grid;
    min-width: 0;
    gap: 2px;
    justify-items: end;
}

.account-module-leaders .account-leaderboard-score strong { color: #fff; font-size: 17px; }
.account-module-leaders .account-leaderboard-score small,
.account-module-leaders .account-leaderboard-row-reward > small { color: var(--muted); font-size: 8px; }
.account-module-leaders .account-leaderboard-row-reward .account-coin { font-size: 10px; }
.account-module-leaders .account-leaderboard-row-reward .account-coin img { width: 19px; height: 19px; }

.account-module-leaders .account-leaderboard-pagination { margin-top: 2px; }

.account-module-leaders .account-leaderboard-history-row {
    display: grid;
    min-height: 68px;
    grid-template-columns: 62px minmax(0, 1fr) auto;
    gap: 11px;
    align-items: center;
    padding: 10px 12px;
    border: 1px solid var(--leader-border);
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.025);
}

.account-module-leaders .account-leaderboard-history-row > div { display: grid; min-width: 0; gap: 3px; }
.account-module-leaders .account-leaderboard-history-row > div:last-child { justify-items: end; }
.account-module-leaders .account-leaderboard-history-row strong { color: #fff; font-size: 12px; overflow-wrap: anywhere; }
.account-module-leaders .account-leaderboard-history-row small { color: var(--muted); font-size: 9px; line-height: 1.4; }

.account-module-leaders .account-leaderboard-source {
    display: grid;
    min-height: 82px;
    grid-template-columns: 43px minmax(0, 1fr) minmax(220px, auto);
    gap: 12px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--leader-border);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.025);
}

.account-module-leaders .account-leaderboard-source > div { display: grid; min-width: 0; gap: 3px; }
.account-module-leaders .account-leaderboard-source > div > strong { color: #fff; font-size: 12px; overflow-wrap: anywhere; }
.account-module-leaders .account-leaderboard-source > div > small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.account-module-leaders .account-leaderboard-source > dl { display: grid; grid-template-columns: repeat(2, minmax(92px, 1fr)); gap: 8px; margin: 0; }
.account-module-leaders .account-leaderboard-source > dl > div { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--leader-border); border-radius: 12px; background: rgba(0, 0, 0, 0.18); }
.account-module-leaders .account-leaderboard-source dt,
.account-module-leaders .account-leaderboard-source dl small { color: var(--muted); font-size: 8px; }
.account-module-leaders .account-leaderboard-source dd { margin: 0; color: var(--cyan); font-size: 14px; font-weight: 900; }

.account-module-leaders .account-leaderboard-levels {
    max-height: 530px;
    padding-right: 4px;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(37, 244, 238, 0.34) transparent;
}

.account-module-leaders .account-leaderboard-level,
.account-module-leaders .account-leaderboard-status {
    display: grid;
    min-height: 58px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    padding: 9px 11px;
    border: 1px solid var(--leader-border);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.account-module-leaders .account-leaderboard-level.is-current,
.account-module-leaders .account-leaderboard-status.is-current { box-shadow: inset 3px 0 0 var(--cyan); }
.account-module-leaders .account-leaderboard-level > span,
.account-module-leaders .account-leaderboard-status > span { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 11px; background: rgba(37, 244, 238, 0.075); color: var(--cyan); font-weight: 900; }
.account-module-leaders .account-leaderboard-level > div,
.account-module-leaders .account-leaderboard-status > div { display: grid; min-width: 0; gap: 2px; }
.account-module-leaders .account-leaderboard-level strong,
.account-module-leaders .account-leaderboard-status strong { color: #fff; font-size: 11px; overflow-wrap: anywhere; }
.account-module-leaders .account-leaderboard-level small,
.account-module-leaders .account-leaderboard-status small { color: var(--muted); font-size: 8px; }
.account-module-leaders .account-leaderboard-level > b,
.account-module-leaders .account-leaderboard-status > b { color: var(--cyan); font-size: 12px; text-align: right; }

.account-module-leaders .account-leaderboard .account-empty {
    border-color: var(--leader-border);
    background: rgba(255, 255, 255, 0.022);
}

.account-module-leaders .account-leaderboard > .account-panel:has(.account-leader-unit:hover):hover {
    border-color: var(--leader-border) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.2) !important;
    transform: none !important;
}

.account-module-leaders :is(.account-leaderboard-policy, .account-leaderboard-subpanel, .account-leaderboard-current):has(.account-leader-unit:hover):hover {
    border-color: var(--leader-border) !important;
    box-shadow: none !important;
    transform: none !important;
}

@media (max-width: 1160px) {
    .account-module-leaders .account-leaderboard-summary-grid,
    .account-module-leaders .account-leaderboard-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-module-leaders .account-leaderboard-switcher { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .account-module-leaders .account-leaderboard-current { grid-template-columns: 70px 48px minmax(0, 1fr); }
    .account-module-leaders .account-leaderboard-current > dl { grid-column: 1 / -1; }
    .account-module-leaders .account-leaderboard-entry { grid-template-columns: 62px 48px minmax(0, 1fr) auto; }
    .account-module-leaders .account-leaderboard-row-reward { grid-column: 3; justify-items: start; }
    .account-module-leaders .account-leaderboard-score { grid-column: 4; grid-row: 1 / span 2; }
}

@media (max-width: 860px) {
    .account-module-leaders .account-leaderboard-summary-copy { grid-template-columns: 58px minmax(0, 1fr); }
    .account-module-leaders .account-leaderboard-summary-copy > nav { grid-column: 1 / -1; }
    .account-module-leaders .account-leaderboard-two-column,
    .account-module-leaders .account-leaderboard-catalogues { grid-template-columns: 1fr; }
    .account-module-leaders .account-leaderboard-source { grid-template-columns: 43px minmax(0, 1fr); }
    .account-module-leaders .account-leaderboard-source > dl { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .account-module-leaders .account-leaderboard { gap: 14px; }
    .account-module-leaders .account-leaderboard-summary,
    .account-module-leaders .account-leaderboard-section { gap: 14px; padding: 16px; border-radius: 19px; }
    .account-module-leaders .account-leaderboard-summary > header { align-items: flex-start; flex-direction: column; }
    .account-module-leaders .account-leaderboard-visibility { width: 100%; max-width: none; }
    .account-module-leaders .account-leaderboard-summary-copy { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; }
    .account-module-leaders .account-leaderboard-summary-copy > .account-card-icon { width: 48px; height: 48px; border-radius: 15px; font-size: 18px; }
    .account-module-leaders .account-leaderboard-summary-copy > nav { display: grid; grid-template-columns: 1fr; width: 100%; }
    .account-module-leaders .account-leaderboard-summary-copy > nav .account-button { width: 100%; }
    .account-module-leaders .account-leaderboard-summary-grid,
    .account-module-leaders .account-leaderboard-metrics,
    .account-module-leaders .account-leaderboard-switcher,
    .account-module-leaders .account-leaderboard-policy > dl { grid-template-columns: 1fr; }
    .account-module-leaders .account-leader-card { min-height: 130px; }
    .account-module-leaders .account-leaderboard-progress { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; padding: 13px; }
    .account-module-leaders .account-leaderboard-level-tile { width: 68px; height: 64px; border-radius: 14px; }
    .account-module-leaders .account-leaderboard-level-tile strong { font-size: 24px; }
    .account-module-leaders .account-leaderboard-policy,
    .account-module-leaders .account-leaderboard-subpanel { padding: 13px; border-radius: 16px; }
    .account-module-leaders .account-leaderboard-formula { grid-template-columns: 1fr; }
    .account-module-leaders .account-leaderboard-current { grid-template-columns: 62px 48px minmax(0, 1fr); padding: 11px; }
    .account-module-leaders .account-leaderboard-current > dl { grid-template-columns: 1fr; }
    .account-module-leaders .account-leaderboard-entry { grid-template-columns: 58px 44px minmax(0, 1fr); padding: 10px; gap: 9px; }
    .account-module-leaders .account-leaderboard-avatar { width: 44px; height: 44px; border-radius: 14px; }
    .account-module-leaders .account-leaderboard-score { grid-column: 3; grid-row: auto; justify-items: start; }
    .account-module-leaders .account-leaderboard-row-reward { grid-column: 3; }
    .account-module-leaders .account-leaderboard-history-row { grid-template-columns: 58px minmax(0, 1fr); }
    .account-module-leaders .account-leaderboard-history-row > div:last-child { grid-column: 2; justify-items: start; }
    .account-module-leaders .account-leaderboard-prizes > li { grid-template-columns: 40px 50px minmax(0, 1fr); }
    .account-module-leaders .account-leaderboard-source > dl { grid-template-columns: 1fr; }
}

@media (max-width: 360px) {
    .account-module-leaders .account-leaderboard-summary,
    .account-module-leaders .account-leaderboard-section { padding: 13px; }
    .account-module-leaders .account-leaderboard-summary-copy { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; }
    .account-module-leaders .account-leaderboard-summary-copy > .account-card-icon,
    .account-module-leaders .account-leaderboard-section-heading > div > i { width: 42px; height: 42px; }
    .account-module-leaders .account-leaderboard-section-heading > div { grid-template-columns: 42px minmax(0, 1fr); gap: 10px; align-items: start; }
    .account-module-leaders .account-leaderboard-policy-link { grid-template-columns: 40px minmax(0, 1fr); padding: 10px; }
    .account-module-leaders .account-leaderboard-policy-link > i { display: none; }
    .account-module-leaders .account-leaderboard-progress { grid-template-columns: 1fr; }
    .account-module-leaders .account-leaderboard-level-tile { width: 100%; height: 54px; grid-template-columns: auto auto; gap: 8px; }
    .account-module-leaders .account-leaderboard-progress header,
    .account-module-leaders .account-leaderboard-progress footer { align-items: flex-start; flex-direction: column; gap: 3px; }
    .account-module-leaders .account-leaderboard-current { grid-template-columns: 58px 44px minmax(0, 1fr); }
    .account-module-leaders .account-leaderboard-prizes > li { grid-template-columns: 38px 42px minmax(0, 1fr); padding: 9px; gap: 7px; }
    .account-module-leaders .account-leaderboard-prizes > li > span { width: 38px; height: 38px; }
}

@media (hover: none) {
    .account-module-leaders .account-leader-unit:is(:hover, :focus-visible, :focus-within):not(:has(.account-leader-unit:is(:hover, :focus-within))) {
        transform: none !important;
    }
}

/* Final leaders art direction: one account language, richer depth, no decorative orbits. */
.account-module-leaders .account-leaderboard-summary,
.account-module-leaders .account-leaderboard-section {
    border-color: rgba(37, 244, 238, 0.15);
    background:
        linear-gradient(112deg, rgba(37, 244, 238, 0.085), transparent 28%),
        linear-gradient(292deg, rgba(254, 44, 85, 0.065), transparent 30%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.035), transparent 48%),
        #101013;
    box-shadow:
        -3px 3px 0 rgba(37, 244, 238, 0.15),
        3px -3px 0 rgba(254, 44, 85, 0.13),
        0 24px 64px rgba(0, 0, 0, 0.3);
}

.account-module-leaders .account-leaderboard-summary::before,
.account-module-leaders .account-leaderboard-section::before {
    position: absolute;
    top: -1px;
    right: 24px;
    left: 24px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, var(--cyan), #fff 52%, var(--pink), transparent);
    box-shadow: 0 4px 22px rgba(37, 244, 238, 0.16);
    content: "";
    pointer-events: none;
}

.account-module-leaders .account-leaderboard-summary {
    background:
        linear-gradient(112deg, rgba(37, 244, 238, 0.12), transparent 33%),
        linear-gradient(292deg, rgba(254, 44, 85, 0.09), transparent 34%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.04), transparent 48%),
        #101013;
}

.account-module-leaders #leader-battle {
    background:
        linear-gradient(118deg, rgba(254, 44, 85, 0.075), transparent 28%),
        linear-gradient(298deg, rgba(37, 244, 238, 0.075), transparent 32%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.034), transparent 48%),
        #101013;
}

.account-module-leaders #leader-guide {
    background:
        linear-gradient(118deg, rgba(37, 244, 238, 0.075), transparent 29%),
        linear-gradient(298deg, rgba(254, 44, 85, 0.075), transparent 31%),
        linear-gradient(150deg, rgba(255, 255, 255, 0.034), transparent 48%),
        #101013;
}

.account-module-leaders .account-leaderboard-summary > header > div > i,
.account-module-leaders .account-leaderboard-section-heading > div > i,
.account-module-leaders .account-leaderboard-subpanel > header > div > i,
.account-module-leaders .account-leaderboard .account-card-icon {
    border-color: rgba(37, 244, 238, 0.28);
    background: linear-gradient(145deg, rgba(37, 244, 238, 0.18), rgba(254, 44, 85, 0.07));
    box-shadow:
        -2px 2px 0 rgba(37, 244, 238, 0.18),
        2px -2px 0 rgba(254, 44, 85, 0.15),
        inset 0 0 18px rgba(37, 244, 238, 0.05);
}

.account-module-leaders .account-leaderboard-section-heading small,
.account-module-leaders .account-leaderboard-summary-copy small,
.account-module-leaders .account-leaderboard-policy > div > div > small {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    padding: 4px 7px;
    border: 1px solid rgba(37, 244, 238, 0.18);
    border-radius: 8px;
    background: rgba(37, 244, 238, 0.06);
}

.account-module-leaders .account-leaderboard :is(
    .account-leaderboard-stat,
    .account-leader-card,
    .account-leaderboard-progress,
    .account-leaderboard-policy-link,
    .account-leaderboard-policy,
    .account-leaderboard-subpanel,
    .account-leaderboard-value,
    .account-leaderboard-prizes > li,
    .account-leaderboard-notice,
    .account-leaderboard-current,
    .account-leaderboard-entry,
    .account-leaderboard-history-row,
    .account-leaderboard-source,
    .account-leaderboard-level,
    .account-leaderboard-status,
    .account-empty
) {
    position: relative;
    overflow: hidden;
    border-color: rgba(255, 255, 255, 0.105);
    background:
        linear-gradient(142deg, rgba(37, 244, 238, 0.04), transparent 42%),
        linear-gradient(318deg, rgba(254, 44, 85, 0.027), transparent 40%),
        rgba(18, 18, 22, 0.94);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 30px rgba(0, 0, 0, 0.13);
}

.account-module-leaders .account-leaderboard :is(
    .account-leaderboard-stat,
    .account-leader-card,
    .account-leaderboard-progress,
    .account-leaderboard-policy-link,
    .account-leaderboard-policy,
    .account-leaderboard-subpanel,
    .account-leaderboard-value,
    .account-leaderboard-prizes > li,
    .account-leaderboard-notice,
    .account-leaderboard-current,
    .account-leaderboard-entry,
    .account-leaderboard-history-row,
    .account-leaderboard-source,
    .account-leaderboard-level,
    .account-leaderboard-status,
    .account-empty
)::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 14px;
    left: 14px;
    height: 1px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, rgba(37, 244, 238, 0.64), rgba(254, 44, 85, 0.54), transparent);
    opacity: 0.48;
    content: "";
    pointer-events: none;
}

.account-module-leaders .account-leaderboard-metrics .account-leader-card:nth-child(2) .account-card-icon,
.account-module-leaders .account-leaderboard-formula .account-leaderboard-value:nth-child(2) .account-card-icon,
.account-module-leaders .account-leaderboard-formula .account-leaderboard-value:nth-child(4) .account-card-icon {
    border-color: rgba(254, 44, 85, 0.28);
    background: linear-gradient(145deg, rgba(254, 44, 85, 0.17), rgba(37, 244, 238, 0.065));
    color: #ff7590;
}

.account-module-leaders .account-leaderboard-metrics .account-leader-card:nth-child(3) .account-card-icon {
    border-color: rgba(255, 255, 255, 0.22);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.13), rgba(254, 44, 85, 0.055));
    color: #fff;
}

.account-module-leaders .account-leaderboard-stat dd,
.account-module-leaders .account-leader-card strong,
.account-module-leaders .account-leaderboard-score strong {
    text-shadow: 0 8px 24px rgba(37, 244, 238, 0.08);
}

.account-module-leaders .account-leaderboard-policy-link.is-current,
.account-module-leaders .account-leaderboard-entry.is-viewer,
.account-module-leaders .account-leaderboard-level.is-current,
.account-module-leaders .account-leaderboard-status.is-current {
    border-color: rgba(37, 244, 238, 0.26);
    background:
        linear-gradient(110deg, rgba(37, 244, 238, 0.095), transparent 48%),
        linear-gradient(310deg, rgba(254, 44, 85, 0.05), transparent 42%),
        rgba(18, 18, 22, 0.96);
    box-shadow: inset 3px 0 0 var(--cyan), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 13px 32px rgba(0, 0, 0, 0.16);
}

.account-module-leaders .account-leaderboard-prizes > li.is-rank-1 {
    border-color: rgba(255, 215, 104, 0.28);
    background: linear-gradient(110deg, rgba(255, 215, 104, 0.09), transparent 48%), rgba(18, 18, 22, 0.96);
}

.account-module-leaders .account-leaderboard-prizes > li.is-rank-2 {
    background: linear-gradient(110deg, rgba(230, 232, 242, 0.065), transparent 48%), rgba(18, 18, 22, 0.96);
}

.account-module-leaders .account-leaderboard-prizes > li.is-rank-3 {
    background: linear-gradient(110deg, rgba(233, 155, 107, 0.075), transparent 48%), rgba(18, 18, 22, 0.96);
}

.account-module-leaders .account-leaderboard-source > dl > div:first-child {
    border-color: rgba(37, 244, 238, 0.16);
    background: rgba(37, 244, 238, 0.045);
}

.account-module-leaders .account-leaderboard-source > dl > div:last-child {
    border-color: rgba(254, 44, 85, 0.16);
    background: rgba(254, 44, 85, 0.04);
}

.account-module-leaders .account-leaderboard-source > dl > div:last-child dd { color: #ff7590; }

.account-module-leaders .account-leaderboard .account-empty {
    min-height: 104px;
    justify-content: flex-start;
    padding: 17px 18px;
    text-align: left;
}

.account-module-leaders .account-leaderboard .account-empty > span {
    width: 50px;
    height: 50px;
    border: 1px solid rgba(37, 244, 238, 0.22);
    border-radius: 15px;
    background: linear-gradient(145deg, rgba(37, 244, 238, 0.14), rgba(254, 44, 85, 0.065));
    color: var(--cyan);
    box-shadow: -2px 2px 0 rgba(37, 244, 238, 0.18), 2px -2px 0 rgba(254, 44, 85, 0.14);
}

.account-module-leaders .account-leaderboard .account-empty > div {
    max-width: 720px;
}

.account-module-leaders .account-leaderboard .account-empty strong {
    font-size: 15px;
}

.account-module-leaders .account-leaderboard .account-empty p {
    max-width: 680px;
    margin-top: 5px;
    font-size: 11px;
}

.account-module-leaders .account-leader-unit:is(:hover, :focus-visible, :focus-within):not(:has(.account-leader-unit:is(:hover, :focus-within))) {
    border-color: var(--leader-hover-border) !important;
    background: var(--leader-hover-background) !important;
    box-shadow: var(--leader-hover-shadow) !important;
    transform: translateY(-4px) !important;
}

.account-module-leaders .account-leaderboard > .account-panel:has(.account-leader-unit:hover):hover {
    border-color: rgba(37, 244, 238, 0.15) !important;
    box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.15), 3px -3px 0 rgba(254, 44, 85, 0.13), 0 24px 64px rgba(0, 0, 0, 0.3) !important;
}

@media (max-width: 620px) {
    .account-module-leaders .account-leaderboard-summary::before,
    .account-module-leaders .account-leaderboard-section::before { right: 16px; left: 16px; }
    .account-module-leaders .account-leaderboard .account-empty { min-height: 92px; padding: 14px; align-items: flex-start; }
    .account-module-leaders .account-leaderboard .account-empty > span { width: 44px; height: 44px; border-radius: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    .account-module-leaders .account-leaderboard [data-leader-reveal],
    .account-module-leaders .account-leader-unit {
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}

/* Final account leaders/rewards components. */
.account-module-hero-mark {
    position: relative;
    isolation: isolate;
    display: grid;
    width: 70px;
    height: 70px;
    flex: 0 0 auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(37, 244, 238, 0.3);
    border-radius: 21px;
    color: #fff;
    background:
        radial-gradient(circle at 38% 30%, rgba(37, 244, 238, 0.26), transparent 43%),
        radial-gradient(circle at 72% 76%, rgba(254, 44, 85, 0.22), transparent 47%),
        #0b0b0e;
    box-shadow: -3px 3px 0 rgba(37, 244, 238, 0.28), 3px -3px 0 rgba(254, 44, 85, 0.25), 0 15px 30px rgba(0, 0, 0, 0.34);
}

.account-module-hero-mark::before {
    position: absolute;
    z-index: -1;
    inset: 9px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    background: rgba(5, 5, 7, 0.46);
    content: "";
}

.account-module-hero-mark::after {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pink);
    box-shadow: 0 0 12px rgba(254, 44, 85, 0.72);
    content: "";
}

.account-module-hero-mark > i {
    position: relative;
    z-index: 1;
    font-size: 25px;
    filter: drop-shadow(-2px 3px 0 rgba(37, 244, 238, 0.24)) drop-shadow(2px -2px 0 rgba(254, 44, 85, 0.2));
}

.account-leader-switcher {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
}

.account-leader-switcher > a {
    min-width: 0;
    min-height: 62px;
    padding: 10px 11px;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 15px;
    color: #ececf1;
    background: rgba(255, 255, 255, 0.025);
    transition: border-color 170ms ease, background 170ms ease, box-shadow 170ms ease, transform 170ms var(--ease);
}

.account-leader-switcher > a:hover,
.account-leader-switcher > a:focus-visible {
    border-color: rgba(37, 244, 238, 0.3);
    outline: none;
    background: rgba(37, 244, 238, 0.045);
    transform: translateY(-2px);
}

.account-leader-switcher > a.is-active {
    border-color: rgba(37, 244, 238, 0.4);
    background: linear-gradient(135deg, rgba(37, 244, 238, 0.11), rgba(254, 44, 85, 0.055));
    box-shadow: inset 3px 0 0 var(--cyan), 0 10px 24px rgba(0, 0, 0, 0.2);
}

.account-leader-switcher > a > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: var(--cyan);
    background: rgba(37, 244, 238, 0.075);
}

.account-leader-switcher > a > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.account-leader-switcher small {
    color: var(--muted);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.account-leader-switcher strong {
    overflow: hidden;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-leader-switcher > a > i {
    color: #6f7079;
    font-size: 10px;
    transition: color 170ms ease, transform 170ms var(--ease);
}

.account-leader-switcher > a:hover > i,
.account-leader-switcher > a:focus-visible > i,
.account-leader-switcher > a.is-active > i {
    color: var(--cyan);
    transform: translateX(2px);
}

.account-module-rewards .account-rewards .account-reward-rule-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

.account-module-rewards .account-rewards .account-reward-rule-card {
    min-height: 190px;
    padding: 12px;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 7px;
    border-radius: 14px;
}

.account-module-rewards .account-rewards .account-reward-rule-card > header {
    grid-template-columns: 32px minmax(0, 1fr) auto;
    gap: 8px;
}

.account-module-rewards .account-rewards .account-reward-rule-card > header > span:first-child {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    font-size: 11px;
}

.account-module-rewards .account-rewards .account-reward-rule-card > header strong {
    font-size: 11px;
    line-height: 1.25;
}

.account-module-rewards .account-rewards .account-reward-rule-card > header small,
.account-module-rewards .account-rewards .account-reward-card-details small,
.account-module-rewards .account-rewards .account-reward-progress > span {
    font-size: 8.5px;
}

.account-module-rewards .account-rewards .account-reward-rule-card > header > .account-coin {
    --account-coin-font-size: 10px;
    --account-coin-icon-size: 17px;
    --account-coin-unit-size: 7px;
    min-height: 25px;
    gap: 2px;
    padding: 2px 5px 2px 3px;
}

.account-module-rewards .account-rewards .account-reward-rule-card > p {
    font-size: 9.5px;
    line-height: 1.4;
}

.account-module-rewards .account-rewards .account-reward-progress {
    gap: 5px;
    padding-top: 0;
}

.account-module-rewards .account-rewards .account-reward-progress > i {
    height: 5px;
}

.account-module-rewards .account-rewards .account-reward-card-claim {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 9px;
}

.account-reward-claim-form .account-captcha.is-invalid {
    border-color: rgba(254, 44, 85, 0.64);
    box-shadow: 0 0 0 3px rgba(254, 44, 85, 0.1);
}

@media (max-width: 1050px) {
    .account-leader-switcher,
    .account-module-rewards .account-rewards .account-reward-rule-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .account-module-hero-mark,
    .account-leader-hero .account-module-hero-mark,
    .account-reward-hero-copy > .account-module-hero-mark {
        width: 54px;
        height: 54px;
        border-radius: 17px;
    }

    .account-module-hero-mark::before {
        inset: 7px;
        border-radius: 12px;
    }

    .account-module-hero-mark > i {
        font-size: 20px;
    }

    .account-leader-switcher {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .account-leader-switcher > a {
        min-height: 58px;
        padding: 8px;
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 7px;
        border-radius: 13px;
    }

    .account-leader-switcher > a > span {
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .account-leader-switcher > a > i {
        display: none;
    }

    .account-module-rewards .account-rewards .account-reward-rule-grid {
        grid-template-columns: 1fr;
    }

    .account-module-rewards .account-rewards .account-reward-rule-card {
        min-height: 0;
    }
}

/* Rewards keep /account geometry and motion, while earned value reads as a trophy instead of a disabled card. */
.account-module-rewards .account-rewards {
    --reward-gold: #ffd66f;
    --reward-gold-rgb: 255, 214, 111;
    --reward-hover-border: rgba(37, 244, 238, 0.48);
    --reward-hover-shadow: -3px 3px 0 rgba(37, 244, 238, 0.46), 3px -3px 0 rgba(254, 44, 85, 0.46), 0 28px 72px rgba(0, 0, 0, 0.38);
}

.account-module-rewards .account-rewards > .account-panel,
.account-module-rewards .account-rewards > .account-dashboard-grid {
    margin-top: 0;
}

.account-module-rewards .account-reward-summary-card {
    --reward-summary-accent: 37, 244, 238;
    --reward-summary-secondary: 254, 44, 85;
    --dashboard-card-accent: var(--reward-summary-accent);
    --dashboard-card-secondary: var(--reward-summary-secondary);
    border-color: rgba(var(--reward-summary-accent), 0.19);
    background:
        linear-gradient(118deg, rgba(var(--reward-summary-accent), 0.13), transparent 45%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.028), transparent 48%),
        var(--account-panel);
}

.account-module-rewards .account-reward-summary-card.is-coin-total {
    --reward-summary-accent: 254, 44, 85;
    --reward-summary-secondary: 37, 244, 238;
}

.account-module-rewards .account-reward-summary-card.is-task-total {
    --reward-summary-accent: 255, 255, 255;
    --reward-summary-secondary: 37, 244, 238;
}

.account-module-rewards .account-reward-summary-card.is-collected-total {
    --reward-summary-accent: var(--reward-gold-rgb);
    --reward-summary-secondary: 37, 244, 238;
}

.account-module-rewards .account-reward-summary-card > .account-card-icon {
    border: 1px solid rgba(var(--reward-summary-accent), 0.25);
    background: rgba(var(--reward-summary-accent), 0.1);
    color: rgb(var(--reward-summary-accent));
}

.account-module-rewards .account-reward-summary-card > div > small {
    color: rgb(var(--reward-summary-accent));
}

.account-module-rewards .account-reward-summary-card.is-collected-total > strong,
.account-module-rewards .account-reward-summary-card.is-collected-total > div > strong {
    color: var(--reward-gold);
}

.account-module-rewards .account-reward-section {
    --dashboard-panel-accent: 37, 244, 238;
    --dashboard-panel-secondary: 254, 44, 85;
    border-color: rgba(37, 244, 238, 0.16);
}

.account-module-rewards .account-reward-section > header {
    align-items: flex-start;
    margin-bottom: 20px;
}

.account-module-rewards .account-reward-section > header > div > div {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.account-module-rewards .account-reward-section > header > div > div > p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.account-module-rewards .account-reward-section-count {
    min-width: 54px;
    flex: 0 0 auto;
    justify-content: center;
    border-color: rgba(37, 244, 238, 0.24);
    background: linear-gradient(135deg, rgba(37, 244, 238, 0.1), rgba(254, 44, 85, 0.055));
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.account-module-rewards .account-reward-unit {
    transition: border-color 190ms ease, background 190ms ease, box-shadow 190ms ease, transform 190ms var(--ease) !important;
}

.account-module-rewards .account-reward-unit:is(:hover, :focus-visible, :focus-within):not(:has(.account-reward-unit:is(:hover, :focus-within))) {
    border-color: var(--reward-hover-border) !important;
    box-shadow: var(--reward-hover-shadow) !important;
    transform: translateY(-5px) !important;
}

.account-module-rewards .account-rewards .account-reward-rule-card {
    --reward-state-rgb: 188, 191, 202;
    --reward-state-secondary-rgb: 37, 244, 238;
    position: relative;
    min-height: 218px;
    padding: 16px;
    grid-template-rows: auto auto auto 1fr auto;
    gap: 10px;
    overflow: hidden;
    border-color: rgba(var(--reward-state-rgb), 0.18);
    border-radius: 17px;
    background:
        linear-gradient(125deg, rgba(var(--reward-state-rgb), 0.08), transparent 47%),
        linear-gradient(155deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0.14)),
        var(--account-panel);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.2);
    isolation: isolate;
}

.account-module-rewards .account-rewards .account-reward-rule-card::before {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 18px;
    left: 18px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, transparent, rgba(var(--reward-state-rgb), 0.98), rgba(var(--reward-state-secondary-rgb), 0.82), transparent);
    opacity: 0.72;
    content: "";
    transform: scaleX(0.86);
    transition: opacity 190ms ease, transform 190ms var(--ease);
}

.account-module-rewards .account-rewards .account-reward-rule-card:is(:hover, :focus-within)::before {
    opacity: 1;
    transform: scaleX(1.04);
}

.account-module-rewards .account-rewards .account-reward-rule-card > * {
    position: relative;
    z-index: 1;
}

.account-module-rewards .account-rewards .account-reward-rule-card.is-ready {
    --reward-state-rgb: 37, 244, 238;
    --reward-state-secondary-rgb: 254, 44, 85;
    border-color: rgba(37, 244, 238, 0.34);
    background:
        linear-gradient(125deg, rgba(37, 244, 238, 0.13), rgba(254, 44, 85, 0.045) 56%, transparent),
        linear-gradient(155deg, rgba(255, 255, 255, 0.035), rgba(0, 0, 0, 0.1)),
        var(--account-panel);
    box-shadow: inset 0 0 0 1px rgba(37, 244, 238, 0.035), 0 18px 46px rgba(0, 0, 0, 0.22);
}

.account-module-rewards .account-rewards .account-reward-rule-card.is-claimed {
    --reward-state-rgb: var(--reward-gold-rgb);
    --reward-state-secondary-rgb: 37, 244, 238;
    opacity: 1;
    filter: none;
    border-color: rgba(var(--reward-gold-rgb), 0.4);
    background:
        linear-gradient(122deg, rgba(var(--reward-gold-rgb), 0.17), rgba(37, 244, 238, 0.065) 54%, rgba(254, 44, 85, 0.035)),
        linear-gradient(155deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.08)),
        var(--account-panel);
    box-shadow: inset 0 0 0 1px rgba(var(--reward-gold-rgb), 0.06), 0 18px 48px rgba(0, 0, 0, 0.24);
}

.account-module-rewards .account-rewards .account-reward-rule-card.is-upcoming {
    --reward-state-rgb: 254, 44, 85;
    --reward-state-secondary-rgb: 255, 255, 255;
}

.account-module-rewards .account-rewards .account-reward-rule-card.is-in-progress {
    --reward-state-rgb: 177, 181, 194;
    --reward-state-secondary-rgb: 37, 244, 238;
}

.account-module-rewards .account-rewards .account-reward-rule-card > header {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
}

.account-module-rewards .account-rewards .account-reward-rule-card > header > span:first-child {
    width: 40px;
    height: 40px;
    border-color: rgba(var(--reward-state-rgb), 0.32);
    border-radius: 12px;
    background: rgba(var(--reward-state-rgb), 0.11);
    box-shadow: inset -2px 0 0 rgba(var(--reward-state-secondary-rgb), 0.38);
    color: rgb(var(--reward-state-rgb));
    font-size: 13px;
}

.account-module-rewards .account-rewards .account-reward-rule-card > header strong {
    color: #fff;
    font-size: 13px;
    line-height: 1.3;
}

.account-module-rewards .account-reward-state {
    display: inline-flex;
    width: max-content;
    max-width: 100%;
    min-height: 22px;
    align-items: center;
    gap: 5px;
    padding: 3px 7px;
    border: 1px solid rgba(var(--reward-state-rgb), 0.25);
    border-radius: 999px;
    background: rgba(var(--reward-state-rgb), 0.085);
    color: rgb(var(--reward-state-rgb)) !important;
    font-size: 8px !important;
    font-weight: 850;
    letter-spacing: 0.035em;
    line-height: 1.25;
    text-transform: uppercase;
}

.account-module-rewards .account-reward-state > i {
    flex: 0 0 auto;
    font-size: 8px;
}

.account-module-rewards .account-reward-state > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.account-module-rewards .account-rewards .account-reward-rule-card > header > .account-coin {
    --account-coin-font-size: 11px;
    --account-coin-icon-size: 19px;
    --account-coin-unit-size: 7px;
    min-height: 29px;
    border-color: rgba(var(--reward-state-rgb), 0.24);
    background: linear-gradient(135deg, rgba(var(--reward-state-rgb), 0.13), rgba(255, 255, 255, 0.03));
    box-shadow: inset 0 0 16px rgba(var(--reward-state-rgb), 0.045);
}

.account-module-rewards .account-rewards .account-reward-rule-card > p {
    color: #bcbec8;
    font-size: 11px;
    line-height: 1.5;
}

.account-module-rewards .account-rewards .account-reward-card-details small {
    font-size: 9px;
}

.account-module-rewards .account-rewards .account-reward-card-details small > i {
    color: rgb(var(--reward-state-rgb));
}

.account-module-rewards .account-rewards .account-reward-progress {
    gap: 7px;
    padding-top: 1px;
}

.account-module-rewards .account-rewards .account-reward-progress > span {
    font-size: 9px;
}

.account-module-rewards .account-rewards .account-reward-progress > span b {
    color: #f2f3f7;
}

.account-module-rewards .account-rewards .account-reward-progress > span em {
    color: rgb(var(--reward-state-rgb));
    font-weight: 800;
}

.account-module-rewards .account-rewards .account-reward-progress > i {
    height: 6px;
    border: 1px solid rgba(var(--reward-state-rgb), 0.11);
    background: rgba(0, 0, 0, 0.34);
}

.account-module-rewards .account-rewards .account-reward-progress > i > b {
    background: linear-gradient(90deg, rgb(var(--reward-state-rgb)), rgb(var(--reward-state-secondary-rgb)));
    box-shadow: 0 0 12px rgba(var(--reward-state-rgb), 0.2);
}

.account-module-rewards .account-reward-achieved-mark {
    position: absolute !important;
    z-index: 0 !important;
    right: 12px;
    bottom: -10px;
    color: rgba(var(--reward-gold-rgb), 0.075);
    font-size: 78px;
    pointer-events: none;
    transform: rotate(-10deg);
}

.account-module-rewards .account-reward-history {
    gap: 10px;
}

.account-module-rewards .account-reward-history > article {
    --reward-history-rgb: var(--reward-gold-rgb);
    --reward-history-secondary-rgb: 37, 244, 238;
    position: relative;
    min-height: 66px;
    gap: 12px;
    padding: 12px 14px;
    overflow: hidden;
    border: 1px solid rgba(var(--reward-history-rgb), 0.2);
    border-radius: 14px;
    background:
        linear-gradient(110deg, rgba(var(--reward-history-rgb), 0.095), rgba(var(--reward-history-secondary-rgb), 0.035) 58%, transparent),
        rgba(0, 0, 0, 0.18);
}

.account-module-rewards .account-reward-history > article.is-redemption {
    --reward-history-rgb: 254, 44, 85;
    --reward-history-secondary-rgb: 37, 244, 238;
}

.account-module-rewards .account-reward-history > article:is(:hover, :focus-within) {
    padding-inline: 14px;
    background:
        linear-gradient(110deg, rgba(var(--reward-history-rgb), 0.13), rgba(var(--reward-history-secondary-rgb), 0.055) 58%, transparent),
        rgba(0, 0, 0, 0.2);
}

.account-module-rewards .account-reward-history .account-result-icon {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(var(--reward-history-rgb), 0.3);
    border-radius: 12px;
    background: rgba(var(--reward-history-rgb), 0.11);
    color: rgb(var(--reward-history-rgb)) !important;
    box-shadow: inset -2px 0 0 rgba(var(--reward-history-secondary-rgb), 0.34);
}

.account-module-rewards .account-reward-history > article > div > strong {
    color: #fff;
    font-size: 13px;
}

.account-module-rewards .account-reward-history > article > div > small {
    color: #989aa6;
    line-height: 1.4;
}

.account-module-rewards .account-reward-history > article > b {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    padding: 4px 8px;
    border: 1px solid rgba(var(--reward-history-rgb), 0.26);
    border-radius: 999px;
    background: rgba(var(--reward-history-rgb), 0.09);
    color: rgb(var(--reward-history-rgb)) !important;
}

.account-module-rewards .account-reward-history > article > b .account-coin {
    --account-coin-font-size: 11px;
    --account-coin-icon-size: 19px;
    --account-coin-unit-size: 7px;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.account-module-rewards .account-rewards .account-empty {
    min-height: 104px;
    justify-content: flex-start;
    padding: 17px 18px;
    text-align: left;
}

.account-module-rewards .account-rewards .account-empty > div {
    max-width: 720px;
}

.account-module-rewards .account-rewards.is-reward-reveal-ready [data-reward-reveal].account-reward-unit:not(.is-reward-revealed),
.account-module-rewards .account-rewards.is-reward-reveal-ready [data-reward-reveal].account-reward-section:not(.is-reward-revealed) {
    opacity: 0;
    animation: none !important;
    transform: translateY(14px) scale(0.985);
}

.account-module-rewards .account-rewards.is-reward-reveal-ready [data-reward-reveal].account-reward-unit.is-reward-revealed {
    opacity: 1;
    animation: account-dashboard-card-in 420ms var(--ease) var(--reward-delay, 0ms) backwards !important;
    transform: none;
}

.account-module-rewards .account-rewards.is-reward-reveal-ready [data-reward-reveal].account-reward-section.is-reward-revealed {
    opacity: 1;
    animation: account-dashboard-panel-in 420ms var(--ease) both !important;
    transform: none;
}

.account-module-rewards .account-rewards [data-reward-order="1"] { --reward-delay: 45ms; }
.account-module-rewards .account-rewards [data-reward-order="2"] { --reward-delay: 90ms; }
.account-module-rewards .account-rewards [data-reward-order="3"] { --reward-delay: 135ms; }
.account-module-rewards .account-rewards [data-reward-order="4"] { --reward-delay: 180ms; }

@media (max-width: 620px) {
    .account-module-rewards .account-reward-section > header {
        gap: 12px;
    }

    .account-module-rewards .account-rewards .account-reward-rule-card {
        min-height: 0;
        padding: 15px;
    }

    .account-module-rewards .account-rewards .account-reward-rule-card > header {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .account-module-rewards .account-rewards .account-reward-rule-card > header > .account-coin {
        grid-column: 2;
        justify-self: start;
    }

    .account-module-rewards .account-rewards .account-reward-rule-card > header strong {
        font-size: 13px;
    }

    .account-module-rewards .account-rewards .account-reward-rule-card > header small,
    .account-module-rewards .account-rewards .account-reward-card-details small,
    .account-module-rewards .account-rewards .account-reward-progress > span {
        font-size: 10px;
    }

    .account-module-rewards .account-rewards .account-reward-rule-card > p {
        font-size: 11px;
        line-height: 1.5;
    }

    .account-module-rewards .account-rewards .account-reward-card-claim {
        min-height: 38px;
        font-size: 10.5px;
    }

    .account-module-rewards .account-reward-history > article {
        flex-wrap: wrap;
        align-items: flex-start;
        row-gap: 8px;
        padding: 12px;
    }

    .account-module-rewards .account-reward-history > article:is(:hover, :focus-within) {
        padding-inline: 12px;
    }

    .account-module-rewards .account-reward-history > article > div {
        flex: 1 1 calc(100% - 52px);
    }

    .account-module-rewards .account-reward-history > article > div > strong {
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

    .account-module-rewards .account-reward-history > article > b {
        margin-left: 52px;
    }

    .account-module-rewards .account-rewards .account-empty {
        min-height: 92px;
        padding: 14px;
        align-items: flex-start;
    }
}

@media (max-width: 360px) {
    .account-module-rewards .account-reward-section > header {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    .account-module-rewards .account-reward-section-count {
        width: max-content;
        min-width: 0;
    }

    .account-module-rewards .account-reward-history > article > b {
        max-width: calc(100% - 52px);
        flex-wrap: wrap;
        white-space: normal;
    }
}

@media (hover: none) {
    .account-module-rewards .account-reward-unit:is(:hover, :focus-visible, :focus-within):not(:has(.account-reward-unit:is(:hover, :focus-within))) {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-module-rewards .account-rewards [data-reward-reveal],
    .account-module-rewards .account-reward-unit,
    .account-module-rewards .account-reward-section,
    .account-module-rewards .account-reward-rule-card::before,
    .account-module-rewards .account-reward-achieved-mark {
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}