/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow: auto; height: auto; }

body {
    background-color: #050505;
    color: #fff;
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ── 星云背景 ── */
.nebula-bg {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background:
        radial-gradient(circle at 20% 30%, rgba(34,211,238,.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(129,140,248,.05) 0%, transparent 40%);
    z-index: -1; filter: blur(80px);
    animation: nebula-drift 20s infinite alternate ease-in-out;
}
@keyframes nebula-drift { from{transform:scale(1)} to{transform:scale(1.2) translate(2%,2%)} }

/* ── 背景粒子画布 ── */
#bg-particles {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.6;
}

/* ── 导航栏在 upgrade 页面的覆盖样式 ── */
.home-topnav { background: rgba(5,5,5,.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }

/* ── 主容器 ── */
.gen-main { position:relative; padding:100px 24px 0px; max-width:1680px; margin:0 auto; }
.gen-main.embed { padding-top:80px; }

/* ── Hero ── */
.hero { text-align:center; margin-bottom:60px; }
.hero h1 {
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 900;
    letter-spacing: -0.05em;
    margin-bottom: 2rem;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.5) 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.hero p {
    color: rgba(255,255,255,.4);
    font-size: var(--font-size-lg);
    font-weight: 300;
    max-width: 42rem;
    margin: 0 auto; line-height: 1.625;
}

/* ── 计费切换 ── */
.switch-wrap { margin-top: 5rem; }
.pricing-switch {
    background: rgba(255,255,255,.05); padding: 4px; border-radius: 100px;
    display: inline-flex; border: 1px solid rgba(255,255,255,.05);
}
.pricing-switch button {
    padding: 10px 32px; border-radius: 100px; font-size: 12px; font-weight: 700;
    transition: all .3s; letter-spacing: 1px; border: none; cursor: pointer;
    color: rgba(255,255,255,.8); background: transparent; text-transform: uppercase;
}
.pricing-switch button.active { background: #fff; color: #000; }
.pricing-switch .save { background:#f472b6; color:#fff; font-size:11px; padding:5px 8px; border-radius:10px; margin-left:6px; font-weight:600; text-transform:none; }

/* ── 状态仪表板 ── */
.status-bar {
    background: linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%);
    backdrop-filter: blur(30px); border-radius: 12px; border: 1px solid rgba(255,255,255,.08);
    padding: 28px 36px; margin: 48px 0; display: flex; align-items: center; gap: 32px; flex-wrap: wrap;
}
.status-bar .plan-info { flex-shrink:0; min-width:60px; }
.status-bar .plan-label { font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:3px; color:rgba(255,255,255,.45); margin-bottom:4px; }
.status-bar .plan-name { font-size:22px; font-weight:700; margin-bottom:0; letter-spacing:0; }
.status-bar .plan-expire { font-size:11px; color:rgba(255,255,255,.3); margin-top:4px; }
.status-bar .divider { width:1px; height:56px; background:rgba(255,255,255,.08); flex-shrink:0; }
.status-bar .metrics { display:flex; gap:70px; flex-wrap:wrap; flex:1; }
.status-bar .metric .mlabel { font-size:12px; font-weight:400; text-transform:uppercase; letter-spacing:2px; color:rgba(255,255,255,.25); margin-bottom:6px; }
.status-bar .metric .mval { font-size:26px; font-weight:700; }
.status-bar .metric .mval .u { font-size:11px; color:rgba(255,255,255,.35); margin-left:2px; }
.status-bar .metric .msub { font-size:10px; color:rgba(255,255,255,.2); margin-top:2px; }

/* ── 黑曜石卡片 ── */
.obsidian-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,0) 100%);
    backdrop-filter: blur(40px); border-radius: 24px;
    border: 1px solid rgba(255,255,255,0.0);
    transition: all .5s cubic-bezier(.2,1,.3,1); overflow: hidden;
}
/* 冲击波 ::before — 单条光波从底往上冲 */
.obsidian-card::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 280px;
    border-radius: 24px;
    bottom: -280px;
    background: linear-gradient(
        to top,
        transparent 0%,
        var(--glow) 50%,
        var(--glow) 100%
    );
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.obsidian-card:hover::before {
    animation: shockwave 1.8s ease-in-out infinite;
}
@keyframes shockwave {
    0%   { bottom: -280px; opacity: 0; }
    10%  { opacity: .35; }
    50%  { opacity: .2; }
    85%  { opacity: .35; }
    95%  { opacity: 0; }
    100% { bottom: calc(100% + 280px); opacity: 0; }
}

.obsidian-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255,255,255,.05) 0%, transparent 100%);
    pointer-events: none;
}
.obsidian-card:hover { 
    border-color: var(--glow);
    transform:translateY(-10px); 
    background: linear-gradient(180deg, color-mix(in srgb, var(--glow) 8%, transparent) 0%, rgba(255,255,255,0) 50%);
    box-shadow:0 30px 60px -15px rgba(0,0,0,.8), 0 0 30px -5px var(--glow); 
}
.obsidian-card:hover .singularity-glow { opacity:.45; filter:blur(36px); }
.obsidian-card:hover .singularity-ring { animation-duration:2s; opacity:.5; }
.obsidian-card:hover .singularity-ring:nth-child(2) { animation-duration:4s; opacity:.3; }
.obsidian-card:hover .singularity-core { filter:blur(1px); box-shadow:0 0 50px var(--glow), inset 0 0 25px rgba(255,255,255,.6); }

/* ── 套餐网格：5列同行 ── */
.plans-grid { display:flex; gap:20px; margin-bottom:40px; }
.plans-grid .plan-card { flex:1; min-width:0; }

/* ── 卡片内容 ── */
.plan-card { padding:36px 32px; display:flex; flex-direction:column; align-items:center; text-align:center; }

/* ── 奇点核心 / 等离子能量核心 ── */
.singularity-wrap { position:relative; width:120px; height:120px; margin:16px auto; display:flex; align-items:center; justify-content:center; }

/* 外部呼吸光晕 */
.singularity-glow { 
    position:absolute; inset:0; margin:auto;
    width:128px; height:128px; 
    border-radius:50%; opacity:.2; 
    background:var(--glow); 
    filter:blur(48px); 
    animation:glow-pulse 4s infinite ease-in-out; 
    transition:opacity .4s, filter .4s;
}

/* 扰动圆环 - 对边线段，视觉重心居中 */
.singularity-ring { 
    position:absolute; inset:0; margin:auto;
    width:96px; height:96px; 
    border:2px solid transparent; 
    border-top-color: var(--glow);
    border-bottom-color: var(--glow);
    border-radius:50%; 
    animation:ring-rotate 6s infinite linear; 
    opacity:.3; 
    transition:opacity .4s;
}
.singularity-ring:nth-child(2) { 
    width:112px; height:112px; 
    border:2px solid transparent;
    border-left-color: var(--glow);
    border-right-color: var(--glow);
    animation:ring-rotate-reverse 12s infinite linear; 
    opacity:.15; 
}

/* 主核心球体 */
.singularity-core { 
    position:absolute; inset:0; margin:auto;
    width:60px; height:60px; 
    border-radius:50%; 
    background:radial-gradient(circle at 30% 30%, white 0%, var(--glow) 40%, #020617 100%);
    box-shadow:0 0 30px var(--glow), inset 0 0 20px rgba(255,255,255,.5);
    filter:blur(2px);
    animation:core-pulse 4s infinite ease-in-out; 
    z-index:2; 
    transition:filter .4s, box-shadow .4s;
}

/* 核心发光点 */
.singularity-core::after {
    content:'';
    position:absolute;
    top:50%; left:50%;
    transform:translate(-50%,-50%);
    width:8px; height:8px;
    background:white;
    border-radius:50%;
    filter:blur(1px);
    box-shadow:0 0 10px white;
}

/* 动画定义 */
@keyframes core-pulse { 
    0%, 100% { transform:scale(1); opacity:.8; filter:blur(2px); }
    50% { transform:scale(1.15); opacity:1; filter:blur(4px); }
}
@keyframes ring-rotate { 
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@keyframes ring-rotate-reverse { 
    from { transform:rotate(0deg); }
    to { transform:rotate(-360deg); }
}
@keyframes glow-pulse { 
    0%, 100% { opacity:.15; transform:scale(.9); }
    50% { opacity:.3; transform:scale(1.1); }
}

/* ── 等级/名称 ── */
.plan-tier { font-size:10px; font-weight:700; letter-spacing:6px; opacity:.2; text-transform:uppercase; margin-bottom:8px; }
.plan-name { font-size:1.5rem; font-weight:700; margin-bottom:1.5rem; letter-spacing:-0.025em; }

/* ── 价格 ── */
.price-row { display:flex; align-items:baseline; gap:4px; margin-bottom:2rem; min-height:56px; }
.price-row .sym { font-size:12px; opacity:.3; font-weight:700; }
.price-row .num { font-family: 'Plus Jakarta Sans', sans-serif; font-size:3rem; font-weight:700; letter-spacing:-0.05em; }
.price-row .per { font-size:12px; opacity:.5; letter-spacing:0.1em; }
.price-free { font-size:1.75rem; font-weight:700; color:rgba(255,255,255,.5); margin-bottom:2rem; min-height:56px; display:flex; align-items:baseline; }
.yearly-detail { font-size:12px; color:rgba(255,255,255,.4); margin-top:-2rem; margin-bottom:1.5rem; min-height:18px; }
.yearly-detail .sv { color:#f472b6; margin-left: 7px;}

/* ── Flux 条 ── */
.flux-section { width:100%; margin-bottom:2rem; padding:0 16px; text-align:left; }
.flux-header { display:flex; justify-content:space-between; font-size:10px; font-weight:700; opacity:.3; text-transform:uppercase; letter-spacing:0.1em; margin-bottom:8px; }
.flux-track { height:2px; width:100%; background:rgba(255,255,255,.05); border-radius:999px; overflow:hidden; }
.flux-fill { height:100%; background:var(--glow); border-radius:999px; opacity:.7; }

/* ── 特性列表 ── */
.features { width:100%; text-align:left; padding:0 16px; margin-bottom:2rem; flex:1; }
.features li { list-style:none; display:flex; align-items:center; gap:10px; padding:5px 0; font-size:var(--font-size-xxs); color:rgba(255,255,255,.8); }
.features li .dot { width:4px; height:4px; background:#fff; border-radius:50%; flex-shrink:0; }

/* ── 类比说明框 ── */
.analogy-box { width:100%; padding:10px 16px; margin:0 0 16px; font-size:var(--font-size-xxs); line-height:1.6; color:rgba(255,255,255,.35); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); border-radius:var(--radius-lg); text-align:left; }

/* ── 按钮 ── */
.btn-action { width:100%; background:#fff; color:#000; font-weight:500; padding:16px; border-radius:var(--radius-sm); border:none; cursor:pointer; font-size:var(--font-size-xs); letter-spacing:1px; text-transform:uppercase; transition:all var(--motion-normal) var(--motion-ease); }
.btn-action:hover { transform:scale(1.02); box-shadow:0 0 30px rgba(255,255,255,.3); }
.btn-current { width:100%; background:rgba(255,255,255,.06); color:rgba(255,255,255,.3); font-weight:700; padding:16px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.08); font-size:var(--font-size-xxs); letter-spacing:1px; cursor:default; text-transform:uppercase; }
.btn-free { width:100%; background:rgba(255,255,255,.03); color:rgba(255,255,255,.2); font-weight:600; padding:16px; border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,.05); font-size:var(--font-size-xxs); cursor:default; text-transform:uppercase; }

/* ── 徽章 ── */
.badge-pop { position:absolute; top:0; right:0; padding:5px 15px; background:#fff; color:#000; font-size:12px; font-weight:500; letter-spacing:0.1em; border-radius:0 0 0 16px; z-index:2; }
.badge-cur { position:absolute; top:0; left:0; padding:8px 20px; background:rgba(34,211,238,.2); color:#22d3ee; font-size:9px; font-weight:900; letter-spacing:0.1em; border-radius:0 0 16px 0; z-index:2; }

/* ── 支付弹窗 (Genesis 暗黑 + 左QR右账单) ── */
.pay-overlay { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:24px; }
.pay-overlay.show { display:flex; }
.pay-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.8); backdrop-filter:blur(40px); -webkit-backdrop-filter:blur(40px); }
.pay-dialog { position:relative; width:100%; max-width:800px; border-radius:30px; border:1px solid rgba(255,255,255,.2); padding:40px; display:flex; flex-direction:column; gap:24px;
    background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,0) 100%); backdrop-filter:blur(40px); }
.pay-header { text-align:center; }
.pay-header .confirm-label { font-size:10px; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:rgba(255,255,255,.3); margin-bottom:12px; }
.pay-header .confirm-name { font-size:1.875rem; font-weight:700; }
.pay-body { display:flex; align-items:center; gap:32px; }
/* 左：二维码 */
.pay-qr { flex:0 0 240px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.pay-qr-box { width:220px; height:220px; background:rgba(255,255,255,.05); border-radius:16px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.08); overflow:hidden; position:relative; }
.pay-qr-box canvas, .pay-qr-box img { border-radius:8px; }
.pay-qr-hint { font-size:12px; font-weight:500; letter-spacing:2px; color:rgba(255,255,255,.3); margin-top:16px; text-transform:uppercase; }
.pay-qr-loading { text-align:center; color:rgba(255,255,255,.3); font-size:12px; }
.pay-qr-loading .spinner { display:inline-block; width:24px; height:24px; border:2px solid rgba(255,255,255,.15); border-top-color:rgba(255,255,255,.6); border-radius:50%; animation:spin .7s linear infinite; margin-bottom:8px; }
@keyframes spin { to{transform:rotate(360deg)} }
/* 右：账单 */
.pay-bill { flex:1; display:flex; flex-direction:column; }
.pay-bill .detail-box { background:rgba(255,255,255,.05); border-radius:16px; padding:28px; border:1px solid rgba(255,255,255,.05); }
.pay-bill .detail-row { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.pay-bill .detail-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; opacity:.5; }
.pay-bill .detail-val { font-size:14px; font-weight:700; }
.pay-bill .detail-val-lg { font-size:1.25rem; font-weight:700; }
.pay-bill .detail-divider { height:1px; background:rgba(255,255,255,.1); margin:20px 0; }
.pay-bill .detail-price { font-size:2.25rem; font-weight:700; }
.pay-bill .detail-settle { display:flex; justify-content:space-between; align-items:baseline; }
.pay-bill .detail-settle-label { font-size:12px; opacity:.5; text-transform:uppercase; font-weight:700; letter-spacing:0.1em; }
.pay-bill .btn-pay { width:100%; background:#fff; color:#000; font-weight:800; padding:14px; border-radius:var(--radius-lg); border:none; cursor:pointer; font-size:var(--font-size-xxs); letter-spacing:1px; text-transform:uppercase; transition:all var(--motion-normal) var(--motion-ease); margin-bottom:12px; }
.pay-bill .btn-pay:hover { box-shadow:0 0 30px rgba(255,255,255,.3); }
.pay-bill .btn-cancel { width:100%; background:none; border:none; cursor:pointer; font-size:10px; font-weight:700; letter-spacing:0.1em; color:rgba(255,255,255,.2); text-transform:uppercase; transition:opacity .25s; padding:8px; }
.pay-bill .btn-cancel:hover { color:rgba(255,255,255,.6); }
.pay-footer { text-align:center; }
.pay-status { text-align:center; font-size:12px; color:rgba(255,255,255,.4); }
.pay-status.success { color:#22d3ee; }
.pay-status.error { color:#f472b6; }

/* ── 页脚 ── */
.gen-footer { margin-top:200px; text-align:center; opacity:.2; padding-bottom:40px; }
.gen-footer p { font-size:10px; font-weight:700; letter-spacing:10px; text-transform:uppercase; }

/* ── 响应式 ── */
@media(max-width:1200px) { .plans-grid { flex-wrap:wrap; } .plans-grid .plan-card { flex:1 1 280px; } }
@media(max-width:768px) {
    .hero h1 { font-size:3rem; } .hero { margin-bottom:60px; }
    .gen-main { padding-top:140px; padding-bottom:80px; }

    .plans-grid { flex-direction:column; } .plans-grid .plan-card { flex:1 1 100%; }
    .status-bar { flex-direction:column; gap:16px; } .status-bar .divider { width:100%; height:1px; }
    .recharge-divider { margin:80px 0 40px; } .gen-footer { margin-top:80px; }
    .recharge-box { padding:28px 24px; }
    .pay-dialog { flex-direction:column; gap:30px; padding:32px; } .pay-qr { flex:none; }
}