/* NovZon ZON cosmetics and market visuals */

.zon-market-shell {
    min-height: calc(100vh - var(--navbar-height, 70px));
    padding: clamp(24px, 4vw, 56px);
    background:
        radial-gradient(circle at 10% 0%, rgba(249, 115, 22, 0.18), transparent 34rem),
        radial-gradient(circle at 85% 10%, rgba(245, 158, 11, 0.10), transparent 28rem),
        linear-gradient(135deg, #080b12, #111827 48%, #080b12);
    color: #f8fafc;
}

.zon-market-inner {
    max-width: 1280px;
    margin: 0 auto;
}

.zon-market-hero {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: end;
    padding: clamp(20px, 4vw, 36px);
    border: 1px solid rgba(248, 250, 252, 0.12);
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(249, 115, 22, 0.18), rgba(245, 158, 11, 0.06)),
        rgba(15, 23, 42, 0.76);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(18px);
}

.zon-kicker {
    margin: 0 0 8px;
    color: #fb923c;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.zon-market-hero h1 {
    margin: 0;
    font: 900 clamp(36px, 6vw, 72px)/0.95 Outfit, Inter, sans-serif;
}

.zon-market-hero p {
    max-width: 680px;
    color: #cbd5e1;
    line-height: 1.7;
}

.zon-balance-card {
    min-width: 220px;
    padding: 18px;
    border: 1px solid rgba(245, 158, 11, 0.28);
    border-radius: 18px;
    background: rgba(245, 158, 11, 0.10);
    text-align: right;
}

.zon-balance-card span {
    display: block;
    color: #fbbf24;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.zon-balance-card strong {
    display: block;
    margin-top: 6px;
    color: #f8fafc;
    font-size: 30px;
}

.zon-market-tabs {
    display: flex;
    gap: 10px;
    margin: 22px 0;
    overflow-x: auto;
}

.zon-market-tabs a {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 10px 14px;
    border: 1px solid rgba(248, 250, 252, 0.12);
    border-radius: 999px;
    color: #cbd5e1;
    background: rgba(255, 255, 255, 0.05);
    text-decoration: none;
    font-size: 13px;
    font-weight: 900;
}

.zon-market-section {
    margin-top: 28px;
}

.zon-market-section h2 {
    margin: 0 0 14px;
    font: 900 24px/1.1 Outfit, Inter, sans-serif;
}

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

.zon-cosmetic-card {
    --rarity-color: 156, 163, 175;
    display: grid;
    gap: 12px;
    min-height: 320px;
    padding: 16px;
    border: 1px solid rgba(var(--rarity-color), 0.32);
    border-radius: 18px;
    background:
        radial-gradient(circle at 20% 0%, rgba(var(--rarity-color), 0.16), transparent 16rem),
        rgba(15, 23, 42, 0.72);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.26);
}

.zon-cosmetic-card.rarity-rare { --rarity-color: 56, 189, 248; }
.zon-cosmetic-card.rarity-epic { --rarity-color: 168, 85, 247; }
.zon-cosmetic-card.rarity-legendary { --rarity-color: 245, 158, 11; }
.zon-cosmetic-card.rarity-mythic { --rarity-color: 236, 72, 153; }

.zon-cosmetic-preview {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 138px;
    border-radius: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 44%, rgba(var(--rarity-color), 0.18), transparent 5.8rem),
        linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
}

.zon-cosmetic-preview::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(circle at center, #000, transparent 75%);
    opacity: .55;
    pointer-events: none;
}

.zon-preview-avatar {
    width: 72px;
    height: 72px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #f8fafc;
    background: #111827;
    font-weight: 900;
}

.zon-preview-avatar-stage {
    position: relative;
    display: grid;
    place-items: center;
    width: 108px;
    height: 108px;
    border-radius: 999px;
    background:
        radial-gradient(circle, rgba(2, 6, 23, .98) 0 39%, rgba(15, 23, 42, .74) 40% 62%, transparent 63%),
        conic-gradient(from 0deg, rgba(var(--rarity-color), .28), transparent, rgba(var(--rarity-color), .22));
    box-shadow: inset 0 0 22px rgba(0,0,0,.45), 0 18px 38px rgba(0,0,0,.25);
}

.zon-market-avatar-frame {
    position: relative;
    width: 82px;
    height: 82px;
    display: inline-grid;
    place-items: center;
}

.zon-preview-face {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.14), transparent 24%),
        linear-gradient(135deg, #101827, #050816);
    font-size: 24px;
    font-weight: 900;
    letter-spacing: .04em;
}

.zon-preview-title-badge {
    position: relative;
    z-index: 1;
    max-width: 92%;
    min-height: 42px;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

.zon-preview-theme-card,
.zon-preview-comment-card {
    position: relative;
    z-index: 1;
    width: min(180px, 82%);
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(15,23,42,.76);
    box-shadow: 0 16px 36px rgba(0,0,0,.25);
}

.zon-preview-theme-card {
    display: grid;
    align-content: end;
    min-height: 92px;
    padding: 12px;
    border-radius: 16px;
    overflow: hidden;
}

.zon-preview-theme-card span {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(249,115,22,.32), rgba(14,165,233,.14));
}

.zon-preview-theme-card strong {
    position: relative;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .12em;
}

.zon-preview-comment-card {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: center;
    min-height: 62px;
    padding: 12px;
    border-radius: 14px;
}

.zon-preview-comment-card span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: linear-gradient(135deg, #7c3aed, #0ea5e9);
}

.zon-preview-comment-card p {
    color: #e5e7eb;
    font-size: 12px;
    font-weight: 800;
}

.zon-cosmetic-card h3 {
    margin: 0;
    font: 900 18px/1.2 Outfit, Inter, sans-serif;
}

.zon-cosmetic-card p {
    margin: 0;
    color: #94a3b8;
    line-height: 1.55;
}

.zon-card-meta {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.zon-price {
    color: #f59e0b;
}

.zon-card-actions {
    display: grid;
    gap: 8px;
}

.zon-btn {
    min-height: 42px;
    border: 1px solid rgba(249, 115, 22, 0.38);
    border-radius: 12px;
    color: #fff7ed;
    background: rgba(249, 115, 22, 0.22);
    font-weight: 900;
}

.zon-btn:hover {
    background: rgba(249, 115, 22, 0.34);
}

.zon-btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.zon-owned {
    color: #86efac;
    font-size: 13px;
    font-weight: 900;
}

.avatar-frame-wrapper {
    --avatar-frame-size: 40px;
    --avatar-frame-bleed: 4px;
    position: relative;
    display: inline-grid;
    place-items: center;
    overflow: visible !important;
    width: var(--avatar-frame-size);
    height: var(--avatar-frame-size);
    min-width: var(--avatar-frame-size);
    min-height: var(--avatar-frame-size);
    max-width: var(--avatar-frame-size);
    max-height: var(--avatar-frame-size);
    flex: 0 0 var(--avatar-frame-size);
    aspect-ratio: 1 / 1;
    line-height: 1;
    vertical-align: middle;
    box-sizing: border-box;
}

.avatar-frame-wrapper .avatar-img {
    position: relative;
    z-index: 1;
    display: block;
    border-radius: 50%;
    object-fit: cover;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.avatar-frame-sm,
.avatar-frame-header {
    --avatar-frame-size: 36px;
    --avatar-frame-bleed: 4px;
}

.avatar-frame-mobile-nav {
    --avatar-frame-size: 34px;
    --avatar-frame-bleed: 3px;
}

.avatar-frame-comment {
    --avatar-frame-size: 44px;
    --avatar-frame-bleed: 5px;
}

.avatar-frame-card,
.avatar-frame-profile-comment {
    --avatar-frame-size: 40px;
    --avatar-frame-bleed: 5px;
    align-self: flex-start;
}

.avatar-frame-nexa {
    --avatar-frame-size: 2.55rem;
    --avatar-frame-bleed: 4px;
}

.novzon-leaderboard-page :is(
    .leaderboard-avatar-row,
    .avatar-frame-leaderboard-row
) {
    --avatar-frame-size: 48px;
    --avatar-frame-bleed: 5px;
}

.novzon-leaderboard-page :is(
    .leaderboard-avatar-top,
    .avatar-frame-leaderboard-top
) {
    --avatar-frame-size: clamp(88px, 9vw, 128px);
    --avatar-frame-bleed: 8px;
}

.novzon-leaderboard-page :is(
    .leaderboard-avatar-champion,
    .avatar-frame-leaderboard-champion
) {
    --avatar-frame-size: clamp(140px, 14vw, 210px);
    --avatar-frame-bleed: 10px;
}

.novzon-leaderboard-page :is(
    .leaderboard-avatar-row,
    .avatar-frame-leaderboard-row,
    .leaderboard-avatar-top,
    .avatar-frame-leaderboard-top,
    .leaderboard-avatar-champion,
    .avatar-frame-leaderboard-champion
) {
    width: var(--avatar-frame-size) !important;
    height: var(--avatar-frame-size) !important;
    min-width: var(--avatar-frame-size) !important;
    min-height: var(--avatar-frame-size) !important;
    max-width: var(--avatar-frame-size) !important;
    max-height: var(--avatar-frame-size) !important;
    flex: 0 0 auto !important;
    aspect-ratio: 1 / 1;
}

.novzon-leaderboard-page :is(
    .leaderboard-avatar-row,
    .avatar-frame-leaderboard-row,
    .leaderboard-avatar-top,
    .avatar-frame-leaderboard-top,
    .leaderboard-avatar-champion,
    .avatar-frame-leaderboard-champion
) > .leaderboard-avatar-media {
    position: relative;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    border-radius: 50%;
    overflow: hidden;
    box-sizing: border-box;
}

.novzon-leaderboard-page :is(
    .leaderboard-avatar-row,
    .avatar-frame-leaderboard-row,
    .leaderboard-avatar-top,
    .avatar-frame-leaderboard-top,
    .leaderboard-avatar-champion,
    .avatar-frame-leaderboard-champion
) > :is(img, .avatar-img),
.novzon-leaderboard-page :is(
    .leaderboard-avatar-row,
    .avatar-frame-leaderboard-row,
    .leaderboard-avatar-top,
    .avatar-frame-leaderboard-top,
    .leaderboard-avatar-champion,
    .avatar-frame-leaderboard-champion
) > .leaderboard-avatar-media > img {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}

.avatar-frame-profile {
    --avatar-frame-size: 140px;
    --avatar-frame-bleed: 14px;
}

.avatar-frame-market-preview {
    --avatar-frame-size: 88px;
    --avatar-frame-bleed: 9px;
}

.archive-modal-display .avatar-frame-market-preview {
    --avatar-frame-size: 112px;
    --avatar-frame-bleed: 11px;
}

.zon-preview-avatar {
    position: relative;
    z-index: 1;
    border-radius: 50%;
}

.frame-standard .avatar-img,
.avatar-img.frame-standard,
.frame-standard.zon-preview-avatar {
    border: 3px solid rgba(255, 255, 255, 0.25);
}

.frame-ember-neon .avatar-img,
.avatar-img.frame-ember-neon,
.frame-ember-neon.zon-preview-avatar {
    border: 3px solid #f97316;
    box-shadow: 0 0 18px rgba(249, 115, 22, 0.85), 0 0 34px rgba(245, 158, 11, 0.26);
}

.frame-library .avatar-img,
.avatar-img.frame-library,
.frame-library.zon-preview-avatar {
    border: 4px solid #d4af37;
    box-shadow: 0 0 14px rgba(212, 175, 55, 0.45);
}

.frame-legendary-reader .avatar-img,
.avatar-img.frame-legendary-reader,
.frame-legendary-reader.zon-preview-avatar {
    border: 3px solid #f59e0b;
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.70);
    animation: zon-frame-pulse 2.8s ease-in-out infinite;
}

.frame-dark-lord .avatar-img,
.avatar-img.frame-dark-lord,
.frame-dark-lord.zon-preview-avatar {
    border: 3px solid #7c2d12;
    box-shadow: 0 0 22px rgba(127, 29, 29, 0.75), inset 0 0 18px rgba(127, 29, 29, 0.25);
}

.frame-founder .avatar-img,
.avatar-img.frame-founder,
.frame-founder.zon-preview-avatar {
    border: 4px solid #ec4899;
    box-shadow: 0 0 25px #ec4899, 0 0 50px rgba(236, 72, 153, 0.22);
}

@keyframes zon-frame-pulse {
    0%, 100% { filter: saturate(1); }
    50% { filter: saturate(1.45) brightness(1.12); }
}

.profile-title-badge {
    align-items: center;
    gap: 6px;
    border: 1px solid rgba(139, 92, 246, 0.34);
    background: rgba(139, 92, 246, 0.14);
    color: #c4b5fd;
}

.profile-title-badge.title-detective {
    border-color: rgba(56, 189, 248, 0.45);
    background: rgba(14, 165, 233, 0.14);
    color: #bae6fd;
}

.profile-title-badge.title-isekai {
    border-color: rgba(34, 197, 94, 0.45);
    background: rgba(34, 197, 94, 0.13);
    color: #bbf7d0;
}

.profile-title-badge.title-system {
    border-color: rgba(168, 85, 247, 0.55);
    background: linear-gradient(135deg, rgba(88, 28, 135, 0.34), rgba(14, 165, 233, 0.14));
    color: #e9d5ff;
    box-shadow: 0 0 18px rgba(168, 85, 247, 0.22);
}

.profile-wrapper.theme-ember {
    background:
        radial-gradient(circle at 14% 16%, rgba(249, 115, 22, 0.20), transparent 24rem),
        radial-gradient(circle at 90% 10%, rgba(245, 158, 11, 0.10), transparent 30rem),
        var(--bg-dark);
}

.profile-wrapper.theme-cyber-sunset {
    background:
        radial-gradient(circle at 18% 8%, rgba(249, 115, 22, 0.20), transparent 26rem),
        radial-gradient(circle at 76% 18%, rgba(14, 165, 233, 0.18), transparent 28rem),
        linear-gradient(135deg, #070b16, #111827 58%, #0f172a);
}

.profile-wrapper.theme-golden-age {
    background:
        radial-gradient(circle at 12% 12%, rgba(234, 179, 8, 0.22), transparent 30rem),
        radial-gradient(circle at 84% 20%, rgba(245, 158, 11, 0.16), transparent 24rem),
        linear-gradient(135deg, #0f0d08, #17120a 55%, #09090b);
}

.profile-wrapper.theme-ember::before,
.profile-wrapper.theme-cyber-sunset::before,
.profile-wrapper.theme-golden-age::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .72;
}

.profile-wrapper.theme-ember::before {
    background:
        radial-gradient(circle at 22% 22%, rgba(249,115,22,.16), transparent 28rem),
        linear-gradient(135deg, rgba(67,20,7,.18), transparent 55%);
}

.profile-wrapper.theme-cyber-sunset::before {
    background:
        radial-gradient(circle at 18% 16%, rgba(14,165,233,.18), transparent 28rem),
        radial-gradient(circle at 82% 12%, rgba(249,115,22,.16), transparent 26rem);
}

.profile-wrapper.theme-golden-age::before {
    background:
        radial-gradient(circle at 22% 18%, rgba(250,204,21,.18), transparent 30rem),
        linear-gradient(135deg, rgba(120,53,15,.18), transparent 60%);
}

.profile-wrapper.theme-ember .container,
.profile-wrapper.theme-cyber-sunset .container,
.profile-wrapper.theme-golden-age .container {
    z-index: 11;
}

.profile-wrapper.theme-ember .glass-panel,
.profile-wrapper.theme-cyber-sunset .glass-panel,
.profile-wrapper.theme-golden-age .glass-panel {
    box-shadow: 0 18px 60px rgba(0,0,0,.28), 0 0 0 1px rgba(255,255,255,.04);
}

.profile-wrapper.theme-golden-age .glass-panel {
    border-color: rgba(250,204,21,.16) !important;
    background: linear-gradient(135deg, rgba(35,27,10,.78), rgba(15,23,42,.82)) !important;
}

.profile-wrapper.theme-ember .profile-banner,
.profile-wrapper.theme-cyber-sunset .profile-banner,
.profile-wrapper.theme-golden-age .profile-banner {
    overflow: hidden;
}

.profile-wrapper.theme-ember .profile-banner::before,
.profile-wrapper.theme-cyber-sunset .profile-banner::before,
.profile-wrapper.theme-golden-age .profile-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
}

.profile-wrapper.theme-ember .profile-banner::before {
    background: linear-gradient(90deg, rgba(249, 115, 22, 0.28), transparent 55%);
}

.profile-wrapper.theme-cyber-sunset .profile-banner::before {
    background: linear-gradient(120deg, rgba(14, 165, 233, 0.22), rgba(249, 115, 22, 0.24), transparent 70%);
}

.profile-wrapper.theme-golden-age .profile-banner::before {
    background: linear-gradient(110deg, rgba(234, 179, 8, 0.28), rgba(250, 204, 21, 0.12), transparent 64%);
}

.zon-preview-avatar.theme-ember,
.zon-preview-avatar.theme-cyber-sunset,
.zon-preview-avatar.theme-golden-age {
    border-radius: 20px;
}

.zon-preview-avatar.theme-ember {
    background: linear-gradient(135deg, #431407, #f97316);
}

.zon-preview-avatar.theme-cyber-sunset {
    background: linear-gradient(135deg, #0f172a, #0ea5e9 45%, #f97316);
}

.zon-preview-avatar.theme-golden-age {
    background: linear-gradient(135deg, #17120a, #ca8a04, #facc15);
}

.comment-card.effect-ember-trail,
.wall-comment-cosmetic.effect-ember-trail > div > div:first-child {
    border-color: rgba(249, 115, 22, 0.34) !important;
    box-shadow: 0 0 24px rgba(249, 115, 22, 0.12);
}

.comment-card.effect-neon-whisper,
.wall-comment-cosmetic.effect-neon-whisper > div > div:first-child {
    border-color: rgba(34, 211, 238, 0.34) !important;
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.13);
}

.comment-card.effect-golden-quote,
.wall-comment-cosmetic.effect-golden-quote > div > div:first-child {
    border-color: rgba(250, 204, 21, 0.38) !important;
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.09), 0 0 28px rgba(250, 204, 21, 0.13);
}

/* ZON Market Avatar Frame Collection */
:where(.avatar-frame-wrapper[data-cosmetic-frame]:not(.frame-standard), .zon-preview-avatar[data-cosmetic-frame]:not(.frame-standard), .profile-avatar-frame-ring[data-cosmetic-frame]:not(.frame-standard)) {
    --frame-a: #a78bfa;
    --frame-b: #22d3ee;
    --frame-c: #f59e0b;
    --frame-glow: rgba(167, 139, 250, 0.42);
    --frame-ring: 3px;
    isolation: isolate;
}

.avatar-frame-wrapper[data-cosmetic-frame]::before,
.avatar-frame-wrapper[data-cosmetic-frame]::after,
.zon-preview-avatar[data-cosmetic-frame]::before,
.zon-preview-avatar[data-cosmetic-frame]::after,
.profile-avatar-frame-ring[data-cosmetic-frame]::before,
.profile-avatar-frame-ring[data-cosmetic-frame]::after {
    content: '';
    position: absolute;
    inset: -7%;
    border-radius: 50%;
    pointer-events: none;
    will-change: transform, opacity;
}

.avatar-frame-wrapper[data-cosmetic-frame]::before,
.zon-preview-avatar[data-cosmetic-frame]::before,
.profile-avatar-frame-ring[data-cosmetic-frame]::before {
    z-index: 0;
}

.avatar-frame-wrapper[data-cosmetic-frame]::after,
.zon-preview-avatar[data-cosmetic-frame]::after,
.profile-avatar-frame-ring[data-cosmetic-frame]::after {
    z-index: 2;
}

.archive-name-artifact,
.archive-profile-fx-artifact {
    align-items: center;
    background: rgba(15, 23, 42, .82);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    min-height: 104px;
    overflow: hidden;
    padding: 18px;
    position: relative;
}

.archive-name-artifact strong {
    font-size: 1.2rem;
}

.archive-name-artifact span {
    color: #94a3b8;
    font-size: .68rem;
}

.archive-name-artifact.name-neon-ink strong {
    color: #e0f2fe;
    text-shadow: 0 0 8px #22d3ee, 0 0 20px #8b5cf6;
}

.archive-name-artifact.name-system-glitch strong {
    color: white;
    text-shadow: -2px 0 #fb7185, 2px 0 #22d3ee;
}

.archive-name-artifact.name-royal-gold strong {
    background: linear-gradient(90deg, #a16207, #fde68a, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.archive-profile-fx-artifact > span {
    background: radial-gradient(circle, rgba(34,211,238,.5), rgba(139,92,246,.16), transparent 68%);
    filter: blur(3px);
    inset: 0;
    position: absolute;
}

.archive-profile-fx-artifact.profile-fx-starfall > span {
    background-image: radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px), radial-gradient(circle at 78% 20%, #c4b5fd 0 1px, transparent 2px), radial-gradient(circle at 60% 80%, #67e8f9 0 1px, transparent 2px);
}

.archive-profile-fx-artifact.profile-fx-singularity > span {
    background: radial-gradient(circle, #020617 0 16%, #22d3ee 18%, #7c3aed 30%, transparent 58%);
}

.archive-profile-fx-artifact strong {
    color: white;
    position: relative;
    z-index: 1;
}

.nx-avatar-halo.avatar-frame-wrapper[data-cosmetic-frame]::before,
.nx-avatar-halo.avatar-frame-wrapper[data-cosmetic-frame]::after {
    inset: -7%;
    border-radius: 50%;
    pointer-events: none;
}

.avatar-frame-wrapper[data-cosmetic-frame]:hover .avatar-img,
.zon-preview-avatar[data-cosmetic-frame]:hover {
    transform: translateY(-1px) scale(1.025);
}

.avatar-frame-wrapper[data-cosmetic-frame] .avatar-img,
.zon-preview-avatar[data-cosmetic-frame] {
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
    will-change: transform;
}

.profile-avatar-frame {
    isolation: isolate;
}

.profile-avatar-frame .avatar-img {
    z-index: 2;
}

.profile-avatar-frame-ring {
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

.profile-avatar-frame-ring[data-cosmetic-frame]::before,
.profile-avatar-frame-ring[data-cosmetic-frame]::after {
    inset: 0;
}

.profile-avatar-frame-ring.frame-singularity {
    background: conic-gradient(#020617, #38bdf8, #020617, #a855f7, #020617);
    filter: drop-shadow(0 0 18px rgba(56,189,248,.68));
    animation: zon-spin 2.8s linear infinite;
}

.profile-avatar-frame-ring.frame-singularity::after {
    inset: 18%;
    background: radial-gradient(circle, #000 0 34%, rgba(56,189,248,.45) 35% 40%, transparent 41%);
    animation: zon-pulse 2.2s ease-in-out infinite;
}

.profile-avatar-frame.frame-singularity .avatar-img {
    border-color: #020617 !important;
    box-shadow: 0 0 0 2px rgba(56,189,248,.55), 0 0 34px rgba(14,165,233,.76), inset 0 0 18px #000 !important;
}

@keyframes zon-spin { to { transform: rotate(360deg); } }
@keyframes zon-spin-reverse { to { transform: rotate(-360deg); } }
@keyframes zon-pulse { 0%, 100% { opacity: .55; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes zon-breathe { 0%, 100% { transform: scale(.94); opacity: .35; } 50% { transform: scale(1.16); opacity: .8; } }
@keyframes zon-shimmer { 0% { transform: rotate(0deg) translateX(-18%); opacity: .35; } 50% { opacity: .92; } 100% { transform: rotate(360deg) translateX(-18%); opacity: .35; } }
@keyframes zon-flicker { 0%, 100% { opacity: .72; transform: scale(1) rotate(0deg); } 35% { opacity: 1; transform: scale(1.08) rotate(8deg); } 70% { opacity: .58; transform: scale(.98) rotate(-6deg); } }
@keyframes zon-orbit { to { transform: rotate(360deg); } }
@keyframes zon-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes zon-glitch { 0%, 100% { transform: translate(0); opacity: .72; } 25% { transform: translate(2px, -1px); opacity: 1; } 50% { transform: translate(-2px, 1px); opacity: .6; } 75% { transform: translate(1px, 2px); opacity: .95; } }
@keyframes zon-fade-phase { 0%, 100% { opacity: .35; transform: scale(.88); } 45% { opacity: 1; transform: scale(1.1); } 60% { opacity: .18; transform: scale(.98); } }

/* Base Missing Frames */
.frame-standard { --frame-a: transparent; --frame-b: transparent; --frame-glow: transparent; }
.frame-standard .avatar-img, .frame-standard.zon-preview-avatar { border: 2px solid #333; }

.frame-ember-neon { --frame-a: #f97316; --frame-b: #ec4899; --frame-glow: rgba(249, 115, 22, .45); }
.frame-ember-neon .avatar-img, .frame-ember-neon.zon-preview-avatar { border: 2px solid var(--frame-a); box-shadow: 0 0 12px var(--frame-glow), inset 0 0 8px rgba(236, 72, 153, .3); }
.frame-ember-neon:hover .avatar-img, .frame-ember-neon.zon-preview-avatar:hover { box-shadow: 0 0 20px rgba(249, 115, 22, .6); }

.frame-library { --frame-a: #d4af37; --frame-b: #b8860b; --frame-glow: rgba(212, 175, 55, .3); }
.frame-library .avatar-img, .frame-library.zon-preview-avatar { border: 3px double var(--frame-a); box-shadow: 0 0 10px var(--frame-glow); }
.frame-library:hover .avatar-img, .frame-library.zon-preview-avatar:hover { filter: brightness(1.1); }

.frame-legendary-reader { --frame-a: #f59e0b; --frame-b: #10b981; --frame-glow: rgba(245, 158, 11, .5); }
.frame-legendary-reader .avatar-img, .frame-legendary-reader.zon-preview-avatar { border: 3px solid transparent; background: linear-gradient(#111827, #111827) padding-box, linear-gradient(135deg, var(--frame-a), var(--frame-b)) border-box; box-shadow: 0 0 15px var(--frame-glow); }
.frame-legendary-reader::after { border-top: 2px solid rgba(255,255,255,.6); opacity: .5; transform: rotate(45deg); animation: zon-shimmer 2s linear infinite; }

.frame-dark-lord { --frame-a: #7f1d1d; --frame-b: #000000; --frame-glow: rgba(127, 29, 29, .6); }
.frame-dark-lord .avatar-img, .frame-dark-lord.zon-preview-avatar { border: 3px solid #450a0a; box-shadow: 0 0 20px var(--frame-glow); filter: contrast(1.1); }
.frame-dark-lord:hover .avatar-img, .frame-dark-lord.zon-preview-avatar:hover { animation: zon-breathe 2s infinite ease-in-out; }

.frame-founder { --frame-a: #8b5cf6; --frame-b: #d946ef; --frame-glow: rgba(217, 70, 239, .6); }
.frame-founder .avatar-img, .frame-founder.zon-preview-avatar { border: 2px solid var(--frame-a); box-shadow: 0 0 0 2px var(--frame-b), 0 0 20px var(--frame-glow); }
.frame-founder:hover .avatar-img, .frame-founder.zon-preview-avatar:hover { animation: zon-pulse 2s infinite ease-in-out; }

/* Common */
.frame-silver-edge { --frame-a: #e5e7eb; --frame-b: #94a3b8; --frame-glow: rgba(226, 232, 240, .28); }
.frame-silver-edge .avatar-img, .frame-silver-edge.zon-preview-avatar { border: var(--frame-ring) solid var(--frame-a); box-shadow: 0 0 10px var(--frame-glow); }
.frame-silver-edge:hover .avatar-img, .frame-silver-edge.zon-preview-avatar:hover { box-shadow: 0 0 16px var(--frame-glow); }

.frame-midnight { --frame-a: #4c1d95; --frame-b: #a78bfa; --frame-glow: rgba(76, 29, 149, .45); }
.frame-midnight .avatar-img, .frame-midnight.zon-preview-avatar { border: 2px solid var(--frame-a); box-shadow: 0 0 0 1px rgba(167, 139, 250, .18), 0 0 14px var(--frame-glow); }
.frame-midnight:hover .avatar-img, .frame-midnight.zon-preview-avatar:hover { filter: saturate(1.2); }

.frame-ember { --frame-a: #f97316; --frame-b: #fed7aa; --frame-glow: rgba(249, 115, 22, .36); }
.frame-ember .avatar-img, .frame-ember.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 13px var(--frame-glow); }
.frame-ember:hover .avatar-img, .frame-ember.zon-preview-avatar:hover { box-shadow: 0 0 18px rgba(251, 146, 60, .48); }

.frame-frost { --frame-a: #bae6fd; --frame-b: #38bdf8; --frame-glow: rgba(56, 189, 248, .34); }
.frame-frost .avatar-img, .frame-frost.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 12px var(--frame-glow); }
.frame-frost::after { border-top: 2px solid rgba(255,255,255,.7); opacity: .6; transform: rotate(-25deg); }
.frame-frost:hover::after { animation: zon-shimmer 1.8s linear infinite; }

.frame-forest { --frame-a: #166534; --frame-b: #86efac; --frame-glow: rgba(34, 197, 94, .26); }
.frame-forest .avatar-img, .frame-forest.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 0 1px rgba(134, 239, 172, .18), 0 0 12px var(--frame-glow); }
.frame-forest:hover .avatar-img, .frame-forest.zon-preview-avatar:hover { filter: saturate(1.22); }

.frame-rose { --frame-a: #fb7185; --frame-b: #f9a8d4; --frame-glow: rgba(244, 114, 182, .32); }
.frame-rose .avatar-img, .frame-rose.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 13px var(--frame-glow); }
.frame-rose:hover .avatar-img, .frame-rose.zon-preview-avatar:hover { box-shadow: 0 0 20px rgba(244, 114, 182, .45); }

.frame-steel { --frame-a: #64748b; --frame-b: #cbd5e1; --frame-glow: rgba(148, 163, 184, .24); }
.frame-steel .avatar-img, .frame-steel.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 0 9px var(--frame-glow); }
.frame-steel:hover .avatar-img, .frame-steel.zon-preview-avatar:hover { filter: contrast(1.08); }

.frame-aurora { --frame-a: #a855f7; --frame-b: #38bdf8; --frame-glow: rgba(125, 211, 252, .34); }
.frame-aurora .avatar-img, .frame-aurora.zon-preview-avatar { border: 3px solid transparent; background: linear-gradient(#111827, #111827) padding-box, linear-gradient(135deg, var(--frame-a), var(--frame-b)) border-box; box-shadow: 0 0 14px var(--frame-glow); }
.frame-aurora:hover .avatar-img, .frame-aurora.zon-preview-avatar:hover { filter: hue-rotate(12deg) saturate(1.12); }

.frame-sand { --frame-a: #d6a85d; --frame-b: #fef3c7; --frame-glow: rgba(214, 168, 93, .25); }
.frame-sand .avatar-img, .frame-sand.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 10px var(--frame-glow); }
.frame-sand:hover .avatar-img, .frame-sand.zon-preview-avatar:hover { box-shadow: 0 0 16px rgba(251, 191, 36, .34); }

.frame-void { --frame-a: #111827; --frame-b: #4c1d95; --frame-glow: rgba(0, 0, 0, .7); }
.frame-void .avatar-img, .frame-void.zon-preview-avatar { border: 2px solid #111827; box-shadow: 0 0 18px var(--frame-glow), 0 0 0 1px rgba(167,139,250,.08); }
.frame-void:hover .avatar-img, .frame-void.zon-preview-avatar:hover { box-shadow: 0 0 24px rgba(76, 29, 149, .34), 0 0 22px rgba(0,0,0,.8); }

/* Rare */
.frame-neon-blue { --frame-a: #22d3ee; --frame-b: #2563eb; --frame-glow: rgba(34, 211, 238, .72); }
.frame-neon-blue .avatar-img, .frame-neon-blue.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 18px var(--frame-glow); animation: zon-pulse 2.4s ease-in-out infinite; }
.frame-neon-blue:hover .avatar-img, .frame-neon-blue.zon-preview-avatar:hover { box-shadow: 0 0 28px var(--frame-glow); }

.frame-crimson { --frame-a: #dc2626; --frame-b: #fca5a5; --frame-glow: rgba(220, 38, 38, .64); }
.frame-crimson .avatar-img, .frame-crimson.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 18px var(--frame-glow); animation: zon-pulse 1.45s cubic-bezier(.2,0,.2,1) infinite; }
.frame-crimson:hover .avatar-img, .frame-crimson.zon-preview-avatar:hover { filter: saturate(1.35); }

.frame-toxic { --frame-a: #84cc16; --frame-b: #22c55e; --frame-glow: rgba(132, 204, 22, .58); }
.frame-toxic .avatar-img, .frame-toxic.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 18px var(--frame-glow); }
.frame-toxic::after { inset: -10%; background: radial-gradient(circle at 32% 100%, #a3e635 0 4%, transparent 5%), radial-gradient(circle at 66% 100%, #22c55e 0 3%, transparent 4%); animation: zon-breathe 2.2s ease-in-out infinite; opacity: .52; }

.frame-thunder { --frame-a: #fde047; --frame-b: #f59e0b; --frame-glow: rgba(250, 204, 21, .72); }
.frame-thunder .avatar-img, .frame-thunder.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 18px var(--frame-glow); }
.frame-thunder::after { background: conic-gradient(from 20deg, transparent 0 18%, #fef08a 19% 21%, transparent 22% 48%, #facc15 49% 52%, transparent 53%); animation: zon-flicker 1.2s steps(2) infinite; }

.frame-ocean { --frame-a: #0ea5e9; --frame-b: #1d4ed8; --frame-glow: rgba(14, 165, 233, .48); }
.frame-ocean .avatar-img, .frame-ocean.zon-preview-avatar { border: 3px solid transparent; background: linear-gradient(#0f172a, #0f172a) padding-box, conic-gradient(from 0deg, #0ea5e9, #67e8f9, #1d4ed8, #0ea5e9) border-box; box-shadow: 0 0 16px var(--frame-glow); animation: zon-shimmer 4s linear infinite; }
.frame-ocean:hover .avatar-img, .frame-ocean.zon-preview-avatar:hover { filter: saturate(1.25); }

.frame-sakura { --frame-a: #f9a8d4; --frame-b: #fb7185; --frame-glow: rgba(249, 168, 212, .52); }
.frame-sakura .avatar-img, .frame-sakura.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: 0 0 17px var(--frame-glow); }
.frame-sakura::after { background: radial-gradient(ellipse at 20% 10%, #fbcfe8 0 4%, transparent 5%), radial-gradient(ellipse at 82% 30%, #fb7185 0 3%, transparent 4%), radial-gradient(ellipse at 42% 88%, #f9a8d4 0 3%, transparent 4%); animation: zon-orbit 7s linear infinite; }
.profile-avatar-frame.frame-sakura .avatar-img,
.avatar-frame-wrapper.frame-sakura .avatar-img {
    border-color: #f9a8d4 !important;
    box-shadow: 0 0 0 3px rgba(251, 113, 133, .26), 0 0 24px rgba(249, 168, 212, .72) !important;
}
.profile-avatar-frame-ring.frame-sakura {
    background:
        radial-gradient(ellipse at 18% 18%, #fbcfe8 0 5%, transparent 6%),
        radial-gradient(ellipse at 82% 30%, #fb7185 0 4%, transparent 5%),
        radial-gradient(ellipse at 42% 92%, #f9a8d4 0 4%, transparent 5%),
        radial-gradient(ellipse at 64% 10%, #fecdd3 0 3%, transparent 4%),
        conic-gradient(from 0deg, rgba(249,168,212,.75), rgba(251,113,133,.18), rgba(249,168,212,.75));
    filter: drop-shadow(0 0 16px rgba(249,168,212,.7));
    animation: zon-orbit 7s linear infinite;
}
.profile-avatar-frame-ring.frame-sakura::after {
    inset: -4px;
    border: 2px dotted rgba(251, 207, 232, .72);
    animation: zon-orbit-reverse 9s linear infinite;
}

.frame-shadow { --frame-a: #111827; --frame-b: #4b5563; --frame-glow: rgba(0, 0, 0, .85); }
.frame-shadow .avatar-img, .frame-shadow.zon-preview-avatar { border: 3px solid #1f2937; box-shadow: 0 0 18px var(--frame-glow); }
.frame-shadow::before { background: radial-gradient(circle, rgba(17,24,39,.7), transparent 68%); animation: zon-breathe 2.8s ease-in-out infinite; }

.frame-prism { --frame-glow: rgba(168, 85, 247, .55); }
.frame-prism .avatar-img, .frame-prism.zon-preview-avatar { border: 3px solid transparent; background: linear-gradient(#111827,#111827) padding-box, conic-gradient(red, orange, yellow, lime, cyan, blue, violet, red) border-box; box-shadow: 0 0 18px var(--frame-glow); animation: zon-spin 4s linear infinite; }
.frame-prism:hover .avatar-img, .frame-prism.zon-preview-avatar:hover { animation-duration: 1.8s; }

.frame-glitch { --frame-a: #22d3ee; --frame-b: #f43f5e; --frame-glow: rgba(34, 211, 238, .4); }
.frame-glitch .avatar-img, .frame-glitch.zon-preview-avatar { border: 3px solid var(--frame-a); box-shadow: -2px 0 #f43f5e, 2px 0 #22d3ee, 0 0 16px var(--frame-glow); }
.frame-glitch:hover::after { inset: -3%; border: 2px solid transparent; box-shadow: -4px 0 #f43f5e, 4px 0 #22d3ee; animation: zon-glitch .4s steps(2) infinite; }

.frame-hologram { --frame-a: #a5f3fc; --frame-b: #c084fc; --frame-glow: rgba(165, 243, 252, .55); }
.frame-hologram .avatar-img, .frame-hologram.zon-preview-avatar { border: 3px solid transparent; background: linear-gradient(#0f172a,#0f172a) padding-box, linear-gradient(120deg, #a5f3fc, #f0abfc, #c4b5fd, #a5f3fc) border-box; box-shadow: 0 0 18px var(--frame-glow); }
.frame-hologram::after { background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.45), transparent 65%); animation: zon-shimmer 2.4s linear infinite; opacity: .42; }

/* Epic */
.frame-cyberpunk { --frame-a: #22d3ee; --frame-b: #a855f7; --frame-glow: rgba(168, 85, 247, .62); }
.frame-cyberpunk .avatar-img, .frame-cyberpunk.zon-preview-avatar { border: 3px solid #22d3ee; box-shadow: 0 0 18px #22d3ee, 0 0 30px rgba(168,85,247,.32); }
.frame-cyberpunk::after { background: conic-gradient(from 0deg, transparent 0 8%, #22d3ee 9% 10%, transparent 11% 30%, #a855f7 31% 33%, transparent 34%); animation: zon-spin 5s linear infinite; }

.frame-inferno { --frame-a: #ef4444; --frame-b: #f97316; --frame-glow: rgba(249, 115, 22, .72); }
.frame-inferno .avatar-img, .frame-inferno.zon-preview-avatar { border: 3px solid #f97316; box-shadow: 0 0 20px var(--frame-glow); }
.frame-inferno::before { background: conic-gradient(from 0deg, #ef4444, #f97316, #facc15, #ef4444); filter: blur(7px); opacity: .65; animation: zon-flicker 1.8s ease-in-out infinite; }

.frame-blizzard { --frame-a: #bae6fd; --frame-b: #38bdf8; --frame-glow: rgba(186, 230, 253, .55); }
.frame-blizzard .avatar-img, .frame-blizzard.zon-preview-avatar { border: 3px solid #bae6fd; box-shadow: 0 0 20px var(--frame-glow); }
.frame-blizzard::after { background: radial-gradient(circle at 20% 30%, #fff 0 2%, transparent 3%), radial-gradient(circle at 80% 48%, #bae6fd 0 2%, transparent 3%), radial-gradient(circle at 42% 86%, #e0f2fe 0 2%, transparent 3%); animation: zon-orbit 5.5s linear infinite; }

.frame-galaxy { --frame-a: #7c3aed; --frame-b: #0ea5e9; --frame-glow: rgba(124, 58, 237, .62); }
.frame-galaxy .avatar-img, .frame-galaxy.zon-preview-avatar { border: 3px solid transparent; background: linear-gradient(#020617,#020617) padding-box, conic-gradient(#7c3aed, #0ea5e9, #f0abfc, #7c3aed) border-box; box-shadow: 0 0 22px var(--frame-glow); }
.frame-galaxy::after { background: radial-gradient(circle at 15% 20%, #fff 0 1.5%, transparent 2%), radial-gradient(circle at 70% 18%, #f0abfc 0 1.5%, transparent 2%), radial-gradient(circle at 80% 76%, #67e8f9 0 1.5%, transparent 2%); animation: zon-spin 10s linear infinite; }

.frame-venom { --frame-a: #052e16; --frame-b: #22c55e; --frame-glow: rgba(34, 197, 94, .42); }
.frame-venom .avatar-img, .frame-venom.zon-preview-avatar { border: 3px solid #14532d; box-shadow: 0 0 22px rgba(21, 128, 61, .45); }
.frame-venom::before { background: conic-gradient(from 120deg, #020617, #14532d, #4ade80, #020617); filter: blur(6px); opacity: .5; animation: zon-spin-reverse 5s linear infinite; }

.frame-thunder-god { --frame-a: #facc15; --frame-b: #38bdf8; --frame-glow: rgba(250, 204, 21, .8); }
.frame-thunder-god .avatar-img, .frame-thunder-god.zon-preview-avatar { border: 3px solid #facc15; box-shadow: 0 0 22px var(--frame-glow), 0 0 34px rgba(56,189,248,.28); }
.frame-thunder-god::before { background: conic-gradient(transparent 0 12%, #fef08a 13% 15%, transparent 16% 40%, #38bdf8 41% 43%, transparent 44%); animation: zon-flicker 1s steps(2) infinite; }
.frame-thunder-god::after { background: conic-gradient(from 90deg, transparent 0 20%, #facc15 21% 23%, transparent 24% 68%, #fef08a 69% 71%, transparent 72%); animation: zon-spin 3s linear infinite; }

.frame-quantum { --frame-a: #22d3ee; --frame-b: #a78bfa; --frame-glow: rgba(34, 211, 238, .58); }
.frame-quantum .avatar-img, .frame-quantum.zon-preview-avatar { border: 3px solid #22d3ee; box-shadow: 0 0 20px var(--frame-glow); }
.frame-quantum::after { background: radial-gradient(circle at 50% 0%, #fff 0 3%, transparent 4%), radial-gradient(circle at 100% 50%, #a78bfa 0 3%, transparent 4%), radial-gradient(circle at 50% 100%, #22d3ee 0 3%, transparent 4%); animation: zon-orbit 2.8s linear infinite; }

.frame-matrix { --frame-a: #22c55e; --frame-b: #86efac; --frame-glow: rgba(34, 197, 94, .58); }
.frame-matrix .avatar-img, .frame-matrix.zon-preview-avatar { border: 3px solid #22c55e; box-shadow: 0 0 20px var(--frame-glow); }
.frame-matrix::after { background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(34,197,94,.55) 9px 10px), repeating-linear-gradient(180deg, transparent 0 12px, rgba(134,239,172,.22) 13px 14px); opacity: .42; animation: zon-shimmer 3s linear infinite; }

.frame-blood-moon { --frame-a: #991b1b; --frame-b: #ef4444; --frame-glow: rgba(153, 27, 27, .7); }
.frame-blood-moon .avatar-img, .frame-blood-moon.zon-preview-avatar { border: 3px solid #991b1b; box-shadow: 0 0 24px var(--frame-glow); }
.frame-blood-moon::after { background: radial-gradient(circle at 50% 0%, rgba(239,68,68,.95) 0 14%, transparent 15%), radial-gradient(circle at 28% 100%, rgba(127,29,29,.8) 0 5%, transparent 6%); animation: zon-breathe 3s ease-in-out infinite; }

.frame-phoenix { --frame-a: #f97316; --frame-b: #fde047; --frame-glow: rgba(249, 115, 22, .78); }
.frame-phoenix .avatar-img, .frame-phoenix.zon-preview-avatar { border: 3px solid #f97316; box-shadow: 0 0 22px var(--frame-glow); }
.frame-phoenix::before { background: conic-gradient(from -45deg, transparent, #f97316, #fde047, transparent 55%); filter: blur(5px); opacity: .7; animation: zon-orbit 3.6s linear infinite; }

/* Legendary */
.frame-dragon { --frame-a: #22c55e; --frame-b: #facc15; --frame-glow: rgba(34, 197, 94, .65); }
.frame-dragon .avatar-img, .frame-dragon.zon-preview-avatar { border: 4px solid #166534; box-shadow: 0 0 24px var(--frame-glow); }
.frame-dragon::after { border: 3px dashed #facc15; border-left-color: transparent; animation: zon-orbit 4.5s linear infinite; opacity: .78; }

.frame-celestial { --frame-a: #facc15; --frame-b: #fff7ed; --frame-glow: rgba(250, 204, 21, .75); }
.frame-celestial .avatar-img, .frame-celestial.zon-preview-avatar { border: 4px solid #facc15; box-shadow: 0 0 26px var(--frame-glow); }
.frame-celestial::after { background: radial-gradient(circle at 50% 0%, #fff 0 3%, transparent 4%), radial-gradient(circle at 86% 66%, #fde68a 0 3%, transparent 4%), radial-gradient(circle at 13% 70%, #facc15 0 3%, transparent 4%); animation: zon-orbit 4.8s linear infinite; }

.frame-abyss { --frame-a: #581c87; --frame-b: #c084fc; --frame-glow: rgba(88, 28, 135, .82); }
.frame-abyss .avatar-img, .frame-abyss.zon-preview-avatar { border: 4px solid #581c87; box-shadow: 0 0 30px var(--frame-glow), inset 0 0 18px rgba(88,28,135,.24); }
.frame-abyss::before { background: conic-gradient(#020617, #581c87, #a855f7, #020617); filter: blur(8px); opacity: .72; animation: zon-spin-reverse 6s linear infinite; }

.frame-titan { --frame-a: #f8fafc; --frame-b: #60a5fa; --frame-glow: rgba(96, 165, 250, .78); }
.frame-titan .avatar-img, .frame-titan.zon-preview-avatar { border: 4px solid #bfdbfe; box-shadow: 0 0 28px var(--frame-glow), 0 0 48px rgba(248,250,252,.22); }
.frame-titan::before { border: 5px solid rgba(96,165,250,.35); animation: zon-breathe 2.6s ease-in-out infinite; }

.frame-sovereign { --frame-a: #facc15; --frame-b: #f59e0b; --frame-glow: rgba(250, 204, 21, .78); }
.frame-sovereign .avatar-img, .frame-sovereign.zon-preview-avatar { border: 4px solid #f59e0b; box-shadow: 0 0 26px var(--frame-glow); }
.frame-sovereign::after { inset: -18% -6% auto; height: 34%; border-radius: 40% 40% 10% 10%; background: linear-gradient(135deg, transparent 18%, #facc15 19% 28%, transparent 29% 44%, #fde68a 45% 55%, transparent 56% 71%, #facc15 72% 81%, transparent 82%); opacity: .92; }

.frame-tempest { --frame-a: #94a3b8; --frame-b: #38bdf8; --frame-glow: rgba(56, 189, 248, .56); }
.frame-tempest .avatar-img, .frame-tempest.zon-preview-avatar { border: 4px solid #64748b; box-shadow: 0 0 24px var(--frame-glow); }
.frame-tempest::before { background: conic-gradient(from 0deg, rgba(148,163,184,.55), transparent, rgba(56,189,248,.5), transparent); filter: blur(7px); animation: zon-spin 3.8s linear infinite; }
.frame-tempest::after { background: conic-gradient(transparent 0 30%, #fef08a 31% 33%, transparent 34% 70%, #38bdf8 71% 73%, transparent 74%); animation: zon-flicker 1.2s steps(2) infinite; }

.frame-eternal-flame { --frame-a: #facc15; --frame-b: #f97316; --frame-glow: rgba(250, 204, 21, .86); }
.frame-eternal-flame .avatar-img, .frame-eternal-flame.zon-preview-avatar { border: 4px solid #facc15; box-shadow: 0 0 28px var(--frame-glow); }
.frame-eternal-flame::before { background: conic-gradient(from 180deg, #f97316, #facc15, #fff7ed, #f97316); filter: blur(7px); opacity: .75; animation: zon-flicker 1.7s ease-in-out infinite; }

.frame-shadow-realm { --frame-a: #020617; --frame-b: #7c3aed; --frame-glow: rgba(2, 6, 23, .95); }
.frame-shadow-realm .avatar-img, .frame-shadow-realm.zon-preview-avatar { border: 4px solid #111827; box-shadow: 0 0 30px #000, 0 0 32px rgba(124,58,237,.38); }
.frame-shadow-realm::before { background: conic-gradient(#020617, #7c3aed, #020617, #111827); filter: blur(9px); opacity: .78; animation: zon-spin-reverse 5s linear infinite; }

.frame-divine { --frame-a: #f8fafc; --frame-b: #fde68a; --frame-glow: rgba(255, 255, 255, .8); }
.frame-divine .avatar-img, .frame-divine.zon-preview-avatar { border: 4px solid #f8fafc; box-shadow: 0 0 26px var(--frame-glow), 0 0 42px rgba(250,204,21,.25); }
.frame-divine::after { background: conic-gradient(from 0deg, transparent 0 8%, rgba(255,255,255,.75) 9% 10%, transparent 11% 22%); animation: zon-spin 8s linear infinite; opacity: .72; }

.frame-chaos { --frame-glow: rgba(244, 114, 182, .62); }
.frame-chaos .avatar-img, .frame-chaos.zon-preview-avatar { border: 4px solid transparent; background: linear-gradient(#111827,#111827) padding-box, conic-gradient(#ef4444, #facc15, #22c55e, #38bdf8, #a855f7, #ef4444) border-box; box-shadow: 0 0 30px var(--frame-glow); animation: zon-spin 3.2s linear infinite; }
.frame-chaos::after { border: 2px dashed rgba(255,255,255,.55); animation: zon-spin-reverse 2.4s linear infinite; opacity: .65; }

/* Mythic */
.frame-novzon-founder { --frame-a: #a855f7; --frame-b: #ec4899; --frame-glow: rgba(236, 72, 153, .82); }
.frame-novzon-founder .avatar-img, .frame-novzon-founder.zon-preview-avatar { border: 4px solid transparent; background: linear-gradient(#111827,#111827) padding-box, conic-gradient(#a855f7, #ec4899, #22d3ee, #a855f7) border-box; box-shadow: 0 0 30px var(--frame-glow), 0 0 46px rgba(168,85,247,.35); }
.frame-novzon-founder::after { border: 2px solid rgba(236,72,153,.7); animation: zon-pulse 2s ease-in-out infinite; }

.frame-world-ender { --frame-a: #ef4444; --frame-b: #020617; --frame-glow: rgba(239, 68, 68, .74); }
.frame-world-ender .avatar-img, .frame-world-ender.zon-preview-avatar { border: 4px solid #ef4444; box-shadow: 0 0 30px var(--frame-glow); filter: contrast(1.05); }
.frame-world-ender::before { background: repeating-conic-gradient(from 0deg, rgba(239,68,68,.6) 0 5deg, transparent 6deg 18deg); filter: blur(6px); animation: zon-glitch .9s steps(3) infinite; }

.frame-time-lord { --frame-a: #f8fafc; --frame-b: #38bdf8; --frame-glow: rgba(56, 189, 248, .72); }
.frame-time-lord .avatar-img, .frame-time-lord.zon-preview-avatar { border: 4px solid #38bdf8; box-shadow: 0 0 28px var(--frame-glow); }
.frame-time-lord::before { border: 2px solid rgba(255,255,255,.45); background: conic-gradient(transparent 0 24%, rgba(255,255,255,.9) 25% 26%, transparent 27% 74%, rgba(56,189,248,.9) 75% 76%, transparent 77%); animation: zon-spin 6s linear infinite; }
.frame-time-lord::after { border: 1px dashed rgba(255,255,255,.42); animation: zon-spin-reverse 12s linear infinite; }

.frame-void-walker { --frame-a: #111827; --frame-b: #a855f7; --frame-glow: rgba(168, 85, 247, .7); }
.frame-void-walker .avatar-img, .frame-void-walker.zon-preview-avatar { border: 4px solid #111827; box-shadow: 0 0 28px var(--frame-glow), 0 0 36px #000; animation: zon-fade-phase 3s ease-in-out infinite; }
.frame-void-walker::before { background: radial-gradient(circle, rgba(168,85,247,.48), transparent 62%); animation: zon-fade-phase 3s ease-in-out infinite reverse; }

.frame-cosmic-horror { --frame-a: #6d28d9; --frame-b: #22c55e; --frame-glow: rgba(109, 40, 217, .75); }
.frame-cosmic-horror .avatar-img, .frame-cosmic-horror.zon-preview-avatar { border: 4px solid #6d28d9; box-shadow: 0 0 30px var(--frame-glow), 0 0 18px rgba(34,197,94,.35); }
.frame-cosmic-horror::after { background: conic-gradient(from 0deg, transparent 0 8%, rgba(34,197,94,.75) 9% 12%, transparent 13% 22%, rgba(109,40,217,.8) 23% 27%, transparent 28%); filter: blur(1px); animation: zon-orbit 5.2s ease-in-out infinite; }

.frame-rebirth { --frame-a: #f97316; --frame-b: #fff7ed; --frame-glow: rgba(249, 115, 22, .86); }
.frame-rebirth .avatar-img, .frame-rebirth.zon-preview-avatar { border: 4px solid #f97316; box-shadow: 0 0 30px var(--frame-glow); }
.frame-rebirth::before { background: conic-gradient(from 210deg, transparent, #7f1d1d, #f97316, #fff7ed, transparent 68%); filter: blur(7px); animation: zon-orbit 3.2s linear infinite; }
.frame-rebirth::after { background: radial-gradient(circle at 50% 100%, #fff7ed 0 5%, transparent 6%); animation: zon-breathe 2s ease-in-out infinite; }

.frame-omniscient { --frame-a: #facc15; --frame-b: #a78bfa; --frame-glow: rgba(250, 204, 21, .8); }
.frame-omniscient .avatar-img, .frame-omniscient.zon-preview-avatar { border: 4px solid #facc15; box-shadow: 0 0 30px var(--frame-glow), 0 0 34px rgba(167,139,250,.36); }
.frame-omniscient::after { inset: -18%; background: radial-gradient(ellipse at 50% 50%, transparent 0 18%, rgba(250,204,21,.75) 19% 22%, transparent 23% 100%), conic-gradient(from 0deg, transparent 0 12%, rgba(255,255,255,.6) 13% 14%, transparent 15% 28%); animation: zon-spin 9s linear infinite; opacity: .8; }

.frame-legend { --frame-glow: rgba(236, 72, 153, .72); }
.frame-legend .avatar-img, .frame-legend.zon-preview-avatar { border: 4px solid transparent; background: linear-gradient(#111827,#111827) padding-box, conic-gradient(#facc15, #ec4899, #22d3ee, #a855f7, #facc15) border-box; box-shadow: 0 0 30px var(--frame-glow); animation: zon-spin 4s linear infinite, zon-pulse 2.5s ease-in-out infinite; }
.frame-legend::after { border: 2px dashed rgba(255,255,255,.5); animation: zon-spin-reverse 3s linear infinite; }

.frame-novzon-champion { --frame-a: #facc15; --frame-b: #a855f7; --frame-glow: rgba(250, 204, 21, .86); }
.frame-novzon-champion .avatar-img, .frame-novzon-champion.zon-preview-avatar { border: 4px solid transparent; background: linear-gradient(#111827,#111827) padding-box, conic-gradient(#facc15, #fff7ed, #a855f7, #facc15) border-box; box-shadow: 0 0 32px var(--frame-glow), 0 0 42px rgba(168,85,247,.3); }
.frame-novzon-champion::after { background: radial-gradient(circle at 50% 0%, #fff 0 4%, transparent 5%), radial-gradient(circle at 84% 72%, #facc15 0 3%, transparent 4%), radial-gradient(circle at 16% 72%, #a855f7 0 3%, transparent 4%); animation: zon-orbit 4s linear infinite; }

.frame-singularity { --frame-a: #020617; --frame-b: #38bdf8; --frame-glow: rgba(14, 165, 233, .7); }
.frame-singularity .avatar-img, .frame-singularity.zon-preview-avatar { border: 4px solid #020617; box-shadow: 0 0 0 2px rgba(56,189,248,.35), 0 0 34px var(--frame-glow), inset 0 0 18px #000; }
.frame-singularity::before { background: conic-gradient(#020617, #38bdf8, #020617, #a855f7, #020617); filter: blur(8px); opacity: .82; animation: zon-spin 2.8s linear infinite; }
.frame-singularity::after { inset: 14%; background: radial-gradient(circle, #000 0 34%, rgba(56,189,248,.45) 35% 40%, transparent 41%); animation: zon-pulse 2.2s ease-in-out infinite; }

/* 2026 cohesive profile collections */
.frame-academy-laurel { --frame-a: #fbbf24; --frame-b: #a78bfa; --frame-glow: rgba(251,191,36,.56); }
.frame-academy-laurel .avatar-img, .frame-academy-laurel.zon-preview-avatar { border: 3px double #fbbf24; box-shadow: 0 0 0 2px rgba(167,139,250,.18), 0 0 22px var(--frame-glow); }
.frame-academy-laurel::after { background: conic-gradient(from 32deg, transparent 0 8%, #fde68a 9% 11%, transparent 12% 39%, #c4b5fd 40% 42%, transparent 43% 71%, #fde68a 72% 74%, transparent 75%); animation: zon-orbit 10s linear infinite; }

.frame-nexa-signal { --frame-a: #22d3ee; --frame-b: #8b5cf6; --frame-glow: rgba(34,211,238,.62); }
.frame-nexa-signal .avatar-img, .frame-nexa-signal.zon-preview-avatar { border: 3px solid #22d3ee; box-shadow: -2px 0 #8b5cf6, 2px 0 #06b6d4, 0 0 22px var(--frame-glow); }
.frame-nexa-signal::after { background: repeating-conic-gradient(from 0deg, rgba(34,211,238,.92) 0 2deg, transparent 3deg 19deg, rgba(139,92,246,.82) 20deg 22deg, transparent 23deg 42deg); animation: zon-orbit 7s steps(18) infinite; }

.frame-moonlit-ink { --frame-a: #94a3b8; --frame-b: #1e3a8a; --frame-glow: rgba(96,165,250,.38); }
.frame-moonlit-ink .avatar-img, .frame-moonlit-ink.zon-preview-avatar { border: 3px solid #64748b; box-shadow: inset 0 0 16px rgba(30,58,138,.3), 0 0 18px var(--frame-glow); }
.frame-moonlit-ink::after { background: radial-gradient(circle at 72% 18%, #e2e8f0 0 7%, #64748b 8% 9%, transparent 10%), conic-gradient(from 180deg, transparent, rgba(59,130,246,.4), transparent 42%); animation: zon-orbit-reverse 12s linear infinite; }

.frame-sakura-shogun { --frame-a: #f9a8d4; --frame-b: #c4b5fd; --frame-glow: rgba(244,114,182,.7); }
.frame-sakura-shogun .avatar-img, .frame-sakura-shogun.zon-preview-avatar { border: 4px solid transparent; background: linear-gradient(#111827,#111827) padding-box, conic-gradient(#f9a8d4,#fff,#a78bfa,#fb7185,#f9a8d4) border-box; box-shadow: 0 0 24px var(--frame-glow); }
.frame-sakura-shogun::before { background: radial-gradient(ellipse at 14% 22%, #fbcfe8 0 4%, transparent 5%), radial-gradient(ellipse at 84% 28%, #fb7185 0 4%, transparent 5%), radial-gradient(ellipse at 38% 88%, #e9d5ff 0 4%, transparent 5%); animation: zon-orbit 8s linear infinite; }
.frame-sakura-shogun::after { border: 2px dotted rgba(251,207,232,.72); animation: zon-orbit-reverse 11s linear infinite; }

.frame-paper-crane { --frame-a: #f8fafc; --frame-b: #f0abfc; --frame-glow: rgba(248,250,252,.55); }
.frame-paper-crane .avatar-img, .frame-paper-crane.zon-preview-avatar { border: 3px solid #e2e8f0; box-shadow: 0 0 20px var(--frame-glow), 0 0 28px rgba(240,171,252,.22); }
.frame-paper-crane::after { background: conic-gradient(from 45deg, transparent 0 10%, rgba(255,255,255,.88) 11% 14%, transparent 15% 43%, rgba(240,171,252,.75) 44% 47%, transparent 48% 76%, rgba(196,181,253,.82) 77% 80%, transparent 81%); clip-path: polygon(50% 0, 62% 34%, 100% 50%, 64% 62%, 50% 100%, 37% 64%, 0 50%, 35% 37%); animation: zon-orbit 9s ease-in-out infinite; }

.frame-eclipse-crown { --frame-a: #fb7185; --frame-b: #f59e0b; --frame-glow: rgba(251,113,133,.74); }
.frame-eclipse-crown .avatar-img, .frame-eclipse-crown.zon-preview-avatar { border: 4px solid #09090b; box-shadow: 0 0 0 2px rgba(251,113,133,.72), 0 0 28px var(--frame-glow), inset 0 0 20px #000; }
.frame-eclipse-crown::before { background: repeating-conic-gradient(from 0deg, rgba(251,191,36,.8) 0 3deg, transparent 4deg 15deg); filter: blur(3px); opacity: .72; animation: zon-orbit 12s linear infinite; }
.frame-eclipse-crown::after { inset: -22% -7% auto; height: 37%; background: linear-gradient(130deg, transparent 14%, #fb7185 15% 26%, transparent 27% 42%, #fbbf24 43% 56%, transparent 57% 72%, #fb7185 73% 84%, transparent 85%); }

.frame-celestial-archive { --frame-a: #fbbf24; --frame-b: #67e8f9; --frame-glow: rgba(251,191,36,.7); }
.frame-celestial-archive .avatar-img, .frame-celestial-archive.zon-preview-avatar { border: 4px double #fde68a; box-shadow: 0 0 26px var(--frame-glow), 0 0 40px rgba(103,232,249,.22); }
.frame-celestial-archive::before { background: conic-gradient(from 0deg, transparent 0 12%, #fde68a 13% 14%, transparent 15% 37%, #67e8f9 38% 39%, transparent 40% 62%, #fff 63% 64%, transparent 65%); animation: zon-orbit 9s linear infinite; }
.frame-celestial-archive::after { background: radial-gradient(circle at 50% 0%, #fff 0 3%, transparent 4%), radial-gradient(circle at 90% 58%, #67e8f9 0 3%, transparent 4%), radial-gradient(circle at 16% 78%, #fbbf24 0 3%, transparent 4%); animation: zon-orbit-reverse 5s linear infinite; }

.frame-dragon-script { --frame-a: #34d399; --frame-b: #fbbf24; --frame-glow: rgba(52,211,153,.68); }
.frame-dragon-script .avatar-img, .frame-dragon-script.zon-preview-avatar { border: 4px solid #065f46; box-shadow: 0 0 0 2px rgba(251,191,36,.28), 0 0 28px var(--frame-glow); }
.frame-dragon-script::before { background: conic-gradient(from 20deg, transparent 0 8%, #34d399 9% 13%, transparent 14% 31%, #fbbf24 32% 35%, transparent 36% 58%, #6ee7b7 59% 63%, transparent 64%); filter: blur(2px); animation: zon-orbit 6s ease-in-out infinite; }
.frame-dragon-script::after { border: 2px dashed rgba(253,230,138,.72); border-left-color: transparent; animation: zon-orbit-reverse 8s linear infinite; }

.frame-seraph-halo { --frame-a: #fff; --frame-b: #fde68a; --frame-glow: rgba(255,255,255,.86); }
.frame-seraph-halo .avatar-img, .frame-seraph-halo.zon-preview-avatar { border: 4px solid #fff; box-shadow: 0 0 28px var(--frame-glow), 0 0 52px rgba(253,230,138,.38); }
.frame-seraph-halo::before { inset: -22%; background: repeating-conic-gradient(from 0deg, rgba(255,255,255,.9) 0 2deg, transparent 3deg 12deg); filter: blur(1px); animation: zon-orbit 16s linear infinite; }
.frame-seraph-halo::after { inset: -17%; background: radial-gradient(ellipse at 0 50%, rgba(255,255,255,.86) 0 8%, transparent 9%), radial-gradient(ellipse at 100% 50%, rgba(255,255,255,.86) 0 8%, transparent 9%), conic-gradient(transparent, rgba(253,230,138,.35), transparent 38%); animation: zon-breathe 3.2s ease-in-out infinite; }

.frame-fate-weaver { --frame-a: #c4b5fd; --frame-b: #f0abfc; --frame-glow: rgba(196,181,253,.78); }
.frame-fate-weaver .avatar-img, .frame-fate-weaver.zon-preview-avatar { border: 4px solid transparent; background: linear-gradient(#090a14,#090a14) padding-box, conic-gradient(#c4b5fd,#f0abfc,#67e8f9,#c4b5fd) border-box; box-shadow: 0 0 30px var(--frame-glow); }
.frame-fate-weaver::before { background: repeating-conic-gradient(from 45deg, transparent 0 10deg, rgba(240,171,252,.72) 11deg 12deg, transparent 13deg 26deg, rgba(103,232,249,.65) 27deg 28deg); animation: zon-orbit 7s linear infinite; }
.frame-fate-weaver::after { background: radial-gradient(circle at 50% 0%, #fff 0 3%, transparent 4%), radial-gradient(circle at 100% 50%, #f0abfc 0 3%, transparent 4%), radial-gradient(circle at 50% 100%, #67e8f9 0 3%, transparent 4%), radial-gradient(circle at 0 50%, #c4b5fd 0 3%, transparent 4%); animation: zon-orbit-reverse 4s linear infinite; }

.frame-infinite-library { --frame-a: #a78bfa; --frame-b: #fbbf24; --frame-glow: rgba(167,139,250,.84); }
.frame-infinite-library .avatar-img, .frame-infinite-library.zon-preview-avatar { border: 4px double #c4b5fd; box-shadow: 0 0 32px var(--frame-glow), 0 0 50px rgba(251,191,36,.24), inset 0 0 20px #020617; }
.frame-infinite-library::before { background: repeating-conic-gradient(from 0deg, #a78bfa 0 2deg, transparent 3deg 12deg, #fbbf24 13deg 14deg, transparent 15deg 29deg); filter: blur(4px); opacity: .72; animation: zon-orbit 8s linear infinite; }
.frame-infinite-library::after { inset: -12%; border: 3px double rgba(253,230,138,.7); box-shadow: inset 0 0 18px rgba(167,139,250,.42); animation: zon-fade-phase 3.6s ease-in-out infinite; }

/* Collection title seals */
.profile-title-badge.title-master-author,
.profile-title-badge.title-nexa-vanguard,
.profile-title-badge.title-rift-cartographer,
.profile-title-badge.title-archive-warden,
.profile-title-badge.title-reality-editor {
    border: 1px solid color-mix(in srgb, var(--title-seal, #a78bfa), transparent 38%) !important;
    background: linear-gradient(110deg, color-mix(in srgb, var(--title-seal, #a78bfa), transparent 82%), rgba(2,6,23,.75)) !important;
    box-shadow: 0 0 20px color-mix(in srgb, var(--title-seal, #a78bfa), transparent 72%) !important;
    color: #fff !important;
    letter-spacing: .04em;
}
.title-master-author { --title-seal: #fbbf24; }
.title-nexa-vanguard { --title-seal: #22d3ee; }
.title-rift-cartographer { --title-seal: #fb7185; }
.title-archive-warden { --title-seal: #fde68a; }
.title-reality-editor { --title-seal: #f0abfc; }

/* Collection profile themes and market miniatures */
.profile-wrapper.theme-living-manuscript {
    --profile-accent: #fbbf24;
    --profile-accent-rgb: 251, 191, 36;
    background: radial-gradient(circle at 16% 12%, rgba(251,191,36,.14), transparent 25rem), linear-gradient(145deg, #100d13, #181324 54%, #0d111b);
}
.profile-wrapper.theme-nexa-terminal {
    --profile-accent: #22d3ee;
    --profile-accent-rgb: 34, 211, 238;
    background: repeating-linear-gradient(90deg, rgba(34,211,238,.025) 0 1px, transparent 1px 62px), repeating-linear-gradient(0deg, rgba(139,92,246,.025) 0 1px, transparent 1px 62px), linear-gradient(145deg, #020617, #071827 55%, #110c24);
}
.profile-wrapper.theme-crimson-eclipse {
    --profile-accent: #fb7185;
    --profile-accent-rgb: 251, 113, 133;
    background: radial-gradient(circle at 76% 10%, #050505 0 7rem, rgba(251,113,133,.18) 8rem, transparent 16rem), linear-gradient(145deg, #12070b, #220c18 54%, #09090b);
}
.profile-wrapper.theme-celestial-paper {
    --profile-accent: #fbbf24;
    --profile-accent-rgb: 251, 191, 36;
    background: radial-gradient(circle at 72% 12%, rgba(103,232,249,.11), transparent 22rem), repeating-linear-gradient(35deg, rgba(253,230,138,.025) 0 1px, transparent 1px 54px), linear-gradient(145deg, #07111f, #11162b 54%, #080b16);
}
.profile-wrapper.theme-dream-archive {
    --profile-accent: #f0abfc;
    --profile-accent-rgb: 240, 171, 252;
    background: radial-gradient(ellipse at 18% 16%, rgba(240,171,252,.2), transparent 28rem), radial-gradient(ellipse at 78% 24%, rgba(103,232,249,.16), transparent 30rem), linear-gradient(145deg, #100d22, #17183b 54%, #071923);
}
.profile-wrapper:is(.theme-living-manuscript,.theme-nexa-terminal,.theme-crimson-eclipse,.theme-celestial-paper,.theme-dream-archive) .profile-banner {
    background-image: radial-gradient(circle at 18% 28%, rgba(var(--profile-accent-rgb),.34), transparent 23rem), radial-gradient(circle at 78% 18%, rgba(255,255,255,.09), transparent 25rem), linear-gradient(118deg, #080b16, color-mix(in srgb, var(--profile-accent) 15%, #101326), #07121d) !important;
}
.archive-theme-artifact:is(.theme-living-manuscript,.theme-nexa-terminal,.theme-crimson-eclipse,.theme-celestial-paper,.theme-dream-archive) span {
    background: var(--theme-preview) !important;
}
.archive-theme-artifact.theme-living-manuscript { --theme-preview: radial-gradient(circle at 25% 20%, rgba(251,191,36,.42), transparent 45%), linear-gradient(135deg,#181324,#100d13); }
.archive-theme-artifact.theme-nexa-terminal { --theme-preview: repeating-linear-gradient(90deg,rgba(34,211,238,.2) 0 1px,transparent 1px 18px),linear-gradient(135deg,#020617,#0e1930); }
.archive-theme-artifact.theme-crimson-eclipse { --theme-preview: radial-gradient(circle at 72% 28%,#050505 0 14%,rgba(251,113,133,.5) 15% 20%,transparent 21%),linear-gradient(135deg,#220c18,#09090b); }
.archive-theme-artifact.theme-celestial-paper { --theme-preview: radial-gradient(circle at 20% 20%,rgba(253,230,138,.4),transparent 35%),linear-gradient(135deg,#07111f,#17183b); }
.archive-theme-artifact.theme-dream-archive { --theme-preview: radial-gradient(circle at 20% 20%,rgba(240,171,252,.46),transparent 42%),radial-gradient(circle at 80% 70%,rgba(103,232,249,.32),transparent 40%),#100d22; }

/* Collection name effects */
.profile-name-effect.name-moon-chrome,
.archive-name-artifact.name-moon-chrome strong {
    background: linear-gradient(100deg,#64748b,#f8fafc 38%,#60a5fa 55%,#e2e8f0 72%,#64748b);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    animation: zon-chrome-scan 5.5s linear infinite;
}
.profile-name-effect.name-sakura-bloom,
.archive-name-artifact.name-sakura-bloom strong {
    color: #fce7f3;
    text-shadow: 0 0 8px #fb7185, 0 0 24px rgba(240,171,252,.65);
    animation: zon-pulse 3.4s ease-in-out infinite;
}
.profile-name-effect.name-nexa-cipher,
.archive-name-artifact.name-nexa-cipher strong {
    color: #cffafe;
    text-shadow: -1px 0 #8b5cf6, 1px 0 #22d3ee, 0 0 18px rgba(34,211,238,.62);
    animation: zon-glitch 2.8s steps(2) infinite;
}
.profile-name-effect.name-void-whisper,
.archive-name-artifact.name-void-whisper strong {
    background: linear-gradient(90deg,#f8fafc,#a78bfa 38%,#020617 52%,#f0abfc 70%,#f8fafc);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    filter: drop-shadow(0 0 9px rgba(139,92,246,.6));
    animation: zon-chrome-scan 6s linear infinite reverse;
}

/* Collection profile atmospheres */
.profile-wrapper:is(.profile-fx-petal-drift,.profile-fx-rune-orbit,.profile-fx-digital-rain,.profile-fx-celestial-dust)::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.profile-wrapper.profile-fx-petal-drift::after {
    background-image: radial-gradient(ellipse at 12% 12%,rgba(251,207,232,.5) 0 2px,transparent 3px),radial-gradient(ellipse at 68% 22%,rgba(251,113,133,.35) 0 2px,transparent 3px),radial-gradient(ellipse at 84% 72%,rgba(240,171,252,.4) 0 2px,transparent 3px);
    background-size: 240px 260px;
    animation: zon-petal-drift 18s linear infinite;
}
.profile-wrapper.profile-fx-rune-orbit::after {
    background: repeating-conic-gradient(from 0deg at 76% 22%,transparent 0 14deg,rgba(251,191,36,.06) 15deg 16deg,transparent 17deg 34deg);
    animation: zon-spin 42s linear infinite;
}
.profile-wrapper.profile-fx-digital-rain::after {
    opacity: .28;
    background-image: repeating-linear-gradient(180deg,rgba(34,211,238,.28) 0 1px,transparent 1px 18px),repeating-linear-gradient(90deg,transparent 0 46px,rgba(139,92,246,.18) 47px 48px,transparent 49px 92px);
    background-size: 92px 180px;
    animation: zon-digital-rain 14s linear infinite;
}
.profile-wrapper.profile-fx-celestial-dust::after {
    opacity: .46;
    background-image: radial-gradient(circle at 12% 14%,#fde68a 0 1px,transparent 2px),radial-gradient(circle at 44% 38%,#fff 0 1px,transparent 2px),radial-gradient(circle at 74% 18%,#67e8f9 0 1px,transparent 2px),radial-gradient(circle at 88% 62%,#fbbf24 0 1px,transparent 2px);
    background-size: 230px 210px;
    animation: zon-celestial-dust 24s linear infinite;
}
.archive-profile-fx-artifact.profile-fx-petal-drift > span { background-image: radial-gradient(ellipse at 20% 30%,#fbcfe8 0 2px,transparent 3px),radial-gradient(ellipse at 78% 20%,#fb7185 0 2px,transparent 3px),radial-gradient(ellipse at 60% 80%,#e9d5ff 0 2px,transparent 3px); }
.archive-profile-fx-artifact.profile-fx-rune-orbit > span { background: repeating-conic-gradient(from 0deg,rgba(251,191,36,.45) 0 2deg,transparent 3deg 22deg),radial-gradient(circle,rgba(139,92,246,.28),transparent 64%); }
.archive-profile-fx-artifact.profile-fx-digital-rain > span { background: repeating-linear-gradient(180deg,rgba(34,211,238,.35) 0 1px,transparent 1px 12px),linear-gradient(135deg,rgba(139,92,246,.2),transparent); }
.archive-profile-fx-artifact.profile-fx-celestial-dust > span { background-image: radial-gradient(circle at 20% 30%,#fde68a 0 1px,transparent 2px),radial-gradient(circle at 78% 20%,#fff 0 1px,transparent 2px),radial-gradient(circle at 60% 80%,#67e8f9 0 1px,transparent 2px); }

@keyframes zon-petal-drift { to { background-position: 80px 320px; } }
@keyframes zon-digital-rain { to { background-position: 0 360px, 0 180px; } }
@keyframes zon-celestial-dust { to { background-position: 120px 260px; } }
@keyframes zon-chrome-scan { to { background-position: 220% center; } }

@media (prefers-reduced-motion: reduce) {
    :is(.avatar-frame-wrapper,.zon-preview-avatar,.profile-title-badge,.archive-name-artifact,.archive-profile-fx-artifact),
    :is(.avatar-frame-wrapper,.zon-preview-avatar,.profile-title-badge,.archive-name-artifact,.archive-profile-fx-artifact)::before,
    :is(.avatar-frame-wrapper,.zon-preview-avatar,.profile-title-badge,.archive-name-artifact,.archive-profile-fx-artifact)::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .profile-wrapper:is(.profile-fx-petal-drift,.profile-fx-rune-orbit,.profile-fx-digital-rain,.profile-fx-celestial-dust)::after {
        animation: none !important;
    }
}

@media (max-width: 1024px) {
    .zon-cosmetic-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .zon-market-shell {
        padding: 16px 16px 96px;
    }

    .zon-market-hero {
        display: grid;
    }

    .zon-balance-card {
        min-width: 0;
        text-align: left;
    }

    .zon-cosmetic-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .novzon-leaderboard-page :is(
        .leaderboard-avatar-top,
        .avatar-frame-leaderboard-top
    ) {
        --avatar-frame-size: clamp(72px, 20vw, 88px);
        --avatar-frame-bleed: 6px;
    }

    .novzon-leaderboard-page :is(
        .leaderboard-avatar-champion,
        .avatar-frame-leaderboard-champion
    ) {
        --avatar-frame-size: clamp(96px, 30vw, 120px);
        --avatar-frame-bleed: 8px;
    }
}

/* Mobile profile cosmetic safety patch */
@media (max-width: 900px) {
    .profile-wrapper .profile-avatar-frame {
        display: inline-grid;
        place-items: center;
    }

    .profile-wrapper .profile-avatar-frame-ring {
        display: block !important;
        inset: -9px;
        z-index: 1;
        transform: scale(0.94);
        transform-origin: center;
    }

    .profile-wrapper .profile-avatar-frame .avatar-img {
        position: relative;
        z-index: 3;
    }

    .profile-wrapper .profile-avatar-frame-ring[data-cosmetic-frame]::before,
    .profile-wrapper .profile-avatar-frame-ring[data-cosmetic-frame]::after {
        inset: 1px;
    }

}

.nx-avatar-halo .avatar-img {
    display: grid;
    place-items: center;
}

/*
 * Production frame guard: overlay geometry is always derived from the
 * explicitly sized avatar wrapper, never from a surrounding card or header.
 */
.avatar-frame-wrapper[data-cosmetic-frame]::before,
.avatar-frame-wrapper[data-cosmetic-frame]::after {
    inset: auto;
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: calc(100% + (var(--avatar-frame-bleed) * 2));
    height: calc(100% + (var(--avatar-frame-bleed) * 2));
    min-width: 0;
    min-height: 0;
    max-width: calc(100% + (var(--avatar-frame-bleed) * 2));
    max-height: calc(100% + (var(--avatar-frame-bleed) * 2));
    translate: -50% -50%;
    transform-origin: center;
    box-sizing: border-box;
}

.avatar-frame-header[data-cosmetic-frame]::before,
.avatar-frame-header[data-cosmetic-frame]::after {
    max-width: 44px;
    max-height: 44px;
}