/* =========================================================
   Aero Premium Tech Theme
   High-end cyber / glass / neon ambient style
   ========================================================= */

:root {
    --tech-cyan: #22d3ee;
    --tech-blue: #3b82f6;
    --tech-violet: #8b5cf6;
    --tech-pink: #f472b6;
    --tech-lime: #34d399;
    --tech-grid: rgba(56, 189, 248, .08);
    --tech-glow: 0 0 28px rgba(34, 211, 238, .22);
    --tech-surface: rgba(10, 16, 32, .72);
    --tech-surface-2: rgba(15, 23, 42, .78);
    --tech-border: rgba(125, 211, 252, .18);
}

/* ---------- Ambient background for storefront ---------- */
body.store-home,
body.support-page,
body.tools-page,
body:not(.admin-page) {
    background:
        radial-gradient(1200px 600px at 12% -10%, rgba(34, 211, 238, .16), transparent 55%),
        radial-gradient(900px 500px at 90% 0%, rgba(139, 92, 246, .14), transparent 50%),
        radial-gradient(700px 420px at 50% 100%, rgba(59, 130, 246, .10), transparent 55%),
        linear-gradient(180deg, #070b16 0%, #0a1020 45%, #070b14 100%) !important;
    color: #dbe7f5;
}

body.store-home::before,
body.support-page::before,
body.tools-page::before,
body:not(.admin-page)::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -2;
    background-image:
        linear-gradient(rgba(34, 211, 238, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, .05) 1px, transparent 1px),
        radial-gradient(circle at 20% 20%, rgba(56, 189, 248, .10), transparent 28%),
        radial-gradient(circle at 80% 30%, rgba(167, 139, 250, .10), transparent 26%),
        var(--site-bg-image, none);
    background-size: 48px 48px, 48px 48px, auto, auto, cover;
    background-position: center, center, center, center, center;
    opacity: .9;
    animation: techGridDrift 28s linear infinite;
}

body.store-home::after,
body.support-page::after,
body.tools-page::after,
body:not(.admin-page)::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(180deg, transparent 0%, rgba(7, 11, 20, .18) 48%, rgba(7, 11, 20, .55) 100%),
        radial-gradient(circle at 50% 0%, rgba(34, 211, 238, .08), transparent 42%);
}

@keyframes techGridDrift {
    0% { background-position: 0 0, 0 0, center, center, center; }
    100% { background-position: 0 48px, 48px 0, center, center, center; }
}

/* floating light orbs */
body.store-home .page-wrap,
body.support-page .page-wrap,
body.tools-page .page-wrap {
    position: relative;
}

/* ---------- Header / Nav glass capsule ---------- */
.site-header {
    position: sticky;
    top: 10px;
    z-index: 50;
    margin: 10px auto 22px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border: 1px solid var(--tech-border);
    border-radius: 22px;
    background: linear-gradient(135deg, rgba(12, 18, 36, .82), rgba(8, 12, 24, .76));
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08), var(--tech-glow);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
}

.brand-text {
    background: linear-gradient(90deg, #67e8f9, #a78bfa 55%, #f0abfc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    text-shadow: 0 0 24px rgba(103, 232, 249, .25);
    letter-spacing: .8px;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.nav-link,
.theme-toggle {
    position: relative;
    overflow: hidden;
    border: 1px solid transparent !important;
    background: rgba(255, 255, 255, .03) !important;
    color: #b6c7dd !important;
    transition: transform .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

.nav-link::before,
.theme-toggle::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.14) 45%, transparent 70%);
    transform: translateX(-120%);
    transition: transform .55s ease;
}

.nav-link:hover::before,
.theme-toggle:hover::before,
.nav-link.active::before {
    transform: translateX(120%);
}

.nav-link:hover,
.theme-toggle:hover {
    color: #f8fbff !important;
    border-color: rgba(103, 232, 249, .35) !important;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .12), 0 8px 24px rgba(34, 211, 238, .12);
    transform: translateY(-1px);
}

.nav-link.active {
    color: #041018 !important;
    background: linear-gradient(135deg, #67e8f9, #818cf8) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 28px rgba(56, 189, 248, .28);
    font-weight: 700;
}

/* ---------- Cards / panels ---------- */
.product-card,
.support-card,
.query-card,
.tool-card,
.announcement,
.category-tabs,
.stat-card,
.card-block,
.support-hero,
.ai-settings-card,
.ai-list-card,
.ai-thread-card {
    position: relative;
    border: 1px solid var(--tech-border) !important;
    background:
        linear-gradient(180deg, rgba(16, 24, 45, .86), rgba(8, 12, 24, .9)),
        radial-gradient(circle at top right, rgba(56, 189, 248, .10), transparent 42%) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06) !important;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    overflow: hidden;
}

.product-card::after,
.support-card::after,
.stat-card::after,
.card-block::after {
    content: '';
    position: absolute;
    inset: -1px;
    pointer-events: none;
    background: linear-gradient(120deg, transparent 20%, rgba(103, 232, 249, .12), transparent 70%);
    opacity: 0;
    transition: opacity .35s ease;
}

.product-card:hover,
.support-card:hover,
.tool-card:hover,
.stat-card:hover {
    transform: translateY(-4px) scale(1.01);
    border-color: rgba(103, 232, 249, .42) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .38), 0 0 0 1px rgba(34, 211, 238, .12), 0 0 40px rgba(56, 189, 248, .12) !important;
}

.product-card:hover::after,
.support-card:hover::after,
.stat-card:hover::after,
.card-block:hover::after {
    opacity: 1;
}

/* product title glow */
.product-name,
.product-title,
.brand-text,
.block-title,
.support-hero h1 {
    text-shadow: 0 0 18px color-mix(in srgb, var(--product-glow-color, #67e8f9) 35%, transparent);
}

/* ---------- Buttons ---------- */
.btn,
button.btn,
.btn-primary,
.btn-ghost,
.btn-danger,
.btn-sm {
    position: relative;
    overflow: hidden;
    border-radius: 12px !important;
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background .18s ease !important;
}

.btn-primary,
button.btn-primary {
    background: linear-gradient(135deg, #22d3ee, #6366f1 55%, #a855f7) !important;
    color: #041018 !important;
    border: 0 !important;
    box-shadow: 0 10px 28px rgba(56, 189, 248, .28), inset 0 1px 0 rgba(255,255,255,.25);
    font-weight: 800;
}

.btn-primary:hover,
button.btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(99, 102, 241, .35);
}

.btn-ghost,
button.btn-ghost {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(148, 163, 184, .2) !important;
    color: #dbe7f5 !important;
}

.btn-ghost:hover,
button.btn-ghost:hover {
    border-color: rgba(103, 232, 249, .4) !important;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .12), 0 8px 24px rgba(34, 211, 238, .12);
}

/* ---------- Inputs ---------- */
.form-input,
.form-select,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
textarea,
select {
    background: rgba(7, 12, 24, .72) !important;
    border: 1px solid rgba(148, 163, 184, .18) !important;
    color: #e8f1ff !important;
    border-radius: 12px !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.form-input:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: rgba(34, 211, 238, .55) !important;
    box-shadow: 0 0 0 3px rgba(34, 211, 238, .14), 0 0 24px rgba(56, 189, 248, .12) !important;
    outline: none !important;
}

/* ---------- Stats / badges / chips ---------- */
.badge,
.support-unread,
.category-tab.active,
.sku-option.active {
    box-shadow: 0 0 18px rgba(34, 211, 238, .16);
}

.category-tabs,
.filter-form,
.search-box {
    border-radius: 18px !important;
}

/* ---------- Support realtime strip ---------- */
.support-stats,
.realtime-stats,
[class*="support-stat"] {
    border-radius: 18px;
}

/* ---------- Footer ---------- */
.site-footer,
footer {
    border-top: 1px solid rgba(125, 211, 252, .12) !important;
    color: #7f93ad !important;
}

/* ---------- AI widget polish ---------- */
.ai-support-fab {
    background: linear-gradient(135deg, rgba(8, 14, 28, .92), rgba(14, 22, 42, .9)) !important;
    border-color: rgba(103, 232, 249, .35) !important;
    box-shadow: 0 18px 50px rgba(0,0,0,.42), 0 0 30px rgba(56, 189, 248, .18) !important;
}

.ai-support-panel {
    border-color: rgba(125, 211, 252, .24) !important;
    box-shadow: 0 28px 90px rgba(0,0,0,.55), 0 0 40px rgba(56, 189, 248, .12) !important;
}

/* ---------- Animations ---------- */
@keyframes techFadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes techPulse {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}

@keyframes techShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.product-card,
.support-card,
.tool-card,
.stat-card,
.card-block {
    animation: techFadeUp .55s ease both;
}

.product-card:nth-child(2), .support-card:nth-child(2), .stat-card:nth-child(2) { animation-delay: .05s; }
.product-card:nth-child(3), .support-card:nth-child(3), .stat-card:nth-child(3) { animation-delay: .1s; }
.product-card:nth-child(4), .support-card:nth-child(4), .stat-card:nth-child(4) { animation-delay: .15s; }
.product-card:nth-child(5), .support-card:nth-child(5), .stat-card:nth-child(5) { animation-delay: .2s; }

/* neon scanline on hero sections */
.support-hero,
.announcement {
    background-image:
        linear-gradient(135deg, rgba(16,24,45,.9), rgba(8,12,24,.92)),
        linear-gradient(90deg, transparent, rgba(103,232,249,.08), transparent) !important;
    background-size: auto, 200% 100%;
    animation: techShimmer 7s linear infinite;
}

/* ---------- Admin premium tech ---------- */
body.admin-page {
    background:
        radial-gradient(900px 500px at 0% 0%, rgba(34, 211, 238, .12), transparent 50%),
        radial-gradient(800px 480px at 100% 0%, rgba(139, 92, 246, .12), transparent 48%),
        linear-gradient(180deg, #070b16, #0a1020 50%, #070b14) !important;
    color: #d7e4f5;
}

body.admin-page::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(34, 211, 238, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 211, 238, .045) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .7;
    animation: techGridDrift 36s linear infinite;
}

body.admin-page .admin-layout,
body.admin-page .main-content,
body.admin-page .content-area {
    position: relative;
    z-index: 1;
}

body.admin-page .sidebar {
    background: linear-gradient(180deg, rgba(10, 16, 32, .94), rgba(7, 11, 22, .96)) !important;
    border-right: 1px solid rgba(125, 211, 252, .14) !important;
    box-shadow: 18px 0 50px rgba(0, 0, 0, .28);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

body.admin-page .sidebar-logo {
    background: linear-gradient(90deg, #67e8f9, #a78bfa);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

body.admin-page .nav-item {
    border: 1px solid transparent;
    border-radius: 12px !important;
}

body.admin-page .nav-item:hover {
    background: rgba(34, 211, 238, .08) !important;
    border-color: rgba(34, 211, 238, .16);
    color: #f3f8ff !important;
}

body.admin-page .nav-item.active {
    background: linear-gradient(135deg, rgba(34, 211, 238, .16), rgba(99, 102, 241, .16)) !important;
    color: #7dd3fc !important;
    border-color: rgba(103, 232, 249, .22);
    box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .08), 0 0 24px rgba(34, 211, 238, .08);
}

body.admin-page .main-content,
body.admin-page .content-area,
body.admin-page .topbar {
    background: transparent !important;
}

body.admin-page .topbar {
    border-bottom: 1px solid rgba(125, 211, 252, .12) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.admin-page .card-block,
body.admin-page .stat-card,
body.admin-page .table-card,
body.admin-page .settings-grid > *,
body.admin-page .block,
body.admin-page .panel {
    border: 1px solid rgba(125, 211, 252, .16) !important;
    background:
        linear-gradient(180deg, rgba(14, 22, 42, .88), rgba(8, 12, 24, .92)),
        radial-gradient(circle at top right, rgba(56, 189, 248, .08), transparent 40%) !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
    border-radius: 16px !important;
}

body.admin-page .stat-card {
    overflow: hidden;
}

body.admin-page .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #22d3ee, #818cf8, #f472b6);
    background-size: 200% 100%;
    animation: techShimmer 4.5s linear infinite;
}

body.admin-page table,
body.admin-page .data-table {
    border-collapse: separate;
    border-spacing: 0;
}

body.admin-page th {
    color: #9fb4cc !important;
    background: rgba(255,255,255,.02) !important;
}

body.admin-page tr:hover td {
    background: rgba(34, 211, 238, .05) !important;
}

body.admin-page .alert,
body.admin-page .alert-success,
body.admin-page .alert-error {
    border-radius: 14px !important;
    border: 1px solid rgba(125, 211, 252, .16) !important;
    backdrop-filter: blur(10px);
}

body.admin-page .btn-primary {
    background: linear-gradient(135deg, #22d3ee, #6366f1) !important;
    color: #041018 !important;
}

/* subtle entrance for admin cards */
body.admin-page .card-block,
body.admin-page .stat-card {
    animation: techFadeUp .45s ease both;
}

/* keep MC / sakura theme accents working on top */
body.theme-sakura {
    --accent: #f472b6;
    --accent-hover: #f9a8d4;
    --accent-dim: rgba(244, 114, 182, .16);
}
body.theme-mc-grass {
    --accent: #5ee06f;
    --accent-hover: #86efac;
    --accent-dim: rgba(94, 224, 111, .16);
}
body.theme-mc-cave {
    --accent: #93c5fd;
    --accent-hover: #bfdbfe;
    --accent-dim: rgba(147, 197, 253, .16);
}
body.theme-mc-nether {
    --accent: #fb923c;
    --accent-hover: #fdba74;
    --accent-dim: rgba(251, 146, 60, .16);
}

/* reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* mobile polish */
@media (max-width: 768px) {
    .header-inner {
        border-radius: 18px;
        padding: 10px 12px;
    }
    .site-header {
        top: 6px;
        margin-bottom: 16px !important;
    }
    .product-card:hover,
    .support-card:hover,
    .stat-card:hover {
        transform: none;
    }
}
/* Ambient orbs + pointer glow */
.aero-tech-orbs {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}
.aero-tech-orbs .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(18px);
    opacity: .35;
    animation: techOrbFloat 12s ease-in-out infinite;
}
.aero-tech-orbs .orb-a {
    width: 280px; height: 280px; left: -60px; top: 12%;
    background: radial-gradient(circle, rgba(34,211,238,.55), transparent 68%);
}
.aero-tech-orbs .orb-b {
    width: 320px; height: 320px; right: -80px; top: 28%;
    background: radial-gradient(circle, rgba(139,92,246,.48), transparent 68%);
    animation-delay: -4s;
}
.aero-tech-orbs .orb-c {
    width: 240px; height: 240px; left: 35%; bottom: -40px;
    background: radial-gradient(circle, rgba(244,114,182,.35), transparent 68%);
    animation-delay: -7s;
}
@keyframes techOrbFloat {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50% { transform: translate3d(0, -24px, 0) scale(1.08); }
}

.product-card,
.support-card,
.stat-card,
.card-block {
    --mx: 50%;
    --my: 0%;
}
.product-card::before,
.support-card::before,
.stat-card::before,
body.admin-page .card-block::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(420px circle at var(--mx) var(--my), rgba(103, 232, 249, .14), transparent 45%);
    opacity: .9;
    z-index: 0;
}
.product-card > *,
.support-card > *,
.stat-card > *,
.card-block > * {
    position: relative;
    z-index: 1;
}
.tech-inview {
    animation: techFadeUp .6s ease both;
    animation-delay: var(--tech-delay, 0s);
}
/* Extra premium details */
.page-wrap,
.admin-layout,
.main-content,
.content-area {
    position: relative;
    z-index: 1;
}

.site-header .header-inner::after {
    content: '';
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(103,232,249,.75), rgba(167,139,250,.75), transparent);
    opacity: .8;
    animation: techPulse 2.8s ease-in-out infinite;
}

.header-inner {
    position: relative;
}

.product-card .product-price,
.price,
.amount,
.stat-value,
.stat-card .value {
    background: linear-gradient(90deg, #67e8f9, #a5b4fc 55%, #f0abfc);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    font-weight: 800;
}

.announcement,
.support-hero,
.block-title,
.page-title {
    letter-spacing: .2px;
}

/* glowing focus rings for accessibility */
.nav-link:focus-visible,
.theme-toggle:focus-visible,
.btn:focus-visible,
.form-input:focus-visible {
    outline: 2px solid rgba(103, 232, 249, .7);
    outline-offset: 2px;
}

/* floating widgets stay above orbs, but keep native positioning */
.music-player,
.aero-music,
.toast-container {
    position: relative;
    z-index: 80;
}
.ai-support-widget {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
    top: auto !important;
    z-index: 9990 !important;
    margin: 0 !important;
    transform: none !important;
}

/* admin table modern separators */
body.admin-page td,
body.admin-page th {
    border-color: rgba(148, 163, 184, .10) !important;
}

body.admin-page .sidebar-nav {
    scrollbar-width: thin;
}

/* soft loading shimmer utility */
.tech-shimmer {
    background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(103,232,249,.12), rgba(255,255,255,.04));
    background-size: 200% 100%;
    animation: techShimmer 1.8s linear infinite;
}
/* =========================================================
   Black Hole Splash (realistic cool-tone cinematic entry)
   ========================================================= */
.aero-splash.aero-splash-blackhole {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    background: #000 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition: opacity .9s cubic-bezier(.22,.7,.2,1), visibility .9s cubic-bezier(.22,.7,.2,1) !important;
}

.aero-splash.aero-splash-blackhole::before,
.aero-splash.aero-splash-blackhole::after {
    content: none !important;
    display: none !important;
}

.aero-splash.aero-splash-blackhole.hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.aero-splash-blackhole .bh-void {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 48%, rgba(12, 16, 28, .5) 0%, rgba(2, 4, 10, .94) 46%, #000 78%),
        radial-gradient(ellipse 100% 70% at 50% 100%, rgba(20, 30, 55, .18), transparent 58%);
}

.aero-splash-blackhole .bh-stars {
    position: absolute;
    inset: -12%;
    background-image:
        radial-gradient(1px 1px at 7% 16%, rgba(255,255,255,.92), transparent),
        radial-gradient(1px 1px at 16% 74%, rgba(210, 230, 255, .78), transparent),
        radial-gradient(1.3px 1.3px at 27% 34%, rgba(255,255,255,.86), transparent),
        radial-gradient(1px 1px at 39% 12%, rgba(200, 220, 255, .8), transparent),
        radial-gradient(1px 1px at 54% 70%, rgba(255,255,255,.74), transparent),
        radial-gradient(1.4px 1.4px at 64% 26%, rgba(190, 220, 255, .86), transparent),
        radial-gradient(1px 1px at 76% 56%, rgba(255,255,255,.72), transparent),
        radial-gradient(1px 1px at 87% 20%, rgba(210, 225, 255, .8), transparent),
        radial-gradient(1.2px 1.2px at 12% 48%, rgba(255,255,255,.7), transparent),
        radial-gradient(1px 1px at 91% 82%, rgba(255,255,255,.66), transparent),
        radial-gradient(1px 1px at 47% 88%, rgba(180, 210, 255, .76), transparent),
        radial-gradient(1px 1px at 33% 92%, rgba(255,255,255,.62), transparent),
        radial-gradient(1px 1px at 61% 44%, rgba(230, 240, 255, .55), transparent),
        radial-gradient(1px 1px at 22% 58%, rgba(255,255,255,.5), transparent);
    background-size: 100% 100%;
    opacity: .48;
    transform: scale(1.06);
    animation: bhStarsIdle 24s linear infinite;
    will-change: transform, opacity;
}

.aero-splash-blackhole.is-playing .bh-stars {
    animation: bhStarsIdle 24s linear infinite, bhStarsPull 6.3s cubic-bezier(.16,.78,.18,1) forwards;
}

.aero-splash-blackhole .bh-nebula {
    position: absolute;
    inset: -18%;
    background:
        radial-gradient(ellipse 46% 30% at 50% 52%, rgba(80, 110, 170, .14), transparent 72%),
        radial-gradient(ellipse 28% 18% at 44% 49%, rgba(120, 160, 220, .08), transparent 74%),
        radial-gradient(ellipse 24% 16% at 58% 53%, rgba(90, 120, 180, .07), transparent 76%);
    filter: blur(22px);
    opacity: 0;
    transform: scale(.9);
}

.aero-splash-blackhole.stage-form .bh-nebula {
    animation: bhNebulaIn 2.4s ease forwards;
}

.aero-splash-blackhole .bh-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 34%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.92) 100%);
    z-index: 5;
}

.aero-splash-blackhole .bh-stage {
    position: relative;
    z-index: 3;
    width: min(90vw, 560px);
    height: min(90vw, 560px);
    display: grid;
    place-items: center;
}

.aero-splash-blackhole .aero-blackhole {
    position: absolute;
    inset: 6%;
    display: grid;
    place-items: center;
    transform: scale(.16);
    opacity: 0;
    filter: saturate(.95) contrast(1.12) brightness(.98);
    will-change: transform, opacity, filter;
}

.aero-splash-blackhole.stage-form .aero-blackhole {
    animation: bhForm 2s cubic-bezier(.16,.84,.2,1) forwards;
}

.aero-splash-blackhole.stage-exit .aero-blackhole {
    animation: bhExit 1.4s cubic-bezier(.2,.7,.15,1) forwards;
}

.aero-splash-blackhole .bh-halo {
    position: absolute;
    width: 124%;
    height: 124%;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 44%, rgba(150, 180, 230, .05) 54%, rgba(120, 160, 220, .1) 62%, transparent 74%);
    filter: blur(8px);
    opacity: .7;
}

.aero-splash-blackhole .bh-lensing {
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            transparent 0 45%,
            rgba(255,255,255,.05) 49%,
            rgba(190, 215, 255, .2) 53%,
            rgba(140, 175, 230, .12) 58%,
            transparent 65%);
    box-shadow:
        inset 0 0 28px rgba(255,255,255,.03),
        0 0 36px rgba(100, 140, 210, .12);
    animation: bhLensingPulse 3.8s ease-in-out infinite;
    z-index: 2;
}

/* Cool astronomical accretion palette: white / soft blue / muted violet only */
.aero-splash-blackhole .bh-disk-outer,
.aero-splash-blackhole .bh-disk-mid,
.aero-splash-blackhole .bh-disk-inner {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform-style: preserve-3d;
    transform: translate(-50%, -50%) rotateX(76deg);
    background: conic-gradient(
        from 200deg,
        rgba(0, 0, 0, 0) 0deg,
        rgba(170, 190, 230, .08) 24deg,
        rgba(180, 205, 245, .28) 58deg,
        rgba(210, 225, 255, .55) 96deg,
        rgba(150, 175, 230, .42) 140deg,
        rgba(120, 145, 200, .3) 178deg,
        rgba(230, 240, 255, .72) 220deg,
        rgba(150, 175, 225, .35) 265deg,
        rgba(100, 125, 180, .12) 310deg,
        rgba(0, 0, 0, 0) 345deg,
        rgba(0, 0, 0, 0) 360deg
    );
    filter: blur(.25px) saturate(.9);
    box-shadow:
        0 0 28px rgba(120, 160, 220, .12),
        0 0 60px rgba(80, 110, 170, .08);
    z-index: 3;
    opacity: .9;
}

.aero-splash-blackhole .bh-disk-outer {
    width: 104%;
    height: 40%;
    animation: bhDiskSpin 9.5s linear infinite;
    opacity: .42;
    filter: blur(1.8px) saturate(.85);
}

.aero-splash-blackhole .bh-disk-mid {
    width: 86%;
    height: 32%;
    animation: bhDiskSpin 5.8s linear infinite reverse;
    opacity: .72;
}

.aero-splash-blackhole .bh-disk-inner {
    width: 66%;
    height: 22%;
    animation: bhDiskSpin 3.4s linear infinite;
    opacity: .95;
    filter: blur(.1px) saturate(.95) brightness(1.08);
    box-shadow:
        0 0 16px rgba(220, 235, 255, .14),
        0 0 36px rgba(140, 175, 230, .16);
}

.aero-splash-blackhole .bh-photon {
    position: absolute;
    width: 39%;
    height: 39%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%,
            transparent 0 57%,
            rgba(255,255,255,.42) 63%,
            rgba(200, 225, 255, .7) 68%,
            rgba(150, 185, 235, .22) 74%,
            transparent 81%);
    box-shadow:
        0 0 16px rgba(180, 210, 255, .22),
        inset 0 0 14px rgba(255,255,255,.08);
    z-index: 5;
    animation: bhPhotonPulse 2.8s ease-in-out infinite;
}

.aero-splash-blackhole .bh-shadow {
    position: absolute;
    width: 35%;
    height: 35%;
    border-radius: 50%;
    background: radial-gradient(circle at 48% 46%, #030407 0 58%, rgba(0,0,0,.98) 74%, transparent 80%);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.95),
        0 0 30px 12px rgba(0,0,0,.95),
        0 0 72px 28px rgba(0,0,0,.62);
    z-index: 6;
}

.aero-splash-blackhole .bh-core {
    position: absolute;
    width: 27%;
    height: 27%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 45% 40%, #0c0e14 0%, #030407 46%, #000 74%, #000 100%);
    box-shadow:
        inset 0 0 16px rgba(255,255,255,.03),
        0 0 22px 8px rgba(0,0,0,.96);
    z-index: 7;
}

.aero-splash-blackhole .bh-jet {
    position: absolute;
    left: 50%;
    width: 2px;
    height: 30%;
    transform: translateX(-50%);
    background: linear-gradient(to top, rgba(170,200,255,0), rgba(180,210,255,.28), rgba(255,255,255,.1), transparent);
    filter: blur(1.2px);
    opacity: .22;
    z-index: 1;
}

.aero-splash-blackhole .bh-jet-top { top: 3%; }
.aero-splash-blackhole .bh-jet-bottom {
    bottom: 3%;
    background: linear-gradient(to bottom, rgba(170,200,255,0), rgba(150,180,230,.22), rgba(255,255,255,.08), transparent);
}

.aero-splash-blackhole .aero-splash-brand {
    position: relative;
    z-index: 10;
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
    opacity: 0;
    transform: translateY(14px) scale(.94);
    filter: blur(8px);
    will-change: transform, opacity, filter;
}

.aero-splash-blackhole.stage-logo .aero-splash-brand {
    animation: bhLogoIn 1.4s cubic-bezier(.16,.84,.2,1) forwards;
}

.aero-splash-blackhole.stage-exit .aero-splash-brand {
    animation: bhLogoExit 1.25s cubic-bezier(.2,.7,.15,1) forwards;
}

.aero-splash-blackhole .aero-splash-logo-img {
    display: none !important;
}

.aero-splash-blackhole .aero-splash-word {
    display: flex !important;
    gap: .06em !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif !important;
    font-size: clamp(54px, 9.5vw, 96px) !important;
    font-weight: 780 !important;
    letter-spacing: .28em !important;
    text-indent: .28em !important;
    line-height: 1 !important;
    color: rgba(242, 247, 255, .96) !important;
    text-shadow:
        0 0 16px rgba(180, 210, 255, .35),
        0 0 36px rgba(120, 160, 220, .25),
        0 12px 40px rgba(0,0,0,.6) !important;
    background: none !important;
    -webkit-text-fill-color: rgba(242, 247, 255, .96) !important;
}

.aero-splash-blackhole .aero-splash-word span {
    display: inline-block;
    opacity: 0;
    transform: translateY(14px) scale(.92);
    filter: blur(5px);
}

.aero-splash-blackhole.stage-logo .aero-splash-word span {
    animation: bhLetterIn .75s cubic-bezier(.16,.84,.2,1) forwards;
}
.aero-splash-blackhole.stage-logo .aero-splash-word span:nth-child(1) { animation-delay: .04s; }
.aero-splash-blackhole.stage-logo .aero-splash-word span:nth-child(2) { animation-delay: .16s; }
.aero-splash-blackhole.stage-logo .aero-splash-word span:nth-child(3) { animation-delay: .28s; }
.aero-splash-blackhole.stage-logo .aero-splash-word span:nth-child(4) { animation-delay: .4s; }

.aero-splash-blackhole .aero-splash-sub {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin-top: 0 !important;
    font-size: 11px !important;
    letter-spacing: .46em !important;
    text-indent: .46em !important;
    color: rgba(180, 205, 240, .55) !important;
    font-weight: 600 !important;
    opacity: 0;
}

.aero-splash-blackhole.stage-logo .aero-splash-sub {
    animation: bhSubIn .85s ease forwards .5s;
}

.aero-splash-blackhole.stage-exit .bh-vignette {
    animation: bhWarpVignette 1.35s ease forwards;
}

.aero-splash-blackhole.stage-exit .bh-stars {
    animation: bhStarsWarp 1.35s cubic-bezier(.2,.75,.2,1) forwards;
}

@keyframes bhStarsIdle {
    from { transform: scale(1.06) rotate(0deg); }
    to { transform: scale(1.06) rotate(360deg); }
}

@keyframes bhStarsPull {
    0% { opacity: .48; filter: none; }
    55% { opacity: .72; }
    100% { opacity: .18; filter: blur(.35px); }
}

@keyframes bhNebulaIn {
    from { opacity: 0; transform: scale(.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes bhForm {
    0% { opacity: 0; transform: scale(.14); filter: blur(12px) saturate(.7) brightness(.7); }
    55% { opacity: 1; transform: scale(1.03); filter: blur(0) saturate(.95) brightness(1); }
    100% { opacity: 1; transform: scale(1); filter: blur(0) saturate(.95) brightness(.98); }
}

@keyframes bhExit {
    0% { opacity: 1; transform: scale(1); filter: brightness(1); }
    42% { opacity: 1; transform: scale(1.12); filter: brightness(1.15) saturate(1.05); }
    100% { opacity: 0; transform: scale(2.2); filter: brightness(1.55) blur(5px); }
}

@keyframes bhDiskSpin {
    from { transform: translate(-50%, -50%) rotateX(76deg) rotateZ(0deg); }
    to { transform: translate(-50%, -50%) rotateX(76deg) rotateZ(360deg); }
}

@keyframes bhPhotonPulse {
    0%, 100% { opacity: .78; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.03); }
}

@keyframes bhLensingPulse {
    0%, 100% { opacity: .68; transform: scale(1); }
    50% { opacity: .92; transform: scale(1.025); }
}

@keyframes bhLogoIn {
    0% { opacity: 0; transform: translateY(18px) scale(.9); filter: blur(10px); }
    58% { opacity: 1; transform: translateY(-1px) scale(1.01); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes bhLogoExit {
    0% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    100% { opacity: 0; transform: translateY(-8px) scale(1.12); filter: blur(4px); }
}

@keyframes bhLetterIn {
    0% { opacity: 0; transform: translateY(16px) scale(.88); filter: blur(7px); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes bhSubIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes bhWarpVignette {
    0% { background: radial-gradient(circle at center, transparent 34%, rgba(0,0,0,.42) 66%, rgba(0,0,0,.92) 100%); }
    100% { background: radial-gradient(circle at center, rgba(220,235,255,.05) 0%, rgba(0,0,0,.28) 30%, rgba(0,0,0,.94) 72%, #000 100%); }
}

@keyframes bhStarsWarp {
    0% { transform: scale(1.06); opacity: .28; filter: none; }
    100% { transform: scale(1.5); opacity: 0; filter: blur(2px); }
}

@media (max-width: 720px) {
    .aero-splash-blackhole .bh-stage {
        width: min(94vw, 430px);
        height: min(94vw, 430px);
    }
    .aero-splash-blackhole .aero-splash-word {
        font-size: clamp(42px, 12vw, 66px) !important;
        letter-spacing: .2em !important;
        text-indent: .2em !important;
    }
    .aero-splash-blackhole .aero-splash-sub {
        letter-spacing: .3em !important;
        text-indent: .3em !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aero-splash-blackhole,
    .aero-splash-blackhole * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .aero-splash-blackhole .aero-blackhole,
    .aero-splash-blackhole .aero-splash-brand,
    .aero-splash-blackhole .aero-splash-word span,
    .aero-splash-blackhole .aero-splash-sub {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
}


/* Gift download premium button */
.gift-download-section { margin: 14px 0 4px; }
.btn-gift-download {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(125, 211, 252, .28) !important;
    background:
        linear-gradient(135deg, rgba(34, 211, 238, .18), rgba(99, 102, 241, .18)),
        rgba(8, 12, 24, .88) !important;
    color: #e8f7ff !important;
    text-decoration: none !important;
    box-shadow: 0 14px 34px rgba(34, 211, 238, .16), inset 0 1px 0 rgba(255,255,255,.06) !important;
    transition: .2s ease !important;
}
.btn-gift-download:hover {
    transform: translateY(-2px);
    border-color: rgba(165, 243, 252, .5) !important;
    box-shadow: 0 18px 42px rgba(34, 211, 238, .24), 0 0 24px rgba(99,102,241,.16) !important;
}
.gift-download-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 22px !important;
    background: linear-gradient(135deg, rgba(34,211,238,.95), rgba(99,102,241,.9)) !important;
    color: #041018 !important;
    flex: 0 0 auto !important;
    line-height: 1 !important;
}
.gift-download-text {
    display: grid !important;
    gap: 2px !important;
    text-align: left !important;
}
.gift-download-text strong {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: .02em !important;
    color: #f0f9ff !important;
}
.gift-download-text small {
    font-size: 12px !important;
    color: #93c5fd !important;
}
body.theme-moe .btn-gift-download {
    border-color: rgba(255, 160, 210, .3) !important;
    background: linear-gradient(135deg, rgba(255,142,200,.18), rgba(201,166,255,.16)), rgba(28,14,28,.9) !important;
}
body.theme-moe .gift-download-icon {
    background: linear-gradient(135deg, #ff8ec8, #c9a6ff) !important;
    color: #2a1020 !important;
}
body.theme-moe .gift-download-text small { color: #f9a8d4 !important; }
body.theme-anime .btn-gift-download {
    border-color: rgba(126, 170, 255, .3) !important;
    background: linear-gradient(135deg, rgba(110,168,255,.18), rgba(139,125,255,.16)), rgba(10,16,34,.9) !important;
}
body.theme-anime .gift-download-icon {
    background: linear-gradient(135deg, #6ea8ff, #8b7dff) !important;
    color: #07101f !important;
}


/* Chat media + category strip polish */
.category-tabs {
    position: relative;
}
.category-tabs::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(103, 232, 249, .06), 0 0 40px rgba(56, 189, 248, .05);
}
.chat-attach-btn {
    background: linear-gradient(135deg, rgba(34,211,238,.12), rgba(99,102,241,.12)) !important;
}
.support-message-body,
.ai-support-message-body {
    backdrop-filter: blur(8px);
}
.support-admin-message-body .chat-image-link,
.support-message-body .chat-image-link {
    max-width: min(100%, 280px);
}


/* =========================================================
   theme-blackhole site theme (mysterious void)
   ========================================================= */
body.theme-blackhole,
body:not([data-aero-theme]):not(.admin-page) {
    --bg-primary: #04060c;
    --bg-secondary: rgba(8, 12, 22, .82);
    --bg-tertiary: rgba(14, 18, 32, .88);
    --text-primary: #e8eefc;
    --text-secondary: #9aa9c7;
    --text-muted: #6d7c99;
    --text-dim: #55627d;
    --border: rgba(120, 150, 210, .14);
    --accent: #9ec1ff;
    --accent-hover: #c7dbff;
    --accent-dim: rgba(158, 193, 255, .14);
    --product-glow-color: #b7d0ff;
    --tech-accent: #9ec1ff;
    --tech-accent-2: #7f9fd6;
    --tech-surface: rgba(8, 12, 22, .78);
    --tech-surface-2: rgba(12, 16, 28, .84);
    --tech-border: rgba(140, 170, 230, .16);
}

body.theme-blackhole {
    background-color: #02040a !important;
}

/* ambient void field */
body.theme-blackhole.store-home,
body.theme-blackhole.support-page,
body.theme-blackhole.tools-page,
body.theme-blackhole:not(.admin-page) {
    background:
        radial-gradient(circle at 50% 18%, rgba(70, 95, 150, .16), transparent 28%),
        radial-gradient(circle at 50% 52%, rgba(20, 28, 48, .55), transparent 42%),
        radial-gradient(ellipse 120% 70% at 50% 110%, rgba(30, 40, 70, .28), transparent 50%),
        #02040a !important;
}

body.theme-blackhole.store-home::before,
body.theme-blackhole.support-page::before,
body.theme-blackhole.tools-page::before,
body.theme-blackhole:not(.admin-page)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: .55 !important;
    background-image:
        radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.55), transparent),
        radial-gradient(1px 1px at 22% 70%, rgba(180,205,245,.4), transparent),
        radial-gradient(1px 1px at 38% 36%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.2px 1.2px at 56% 18%, rgba(190,215,255,.5), transparent),
        radial-gradient(1px 1px at 72% 62%, rgba(255,255,255,.35), transparent),
        radial-gradient(1px 1px at 86% 28%, rgba(170,200,245,.4), transparent),
        radial-gradient(1px 1px at 48% 84%, rgba(255,255,255,.28), transparent),
        radial-gradient(1px 1px at 14% 48%, rgba(200,220,255,.3), transparent) !important;
    background-size: 100% 100% !important;
    animation: bhSiteStars 40s linear infinite !important;
}

body.theme-blackhole.store-home::after,
body.theme-blackhole.support-page::after,
body.theme-blackhole.tools-page::after {
    content: '' !important;
    position: fixed !important;
    left: 50% !important;
    top: 42% !important;
    width: min(72vw, 720px) !important;
    height: min(72vw, 720px) !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    z-index: 0 !important;
    border-radius: 50% !important;
    background:
        radial-gradient(circle, rgba(0,0,0,.0) 0 24%, rgba(90,120,180,.05) 38%, rgba(0,0,0,.0) 54%),
        radial-gradient(circle, transparent 0 30%, rgba(120,160,230,.06) 42%, transparent 58%) !important;
    filter: blur(2px) !important;
    opacity: .75 !important;
}

body.theme-blackhole .page-wrap,
body.theme-blackhole .site-header,
body.theme-blackhole main,
body.theme-blackhole .product-grid {
    position: relative;
    z-index: 1;
}

body.theme-blackhole .site-header,
body.theme-blackhole .music-player,
body.theme-blackhole .product-card,
body.theme-blackhole .support-card,
body.theme-blackhole .query-box,
body.theme-blackhole .result-card,
body.theme-blackhole .announcement,
body.theme-blackhole .category-tabs,
body.theme-blackhole .tool-card,
body.theme-blackhole .support-thread,
body.theme-blackhole .pd-buy-box,
body.theme-blackhole .pd-price-box {
    background:
        linear-gradient(180deg, rgba(14, 18, 32, .78), rgba(7, 10, 20, .72)) !important;
    border-color: rgba(140, 170, 230, .16) !important;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, .38),
        inset 0 1px 0 rgba(255, 255, 255, .04),
        0 0 0 1px rgba(90, 120, 180, .05) !important;
    backdrop-filter: blur(18px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(130%) !important;
}

body.theme-blackhole .site-header {
    border-radius: 22px !important;
    margin-top: 10px;
}

body.theme-blackhole .brand-text,
body.theme-blackhole .product-name,
body.theme-blackhole .product-title,
body.theme-blackhole .support-hero h1,
body.theme-blackhole .block-title {
    color: #eef3ff !important;
    text-shadow: 0 0 18px rgba(150, 185, 245, .18);
}

body.theme-blackhole .nav-link,
body.theme-blackhole .theme-toggle {
    color: #a8b7d6 !important;
}

body.theme-blackhole .nav-link.active,
body.theme-blackhole .nav-link:hover,
body.theme-blackhole .theme-toggle:hover {
    color: #e8f0ff !important;
    background: rgba(140, 175, 240, .1) !important;
    border-color: rgba(150, 185, 245, .22) !important;
}

body.theme-blackhole .btn-primary,
body.theme-blackhole .cat-tab.active,
body.theme-blackhole .sku-option.active {
    background: linear-gradient(135deg, rgba(170, 200, 255, .92), rgba(110, 145, 210, .88)) !important;
    color: #061018 !important;
    border-color: transparent !important;
    box-shadow: 0 10px 28px rgba(120, 160, 230, .22) !important;
}

body.theme-blackhole .btn-ghost,
body.theme-blackhole .cat-tab {
    border-color: rgba(140, 170, 230, .18) !important;
    color: #b7c6e4 !important;
    background: rgba(255,255,255,.03) !important;
}

body.theme-blackhole .product-card:hover,
body.theme-blackhole .support-card:hover,
body.theme-blackhole .tool-card:hover {
    border-color: rgba(170, 200, 255, .34) !important;
    box-shadow:
        0 24px 60px rgba(0,0,0,.45),
        0 0 0 1px rgba(140, 175, 240, .12),
        0 0 40px rgba(90, 130, 200, .12) !important;
    transform: translateY(-4px) scale(1.01);
}

body.theme-blackhole .form-input,
body.theme-blackhole input,
body.theme-blackhole textarea,
body.theme-blackhole select {
    background: rgba(6, 10, 20, .72) !important;
    border-color: rgba(130, 160, 220, .18) !important;
    color: #e8eefc !important;
}

body.theme-blackhole .site-footer,
body.theme-blackhole footer {
    color: #5f6f8f !important;
    border-top-color: rgba(120, 150, 210, .1) !important;
}

/* AI widget under blackhole */
body.theme-blackhole .ai-support-fab,
body.theme-blackhole .ai-support-panel {
    border-color: rgba(150, 185, 245, .22) !important;
    background: linear-gradient(180deg, rgba(10, 14, 26, .94), rgba(5, 8, 16, .94)) !important;
    box-shadow: 0 22px 70px rgba(0,0,0,.5), 0 0 30px rgba(100, 140, 210, .12) !important;
}

body.theme-blackhole .ai-support-message-body {
    background: linear-gradient(180deg, rgba(24, 30, 48, .96), rgba(12, 16, 28, .94)) !important;
    border-color: rgba(140, 170, 230, .14) !important;
    color: #e7eefc !important;
}

body.theme-blackhole .ai-support-message.customer .ai-support-message-body {
    background: linear-gradient(135deg, rgba(170, 200, 255, .9), rgba(110, 145, 210, .88)) !important;
    color: #061018 !important;
}

/* admin blackhole */
body.admin-page.theme-blackhole,
body.admin-page {
    --accent: #9ec1ff;
    --accent-hover: #c7dbff;
    --accent-dim: rgba(158, 193, 255, .14);
}

body.admin-page.theme-blackhole,
html:has(body.admin-page) {
    background: #04060c;
}

body.admin-page.theme-blackhole .sidebar,
body.admin-page.theme-blackhole .card-block,
body.admin-page.theme-blackhole .stat-card,
body.admin-page.theme-blackhole .table-wrap,
body.admin-page.theme-blackhole .topbar {
    background: linear-gradient(180deg, rgba(12, 16, 28, .9), rgba(7, 10, 18, .88)) !important;
    border-color: rgba(130, 160, 220, .14) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.28) !important;
}

.aero-theme-option[data-theme="blackhole"] .aero-theme-swatch {
    background: radial-gradient(circle at 50% 50%, #000 0 34%, #7f9fd6 48%, #1a2238 70%, #000 100%) !important;
    color: #dbe7ff;
}

@keyframes bhSiteStars {
    from { transform: translate3d(0,0,0); }
    to { transform: translate3d(0, -1.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
    body.theme-blackhole.store-home::before,
    body.theme-blackhole.support-page::before,
    body.theme-blackhole.tools-page::before {
        animation: none !important;
    }
}


/* =========================================================
   theme-anime (cinematic anime / cyber-anime)
   ========================================================= */
body.theme-anime {
    --bg-primary: #0b1020;
    --bg-secondary: rgba(16, 22, 44, .84);
    --bg-tertiary: rgba(24, 30, 58, .9);
    --text-primary: #f4f7ff;
    --text-secondary: #b8c3e6;
    --text-muted: #8490b8;
    --text-dim: #66739a;
    --border: rgba(120, 170, 255, .18);
    --accent: #6ea8ff;
    --accent-hover: #9bc4ff;
    --accent-dim: rgba(110, 168, 255, .16);
    --product-glow-color: #7db4ff;
    --tech-accent: #6ea8ff;
    --tech-accent-2: #8b7dff;
    --tech-surface: rgba(14, 20, 42, .8);
    --tech-surface-2: rgba(20, 26, 52, .86);
    --tech-border: rgba(126, 170, 255, .2);
    background-color: #080d1c !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(90, 140, 255, .22), transparent 28%),
        radial-gradient(circle at 82% 18%, rgba(150, 110, 255, .18), transparent 26%),
        radial-gradient(circle at 50% 88%, rgba(70, 120, 255, .14), transparent 34%),
        linear-gradient(180deg, #0a1022 0%, #070b18 100%) !important;
}

body.theme-anime.store-home::before,
body.theme-anime.support-page::before,
body.theme-anime:not(.admin-page)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: .45 !important;
    background:
        repeating-linear-gradient(100deg, transparent 0 18px, rgba(140,180,255,.03) 18px 19px),
        radial-gradient(circle at 70% 30%, rgba(120,170,255,.08), transparent 24%) !important;
    animation: animeScan 12s linear infinite !important;
}

body.theme-anime .site-header,
body.theme-anime .music-player,
body.theme-anime .product-card,
body.theme-anime .support-card,
body.theme-anime .query-box,
body.theme-anime .result-card,
body.theme-anime .announcement,
body.theme-anime .category-tabs,
body.theme-anime .tool-card,
body.theme-anime .support-thread,
body.theme-anime .pd-buy-box,
body.theme-anime .pd-price-box {
    background:
        linear-gradient(160deg, rgba(24, 34, 68, .86), rgba(12, 18, 40, .8)) !important;
    border-color: rgba(126, 170, 255, .22) !important;
    box-shadow:
        0 18px 48px rgba(0,0,0,.35),
        0 0 0 1px rgba(110, 160, 255, .08),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter: blur(16px) saturate(140%) !important;
}

body.theme-anime .btn-primary,
body.theme-anime .cat-tab.active,
body.theme-anime .sku-option.active {
    background: linear-gradient(135deg, #6ea8ff, #8b7dff) !important;
    color: #07101f !important;
    border: 0 !important;
    box-shadow: 0 12px 28px rgba(110, 168, 255, .28) !important;
}

body.theme-anime .product-card:hover,
body.theme-anime .support-card:hover,
body.theme-anime .tool-card:hover {
    transform: translateY(-5px) scale(1.015);
    border-color: rgba(150, 190, 255, .42) !important;
    box-shadow: 0 24px 60px rgba(70, 120, 255, .18), 0 0 30px rgba(120, 100, 255, .12) !important;
}

body.theme-anime .brand-text,
body.theme-anime .product-name,
body.theme-anime .product-title {
    color: #f3f7ff !important;
    text-shadow: 0 0 18px rgba(120, 170, 255, .25);
}

/* =========================================================
   theme-moe (soft anime / 二次元)
   ========================================================= */
body.theme-moe {
    --bg-primary: #17101a;
    --bg-secondary: rgba(42, 24, 40, .82);
    --bg-tertiary: rgba(56, 30, 52, .88);
    --text-primary: #fff5fb;
    --text-secondary: #efc8de;
    --text-muted: #c99bb6;
    --text-dim: #a57b95;
    --border: rgba(255, 160, 210, .18);
    --accent: #ff8ec8;
    --accent-hover: #ffb0da;
    --accent-dim: rgba(255, 142, 200, .16);
    --product-glow-color: #ff9ed0;
    --tech-accent: #ff8ec8;
    --tech-accent-2: #c9a6ff;
    --tech-surface: rgba(40, 22, 38, .8);
    --tech-surface-2: rgba(52, 28, 48, .86);
    --tech-border: rgba(255, 170, 215, .2);
    background-color: #160f18 !important;
    background:
        radial-gradient(circle at 20% 15%, rgba(255, 150, 210, .2), transparent 28%),
        radial-gradient(circle at 80% 20%, rgba(190, 150, 255, .16), transparent 26%),
        radial-gradient(circle at 50% 90%, rgba(255, 170, 200, .12), transparent 34%),
        linear-gradient(180deg, #1b121d 0%, #120d15 100%) !important;
}

body.theme-moe.store-home::before,
body.theme-moe.support-page::before,
body.theme-moe:not(.admin-page)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    opacity: .5 !important;
    background-image:
        radial-gradient(circle at 12% 22%, rgba(255,180,220,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 28% 68%, rgba(220,180,255,.14) 0 2px, transparent 3px),
        radial-gradient(circle at 72% 30%, rgba(255,170,210,.16) 0 2px, transparent 3px),
        radial-gradient(circle at 86% 74%, rgba(255,200,230,.12) 0 2px, transparent 3px) !important;
    animation: moeSparkle 8s ease-in-out infinite alternate !important;
}

body.theme-moe .site-header,
body.theme-moe .music-player,
body.theme-moe .product-card,
body.theme-moe .support-card,
body.theme-moe .query-box,
body.theme-moe .result-card,
body.theme-moe .announcement,
body.theme-moe .category-tabs,
body.theme-moe .tool-card,
body.theme-moe .support-thread,
body.theme-moe .pd-buy-box,
body.theme-moe .pd-price-box {
    background:
        linear-gradient(160deg, rgba(62, 30, 56, .86), rgba(34, 18, 34, .8)) !important;
    border-color: rgba(255, 170, 215, .22) !important;
    box-shadow:
        0 18px 48px rgba(40, 10, 30, .35),
        0 0 0 1px rgba(255, 150, 200, .08),
        inset 0 1px 0 rgba(255,255,255,.05) !important;
    backdrop-filter: blur(16px) saturate(145%) !important;
    border-radius: 18px;
}

body.theme-moe .btn-primary,
body.theme-moe .cat-tab.active,
body.theme-moe .sku-option.active {
    background: linear-gradient(135deg, #ff8ec8, #c9a6ff) !important;
    color: #2a1020 !important;
    border: 0 !important;
    box-shadow: 0 12px 28px rgba(255, 142, 200, .28) !important;
}

body.theme-moe .product-card:hover,
body.theme-moe .support-card:hover,
body.theme-moe .tool-card:hover {
    transform: translateY(-5px) scale(1.015);
    border-color: rgba(255, 180, 220, .42) !important;
    box-shadow: 0 24px 60px rgba(255, 120, 180, .16), 0 0 30px rgba(200, 140, 255, .12) !important;
}

body.theme-moe .brand-text,
body.theme-moe .product-name,
body.theme-moe .product-title {
    color: #fff4fb !important;
    text-shadow: 0 0 18px rgba(255, 150, 210, .28);
}

body.theme-moe .ai-support-message.customer .ai-support-message-body,
body.theme-anime .ai-support-message.customer .ai-support-message-body {
    border-color: transparent !important;
}
body.theme-moe .ai-support-message.customer .ai-support-message-body {
    background: linear-gradient(135deg, #ff8ec8, #c9a6ff) !important;
    color: #2a1020 !important;
}
body.theme-anime .ai-support-message.customer .ai-support-message-body {
    background: linear-gradient(135deg, #6ea8ff, #8b7dff) !important;
    color: #07101f !important;
}

/* Theme swatches */
.aero-theme-option[data-theme="anime"] .aero-theme-swatch {
    background: linear-gradient(135deg, #6ea8ff, #8b7dff) !important;
    color: #07101f;
}
.aero-theme-option[data-theme="moe"] .aero-theme-swatch {
    background: linear-gradient(135deg, #ff8ec8, #c9a6ff) !important;
    color: #2a1020;
}

/* =========================================================
   Multi-theme splash shells
   ========================================================= */
.aero-splash .splash-fx {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}
.aero-splash.aero-splash-blackhole .splash-fx-blackhole,
.aero-splash.aero-splash-anime .splash-fx-anime,
.aero-splash.aero-splash-moe .splash-fx-moe {
    opacity: 1;
}

.aero-splash .aero-splash-brand {
    position: relative;
    z-index: 20;
    display: grid;
    justify-items: center;
    gap: 12px;
    text-align: center;
    opacity: 0;
    transform: translateY(16px) scale(.94);
    filter: blur(8px);
}
.aero-splash.stage-logo .aero-splash-brand {
    animation: bhLogoIn 1.35s cubic-bezier(.16,.84,.2,1) forwards;
}
.aero-splash.stage-exit .aero-splash-brand {
    animation: bhLogoExit 1.2s cubic-bezier(.2,.7,.15,1) forwards;
}

/* Anime splash */
.aero-splash.aero-splash-anime {
    background: #070b16 !important;
}
.aero-splash-anime .anime-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 55%, rgba(110,168,255,.22), transparent 28%),
        radial-gradient(circle at 20% 20%, rgba(139,125,255,.18), transparent 30%),
        radial-gradient(circle at 80% 25%, rgba(90,150,255,.16), transparent 28%),
        linear-gradient(180deg, #0b1226, #050812);
}
.aero-splash-anime .anime-speedlines {
    position: absolute;
    inset: -10%;
    background:
        repeating-conic-gradient(from 0deg at 50% 50%,
            rgba(180,210,255,.0) 0 6deg,
            rgba(180,210,255,.08) 6deg 7deg);
    opacity: 0;
    transform: scale(.7);
}
.aero-splash-anime.stage-form .anime-speedlines {
    animation: animeLinesIn 1.6s ease forwards;
}
.aero-splash-anime .anime-rings {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(70vw, 420px);
    height: min(70vw, 420px);
    transform: translate(-50%, -50%) scale(.4);
    border-radius: 50%;
    border: 2px solid rgba(150,190,255,.25);
    box-shadow:
        0 0 0 18px rgba(110,168,255,.05),
        0 0 0 42px rgba(139,125,255,.04),
        inset 0 0 40px rgba(120,170,255,.12);
    opacity: 0;
}
.aero-splash-anime.stage-form .anime-rings {
    animation: animeRingIn 1.8s cubic-bezier(.16,.84,.2,1) forwards;
}
.aero-splash-anime .anime-burst {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    background: radial-gradient(circle, #fff 0%, rgba(150,190,255,.8) 30%, transparent 70%);
    opacity: 0;
}
.aero-splash-anime.stage-stable .anime-burst {
    animation: animeBurst 1.4s ease forwards;
}
.aero-splash-anime .aero-splash-word {
    color: #f4f8ff !important;
    text-shadow:
        0 0 18px rgba(130,180,255,.55),
        0 0 40px rgba(120,110,255,.35) !important;
    -webkit-text-fill-color: #f4f8ff !important;
}
.aero-splash-anime .aero-splash-sub {
    color: rgba(170,200,255,.7) !important;
}
.aero-splash-anime.stage-exit .anime-sky {
    animation: animeExit 1.3s ease forwards;
}

/* Moe splash */
.aero-splash.aero-splash-moe {
    background: #160f18 !important;
}
.aero-splash-moe .moe-sky {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 55%, rgba(255,150,210,.2), transparent 30%),
        radial-gradient(circle at 25% 25%, rgba(210,160,255,.16), transparent 28%),
        radial-gradient(circle at 78% 22%, rgba(255,180,220,.14), transparent 26%),
        linear-gradient(180deg, #1d131f, #120d15);
}
.aero-splash-moe .moe-orbs {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 30% 40%, rgba(255,180,220,.18) 0 40px, transparent 60px),
        radial-gradient(circle at 70% 58%, rgba(210,170,255,.16) 0 50px, transparent 75px),
        radial-gradient(circle at 55% 30%, rgba(255,200,230,.12) 0 30px, transparent 50px);
    filter: blur(2px);
    opacity: 0;
    transform: scale(.85);
}
.aero-splash-moe.stage-form .moe-orbs {
    animation: moeOrbsIn 1.8s ease forwards;
}
.aero-splash-moe .moe-petals {
    position: absolute;
    inset: -8%;
    background-image:
        radial-gradient(circle at 12% 20%, rgba(255,180,220,.85) 0 3px, transparent 4px),
        radial-gradient(circle at 28% 70%, rgba(255,160,210,.7) 0 2px, transparent 3px),
        radial-gradient(circle at 48% 30%, rgba(230,180,255,.75) 0 3px, transparent 4px),
        radial-gradient(circle at 68% 62%, rgba(255,190,225,.7) 0 2px, transparent 3px),
        radial-gradient(circle at 84% 28%, rgba(255,170,215,.75) 0 3px, transparent 4px),
        radial-gradient(circle at 76% 80%, rgba(220,170,255,.65) 0 2px, transparent 3px);
    opacity: 0;
}
.aero-splash-moe.stage-stable .moe-petals {
    animation: moePetalsFall 3.4s linear forwards;
}
.aero-splash-moe .moe-glow {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(68vw, 380px);
    height: min(68vw, 380px);
    transform: translate(-50%, -50%) scale(.5);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,180,220,.18), transparent 62%);
    opacity: 0;
}
.aero-splash-moe.stage-form .moe-glow {
    animation: moeGlowIn 1.8s ease forwards;
}
.aero-splash-moe .aero-splash-word {
    color: #fff4fb !important;
    text-shadow:
        0 0 18px rgba(255,160,210,.55),
        0 0 40px rgba(200,150,255,.3) !important;
    -webkit-text-fill-color: #fff4fb !important;
}
.aero-splash-moe .aero-splash-sub {
    color: rgba(255, 190, 225, .7) !important;
}
.aero-splash-moe.stage-exit .moe-sky {
    animation: moeExit 1.3s ease forwards;
}

@keyframes animeScan {
    from { transform: translateY(0); }
    to { transform: translateY(-2%); }
}
@keyframes moeSparkle {
    from { opacity: .35; }
    to { opacity: .6; }
}
@keyframes animeLinesIn {
    0% { opacity: 0; transform: scale(.7) rotate(0deg); }
    60% { opacity: .55; transform: scale(1.05) rotate(12deg); }
    100% { opacity: .28; transform: scale(1.12) rotate(18deg); }
}
@keyframes animeRingIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes animeBurst {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    40% { opacity: 1; transform: translate(-50%, -50%) scale(8); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(18); }
}
@keyframes animeExit {
    to { filter: brightness(1.4) blur(4px); transform: scale(1.08); opacity: .2; }
}
@keyframes moeOrbsIn {
    from { opacity: 0; transform: scale(.85); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes moePetalsFall {
    0% { opacity: 0; transform: translateY(-4%) rotate(0deg); }
    20% { opacity: .85; }
    100% { opacity: .35; transform: translateY(8%) rotate(12deg); }
}
@keyframes moeGlowIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.5); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes moeExit {
    to { filter: brightness(1.25) blur(4px); transform: scale(1.08); opacity: .2; }
}

/* Result / pay pages shared under themes */
body.theme-anime .result-container,
body.theme-moe .result-container,
body.theme-blackhole .result-container {
    position: relative;
    z-index: 1;
}
body.theme-anime .result-card,
body.theme-moe .result-card,
body.theme-blackhole .result-card {
    border-radius: 18px;
}


/* =========================================================
   Splash alignment fix + dynamic themed backgrounds
   ========================================================= */
.aero-splash {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

.aero-splash .splash-fx {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
}

.aero-splash .aero-splash-brand {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 30 !important;
    display: grid !important;
    justify-items: center !important;
    align-content: center !important;
    gap: 12px !important;
    text-align: center !important;
    width: min(90vw, 560px) !important;
    margin: 0 !important;
    transform-origin: center center !important;
}

.aero-splash .aero-splash-word {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.aero-splash .aero-splash-sub {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
}

.aero-splash-blackhole .bh-stage {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(88vw, 520px) !important;
    height: min(88vw, 520px) !important;
    display: grid !important;
    place-items: center !important;
}

/* richer anime/moe splash centering */
.aero-splash-anime .anime-rings,
.aero-splash-anime .anime-burst,
.aero-splash-moe .moe-glow {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
}

/* Dynamic site backgrounds */
body.theme-blackhole,
body.theme-anime,
body.theme-moe {
    position: relative;
    overflow-x: hidden;
}

body.theme-blackhole::before,
body.theme-anime::before,
body.theme-moe::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

body.theme-blackhole::before {
    background:
        radial-gradient(1.2px 1.2px at 8% 18%, rgba(255,255,255,.75), transparent),
        radial-gradient(1px 1px at 18% 72%, rgba(180,210,255,.55), transparent),
        radial-gradient(1.4px 1.4px at 32% 36%, rgba(255,255,255,.65), transparent),
        radial-gradient(1px 1px at 48% 14%, rgba(200,220,255,.5), transparent),
        radial-gradient(1px 1px at 62% 68%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.5px 1.5px at 76% 28%, rgba(170,205,255,.6), transparent),
        radial-gradient(1px 1px at 88% 56%, rgba(255,255,255,.4), transparent),
        radial-gradient(circle at 50% 48%, rgba(90,120,180,.12), transparent 28%),
        radial-gradient(circle at 50% 52%, rgba(0,0,0,.2), transparent 42%) !important;
    animation: aeroBgDrift 28s linear infinite, aeroBgPulse 8s ease-in-out infinite alternate !important;
    opacity: .7 !important;
}

body.theme-blackhole::after {
    content: '' !important;
    position: fixed !important;
    left: 50% !important;
    top: 42% !important;
    width: min(78vw, 760px) !important;
    height: min(78vw, 760px) !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle, transparent 0 30%, rgba(130,170,230,.08) 42%, transparent 58%),
        conic-gradient(from 0deg, transparent, rgba(150,190,255,.08), transparent 30%, rgba(120,160,220,.06), transparent 65%, rgba(180,210,255,.07), transparent) !important;
    filter: blur(1px) !important;
    animation: aeroOrbitSpin 22s linear infinite !important;
    opacity: .85 !important;
}

body.theme-anime::before {
    background:
        radial-gradient(circle at 18% 20%, rgba(110,168,255,.22), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(139,125,255,.18), transparent 24%),
        radial-gradient(circle at 50% 85%, rgba(90,150,255,.14), transparent 30%),
        repeating-linear-gradient(115deg, transparent 0 22px, rgba(140,180,255,.04) 22px 23px),
        linear-gradient(180deg, rgba(12,18,40,.2), rgba(6,10,22,.45)) !important;
    animation: aeroAnimeScan 10s linear infinite, aeroBgPulse 7s ease-in-out infinite alternate !important;
    opacity: .85 !important;
}

body.theme-anime::after {
    content: '' !important;
    position: fixed !important;
    inset: -10% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 30% 40%, rgba(120,180,255,.1) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, rgba(160,140,255,.1) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.08) 0 1px, transparent 2px) !important;
    animation: aeroSparkFloat 12s ease-in-out infinite alternate !important;
}

body.theme-moe::before {
    background:
        radial-gradient(circle at 20% 18%, rgba(255,150,210,.22), transparent 26%),
        radial-gradient(circle at 80% 22%, rgba(200,160,255,.18), transparent 24%),
        radial-gradient(circle at 50% 88%, rgba(255,170,210,.14), transparent 30%),
        radial-gradient(circle at 12% 70%, rgba(255,180,220,.1) 0 3px, transparent 4px),
        radial-gradient(circle at 88% 40%, rgba(220,170,255,.1) 0 3px, transparent 4px),
        linear-gradient(180deg, rgba(34,18,34,.18), rgba(18,12,20,.4)) !important;
    animation: aeroMoeFloat 11s ease-in-out infinite alternate, aeroBgPulse 8s ease-in-out infinite alternate !important;
    opacity: .9 !important;
}

body.theme-moe::after {
    content: '' !important;
    position: fixed !important;
    inset: -8% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(255,180,220,.75) 0 3px, transparent 4px),
        radial-gradient(circle at 35% 70%, rgba(255,160,210,.6) 0 2px, transparent 3px),
        radial-gradient(circle at 55% 30%, rgba(230,180,255,.7) 0 3px, transparent 4px),
        radial-gradient(circle at 75% 65%, rgba(255,190,225,.6) 0 2px, transparent 3px),
        radial-gradient(circle at 90% 28%, rgba(255,170,215,.7) 0 3px, transparent 4px) !important;
    animation: aeroPetalDrift 14s linear infinite !important;
    opacity: .55 !important;
}body.theme-blackhole .page-wrap,
body.theme-anime .page-wrap,
body.theme-moe .page-wrap,
body.theme-blackhole .site-header,
body.theme-anime .site-header,
body.theme-moe .site-header,
body.theme-blackhole main,
body.theme-anime main,
body.theme-moe main,
body.theme-blackhole .result-container,
body.theme-anime .result-container,
body.theme-moe .result-container,
body.theme-blackhole .product-grid,
body.theme-anime .product-grid,
body.theme-moe .product-grid {
    position: relative;
    z-index: 1;
}
body.theme-blackhole .ai-support-widget,
body.theme-anime .ai-support-widget,
body.theme-moe .ai-support-widget {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
    top: auto !important;
    z-index: 9990 !important;
}

/* Pay result premium redesign */
body.pay-result-page {
    min-height: 100vh;
    background-attachment: fixed;
}
body.pay-result-page .page-wrap {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 28px 16px 40px;
}
body.pay-result-page .result-container {
    width: min(920px, 100%);
    margin: 0 auto;
    padding: 28px 24px 24px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(150, 180, 230, .16) !important;
    background:
        linear-gradient(165deg, rgba(16, 22, 40, .9), rgba(8, 12, 22, .86)) !important;
    box-shadow:
        0 24px 70px rgba(0,0,0,.42),
        inset 0 1px 0 rgba(255,255,255,.05),
        0 0 0 1px rgba(110,150,220,.05) !important;
    backdrop-filter: blur(18px) saturate(140%) !important;
    text-align: center;
}
body.pay-result-page .result-icon {
    width: 78px !important;
    height: 78px !important;
    margin: 0 auto 16px !important;
    border-radius: 22px !important;
    display: grid !important;
    place-items: center !important;
    font-size: 36px !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
body.pay-result-page .result-icon.success {
    background: linear-gradient(135deg, rgba(52,211,153,.22), rgba(34,211,238,.18)) !important;
    color: #6ee7b7 !important;
    border: 1px solid rgba(110,231,183,.28);
}
body.pay-result-page .result-icon.error {
    background: linear-gradient(135deg, rgba(248,113,113,.2), rgba(244,63,94,.16)) !important;
    color: #fca5a5 !important;
    border: 1px solid rgba(252,165,165,.28);
}
body.pay-result-page .result-icon.pending,
body.pay-result-page .result-icon.info {
    background: linear-gradient(135deg, rgba(125,211,252,.18), rgba(129,140,248,.16)) !important;
    color: #93c5fd !important;
    border: 1px solid rgba(147,197,253,.28);
}
body.pay-result-page h2 {
    margin: 0 0 8px !important;
    font-size: clamp(24px, 4vw, 32px) !important;
    font-weight: 800 !important;
    letter-spacing: .02em;
    color: #f4f8ff !important;
}
body.pay-result-page .result-desc {
    margin: 0 auto 18px !important;
    max-width: 560px;
    color: #9fb0d0 !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
}
body.pay-result-page .result-order-info {
    margin: 0 auto 16px !important;
    padding: 14px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(140,170,230,.14) !important;
    background: rgba(0,0,0,.18) !important;
    text-align: left;
}
body.pay-result-page .info-row {
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 4px !important;
    border-bottom: 1px dashed rgba(140,170,230,.12);
    color: #c7d4ef !important;
    font-size: 13px !important;
}
body.pay-result-page .info-row:last-child { border-bottom: 0; }
body.pay-result-page .info-row code {
    color: #e8f2ff !important;
    background: rgba(125,211,252,.08);
    padding: 2px 8px;
    border-radius: 8px;
}
body.pay-result-page .cards-result,
body.pay-result-page .nfa-cards-result,
body.pay-result-page .delivery-message-section {
    margin-top: 16px !important;
    text-align: left;
}
body.pay-result-page .cards-result h3,
body.pay-result-page .nfa-cards-result h4 {
    margin: 0 0 10px !important;
    color: #e8f0ff !important;
    font-size: 15px !important;
}
body.pay-result-page .cards-box,
body.pay-result-page .delivery-message-box,
body.pay-result-page .nfa-card-item {
    border-radius: 14px !important;
    border: 1px solid rgba(140,170,230,.14) !important;
    background: rgba(4,8,18,.45) !important;
    padding: 14px !important;
    color: #dbe7ff !important;
}
body.pay-result-page .nfa-card-item { margin-bottom: 12px; }
body.pay-result-page .nfa-input-group { margin-top: 10px; }
body.pay-result-page .nfa-input-group label {
    display: block;
    margin-bottom: 6px;
    color: #93a4c7;
    font-size: 12px;
}
body.pay-result-page .nfa-result-input,
body.pay-result-page .nfa-token-input {
    width: 100%;
    border-radius: 10px !important;
    border: 1px solid rgba(140,170,230,.16) !important;
    background: rgba(0,0,0,.25) !important;
    color: #e8f0ff !important;
    padding: 10px 12px !important;
}
body.pay-result-page .nfa-token-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
body.pay-result-page .result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 18px;
}
body.pay-result-page .result-actions .btn,
body.pay-result-page > .btn,
body.pay-result-page .result-container > .btn {
    min-width: 120px;
}
body.pay-result-page .btn-primary {
    background: linear-gradient(135deg, rgba(125,211,252,.95), rgba(129,140,248,.92)) !important;
    color: #061018 !important;
    border: 0 !important;
    box-shadow: 0 12px 28px rgba(110,160,255,.22) !important;
}
body.pay-result-page .btn-ghost {
    border: 1px solid rgba(150,180,230,.2) !important;
    background: rgba(255,255,255,.03) !important;
    color: #d7e4ff !important;
}
body.theme-anime.pay-result-page .result-container {
    border-color: rgba(126,170,255,.22) !important;
    background: linear-gradient(165deg, rgba(20,28,58,.92), rgba(10,14,32,.88)) !important;
}
body.theme-moe.pay-result-page .result-container {
    border-color: rgba(255,170,215,.22) !important;
    background: linear-gradient(165deg, rgba(52,28,48,.92), rgba(24,14,24,.88)) !important;
}
body.theme-moe.pay-result-page .btn-primary {
    background: linear-gradient(135deg, #ff8ec8, #c9a6ff) !important;
    color: #2a1020 !important;
}
body.theme-anime.pay-result-page .btn-primary {
    background: linear-gradient(135deg, #6ea8ff, #8b7dff) !important;
    color: #07101f !important;
}

@keyframes aeroBgDrift {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(0,-2%,0) scale(1.03); }
}
@keyframes aeroBgPulse {
    from { filter: brightness(.95); }
    to { filter: brightness(1.12); }
}
@keyframes aeroOrbitSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes aeroAnimeScan {
    from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
    to { background-position: 0 0, 0 0, 0 0, 80px 40px, 0 0; }
}
@keyframes aeroSparkFloat {
    from { transform: translate3d(0,0,0); opacity: .45; }
    to { transform: translate3d(0,-2%,0); opacity: .8; }
}
@keyframes aeroMoeFloat {
    from { transform: translate3d(0,0,0) scale(1); }
    to { transform: translate3d(0,-1.5%,0) scale(1.03); }
}
@keyframes aeroPetalDrift {
    from { transform: translate3d(0,-2%,0) rotate(0deg); }
    to { transform: translate3d(0,3%,0) rotate(8deg); }
}

@media (max-width: 720px) {
    body.pay-result-page .result-container { padding: 22px 16px 18px !important; border-radius: 18px !important; }
    body.pay-result-page .nfa-token-row { flex-direction: column; align-items: stretch; }
}


/* =========================================================
   Force dynamic backgrounds + AI widget docking
   ========================================================= */
body.theme-blackhole,
body.theme-anime,
body.theme-moe {
    background-attachment: fixed !important;
}

body.theme-blackhole {
    background:
        radial-gradient(circle at 50% 18%, rgba(70, 95, 150, .18), transparent 28%),
        radial-gradient(circle at 50% 52%, rgba(20, 28, 48, .45), transparent 42%),
        radial-gradient(ellipse 120% 70% at 50% 110%, rgba(30, 40, 70, .24), transparent 50%),
        #02040a !important;
}

body.theme-anime {
    background:
        radial-gradient(circle at 18% 20%, rgba(110,168,255,.22), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(139,125,255,.18), transparent 24%),
        radial-gradient(circle at 50% 85%, rgba(90,150,255,.14), transparent 30%),
        linear-gradient(180deg, #0a1022 0%, #070b18 100%) !important;
}

body.theme-moe {
    background:
        radial-gradient(circle at 20% 18%, rgba(255,150,210,.22), transparent 26%),
        radial-gradient(circle at 80% 22%, rgba(200,160,255,.18), transparent 24%),
        radial-gradient(circle at 50% 88%, rgba(255,170,210,.14), transparent 30%),
        linear-gradient(180deg, #1b121d 0%, #120d15 100%) !important;
}

body.theme-blackhole::before,
body.theme-anime::before,
body.theme-moe::before,
body.theme-blackhole.store-home::before,
body.theme-blackhole.support-page::before,
body.theme-blackhole.tools-page::before,
body.theme-blackhole:not(.admin-page)::before,
body.theme-anime.store-home::before,
body.theme-anime.support-page::before,
body.theme-anime:not(.admin-page)::before,
body.theme-moe.store-home::before,
body.theme-moe.support-page::before,
body.theme-moe:not(.admin-page)::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: .85 !important;
}

body.theme-blackhole::before,
body.theme-blackhole.store-home::before,
body.theme-blackhole.support-page::before,
body.theme-blackhole.tools-page::before,
body.theme-blackhole:not(.admin-page)::before {
    background-image:
        radial-gradient(1.2px 1.2px at 8% 18%, rgba(255,255,255,.8), transparent),
        radial-gradient(1px 1px at 18% 72%, rgba(180,210,255,.55), transparent),
        radial-gradient(1.4px 1.4px at 32% 36%, rgba(255,255,255,.65), transparent),
        radial-gradient(1px 1px at 48% 14%, rgba(200,220,255,.5), transparent),
        radial-gradient(1px 1px at 62% 68%, rgba(255,255,255,.45), transparent),
        radial-gradient(1.5px 1.5px at 76% 28%, rgba(170,205,255,.6), transparent),
        radial-gradient(1px 1px at 88% 56%, rgba(255,255,255,.4), transparent),
        radial-gradient(circle at 50% 48%, rgba(90,120,180,.12), transparent 28%) !important;
    animation: aeroBgDrift 22s linear infinite, aeroBgPulse 7s ease-in-out infinite alternate !important;
}

body.theme-blackhole::after,
body.theme-blackhole.store-home::after,
body.theme-blackhole.support-page::after,
body.theme-blackhole.tools-page::after {
    content: '' !important;
    position: fixed !important;
    left: 50% !important;
    top: 42% !important;
    width: min(78vw, 760px) !important;
    height: min(78vw, 760px) !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle, transparent 0 30%, rgba(130,170,230,.08) 42%, transparent 58%),
        conic-gradient(from 0deg, transparent, rgba(150,190,255,.08), transparent 30%, rgba(120,160,220,.06), transparent 65%, rgba(180,210,255,.07), transparent) !important;
    filter: blur(1px) !important;
    animation: aeroOrbitSpin 18s linear infinite !important;
    opacity: .9 !important;
}

body.theme-anime::before,
body.theme-anime.store-home::before,
body.theme-anime.support-page::before,
body.theme-anime:not(.admin-page)::before {
    background:
        radial-gradient(circle at 18% 20%, rgba(110,168,255,.22), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(139,125,255,.18), transparent 24%),
        radial-gradient(circle at 50% 85%, rgba(90,150,255,.14), transparent 30%),
        repeating-linear-gradient(115deg, transparent 0 22px, rgba(140,180,255,.045) 22px 23px),
        linear-gradient(180deg, rgba(12,18,40,.12), rgba(6,10,22,.28)) !important;
    animation: aeroAnimeScan 9s linear infinite, aeroBgPulse 6.5s ease-in-out infinite alternate !important;
}

body.theme-anime::after,
body.theme-anime.store-home::after,
body.theme-anime.support-page::after {
    content: '' !important;
    position: fixed !important;
    inset: -10% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background:
        radial-gradient(circle at 30% 40%, rgba(120,180,255,.12) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 60%, rgba(160,140,255,.12) 0 2px, transparent 3px),
        radial-gradient(circle at 50% 20%, rgba(255,255,255,.09) 0 1px, transparent 2px) !important;
    animation: aeroSparkFloat 10s ease-in-out infinite alternate !important;
}

body.theme-moe::before,
body.theme-moe.store-home::before,
body.theme-moe.support-page::before,
body.theme-moe:not(.admin-page)::before {
    background:
        radial-gradient(circle at 20% 18%, rgba(255,150,210,.22), transparent 26%),
        radial-gradient(circle at 80% 22%, rgba(200,160,255,.18), transparent 24%),
        radial-gradient(circle at 50% 88%, rgba(255,170,210,.14), transparent 30%),
        radial-gradient(circle at 12% 70%, rgba(255,180,220,.12) 0 3px, transparent 4px),
        radial-gradient(circle at 88% 40%, rgba(220,170,255,.12) 0 3px, transparent 4px),
        linear-gradient(180deg, rgba(34,18,34,.12), rgba(18,12,20,.28)) !important;
    animation: aeroMoeFloat 10s ease-in-out infinite alternate, aeroBgPulse 7s ease-in-out infinite alternate !important;
}

body.theme-moe::after,
body.theme-moe.store-home::after,
body.theme-moe.support-page::after {
    content: '' !important;
    position: fixed !important;
    inset: -8% !important;
    pointer-events: none !important;
    z-index: 0 !important;
    background-image:
        radial-gradient(circle at 15% 25%, rgba(255,180,220,.8) 0 3px, transparent 4px),
        radial-gradient(circle at 35% 70%, rgba(255,160,210,.65) 0 2px, transparent 3px),
        radial-gradient(circle at 55% 30%, rgba(230,180,255,.72) 0 3px, transparent 4px),
        radial-gradient(circle at 75% 65%, rgba(255,190,225,.62) 0 2px, transparent 3px),
        radial-gradient(circle at 90% 28%, rgba(255,170,215,.72) 0 3px, transparent 4px) !important;
    animation: aeroPetalDrift 12s linear infinite !important;
    opacity: .65 !important;
}

/* keep content above animated bg layers */
body.theme-blackhole .page-wrap,
body.theme-anime .page-wrap,
body.theme-moe .page-wrap,
body.theme-blackhole .site-header,
body.theme-anime .site-header,
body.theme-moe .site-header,
body.theme-blackhole main,
body.theme-anime main,
body.theme-moe main,
body.theme-blackhole .product-grid,
body.theme-anime .product-grid,
body.theme-moe .product-grid {
    position: relative;
    z-index: 1;
}


/* =========================================================
   CRITICAL layout fix: never dock whole page to bottom-right
   ========================================================= */
body.theme-blackhole .page-wrap,
body.theme-anime .page-wrap,
body.theme-moe .page-wrap,
body.store-home .page-wrap,
body.support-page .page-wrap,
body.tools-page .page-wrap,
.page-wrap {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: auto !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    z-index: 1 !important;
}
body:not(.pay-result-page) .page-wrap {
    display: block !important;
    place-items: unset !important;
    min-height: 0 !important;
}
body.theme-blackhole .site-header,
body.theme-anime .site-header,
body.theme-moe .site-header,
body.theme-blackhole main,
body.theme-anime main,
body.theme-moe main,
body.theme-blackhole .product-grid,
body.theme-anime .product-grid,
body.theme-moe .product-grid,
body.theme-blackhole .result-container,
body.theme-anime .result-container,
body.theme-moe .result-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
}
.ai-support-widget,
body.theme-blackhole .ai-support-widget,
body.theme-anime .ai-support-widget,
body.theme-moe .ai-support-widget {
    position: fixed !important;
    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;
    top: auto !important;
    z-index: 9990 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
}
body.pay-result-page .page-wrap {
    min-height: 100vh !important;
    display: grid !important;
    place-items: center !important;
    padding: 28px 16px 40px !important;
    max-width: none !important;
    width: 100% !important;
}



/* Force music player + Xiaolin dock usability */
.music-player,
.music-player.music-island,
.music-player.collapsed.music-island {
  position: fixed !important;
  left: 16px !important;
  right: auto !important;
  bottom: 18px !important;
  z-index: 9991 !important;
  pointer-events: auto !important;
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ai-support-widget {
  position: fixed !important;
  right: 20px !important;
  left: auto !important;
  bottom: 20px !important;
  z-index: 9992 !important;
  pointer-events: auto !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ai-support-widget .ai-support-fab,
.ai-support-widget .ai-support-panel,
.music-player button,
.music-player input,
.music-player .music-track-panel {
  pointer-events: auto !important;
}

/* Music island usable when collapsed */
.music-player.music-island.collapsed .music-island-main,
.music-player.collapsed.music-island .music-island-main {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.music-player.music-island.collapsed .music-title-row,
.music-player.collapsed.music-island .music-title-row {
  display: none !important;
}
.music-player.music-island.collapsed .music-lyric,
.music-player.collapsed.music-island .music-lyric {
  display: block !important;
  max-width: 180px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  color: #7dd3fc !important;
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.75) !important;
}
.music-player.music-island.collapsed .music-controls,
.music-player.collapsed.music-island .music-controls,
.music-player.music-island.collapsed .music-progress,
.music-player.collapsed.music-island .music-progress {
  display: none !important;
}
.music-player.music-island:not(.collapsed) .music-island-main,
.music-player.music-island:not(.collapsed) .music-controls,
.music-player.music-island:not(.collapsed) .music-progress,
.music-player.music-island:not(.collapsed) .music-title-row {
  display: flex !important;
}

@media (max-width: 768px) {
  .music-player,
  .music-player.music-island,
  .music-player.collapsed.music-island {
    left: 10px !important;
    bottom: 12px !important;
    max-width: calc(100vw - 90px) !important;
  }
  .ai-support-widget {
    right: 12px !important;
    bottom: 12px !important;
  }
}