:root {
            --gold: #978363;
            --gold-light: #e1d0ad;
            --gold-bright: #ba9f81;
            --gold-dark: #63533c;
            --gold-glow: rgba(188, 167, 130, 0.25);
            --bg: #0c0a08;
            --bg-card: #181410;
            --bg-card-light: #201c16;
            --text-white: #f0e6d0;
            --text-light: rgba(240, 230, 208, 0.88);
            --text-muted: rgba(208, 196, 172, 0.5);
            --border: rgba(170, 150, 113, 0.33);
            --border-bright: rgba(200, 178, 140, 0.52);
            --radius-lg: 16px;
            --radius-md: 12px;
            --radius-sm: 8px;
            --radius-full: 100px;
            --success: #7cc88a;
            --success-bg: rgba(124, 200, 138, 0.06);
            --success-border: rgba(124, 200, 138, 0.22);
            --tech-blue: rgba(80, 160, 220, 0.45);
            --tech-green: rgba(100, 200, 160, 0.45);
            --delivery-gold: #d4b978;
            --delivery-glow: rgba(212, 185, 120, 0.35);
            --delivery-flash: rgba(255, 240, 200, 0.95);
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        body {
            background: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            font-family: -apple-system, 'PingFang SC', 'Helvetica Neue', 'Microsoft YaHei', sans-serif;
            overflow: hidden;
        }

        .app {
            width: 1400px;
            height: 800px;
            position: relative;
            overflow: hidden;
            border-radius: 16px;
        }

        .view {
            position: absolute;
            inset: 0;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.45s ease;
        }

        .view.active {
            opacity: 1;
            pointer-events: all;
        }

        /* ====================================================================
           MVP DEV PANEL
           ==================================================================== */
        .dev-panel {
            position: fixed; top: 16px; right: 16px; z-index: 9999;
            background: rgba(20, 22, 28, 0.92); backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px;
            padding: 10px 12px 12px; font-family: -apple-system, 'PingFang SC', sans-serif;
            color: #e8eaed; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
            min-width: 220px; max-width: 320px;
        }
        .dev-panel-header {
            display: flex; align-items: center; justify-content: space-between;
            padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 8px;
        }
        .dev-panel-header .dev-title { font-size: 11px; color: #6ad9c8; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; }
        .dev-panel-header .dev-toggle {
            background: transparent; border: 1px solid rgba(255, 255, 255, 0.12);
            color: rgba(255, 255, 255, 0.55); width: 22px; height: 22px; border-radius: 4px;
            cursor: pointer; font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
        }
        .dev-panel.collapsed .dev-panel-body { display: none; }
        .dev-panel-body { display: flex; flex-direction: column; gap: 8px; }
        .dev-section { display: flex; flex-direction: column; gap: 4px; }
        .dev-label { font-size: 10px; color: rgba(255, 255, 255, 0.4); letter-spacing: 2px; text-transform: uppercase; padding: 4px 2px 2px; }
        .dev-btn-row { display: flex; flex-wrap: wrap; gap: 4px; }
        .dev-btn {
            background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.75); font-size: 11px; padding: 4px 10px; border-radius: 4px;
            cursor: pointer; transition: all 0.15s;
        }
        .dev-btn:hover { background: rgba(106, 217, 200, 0.15); border-color: rgba(106, 217, 200, 0.35); color: #6ad9c8; }
        .dev-btn--sub { font-size: 10px; padding: 3px 7px; color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.03); }

        /* ====================================================================
           viewActivation — 开通仪式
           ==================================================================== */
        .activation-page {
            width: 100%; height: 100%; position: relative;
            overflow: hidden; border-radius: var(--radius-lg);
        }
        .activation-intro, .activation-ceremony {
            position: absolute; inset: 0;
            opacity: 0; pointer-events: none;
            transition: opacity 0.7s ease;
        }
        .activation-intro.is-visible, .activation-ceremony.is-visible {
            opacity: 1; pointer-events: auto;
        }
        .activation-intro {
            display: flex; align-items: center; justify-content: center;
            background: radial-gradient(ellipse at 35% 40%, #1e1810 0%, #141008 50%, var(--bg) 100%);
        }
        .activation-intro .intro-spotlight {
            position: absolute; top: -120px; left: 50%; transform: translateX(-50%);
            width: 1000px; height: 700px;
            background: radial-gradient(ellipse at 50% 30%, rgba(200,178,130,.18) 0%, rgba(200,178,130,.06) 35%, transparent 60%);
            pointer-events: none;
        }
        .activation-intro::before {
            content: ''; position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(180,160,120,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(180,160,120,.025) 1px, transparent 1px);
            background-size: 60px 60px; pointer-events: none;
        }
        .activation-intro .intro-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .activation-intro .intro-particle {
            position: absolute; width: 2px; height: 2px; border-radius: 50%;
            background: rgba(200,178,130,.5); box-shadow: 0 0 6px rgba(200,178,130,.3);
            animation: actFloatUp 7s linear infinite;
        }
        @keyframes actFloatUp {
            0% { transform: translateY(0) scale(1); opacity: 0; }
            10% { opacity: 1; } 90% { opacity: .5; }
            100% { transform: translateY(-80vh) scale(.15); opacity: 0; }
        }
        .activation-intro .intro-content {
            position: relative; z-index: 1; text-align: center;
            display: flex; flex-direction: column; align-items: center; gap: 20px;
        }
        .activation-intro .intro-badge {
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: 15px; letter-spacing: 8px; color: var(--gold); text-transform: uppercase;
        }
        .activation-intro .intro-title {
            font-family: -apple-system, 'PingFang SC', 'Noto Serif SC', 'Microsoft YaHei', sans-serif;
            font-size: 64px; font-weight: 300; letter-spacing: 18px; color: var(--gold-light);
            text-shadow: 0 0 60px rgba(200,178,130,.3), 0 2px 4px rgba(0,0,0,.5);
        }
        .activation-intro .intro-subtitle { font-size: 22px; letter-spacing: 14px; color: var(--text-muted); font-weight: 300; }
        .activation-intro .intro-divider { display: flex; align-items: center; gap: 16px; margin: 8px 0; }
        .activation-intro .divider-line { width: 120px; height: 1px; background: linear-gradient(90deg, transparent, var(--border-bright), transparent); }
        .activation-intro .divider-diamond { font-size: 9px; color: var(--gold); opacity: .6; }
        .activation-intro .intro-desc { font-size: 20px; color: var(--text-light); letter-spacing: 4px; font-weight: 300; }
        .activation-intro .intro-ritual-hint { font-size: 13px; color: var(--text-muted); letter-spacing: 2px; opacity: 0.7; margin-top: 4px; }
        .activation-intro .intro-info-grid { display: flex; gap: 56px; margin: 24px 0 8px; }
        .activation-intro .info-item { display: flex; flex-direction: column; gap: 8px; text-align: center; }
        .activation-intro .info-label { font-size: 13px; letter-spacing: 4px; color: var(--gold); opacity: .7; text-transform: uppercase; }
        .activation-intro .info-value { font-size: 18px; color: var(--text-light); letter-spacing: 1px; }

        .activation-intro .intro-start-btn {
            margin-top: 28px; display: inline-flex; align-items: center; gap: 14px;
            padding: 18px 60px; border-radius: var(--radius-full);
            background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-bright) 100%);
            color: #1a1610; font-size: 18px; font-weight: 600; letter-spacing: 5px; cursor: pointer;
            border: 1px solid var(--gold-light); font-family: inherit; transition: all .4s ease;
            box-shadow: 0 6px 24px rgba(170,150,113,.35), inset 0 1px 0 rgba(255,255,255,.25);
        }
        .activation-intro .intro-start-btn:hover {
            background: linear-gradient(180deg, #ece2cc 0%, var(--gold-light) 100%);
            border-color: #ece2cc; transform: translateY(-2px);
            box-shadow: 0 10px 32px rgba(200,178,140,.45);
        }
        .activation-intro .btn-arrow { font-size: 20px; transition: transform .3s ease; }
        .activation-intro .intro-start-btn:hover .btn-arrow { transform: translateX(4px); }

        /* ====================================================================
           Prep Review Page (准备回顾)
           ==================================================================== */
        .prep-review {
            position: absolute; inset: 0;
            opacity: 0; pointer-events: none;
            transition: opacity 0.7s ease;
            display: flex; align-items: center; justify-content: center;
            background: radial-gradient(ellipse at 50% 30%, #1a1610 0%, #100c06 45%, var(--bg) 100%);
        }
        .prep-review.is-visible { opacity: 1; pointer-events: auto; }
        .prep-review .prep-spotlight {
            position: absolute; top: -80px; left: 50%; transform: translateX(-50%);
            width: 1000px; height: 700px;
            background: radial-gradient(ellipse at 50% 25%, rgba(200,178,130,.10) 0%, rgba(200,178,130,.04) 30%, transparent 55%);
            pointer-events: none;
        }
        .prep-review .prep-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .prep-review .prep-content {
            position: relative; z-index: 1; text-align: center;
            display: flex; flex-direction: column; align-items: center; gap: 8px;
            max-width: 880px; width: 100%;
            padding: 40px 24px 36px;
        }

        /* --- 环形动画 --- */
        .prep-ring-wrap {
            position: relative; width: 100px; height: 100px;
            opacity: 0; transform: scale(.85);
            transition: opacity .6s ease, transform .6s ease;
            margin-bottom: 0; flex-shrink: 0;
        }
        .prep-ring-wrap.visible { opacity: 1; transform: scale(1); }
        .prep-ring-svg { width: 100%; height: 100%; }
        .prep-ring-bg {
            fill: none; stroke: rgba(200,178,130,.08); stroke-width: 2;
        }
        .prep-ring-progress {
            fill: none; stroke: var(--success); stroke-width: 2.5; stroke-linecap: round;
            stroke-dasharray: 364.42; stroke-dashoffset: 364.42;
            transform: rotate(-90deg); transform-origin: 70px 70px;
            filter: drop-shadow(0 0 6px rgba(124,200,138,.4));
            transition: stroke-dashoffset 2s cubic-bezier(.4,0,.2,1);
        }
        .prep-ring-progress.draw { stroke-dashoffset: 0; }
        .prep-ring-check {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%,-50%) scale(0);
            font-size: 30px; color: var(--success); font-weight: 300;
            opacity: 0;
            transition: transform .5s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
            text-shadow: 0 0 20px rgba(124,200,138,.5);
        }
        .prep-ring-check.pop { opacity: 1; transform: translate(-50%,-50%) scale(1); }

        @keyframes prepRingGlow {
            0%,100% { filter: drop-shadow(0 0 6px rgba(124,200,138,.3)); }
            50% { filter: drop-shadow(0 0 14px rgba(124,200,138,.55)); }
        }
        .prep-ring-progress.draw { animation: prepRingGlow 3s ease-in-out 2s infinite; }

        /* --- 标题 & 叙事 --- */
        .prep-review .prep-title {
            font-family: -apple-system, 'PingFang SC', 'Noto Serif SC', 'Microsoft YaHei', serif;
            font-size: 28px; font-weight: 300; letter-spacing: 8px; color: var(--gold-light);
            text-shadow: 0 0 40px rgba(200,178,130,.15);
            opacity: 0; transform: translateY(8px);
            transition: all .6s ease;
            margin: 0;
        }
        .prep-review .prep-title.visible { opacity: 1; transform: translateY(0); }

        .prep-narrative {
            font-size: 13px; letter-spacing: 1.5px; color: var(--text-muted); line-height: 1.6;
            font-weight: 300; max-width: 520px;
            opacity: 0; transform: translateY(6px);
            transition: all .6s ease .15s;
            margin-bottom: 4px;
        }
        .prep-narrative.visible { opacity: 1; transform: translateY(0); }
        .prep-highlight { color: var(--gold); font-weight: 500; }

        /* --- 左右双卡片行 --- */
        .prep-cards-row {
            display: flex; gap: 18px; width: 100%;
            align-items: stretch;
            opacity: 0; transform: translateY(10px);
            transition: all .6s cubic-bezier(.25,.46,.45,.94);
        }
        .prep-cards-row.visible {
            opacity: 1; transform: translateY(0);
        }

        /* --- 卡片通用 --- */
        .prep-card {
            flex: 1; min-width: 0;
            background: linear-gradient(180deg, rgba(28,22,16,.5) 0%, rgba(22,18,12,.45) 100%);
            border: 1px solid rgba(180,160,120,.08);
            border-radius: var(--radius-md);
            padding: 18px 20px 16px;
            text-align: left;
            display: flex; flex-direction: column;
            transition: border-color .5s ease, background .5s ease;
        }
        .prep-card--upcoming {
            border-color: rgba(180,160,120,.1);
        }
        .prep-cards-row.visible .prep-card--upcoming {
            border-color: rgba(200,178,130,.18);
            background: linear-gradient(180deg, rgba(200,178,130,.03) 0%, rgba(28,22,16,.5) 100%);
        }
        .prep-cards-row.visible .prep-card:not(.prep-card--upcoming) {
            border-color: rgba(124,200,138,.12);
        }

        .prep-card-header {
            display: flex; align-items: center; gap: 8px;
            margin-bottom: 14px;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(180,160,120,.06);
            flex-shrink: 0;
        }
        .prep-card-header--upcoming {
            border-bottom-color: rgba(200,178,130,.1);
        }
        .prep-card-icon {
            font-size: 9px; color: var(--success); opacity: .7;
            flex-shrink: 0;
        }
        .prep-card-header--upcoming .prep-card-icon {
            color: var(--gold-light); opacity: .6;
        }
        .prep-card-title {
            font-size: 13px; letter-spacing: 2px; color: var(--text-light); font-weight: 400;
            line-height: 1.3;
        }

        .prep-card-body {
            display: flex; flex-direction: column; gap: 6px;
            flex: 1;
        }

        /* --- 已完成卡片内的准备项 --- */
        .prep-item {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 14px;
            background: rgba(124,200,138,.03);
            border: 1px solid rgba(124,200,138,.06);
            border-radius: var(--radius-sm);
            opacity: 0; transform: translateX(-10px);
            transition: all .45s cubic-bezier(.25,.46,.45,.94);
        }
        .prep-cards-row.visible .prep-item.revealed {
            opacity: 1; transform: translateX(0);
            border-color: rgba(124,200,138,.18);
            background: linear-gradient(135deg, rgba(124,200,138,.06) 0%, rgba(28,22,16,.35) 100%);
        }
        .prep-item-indicator {
            width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
            background: rgba(124,200,138,.06);
            border: 1.5px solid rgba(124,200,138,.15);
            display: flex; align-items: center; justify-content: center;
            transition: all .5s ease;
        }
        .prep-cards-row.visible .prep-item.revealed .prep-item-indicator {
            background: rgba(124,200,138,.12);
            border-color: rgba(124,200,138,.35);
            box-shadow: 0 0 10px rgba(124,200,138,.15);
        }
        .prep-indicator-check {
            color: var(--success); font-size: 11px; font-weight: 500;
            opacity: 0; transform: scale(0);
            transition: all .35s cubic-bezier(.34,1.56,.64,1) .2s;
        }
        .prep-cards-row.visible .prep-item.revealed .prep-indicator-check { opacity: 1; transform: scale(1); }
        .prep-item-body { display: flex; flex-direction: column; gap: 2px; }
        .prep-item-name { font-size: 13px; letter-spacing: 2px; color: var(--text-light); font-weight: 500; }
        .prep-item-desc { font-size: 11px; letter-spacing: 1px; color: var(--text-muted); line-height: 1.5; }
        .prep-item-meta { font-size: 10px; letter-spacing: 1px; color: var(--text-muted); opacity: 0.5; }

        /* --- 后续流程步骤卡片 --- */
        .prep-upcoming-steps {
            display: flex; flex-direction: column;
        }
        .prep-step-card {
            display: flex; align-items: flex-start; gap: 12px;
            padding: 8px 12px;
            border-radius: var(--radius-sm);
            background: rgba(200,178,130,.02);
            border: 1px solid transparent;
            opacity: 0; transform: translateX(-6px);
            transition: all .4s cubic-bezier(.25,.46,.45,.94);
        }
        .prep-step-card.revealed {
            opacity: 1; transform: translateX(0);
            border-color: rgba(200,178,130,.08);
            background: rgba(200,178,130,.04);
        }
        .prep-step-num {
            flex-shrink: 0;
            width: 28px; height: 28px;
            display: flex; align-items: center; justify-content: center;
            font-size: 13px; font-weight: 500;
            color: var(--gold-light);
            background: rgba(200,178,130,.08);
            border: 1px solid rgba(200,178,130,.15);
            border-radius: 6px;
            font-family: 'Cormorant Garamond', 'Noto Serif SC', serif;
        }
        .prep-step-card.revealed .prep-step-num {
            background: rgba(200,178,130,.12);
            border-color: rgba(200,178,130,.25);
            box-shadow: 0 0 10px rgba(200,178,130,.08);
        }
        .prep-step-info {
            display: flex; flex-direction: column; gap: 2px;
            padding-top: 1px;
        }
        .prep-step-name {
            font-size: 13px; letter-spacing: 2px; color: var(--text-light); font-weight: 500;
        }
        .prep-step-desc {
            font-size: 11px; letter-spacing: 0.5px; color: var(--text-muted); line-height: 1.5;
        }
        .prep-step-connector {
            width: 1px; height: 6px; margin: 0 auto 0 26px;
            background: linear-gradient(180deg, rgba(200,178,130,.1), rgba(200,178,130,.03));
        }

        /* --- 底部 CTA --- */
        .prep-bottom {
            display: flex; flex-direction: column; align-items: center;
            width: 100%;
            opacity: 0; transform: translateY(8px);
            transition: all .6s ease;
        }
        .prep-bottom.visible { opacity: 1; transform: translateY(0); }

        .prep-start-btn {
            display: inline-flex; align-items: center; gap: 14px;
            padding: 14px 44px; border-radius: var(--radius-full);
            background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-bright) 100%);
            color: #1a1610; font-size: 16px; font-weight: 600; letter-spacing: 5px; cursor: pointer;
            border: 1px solid var(--gold-light); font-family: inherit; transition: all .4s ease;
            box-shadow: 0 6px 24px rgba(170,150,113,.35), inset 0 1px 0 rgba(255,255,255,.25);
            opacity: 0; transform: translateY(6px);
            pointer-events: none;
        }
        .prep-start-btn.visible {
            opacity: 1; transform: translateY(0); pointer-events: auto;
        }
        .prep-start-btn:hover {
            background: linear-gradient(180deg, #ece2cc 0%, var(--gold-light) 100%);
            border-color: #ece2cc; transform: translateY(-2px);
            box-shadow: 0 10px 32px rgba(200,178,140,.45);
        }
        .prep-start-btn .btn-arrow { font-size: 20px; transition: transform .3s ease; }
        .prep-start-btn:hover .btn-arrow { transform: translateX(4px); }

        /* ====================================================================
           Auth Page (身份验证)
           ==================================================================== */
        .auth-page {
            position: absolute; inset: 0;
            opacity: 0; pointer-events: none;
            transition: opacity 0.7s ease;
            display: flex; align-items: center; justify-content: center;
            background: radial-gradient(ellipse at 40% 35%, #1a1610 0%, #120e08 50%, var(--bg) 100%);
        }
        .auth-page.is-visible { opacity: 1; pointer-events: auto; }
        .auth-page .auth-spotlight {
            position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
            width: 900px; height: 600px;
            background: radial-gradient(ellipse at 50% 30%, rgba(200,178,130,.12) 0%, rgba(200,178,130,.04) 35%, transparent 60%);
            pointer-events: none;
        }
        .auth-page .auth-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
        .auth-page::before {
            content: ''; position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(180,160,120,.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(180,160,120,.02) 1px, transparent 1px);
            background-size: 60px 60px; pointer-events: none;
        }
        .auth-page .auth-content {
            position: relative; z-index: 1;
            display: flex; flex-direction: column; align-items: center;
            gap: 16px; width: 440px;
        }
        .auth-page .auth-badge {
            font-size: 13px; letter-spacing: 6px; color: var(--gold);
            text-transform: uppercase; opacity: 0.8;
        }
        .auth-page .auth-title {
            font-family: -apple-system, 'PingFang SC', 'Noto Serif SC', 'Microsoft YaHei', serif;
            font-size: 32px; font-weight: 300; letter-spacing: 8px; color: var(--gold-light);
            text-shadow: 0 0 40px rgba(200,178,130,.2);
        }
        .auth-page .auth-subtitle {
            font-size: 14px; letter-spacing: 3px; color: var(--text-muted); font-weight: 300;
        }
        .auth-page .auth-divider {
            display: flex; align-items: center; gap: 16px; margin: 4px 0 8px;
        }
        .auth-page .auth-divider .divider-line {
            width: 100px; height: 1px;
            background: linear-gradient(90deg, transparent, var(--border-bright), transparent);
        }
        .auth-page .auth-divider .divider-diamond { font-size: 9px; color: var(--gold); opacity: .6; }
        .auth-page .auth-form {
            display: flex; flex-direction: column; gap: 14px; width: 100%;
        }
        .auth-page .auth-field {
            display: flex; flex-direction: column; gap: 6px;
        }
        .auth-page .auth-label {
            font-size: 12px; letter-spacing: 3px; color: var(--gold); opacity: .7;
            text-transform: uppercase;
        }
        .auth-page .auth-input,
        .auth-page .auth-select {
            width: 100%; padding: 12px 16px;
            background: rgba(28,22,16,.6);
            border: 1px solid rgba(180,160,120,.15);
            border-radius: var(--radius-sm);
            color: var(--text-light); font-size: 15px; letter-spacing: 1px;
            font-family: inherit;
            outline: none; transition: border-color .3s ease, box-shadow .3s ease;
            -webkit-appearance: none; -moz-appearance: none; appearance: none;
        }
        .auth-page .auth-input::placeholder {
            color: var(--text-muted); font-size: 13px;
        }
        .auth-page .auth-input:focus,
        .auth-page .auth-select:focus {
            border-color: var(--gold-bright);
            box-shadow: 0 0 0 2px rgba(186,159,129,.12);
        }
        .auth-page .auth-select {
            cursor: pointer;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23978363' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 14px center;
            padding-right: 36px;
        }
        .auth-page .auth-select option {
            background: #1a1610; color: var(--text-light);
        }
        .auth-page .auth-error {
            font-size: 12px; color: #e8665a; letter-spacing: 1px;
            opacity: 0; height: 0; overflow: hidden;
            transition: opacity .3s ease, height .3s ease, margin .3s ease;
        }
        .auth-page .auth-error.visible {
            opacity: 1; height: 18px; margin-top: 2px;
        }
        /* ====================================================================
           Window Controls — 桌面端风格最小化/关闭按钮
           ==================================================================== */
        .window-ctrls {
            position: absolute; top: 18px; right: 20px; z-index: 10;
            display: flex; align-items: center; gap: 9px;
        }
        .win-ctrl-btn {
            width: 14px; height: 14px;
            border-radius: 50%;
            border: 1px solid rgba(200,178,130,.18);
            background: rgba(200,178,130,.07);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            padding: 0;
            transition: all .22s ease;
            position: relative;
        }
        .win-ctrl-btn:hover {
            background: rgba(220,200,170,.2);
            border-color: rgba(220,200,170,.35);
            transform: scale(1.08);
        }
        .win-ctrl-symbol {
            font-size: 10px; line-height: 1;
            color: rgba(220,200,170,.25);
            transition: color .22s ease;
            user-select: none;
        }
        .win-ctrl-btn:hover .win-ctrl-symbol {
            color: rgba(240,220,190,.85);
        }
        /* Minimize: brighter gold on hover */
        .win-ctrl--min:hover {
            background: rgba(220,200,170,.2);
            border-color: rgba(220,200,170,.35);
        }
        .win-ctrl--min:hover .win-ctrl-symbol {
            color: rgba(240,220,190,.85);
        }
        /* Close: warm red on hover */
        .win-ctrl--close:hover {
            background: rgba(230,90,70,.28);
            border-color: rgba(230,90,70,.45);
        }
        .win-ctrl--close:hover .win-ctrl-symbol {
            color: rgba(255,110,85,.95);
        }
        .auth-page .auth-submit-btn {
            margin-top: 12px; display: inline-flex; align-items: center; justify-content: center;
            gap: 14px; padding: 16px 48px; border-radius: var(--radius-full);
            background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-bright) 100%);
            color: #1a1610; font-size: 16px; font-weight: 600; letter-spacing: 4px;
            cursor: pointer; border: 1px solid var(--gold-light); font-family: inherit;
            transition: all .4s ease;
            box-shadow: 0 6px 24px rgba(170,150,113,.35), inset 0 1px 0 rgba(255,255,255,.25);
        }
        .auth-page .auth-submit-btn:hover {
            background: linear-gradient(180deg, #ece2cc 0%, var(--gold-light) 100%);
            border-color: #ece2cc; transform: translateY(-2px);
            box-shadow: 0 10px 32px rgba(200,178,140,.45);
        }
        .auth-page .auth-submit-btn .btn-arrow { font-size: 18px; transition: transform .3s ease; }
        .auth-page .auth-submit-btn:hover .btn-arrow { transform: translateX(4px); }

        /* 七步剧场 */
        .activation-ceremony { display: flex; background: #0c0a08; }
        .activation-page .side-nav {
            width: 260px; flex-shrink: 0;
            background: linear-gradient(180deg, #14100a 0%, #0e0c08 100%);
            border-right: 1px solid rgba(180,160,120,.08);
            display: flex; flex-direction: column; padding: 28px 0 20px;
            position: relative; overflow: hidden; z-index: 10;
        }
        .activation-page .side-nav::after {
            content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 1px;
            background: linear-gradient(180deg, transparent 5%, rgba(200,178,130,.12) 30%, rgba(200,178,130,.12) 70%, transparent 95%);
        }
        .activation-page .side-nav-header { padding: 0 24px 20px; border-bottom: 1px solid rgba(180,160,120,.06); margin-bottom: 6px; }
        .activation-page .side-nav-title { font-size: 14px; letter-spacing: 5px; color: var(--gold); text-transform: uppercase; font-weight: 500; }
        .activation-page .side-nav-sub { font-size: 12px; color: var(--text-muted); letter-spacing: 2px; margin-top: 6px; }
        .activation-page .nav-steps { flex: 1; display: flex; flex-direction: column; padding: 8px 0; overflow-y: auto; }
        .activation-page .nav-step {
            display: flex; align-items: center; gap: 14px; padding: 16px 24px;
            cursor: default; transition: all .4s ease; position: relative;
        }
        .activation-page .nav-step.active { background: rgba(200,178,130,.04); }
        .activation-page .nav-step.active::before {
            content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
            width: 3px; height: 32px;
            background: linear-gradient(180deg, var(--gold-bright), var(--gold));
            border-radius: 0 2px 2px 0; box-shadow: 0 0 8px rgba(200,178,130,.3);
        }
        .activation-page .nav-step-indicator {
            width: 32px; height: 32px; border-radius: 50%;
            border: 2px solid rgba(180,160,120,.12);
            display: flex; align-items: center; justify-content: center;
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', serif; font-size: 14px; color: var(--text-muted);
            transition: all .4s ease; flex-shrink: 0; background: rgba(20,16,12,.6);
        }
        .activation-page .nav-step.active .nav-step-indicator {
            border-color: var(--gold-bright); color: var(--gold-light);
            background: rgba(200,178,130,.06); box-shadow: 0 0 14px var(--gold-glow);
            animation: actNavPulse 2.2s ease infinite;
        }
        .activation-page .nav-step.done .nav-step-indicator {
            border-color: var(--success-border); background: var(--success-bg); color: var(--success);
        }
        @keyframes actNavPulse {
            0%, 100% { box-shadow: 0 0 8px rgba(200,178,130,.2); }
            50% { box-shadow: 0 0 20px rgba(200,178,130,.4); }
        }
        .activation-page .nav-step-text { display: flex; flex-direction: column; gap: 3px; }
        .activation-page .nav-step-name { font-size: 16px; letter-spacing: 2px; color: var(--text-muted); transition: color .4s ease; }
        .activation-page .nav-step.active .nav-step-name { color: var(--gold-light); font-weight: 500; }
        .activation-page .nav-step.done .nav-step-name { color: var(--text-light); }
        .activation-page .nav-step-status { font-size: 12px; letter-spacing: 1px; color: rgba(180,160,120,.25); transition: color .4s ease; }
        .activation-page .nav-step.active .nav-step-status { color: var(--gold); }
        .activation-page .nav-step.done .nav-step-status { color: var(--success); }
        .activation-page .side-nav-footer { padding: 16px 24px 0; border-top: 1px solid rgba(180,160,120,.06); margin-top: 6px; }
        .activation-page .nav-progress-text { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', serif; font-size: 18px; color: var(--gold-light); letter-spacing: 2px; }
        .activation-page .nav-progress-bar { margin-top: 10px; height: 2px; background: rgba(180,160,120,.08); border-radius: 1px; overflow: hidden; }
        .activation-page .nav-progress-fill {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright));
            transition: width .8s ease; border-radius: 1px; box-shadow: 0 0 6px rgba(200,178,130,.3);
        }

        /* 右侧内容区 */
        .activation-page .main-content { flex: 1; position: relative; display: flex; flex-direction: column; overflow: hidden; }
        .activation-page .content-atmosphere { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
        .activation-page .content-atmosphere::before {
            content: ''; position: absolute; top: -100px; left: 50%; transform: translateX(-50%);
            width: 900px; height: 500px;
            background: radial-gradient(ellipse at 50% 30%, rgba(200,178,130,.1) 0%, rgba(200,178,130,.03) 40%, transparent 65%);
        }
        .activation-page .main-content::before {
            content: ''; position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(180,160,120,.018) 1px, transparent 1px),
                linear-gradient(90deg, rgba(180,160,120,.018) 1px, transparent 1px);
            background-size: 60px 60px; pointer-events: none; z-index: 0;
        }
        .activation-page .scan-line {
            position: absolute; top: 0; left: 0; right: 0; height: 1px;
            background: linear-gradient(90deg, transparent, rgba(100,200,180,.15), transparent);
            animation: actScanDown 6s linear infinite; pointer-events: none; z-index: 1;
        }
        @keyframes actScanDown {
            0% { top: 0; opacity: 0; } 5% { opacity: 1; } 95% { opacity: .6; } 100% { top: 100%; opacity: 0; }
        }
        .activation-page .gold-particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
        .activation-page .gold-particle {
            position: absolute; width: 2px; height: 2px;
            background: rgba(200,178,130,.5); border-radius: 50%;
            box-shadow: 0 0 5px rgba(200,178,130,.3); animation: actFloatUp 8s linear infinite;
        }
        .activation-page .step-stage {
            flex: 1; position: relative; display: flex; align-items: center; justify-content: center;
            padding: 24px 52px 48px; z-index: 2;
        }
        .activation-page .step-panel {
            opacity: 0; pointer-events: none; position: absolute;
            display: flex; flex-direction: column; gap: 18px;
            width: calc(100% - 104px); max-width: 1000px; transition: opacity 0.01s;
        }
        .activation-page .step-panel.active { opacity: 1; pointer-events: auto; position: relative; }
        .activation-page .step-panel.entering { animation: actStepReveal 0.65s cubic-bezier(0.22,0.61,0.36,1) both; }
        .activation-page .step-panel.exiting { opacity: 1; pointer-events: none; position: relative; animation: actStepOut 0.3s ease forwards; }
        @keyframes actStepOut { from { opacity: 1; transform: translateY(0); filter: blur(0); } to { opacity: 0; transform: translateY(-18px); filter: blur(4px); } }
        @keyframes actStepReveal { 0% { opacity: 0; transform: translateY(14px); filter: brightness(1.15) blur(2px); } 60% { opacity: 1; filter: brightness(1.05) blur(0); } 100% { opacity: 1; transform: translateY(0); filter: brightness(1) blur(0); } }
        @keyframes actElemFadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
        .activation-page .step-panel.entering .step-header { animation: actElemFadeInUp 0.45s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: 0.06s; }
        .activation-page .step-panel.entering .step-body { animation: actElemFadeInUp 0.45s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: 0.14s; }
        .activation-page .step-header { display: flex; align-items: baseline; gap: 18px; }
        .activation-page .step-number { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', serif; font-size: 56px; font-weight: 300; color: rgba(200,178,130,.28); letter-spacing: 2px; }
        .activation-page .step-title { font-size: 34px; letter-spacing: 5px; color: var(--text-white); font-weight: 300; }
        .activation-page .step-why {
            font-size: 15px; letter-spacing: 2px; color: var(--gold); font-weight: 400;
            margin-top: -16px; margin-bottom: 6px; line-height: 1.6;
            max-width: 480px;
        }
        .activation-page .step-panel.entering .step-why { animation: actElemFadeInUp 0.45s cubic-bezier(0.22,0.61,0.36,1) both; animation-delay: 0.10s; }
        .activation-page .step-body {
            position: relative;
            background: linear-gradient(135deg, rgba(28,24,18,.55) 0%, rgba(20,16,12,.3) 100%);
            border: 1px solid rgba(180,160,120,.08); border-radius: var(--radius-md); padding: 24px 32px;
            height: 500px; overflow-y: auto;
        }
        /* Step 4 body: flex centering for engine + certificate */
        .activation-page #actStep4Body {
            display: flex; flex-direction: column; align-items: center; justify-content: center;
        }
        .activation-page .step-body::-webkit-scrollbar { width: 3px; }
        .activation-page .step-body::-webkit-scrollbar-thumb { background: rgba(180,160,120,.12); border-radius: 2px; }
        .activation-page .step-body::before, .activation-page .step-body::after {
            content: ''; position: absolute; width: 18px; height: 18px; border: 1px solid rgba(200,178,130,.3); opacity: 0.5;
        }
        .activation-page .step-body::before { top: 8px; left: 8px; border-right: none; border-bottom: none; }
        .activation-page .step-body::after { bottom: 8px; right: 8px; border-left: none; border-top: none; }

        /* Step 1 */
        /* 雷达图布局 */
        .activation-page .radar-layout { display: flex; align-items: stretch; gap: 16px; }
        .activation-page .radar-chart-wrap { position: relative; flex-shrink: 0; width: 260px; height: 260px; }
        .activation-page .radar-svg { width: 100%; height: 100%; }
        /* 雷达扫描动画 */
        .activation-page .radar-bg { fill: rgba(28,22,16,.5); stroke: rgba(180,160,120,.1); stroke-width: 1; }
        .activation-page .radar-scan-group { animation: radarSpin 2s linear infinite; transform-origin: 140px 140px; }
        .activation-page .radar-scan-line { stroke: rgba(200,178,120,.6); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(200,178,120,.4)); }
        @keyframes radarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
        /* 圆形网格（扫描完成后浮现） */
        .activation-page .radar-grid-group { opacity: 0; transition: opacity .6s ease; }
        .activation-page .radar-grid-group.visible { opacity: 1; }
        .activation-page .radar-labels-group { opacity: 0; transition: opacity .5s ease .3s; }
        .activation-page .radar-labels-group.visible { opacity: 1; }
        .activation-page .radar-grid-ring { fill: none; stroke: rgba(180,160,120,.08); stroke-width: 1; }
        .activation-page .radar-grid-outer { stroke: rgba(180,160,120,.18); }
        /* 6 条轴线 */
        .activation-page .radar-axis { stroke: rgba(180,160,120,.06); stroke-width: .5; }
        /* 数据多边形 */
        .activation-page .radar-data { fill: rgba(200,178,120,.18); stroke: var(--gold); stroke-width: 1.5; stroke-linejoin: round; transition: all .6s ease; }
        /* 轴标签 */
        .activation-page .radar-label { font-size: 9px; letter-spacing: 1.5px; fill: var(--text-muted); }
        /* 中心分数 */
        .activation-page .radar-center-score { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; pointer-events: none; }
        .activation-page .radar-score-num { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei',serif; font-size: 36px; font-weight: 500; color: var(--gold-bright); letter-spacing: 1px; opacity: 0; transition: all .6s ease; }
        .activation-page .radar-score-num.visible { opacity: 1; }
        .activation-page .radar-score-label { font-size: 10px; letter-spacing: 2px; color: var(--text-muted); margin-top: 2px; opacity: 0; transition: all .6s ease .2s; }
        .activation-page .radar-score-label.visible { opacity: 1; }
        /* 图例 */
        .activation-page .radar-legend { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: stretch; min-width: 0; }
        .activation-page .radar-legend-item { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 3px; background: rgba(28,22,16,.4); border: 1px solid rgba(180,160,120,.04); transition: all .5s ease; opacity: .35; flex: 1; }
        .activation-page .radar-legend-item.revealed { opacity: 1; border-color: rgba(180,160,120,.14); }
        .activation-page .radar-legend-item .legend-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); flex-shrink: 0; }
        .activation-page .radar-legend-item .legend-label { font-size: 10px; letter-spacing: 1px; color: var(--text-muted); flex: 1; }
        .activation-page .radar-legend-item .legend-val { font-size: 13px; letter-spacing: .5px; color: var(--gold); }

        /* 信息安全承诺 */
        .activation-page .detect-privacy {
            margin-top: 14px;
            text-align: center;
            opacity: 0; transform: translateY(8px); transition: all .6s ease;
        }
        .activation-page .detect-privacy.visible { opacity: 1; transform: translateY(0); }
        .activation-page .detect-privacy-text { font-size: 12px; letter-spacing: 1px; color: var(--text-muted); opacity: .6; }

        /* 身份信息卡片 */
        .activation-page .identity-cards { margin-top: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; opacity: 0; transform: translateY(8px); transition: all .6s ease; }
        .activation-page .identity-cards.visible { opacity: 1; transform: translateY(0); }
        .activation-page .id-card { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: rgba(28,22,16,.5); border: 1px solid rgba(180,160,120,.08); border-radius: var(--radius-sm); transition: all .5s ease; }
        .activation-page .id-card.revealed { border-color: rgba(200,178,130,.22); background: rgba(200,178,130,.04); }
        .activation-page .id-card-icon-wrap { width: 34px; height: 34px; border-radius: 50%; background: rgba(28,22,16,.6); border: 1px solid rgba(180,160,120,.12); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .activation-page .id-card-icon { font-size: 16px; }
        .activation-page .id-card-body { min-width: 0; }
        .activation-page .id-card-label { font-size: 11px; letter-spacing: 2px; color: var(--gold); margin-bottom: 4px; }
        .activation-page .id-card-value { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei',serif; font-size: 20px; font-weight: 400; letter-spacing: 1px; color: var(--text-white); margin-bottom: 2px; transition: all .5s ease; }
        .activation-page .id-card-value.scanning { color: var(--gold); animation: actScanBlink 1s ease infinite; }
        @keyframes actScanBlink { 0%,100% { opacity:.35; } 50% { opacity:1; } }
        .activation-page .id-card-desc { font-size: 10px; color: var(--text-muted); letter-spacing: 1px; }

        /* Step 2 — 4 幕分屏叙事 */
        /* act-stage 通用容器 */
        .activation-page .act-stage { display: none; flex-direction: column; gap: 20px; width: 100%; height: 100%; position: relative; }
        .activation-page .act-stage.active { display: flex; animation: actStageFadeIn 0.45s cubic-bezier(0.22,0.61,0.36,1) both; }
        .activation-page .act-stage.exiting { animation: actStageFadeOut 0.28s ease both; }
        @keyframes actStageFadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
        @keyframes actStageFadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }

        /* ---- Act 2.1：铺路启程 ---- */
        .activation-page .pave-summary { opacity: 0; transform: translateY(8px); transition: all 0.6s ease; }
        .activation-page .pave-summary.visible { opacity: 1; transform: translateY(0); }
        .activation-page .pave-summary-title { font-size: 14px; letter-spacing: 2px; color: var(--gold); margin-bottom: 16px; }
        .activation-page .pave-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; }
        .activation-page .pave-summary-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px;
            background: rgba(28,22,16,.4); border: 1px solid rgba(180,160,120,.06); border-radius: var(--radius-sm); }
        .activation-page .pave-summary-label { font-size: 13px; color: var(--text-muted); letter-spacing: 1px; }
        .activation-page .pave-summary-value { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', serif;
            font-size: 18px; color: var(--text-light); letter-spacing: 1px; }

        /* ---- Act 2.2：优化执行（简化版） ---- */
        .activation-page .opt-progress { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 6px; }
        .activation-page .opt-progress-bar { width: 72%; height: 8px; background: rgba(180,160,120,.08); border-radius: 4px; overflow: hidden; }
        .activation-page .opt-progress-fill { width: 0%; height: 100%; border-radius: 4px;
            background: linear-gradient(90deg, rgba(180,160,120,.35), var(--gold-bright), rgba(200,178,140,.7));
            transition: width 0.55s cubic-bezier(0.22,0.61,0.36,1); }
        .activation-page .opt-progress-text { font-size: 13px; letter-spacing: 1px; color: var(--text-muted); }

        /* ---- Act 2.2：优化执行 ---- */
        .activation-page .opt-banner { display: flex; align-items: center; gap: 8px; padding: 8px 16px;
            background: rgba(200,178,130,.04); border: 1px solid rgba(200,178,130,.1); border-radius: var(--radius-sm); }
        .activation-page .opt-banner-icon { font-size: 14px; color: var(--gold); }
        .activation-page .opt-banner-text { font-size: 14px; letter-spacing: 1px; color: var(--text-light); }
        .activation-page .opt-exec-list { display: flex; flex-direction: column; gap: 5px; }
        .activation-page .opt-exec-item { display: flex; align-items: center; gap: 14px;
            padding: 8px 14px; background: rgba(28,22,16,.5); border: 1px solid rgba(180,160,120,.06);
            border-radius: var(--radius-sm); transition: all 0.45s ease; }
        .activation-page .opt-exec-item.optimizing { border-color: rgba(200,178,130,.22); background: rgba(200,178,130,.04); }
        .activation-page .opt-exec-item.done { border-color: var(--success-border); background: var(--success-bg); }
        .activation-page .opt-exec-left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
        .activation-page .opt-exec-icon { font-size: 14px; color: var(--gold); flex-shrink: 0; }
        .activation-page .opt-exec-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .activation-page .opt-exec-name { font-size: 15px; letter-spacing: 1px; color: var(--text-light); }
        .activation-page .opt-exec-reason { font-size: 11px; color: var(--text-muted); letter-spacing: 1px; }
        .activation-page .opt-exec-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
        .activation-page .opt-exec-before { font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
            font-size: 14px; color: var(--text-muted); }
        .activation-page .opt-exec-arrow { color: var(--gold); opacity: 0.5; font-size: 14px; }
        .activation-page .opt-exec-after { font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
            font-size: 14px; color: var(--success); }
        .activation-page .opt-exec-status { font-size: 13px; letter-spacing: 2px; color: rgba(220,200,170,.25); min-width: 54px; text-align: right; flex-shrink: 0; }
        .activation-page .opt-exec-item.optimizing .opt-exec-status { color: var(--gold-bright); }
        .activation-page .opt-exec-item.done .opt-exec-status { color: var(--success); }

        .activation-page .opt-summary { display: flex; align-items: center; gap: 8px; justify-content: center;
            padding: 0; opacity: 0; transform: translateY(6px); transition: all 0.5s ease;
            font-size: 14px; letter-spacing: 1.5px; color: var(--success); }
        .activation-page .opt-summary.visible { opacity: 1; transform: translateY(0); }

        /* ---- Act 2.3：优化报告（总结页 — 层级叙事布局） ---- */

        #act2Stage3 { gap: 0; justify-content: flex-start; padding: 8px 0; overflow-y: auto; }

        /* 已完成声明区域 — 居中仪式感，视觉焦点 */
        .activation-page .rpt-declaration {
            display: flex; flex-direction: column; align-items: center; gap: 16px;
            padding: 28px 0 26px;
            position: relative;
        }
        .activation-page .rpt-declaration::before {
            content: '';
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 220px; height: 220px; border-radius: 50%;
            background: radial-gradient(circle, rgba(124,200,138,.04) 0%, transparent 70%);
            pointer-events: none;
        }
        .activation-page .rpt-declaration-check {
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: 22px; color: var(--success);
            width: 48px; height: 48px; line-height: 1;
            border-radius: 50%;
            background: rgba(124,200,138,.08);
            border: 1.5px solid rgba(124,200,138,.18);
            box-shadow: 0 0 20px rgba(124,200,138,.08), 0 0 40px rgba(124,200,138,.04);
            display: flex; align-items: center; justify-content: center;
            flex-shrink: 0;
        }
        .activation-page .rpt-declaration-text {
            display: flex; flex-direction: column; align-items: center; gap: 5px;
            font-family: 'Noto Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;
            font-weight: 400;
        }
        .activation-page .rpt-declaration-primary {
            font-size: 21px; line-height: 1.6; letter-spacing: 2.5px;
            color: var(--text-white);
            text-shadow: 0 0 24px rgba(124,200,138,.12);
        }
        .activation-page .rpt-declaration-secondary {
            font-size: 14px; line-height: 1.6; letter-spacing: 1.2px;
            color: rgba(208,196,172,.55);
        }

        /* 分区间分隔线 */
        .activation-page .rpt-divider {
            height: 1px; margin: 6px 0;
            background: linear-gradient(90deg, transparent, rgba(180,160,120,.14), transparent);
        }

        /* 过渡引导语 — 承上启下，左对齐 */
        .activation-page .rpt-bridge {
            font-size: 12px; letter-spacing: 1px; line-height: 1.7;
            color: rgba(208,196,172,.38);
            padding: 0 0 12px 2px;
        }

        /* 分区容器 */
        .activation-page .rpt-section {
            padding: 16px 0 8px;
        }

        /* 分区标签：建议操作 — 带金色竖线点缀 */
        .activation-page .rpt-section-label {
            font-size: 14px; letter-spacing: 3px; color: var(--gold);
            margin-bottom: 14px; font-weight: 500;
            display: flex; align-items: center; gap: 10px;
        }
        .activation-page .rpt-section-label::before {
            content: '';
            display: inline-block;
            width: 3px; height: 14px;
            background: var(--gold); opacity: 0.4;
            border-radius: 2px;
        }

        /* 建议操作卡片网格 */
        .activation-page .rpt-advice-grid {
            display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
        }
        .activation-page .rpt-advice-card {
            background: rgba(28,22,16,.35);
            border: 1px solid rgba(180,160,120,.07);
            border-radius: var(--radius-sm);
            padding: 14px 16px;
            display: flex; flex-direction: column; gap: 8px;
            transition: border-color 0.3s ease, background 0.3s ease;
        }
        .activation-page .rpt-advice-card:hover {
            border-color: rgba(200,178,130,.16);
            background: rgba(200,178,130,.025);
        }
        .activation-page .rpt-advice-card-index {
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
            font-size: 12px; font-weight: 600; letter-spacing: 1.5px;
            color: var(--gold); opacity: 0.5;
        }
        .activation-page .rpt-advice-card-text {
            font-size: 12px; line-height: 1.6; letter-spacing: 0.5px;
            color: var(--text-muted);
        }
        .activation-page .rpt-advice-note {
            color: rgba(208,196,172,.3); letter-spacing: 0.5px;
        }


        /* act-stage 逐幕「继续」按钮 */
        .activation-page .act-stage-btn {
            position: absolute; bottom: 18px; right: 24px;
            background: rgba(200,178,130,.08); border: 1px solid rgba(200,178,130,.18);
            color: var(--gold-bright); font-size: 13px; letter-spacing: 2px;
            padding: 8px 20px; border-radius: 4px; cursor: pointer;
            opacity: 0; transform: translateY(6px);
            transition: all 0.45s ease; pointer-events: none;
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        .activation-page .act-stage-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
        .activation-page .act-stage-btn:hover { background: rgba(200,178,130,.18); border-color: rgba(200,178,130,.35); color: var(--gold-light); }

        /* Step 3 */
        /* ECharts 横向拓扑图容器 */
        .activation-page .topo-chart-wrap {
            position: relative;
            width: 100%;
            height: 420px;
            background:
                radial-gradient(ellipse at 50% 55%, rgba(28, 60, 92, .35) 0%, rgba(10, 18, 32, .6) 60%, rgba(0, 0, 0, .85) 100%),
                linear-gradient(180deg, #06090f 0%, #0a1018 100%);
            border: 1px solid rgba(110, 168, 220, .12);
            border-radius: var(--radius-md);
            overflow: hidden;
            box-shadow:
                inset 0 0 60px rgba(70, 130, 180, .08),
                0 0 30px rgba(0, 0, 0, .4);
            transition: height .7s ease, margin .7s ease, opacity .55s ease, border-color .55s ease, box-shadow .55s ease, flex-basis .7s ease, width .7s ease;
        }
        .activation-page .topo-chart-wrap::before {
            content: '';
            position: absolute; inset: 0;
            background-image:
                linear-gradient(rgba(110, 168, 220, .04) 1px, transparent 1px),
                linear-gradient(90deg, rgba(110, 168, 220, .04) 1px, transparent 1px);
            background-size: 40px 40px;
            pointer-events: none;
            z-index: 0;
        }
        .activation-page .topo-chart-wrap::after {
            content: '';
            position: absolute; left: 0; right: 0; top: 50%;
            height: 1px;
            background: linear-gradient(90deg, transparent, rgba(110, 168, 220, .15), transparent);
            pointer-events: none;
        }
        /* 拓扑图容器 */
        .activation-page .topo-stage { display: flex; flex-direction: column; gap: 0; align-items: center; width: 100%; transition: flex-direction .6s ease, gap .6s ease, align-items .6s ease; }
        .activation-page .topo-stage.is-shifted { flex-direction: row; align-items: center; gap: 32px; }
        .activation-page .topo-chart-wrap.is-thumb {
            flex: 0 0 380px;
            width: 380px;
            height: 300px;
            border-radius: var(--radius-md);
            box-shadow: inset 0 0 30px rgba(70, 130, 180, .06), 0 0 18px rgba(0, 0, 0, .35);
        }
        .activation-page .topo-chart-wrap.is-thumb::after { display: none; }
        .activation-page .topo-chart-wrap.is-thumb::before {
            background-image:
                linear-gradient(rgba(110, 168, 220, .06) 1px, transparent 1px),
                linear-gradient(90deg, rgba(110, 168, 220, .06) 1px, transparent 1px);
        }
        .activation-page .topo-thumb-badge {
            position: absolute; left: 10px; top: 10px;
            padding: 4px 10px;
            background: rgba(123, 227, 161, .12);
            border: 1px solid rgba(123, 227, 161, .55);
            border-radius: 999px;
            color: #7be3a1;
            font-size: 10px;
            letter-spacing: 2px;
            z-index: 5;
            opacity: 0;
            transform: translateY(-4px);
            transition: opacity .5s ease, transform .5s ease;
            box-shadow: 0 0 12px rgba(123, 227, 161, .25);
        }
        .activation-page .topo-thumb-badge.is-visible { opacity: 1; transform: translateY(0); }
        /* 右侧结果面板：垂直堆叠布局（圆环在上 + 文字说明在下） */
        .activation-page .match-result-panel {
            flex: 1 1 auto; min-width: 0;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 0; padding: 0;
            max-height: 0; overflow: hidden;
            opacity: 0; transform: translateY(12px);
            transition: opacity .8s ease, max-height .6s ease, padding .6s ease, gap .6s ease;
        }
        .activation-page .match-result-panel.visible { max-height: 300px; padding: 6px 4px; gap: 14px; opacity: 1; transform: translateY(0); }
        .activation-page .match-result-panel .match-result-main {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 12px;
            width: 100%;
        }
        .activation-page .match-result-panel .match-score-ring { width: 120px; height: 120px; flex-shrink: 0; }
        .activation-page .match-result-panel .score-num { font-size: 38px; }
        .activation-page .match-result-panel .match-score-text-group { display: flex; flex-direction: column; gap: 4px; align-items: center; }
        .activation-page .match-result-panel .match-score-label { letter-spacing: 5px; text-align: center; font-size: 16px; color: var(--gold-light); }
        .activation-page .match-result-panel .match-score-sublabel { font-size: 11px; letter-spacing: 1.5px; color: var(--text-muted); text-align: center; }
        /* 详情卡下沉到 stage 下方，独立横排 */
        .activation-page .topo-stage.is-shifted .match-detail-cards,
        .activation-page .match-detail-cards {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 0;
            width: 100%;
            margin: 0;
            max-height: 0; overflow: hidden;
            opacity: 0;
            transition: opacity .6s ease, max-height .6s ease, margin .6s ease, gap .6s ease;
        }
        .activation-page .match-detail-cards.visible { max-height: 200px; margin-top: 12px; gap: 10px; opacity: 1; }
        .activation-page .match-detail-card { padding: 14px 12px; background: rgba(28,22,16,.55); border: 1px solid rgba(180,160,120,.1); border-radius: var(--radius-sm); text-align: center; transition: all .5s ease; }
        .activation-page .match-detail-card.revealed { border-color: rgba(200,178,130,.25); background: rgba(200,178,130,.04); box-shadow: 0 0 16px rgba(200,178,130,.06); }
        .activation-page .match-detail-label { font-size: 12px; letter-spacing: 3px; color: var(--gold); margin-bottom: 8px; }
        .activation-page .match-detail-value { font-size: 22px; letter-spacing: 1px; color: var(--text-white); font-family: 'SF Mono', 'Consolas', 'Monaco', monospace; font-weight: 300; }
        .activation-page .match-detail-desc { font-size: 11px; color: var(--text-muted); margin-top: 6px; letter-spacing: 1.5px; }
        .activation-page .match-explain { margin: 0; padding: 0; max-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, max-height .6s ease, margin .6s ease; width: 100%; }
        .activation-page .match-explain.visible { max-height: 60px; margin: 14px 0 0; opacity: 1; transform: translateY(0); }
        .activation-page .topo-legend {
            display: flex; gap: 18px;
            margin-top: 10px;
            font-size: 11px;
            letter-spacing: 1.2px;
            color: var(--text-muted);
            justify-content: center;
            align-items: center;
            transition: opacity .5s ease, max-height .5s ease .1s, margin .5s ease .1s, padding .5s ease .1s;
            max-height: 40px;
            overflow: hidden;
        }
        .activation-page .topo-legend.is-hidden { opacity: 0; max-height: 0; margin: 0; padding: 0; }
        .activation-page .topo-demo-note {
            display: flex; align-items: center; justify-content: center;
            margin-top: 0; max-height: 0; overflow: hidden;
            opacity: 0; transform: translateY(6px);
            transition: opacity .5s ease, max-height .5s ease, margin .5s ease;
        }
        .activation-page .topo-demo-note.visible { margin-top: 4px; max-height: 50px; opacity: 1; transform: translateY(0); }
        .activation-page .topo-demo-note-icon { display: none; }
        .activation-page .topo-demo-note-text { font-size: 12px; line-height: 1.6; color: rgba(208,196,172,.35); letter-spacing: 0.5px; text-align: center; }
        .activation-page .topo-status {
            text-align: center;
            margin-top: 10px;
            font-size: 11px;
            letter-spacing: 2px;
            color: var(--text-muted);
            opacity: 0;
            transition: opacity .4s ease, color .4s ease, max-height .5s ease .1s, margin .5s ease .1s, padding .5s ease .1s;
            max-height: 30px;
            overflow: hidden;
        }
        .activation-page .topo-status.visible { opacity: 1; }
        .activation-page .topo-status.is-best { color: #7be3a1; }
        .activation-page .topo-status.is-hidden { opacity: 0; max-height: 0; margin: 0; padding: 0; }
        .activation-page .topo-status::before {
            content: '';
            display: inline-block; width: 6px; height: 6px;
            border-radius: 50%; background: currentColor;
            margin-right: 8px; vertical-align: middle;
            box-shadow: 0 0 8px currentColor;
            animation: topoStatusPulse 1.4s ease-in-out infinite;
        }
        .activation-page .topo-status.is-best::before {
            background: #7be3a1;
            animation: topoStatusBestPulse 1.2s ease-in-out infinite;
        }
        @keyframes topoStatusPulse {
            0%, 100% { opacity: 0.4; transform: scale(0.85); }
            50% { opacity: 1; transform: scale(1.1); }
        }
        @keyframes topoStatusBestPulse {
            0%, 100% { opacity: 0.6; transform: scale(0.9); box-shadow: 0 0 6px #7be3a1; }
            50% { opacity: 1; transform: scale(1.15); box-shadow: 0 0 14px #7be3a1; }
        }
        .activation-page .topo-legend-item {
            display: inline-flex; align-items: center; gap: 6px;
            opacity: .7; font-size: 11px; letter-spacing: 1.2px;
        }
        .activation-page .toposer { color: var(--gold-light); opacity: 1; }
        .activation-page .toposcan { color: rgba(110, 200, 255, .8); opacity: 1; }
        .activation-page .topoelim { color: rgba(100, 116, 139, .6); opacity: 1; }
        .activation-page .topobest { color: #7be3a1; opacity: 1; }
        .activation-page .topogame { color: rgba(160, 174, 192, .8); opacity: 1; }
        .activation-page .match-result { display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 0; transform: translateY(12px); transition: all .8s ease; }
        .activation-page .match-result.visible { opacity: 1; transform: translateY(0); }
        .activation-page .match-score-ring { position: relative; width: 110px; height: 110px; }
        .activation-page .match-score-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
        .activation-page .ring-bg { fill: none; stroke: rgba(180,160,120,.08); stroke-width: 4; }
        .activation-page .ring-fill { fill: none; stroke: var(--gold-bright); stroke-width: 4; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; stroke-linecap: round; transition: stroke-dashoffset 1.5s ease; filter: drop-shadow(0 0 6px var(--gold-glow)); }
        .activation-page .match-score-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
        .activation-page .score-num { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', serif; font-size: 36px; font-weight: 300; color: var(--gold-light); text-shadow: 0 0 20px rgba(200,178,130,.2); }
        .activation-page .score-unit { font-size: 16px; color: var(--gold); margin-top: 4px; }
        .activation-page .match-score-label { font-size: 13px; letter-spacing: 4px; color: var(--text-muted); }
        .activation-page .match-result-main { display: flex; flex-direction: column; align-items: center; gap: 6px; }

        /* 匹配详情卡片 */
        .activation-page .match-detail-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; width: 100%; margin-top: 0; opacity: 0; max-height: 0; overflow: hidden; transition: opacity .6s ease, max-height .6s ease, margin .6s ease, gap .6s ease; }
        .activation-page .match-detail-cards.visible { max-height: 200px; margin-top: 12px; gap: 10px; opacity: 1; }
        .activation-page .match-detail-card { padding: 8px 8px; background: rgba(28,22,16,.5); border: 1px solid rgba(180,160,120,.08); border-radius: var(--radius-sm); text-align: center; transition: all .5s ease; }
        .activation-page .match-detail-card.revealed { border-color: rgba(200,178,130,.2); background: rgba(200,178,130,.03); }
        .activation-page .match-detail-label { font-size: 12px; letter-spacing: 2px; color: var(--gold); margin-bottom: 6px; }
        .activation-page .match-detail-value { font-size: 18px; letter-spacing: 1px; color: var(--text-white); font-family: 'SF Mono', 'Consolas', 'Monaco', monospace; }
        .activation-page .match-detail-desc { font-size: 11px; color: var(--text-muted); margin-top: 2px; letter-spacing: 1px; }

        /* 匹配度说明 — 居中纯净文字 */
        .activation-page .match-explain { margin: 0; padding: 0; max-height: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(8px); transition: opacity .6s ease, max-height .6s ease, margin .6s ease; width: 100%; }
        .activation-page .match-explain.visible { max-height: 60px; margin-top: 14px; opacity: 1; transform: translateY(0); }
        .activation-page .match-explain-icon { display: none; }
        .activation-page .match-explain-text { font-size: 12px; line-height: 1.6; color: rgba(208,196,172,.35); letter-spacing: 0.5px; text-align: center; }

        /* Step 4 — 引擎动画舞台 */
        .activation-page .bind-engine-stage {
            position: relative;
            width: 100%; height: 100%;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            gap: 10px; flex: 1 0 auto;
            transition: opacity 0.5s ease, max-height 0.5s ease;
            max-height: 100%; overflow: hidden;
        }
        .activation-page .bind-engine-stage.fade-out {
            opacity: 0; max-height: 0; margin: 0; padding: 0; gap: 0; flex: 0 0 0;
        }

        /* ---- 环形进度中心 ---- */
        .activation-page .ring-progress-center {
            position: relative;
            width: 200px; height: 200px;
            z-index: 3;
            transition: transform 0.5s ease;
        }
        .activation-page .ring-progress-svg {
            width: 100%; height: 100%;
            transform: rotate(-90deg);
        }
        .activation-page .ring-track {
            fill: none;
            stroke: rgba(200,178,130,.08);
            stroke-width: 3;
        }
        .activation-page .ring-fill {
            fill: none;
            stroke: url(#ringGradient);
            stroke-width: 3;
            stroke-linecap: round;
            stroke-dasharray: 515.22;
            stroke-dashoffset: 515.22;
            filter: drop-shadow(0 0 8px rgba(200,178,130,.35));
            transition: stroke-dashoffset 0.06s linear;
        }
        .activation-page .ring-center-text {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 2px;
        }
        .activation-page .ring-pct-num {
            font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', serif;
            font-size: 52px;
            font-weight: 300;
            color: var(--gold-light);
            text-shadow: 0 0 24px rgba(200,178,130,.35);
            transition: color 0.4s ease, text-shadow 0.4s ease;
        }
        .activation-page .ring-pct-unit {
            font-size: 22px;
            color: var(--gold);
            margin-top: 8px;
            transition: color 0.4s ease;
        }
        .activation-page .ring-tech-flash {
            display: flex; align-items: center; gap: 10px;
            padding: 8px 20px;
            z-index: 3;
            opacity: 0; transform: translateY(10px);
            transition: opacity 0.35s ease, transform 0.35s ease;
            min-height: 32px;
        }
        .activation-page .ring-tech-flash.show {
            opacity: 1; transform: translateY(0);
        }
        .activation-page .ring-tech-flash .tech-flash-check {
            color: var(--success);
            font-size: 13px;
            flex-shrink: 0;
            opacity: 0;
            transform: scale(0);
            transition: all 0.35s cubic-bezier(0.34,1.56,0.64,1) 0.1s;
        }
        .activation-page .ring-tech-flash.show .tech-flash-check {
            opacity: 1;
            transform: scale(1);
        }
        .activation-page .ring-tech-flash .tech-flash-text {
            color: rgba(200,178,130,.7);
            font-size: 13px;
            letter-spacing: 1.5px;
            transition: color 0.4s ease;
        }
        .activation-page .ring-tech-flash.show .tech-flash-text {
            color: rgba(225,208,173,.9);
        }

        /* ---- Ring tier effects ---- */
        /* T1: subtle */
        .activation-page .bind-engine-stage.tier-1 .ring-fill {
            filter: drop-shadow(0 0 10px rgba(200,178,130,.4));
        }
        .activation-page .bind-engine-stage.tier-1 .ring-pct-num {
            text-shadow: 0 0 28px rgba(200,178,130,.4);
        }

        /* T2: warming */
        .activation-page .bind-engine-stage.tier-2 .ring-fill {
            filter: drop-shadow(0 0 16px rgba(200,178,130,.5));
        }
        .activation-page .bind-engine-stage.tier-2 .ring-pct-num {
            text-shadow: 0 0 36px rgba(200,178,130,.5);
        }
        .activation-page .bind-engine-stage.tier-2 .tech-flash-text {
            color: rgba(225,208,173,.8);
        }

        /* T3: charging */
        .activation-page .bind-engine-stage.tier-3 .ring-fill {
            filter: drop-shadow(0 0 22px rgba(225,200,160,.6));
        }
        .activation-page .bind-engine-stage.tier-3 .ring-pct-num {
            text-shadow: 0 0 44px rgba(225,200,160,.6);
        }
        .activation-page .bind-engine-stage.tier-3 .tech-flash-text {
            color: rgba(225,208,173,.9);
        }

        /* T4: peak */
        .activation-page .bind-engine-stage.tier-4 .ring-fill {
            filter: drop-shadow(0 0 30px rgba(240,220,180,.7));
        }
        .activation-page .bind-engine-stage.tier-4 .ring-pct-num {
            text-shadow: 0 0 54px rgba(240,220,180,.7);
        }
        .activation-page .bind-engine-stage.tier-4 .tech-flash-text {
            color: rgba(240,220,180,.95);
        }

        /* T5: pre-bloom */
        .activation-page .bind-engine-stage.tier-5 .ring-fill {
            filter: drop-shadow(0 0 40px rgba(245,235,210,.85));
        }
        .activation-page .bind-engine-stage.tier-5 .ring-pct-num {
            text-shadow: 0 0 64px rgba(245,235,210,.85);
        }
        .activation-page .bind-engine-stage.tier-5 .tech-flash-text {
            color: rgba(245,235,210,1);
        }

        /* 引擎核心（钻石 + 光环）— 绝对定位在环形进度后方 */
        .activation-page .engine-core {
            position: absolute;
            top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 140px; height: 140px;
            display: flex; align-items: center; justify-content: center;
            z-index: 1;
            pointer-events: none;
            transition: transform 0.5s ease;
        }
        .activation-page .engine-ring {
            position: absolute; border-radius: 50%;
            border: 1.5px solid rgba(180,160,120,.06);
            transition: all 0.6s ease;
        }
        .activation-page .engine-ring-outer { inset: 0; }
        .activation-page .engine-ring-inner { inset: 28px; }
        .activation-page .engine-diamond {
            font-size: 28px; color: rgba(200,178,130,.35);
            z-index: 1; transition: all 0.6s ease;
        }

        /* 背景聚光 */
        .activation-page .engine-spotlight {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: 350px; height: 350px;
            background: radial-gradient(ellipse at center, rgba(200,178,130,.06) 0%, transparent 70%);
            opacity: 0; transition: opacity 0.6s ease;
            pointer-events: none; z-index: 0;
        }

        /* 脉冲波纹 */
        .activation-page .engine-pulse {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
            width: 140px; height: 140px;
            pointer-events: none; z-index: 1;
        }
        .activation-page .pulse-ring {
            position: absolute; inset: 0;
            border-radius: 50%;
            border: 1px solid rgba(200,178,130,0);
            opacity: 0;
        }

        /* 粒子容器 */
        .activation-page .engine-particles {
            position: absolute; inset: 0;
            overflow: hidden; pointer-events: none; z-index: 1;
        }
        .activation-page .engine-particle {
            position: absolute;
            width: 2px; height: 2px;
            border-radius: 50%;
            background: rgba(200,178,130,.5);
            box-shadow: 0 0 4px rgba(200,178,130,.3);
            animation: actEngineParticleFloat var(--dur) linear infinite;
            animation-delay: var(--delay);
            left: var(--x); bottom: 0;
        }
        @keyframes actEngineParticleFloat {
            0% { transform: translateY(0) scale(0); opacity: 0; }
            10% { opacity: 1; transform: translateY(-10%) scale(1); }
            90% { opacity: .5; }
            100% { transform: translateY(-120vh) scale(.2); opacity: 0; }
        }

        /* 绽放层 */
        .activation-page .engine-bloom {
            position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.3);
            width: 200px; height: 200px; border-radius: 50%;
            background: radial-gradient(circle, rgba(245,235,210,.35) 0%, rgba(225,200,160,.12) 40%, transparent 70%);
            opacity: 0; pointer-events: none; z-index: 0;
            transition: all 2s cubic-bezier(0.25,0.46,0.45,0.94);
        }
        .activation-page .engine-bloom.active {
            opacity: 1; transform: translate(-50%,-50%) scale(3);
        }
        .activation-page .engine-bloom.fade {
            opacity: 0; transform: translate(-50%,-50%) scale(4);
            transition: all 1.5s ease-out;
        }

        /* ---- 5 档递进视觉 ---- */
        /* T1 (0-15%): 点火 — 光环微亮，涡轮缓转 */
        .activation-page .bind-engine-stage.tier-1 .engine-ring-outer {
            border-color: rgba(200,178,130,.15);
            animation: actEngineSpin 10s linear infinite;
        }
        .activation-page .bind-engine-stage.tier-1 .engine-ring-inner {
            border-color: rgba(200,178,130,.08);
        }

        /* T2 (15-32%): 预热 — 粒子飘起，脉冲波纹，背景聚光 */
        .activation-page .bind-engine-stage.tier-2 .engine-ring-outer {
            border-color: rgba(200,178,130,.28);
            box-shadow: 0 0 24px rgba(200,178,130,.1);
            animation: actEngineSpin 8s linear infinite;
        }
        .activation-page .bind-engine-stage.tier-2 .engine-ring-inner {
            border-color: rgba(200,178,130,.12);
        }
        .activation-page .bind-engine-stage.tier-2 .engine-diamond {
            color: rgba(200,178,130,.6);
        }
        .activation-page .bind-engine-stage.tier-2 .engine-spotlight {
            opacity: .45;
        }
        .activation-page .bind-engine-stage.tier-2 .pulse-ring {
            border-color: rgba(200,178,130,.15);
            animation: actPulseExpand 3s ease-out infinite;
        }
        .activation-page .bind-engine-stage.tier-2 .pulse-ring-2 {
            animation-delay: 1.5s;
        }

        /* T3 (32-50%): 蓄能 — 粒子翻倍，双脉冲加速，钻石亮金 */
        .activation-page .bind-engine-stage.tier-3 .engine-ring-outer {
            border-color: rgba(200,178,130,.42);
            box-shadow: 0 0 32px rgba(200,178,130,.14);
            animation: actEngineSpin 6s linear infinite;
        }
        .activation-page .bind-engine-stage.tier-3 .engine-ring-inner {
            border-color: rgba(200,178,130,.22);
            animation: actEngineSpin 4s linear infinite reverse;
        }
        .activation-page .bind-engine-stage.tier-3 .engine-diamond {
            color: rgba(225,200,160,.8);
            text-shadow: 0 0 14px rgba(225,200,160,.35);
        }
        .activation-page .bind-engine-stage.tier-3 .engine-spotlight {
            opacity: .65;
        }
        .activation-page .bind-engine-stage.tier-3 .pulse-ring {
            border-color: rgba(200,178,130,.24);
            animation: actPulseExpand 1.8s ease-out infinite;
        }
        .activation-page .bind-engine-stage.tier-3 .pulse-ring-2 {
            animation-delay: 0.9s;
        }

        /* T4 (50-82%): 巅峰 — 粒子猛增，脉冲高频，亮白金钻石，呼吸缩放 */
        .activation-page .bind-engine-stage.tier-4 .engine-ring-outer {
            border-color: rgba(225,200,160,.58);
            box-shadow: 0 0 44px rgba(225,200,160,.2);
            animation: actEngineSpin 4s linear infinite;
        }
        .activation-page .bind-engine-stage.tier-4 .engine-ring-inner {
            border-color: rgba(225,200,160,.34);
            animation: actEngineSpin 2.5s linear infinite reverse;
        }
        .activation-page .bind-engine-stage.tier-4 .engine-diamond {
            color: rgba(240,220,180,.92);
            font-size: 32px;
            text-shadow: 0 0 22px rgba(240,220,180,.5);
        }
        .activation-page .bind-engine-stage.tier-4 .engine-spotlight {
            opacity: .82;
        }
        .activation-page .bind-engine-stage.tier-4 .pulse-ring {
            border-color: rgba(225,200,160,.3);
            animation: actPulseExpand 1s ease-out infinite;
        }
        .activation-page .bind-engine-stage.tier-4 .pulse-ring-2 {
            animation-delay: 0.5s;
        }
        .activation-page .bind-engine-stage.tier-4 .engine-core {
            animation: actEngineBreathe 1.5s ease-in-out infinite;
        }

        /* T5 (82-100%): 绽放前 — 全开，粒子极速，光晕扩散 */
        .activation-page .bind-engine-stage.tier-5 .engine-ring-outer {
            border-color: rgba(240,220,180,.72);
            box-shadow: 0 0 56px rgba(240,220,180,.26), 0 0 100px rgba(240,220,180,.08);
            animation: actEngineSpin 2.5s linear infinite;
        }
        .activation-page .bind-engine-stage.tier-5 .engine-ring-inner {
            border-color: rgba(240,220,180,.48);
            animation: actEngineSpin 1.5s linear infinite reverse;
        }
        .activation-page .bind-engine-stage.tier-5 .engine-diamond {
            color: #f5ead0;
            font-size: 36px;
            text-shadow: 0 0 32px rgba(245,235,210,.6);
        }
        .activation-page .bind-engine-stage.tier-5 .engine-spotlight {
            opacity: 1;
            width: 400px; height: 400px;
            background: radial-gradient(ellipse at center, rgba(240,220,180,.1) 0%, transparent 65%);
        }
        .activation-page .bind-engine-stage.tier-5 .pulse-ring {
            border-color: rgba(240,220,180,.38);
            animation: actPulseExpand 0.6s ease-out infinite;
        }
        .activation-page .bind-engine-stage.tier-5 .pulse-ring-2 {
            animation-delay: 0.3s;
        }
        .activation-page .bind-engine-stage.tier-5 .engine-core {
            animation: actEngineBreathe 0.8s ease-in-out infinite;
        }

        /* 动画关键帧 */
        @keyframes actEngineSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
        @keyframes actEngineBreathe {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        @keyframes actPulseExpand {
            0% { transform: scale(.7); opacity: .6; }
            100% { transform: scale(4); opacity: 0; }
        }

        /* Step 4 — 进度条 + 技术事项弹幕 */
        .activation-page .bind-progress-wrap {
            width: 100%; display: flex; flex-direction: column; gap: 12px;
            transition: opacity 0.4s ease, max-height 0.5s ease, margin 0.5s ease;
            max-height: 400px; overflow: hidden;
        }
        .activation-page .bind-progress-wrap.fade-out {
            opacity: 0; max-height: 0; margin: 0; padding: 0; gap: 0;
        }
        .activation-page .bind-progress-bar {
            width: 100%; height: 10px;
            background: rgba(180,160,120,.06);
            border-radius: 5px; overflow: hidden;
            border: 1px solid rgba(180,160,120,.1);
            transition: opacity 0.4s ease;
        }
        .activation-page .bind-progress-fill {
            height: 100%; width: 0%;
            background: linear-gradient(90deg, var(--gold-dark), var(--gold-bright), var(--gold-light));
            border-radius: 5px;
            transition: width 0.06s linear;
            box-shadow: 0 0 8px rgba(200,178,130,.4);
        }
        .activation-page .bind-progress-pct {
            font-size: 22px; font-weight: 700; letter-spacing: 2px;
            color: var(--gold-light); text-align: center;
            transition: opacity 0.4s ease;
        }
        .activation-page .bind-progress-wrap.fade-out .bind-progress-bar,
        .activation-page .bind-progress-wrap.fade-out .bind-progress-pct,
        .activation-page .bind-progress-wrap.fade-out .bind-tech-log {
            opacity: 0;
        }
        .activation-page .bind-tech-log {
            width: 100%; flex: 1; min-height: 0;
            overflow-y: auto; display: flex; flex-direction: column; gap: 4px;
            padding: 8px 0; transition: opacity 0.4s ease;
        }
        .activation-page .bind-tech-log::-webkit-scrollbar { width: 3px; }
        .activation-page .bind-tech-log::-webkit-scrollbar-thumb { background: rgba(180,160,120,.15); border-radius: 2px; }
        .activation-page .bind-tech-item {
            display: flex; align-items: center; gap: 8px;
            padding: 4px 8px;
            font-size: 12px; letter-spacing: 0.5px;
            opacity: 0; transform: translateX(-10px);
            transition: all 0.3s ease;
        }
        .activation-page .bind-tech-item.visible {
            opacity: 1; transform: translateX(0);
        }
        .activation-page .bind-tech-item .tech-check {
            color: var(--success); font-size: 11px; flex-shrink: 0;
        }
        .activation-page .bind-tech-item .tech-text {
            color: rgba(200,178,130,.65); font-family: 'Courier New', monospace;
        }

        /* 绑定仪式内容 — 默认隐藏，进度完成后显示 */
        .activation-page .bind-visual {
            display: flex; flex-direction: column; align-items: center; gap: 20px;
            opacity: 0; max-height: 0; overflow: hidden;
            transition: opacity 0.6s ease, max-height 0.6s ease;
            width: 100%;
        }
        .activation-page .bind-visual.revealed {
            opacity: 1; max-height: 2000px; overflow: visible;
        }
        .activation-page .bind-ceremony { position: relative; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; }
        .activation-page .bind-ring { position: absolute; border-radius: 50%; border: 1.5px solid rgba(180,160,120,.1); transition: all 0.8s ease; }
        .activation-page .bind-ring-outer { inset: 0; }
        .activation-page .bind-ring-inner { inset: 18px; }
        .activation-page .bind-ceremony.binding .bind-ring-outer { border-color: rgba(200,178,130,.35); animation: actBindRotate 8s linear infinite; box-shadow: 0 0 16px rgba(200,178,130,.08); }
        .activation-page .bind-ceremony.binding .bind-ring-inner { border-color: rgba(100,200,160,.2); animation: actBindRotate 6s linear infinite reverse; }
        @keyframes actBindRotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
        .activation-page .bind-ceremony.bound .bind-ring-outer { border-color: var(--gold-bright); box-shadow: 0 0 20px rgba(200,178,130,.12); }
        .activation-page .bind-ceremony.bound .bind-ring-inner { border-color: rgba(200,178,130,.25); }
        .activation-page .bind-core { width: 38px; height: 38px; border-radius: 50%; background: rgba(200,178,130,.04); border: 1px solid rgba(180,160,120,.18); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all .6s ease; }
        .activation-page .bind-ceremony.bound .bind-core { background: rgba(200,178,130,.08); border-color: rgba(200,178,130,.35); }
        .activation-page .bind-status-text { font-size: 22px; font-weight: 600; letter-spacing: 3px; color: var(--text-muted); min-height: 18px; transition: color 0.4s ease, font-size 0.5s ease; }
        .activation-page .bind-ceremony.bound ~ .bind-status-text { color: var(--gold-light); }
        .activation-page .bind-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; width: 100%; max-width: 560px; margin: 0 auto; }
        .activation-page .bind-info-card { padding: 20px 16px; background: rgba(28,22,16,.5); border: 1px solid rgba(180,160,120,.06); border-radius: var(--radius-sm); text-align: center; transition: all .5s ease; opacity: 0; transform: translateY(10px); display: flex; flex-direction: column; align-items: center; gap: 8px; }
        .activation-page .bind-info-card.revealed { opacity: 1; transform: translateY(0); border-color: rgba(200,178,130,.2); background: rgba(200,178,130,.03); }
        .activation-page .bind-info-card.bind-status-card.revealed { border-color: rgba(200,178,130,.35); background: rgba(200,178,130,.06); }
        .activation-page .bind-info-label { font-size: 14px; letter-spacing: 2.5px; color: var(--gold); margin-bottom: 0; }
        .activation-page .bind-info-value { font-size: 20px; letter-spacing: 1px; color: var(--text-white); font-family: 'SF Mono', 'Consolas', 'Monaco', monospace; line-height: 1.2; }
        .activation-page .bind-info-desc { font-size: 11.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; min-height: 16px; }
        .activation-page .bind-exclusive { font-size: 14px; letter-spacing: 1.5px; color: var(--text-muted); text-align: center; opacity: 0; transform: translateY(8px); transition: all .5s ease; }
        .activation-page .bind-exclusive.visible { opacity: 1; transform: translateY(0); }
        .activation-page .bind-guidance { font-size: 14px; letter-spacing: 1.5px; color: var(--gold-light); text-align: center; opacity: 0; transform: translateY(8px); transition: all .5s ease; }
        .activation-page .bind-guidance.visible { opacity: 1; transform: translateY(0); }
        .activation-page .bind-metrics { display: flex; align-items: stretch; gap: 0; width: 100%; padding: 6px 14px; background: rgba(28,22,16,.35); border-radius: var(--radius-sm); border: 1px solid rgba(180,160,120,.06); opacity: 0; transform: translateY(8px); transition: all .5s ease; }
        .activation-page .bind-metrics.visible { opacity: 1; transform: translateY(0); }
        .activation-page .bind-metric-item { flex: 1; text-align: center; }
        .activation-page .bind-metric-sep { width: 1px; background: rgba(180,160,120,.12); margin: 2px 0; }
        .activation-page .bind-metric-label { font-size: 11px; letter-spacing: 2px; color: var(--gold); margin-bottom: 2px; }
        .activation-page .bind-metric-value { font-size: 15px; color: var(--text-white); font-family: 'SF Mono', 'Consolas', 'Monaco', monospace; letter-spacing: 0.5px; }
        .activation-page .bind-metric-desc { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

        /* Step 5 */
        .activation-page .latency-test { display: flex; flex-direction: column; gap: 28px; }
        .activation-page .chart-grid { display: flex; gap: 10px; height: 180px; }
        .activation-page .chart-y-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 14px; color: var(--text-muted); letter-spacing: 1px; min-width: 50px; text-align: right; padding: 4px 0; }
        .activation-page .chart-area { flex: 1; position: relative; border-left: 1px solid rgba(180,160,120,.08); border-bottom: 1px solid rgba(180,160,120,.08); }
        .activation-page #actLatencyCanvas { width: 100%; height: 100%; }
        .activation-page .latency-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
        .activation-page .lat-stat { text-align: center; }
        .activation-page .lat-label { font-size: 15px; letter-spacing: 3px; color: var(--gold); margin-bottom: 10px; }
        .activation-page .lat-value { font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', serif; font-size: 34px; font-weight: 400; color: var(--text-white); }
        .activation-page .lat-result.pass { color: var(--success); }

        /* Step 6 */
        .activation-page .cleanup-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
        .activation-page .cleanup-item { display: flex; align-items: center; gap: 16px; padding: 16px 24px; background: rgba(28,22,16,.6); border: 1px solid rgba(180,160,120,.05); border-radius: var(--radius-sm); transition: all .4s ease; }
        .activation-page .cleanup-icon { font-size: 16px; color: rgba(200,178,130,.35); }
        .activation-page .cleanup-name { flex: 1; font-size: 19px; letter-spacing: 1px; color: var(--text-light); }
        .activation-page .cleanup-status { font-size: 16px; letter-spacing: 2px; color: rgba(220,200,170,.3); }
        .activation-page .cleanup-item.done { border-color: var(--success-border); background: var(--success-bg); }
        .activation-page .cleanup-item.done .cleanup-icon { color: var(--success); }
        .activation-page .cleanup-item.done .cleanup-status { color: var(--success); }
        .activation-page .ready-badge { display: flex; align-items: center; gap: 12px; padding: 18px 26px; background: var(--success-bg); border: 1px solid var(--success-border); border-radius: var(--radius-sm); opacity: 0; transform: translateY(10px); transition: all .6s ease; }
        .activation-page .ready-badge.visible { opacity: 1; transform: translateY(0); }
        .activation-page .ready-icon { color: var(--success); font-size: 20px; }
        .activation-page .ready-text { font-size: 17px; letter-spacing: 2px; color: var(--success); }

        /* Step 7 */
        .activation-page .service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
        .activation-page .service-card { padding: 30px 24px; background: rgba(28,22,16,.6); border: 1px solid rgba(180,160,120,.06); border-radius: var(--radius-sm); text-align: center; opacity: 0; transform: translateY(14px); transition: all .5s ease; }
        .activation-page .service-card.visible { opacity: 1; transform: translateY(0); }
        .activation-page .service-icon { font-size: 34px; margin-bottom: 14px; }
        .activation-page .service-title { font-size: 19px; letter-spacing: 4px; color: var(--text-light); margin-bottom: 12px; }
        .activation-page .service-desc { font-size: 16px; line-height: 1.8; color: var(--text-muted); letter-spacing: 1px; }

        /* 转场 + 按钮 + Toast */
        .activation-page .step-transition-overlay { position: absolute; inset: 0; z-index: 50; pointer-events: none; overflow: hidden; opacity: 0; }
        .activation-page .step-transition-overlay.active { opacity: 1; }
        .activation-page .transition-beam { position: absolute; top: 0; bottom: 0; left: -30%; width: 25%; background: linear-gradient(90deg, transparent 0%, rgba(200,178,130,.06) 20%, rgba(225,208,173,.2) 50%, rgba(200,178,130,.06) 80%, transparent 100%); transform: skewX(-15deg); filter: blur(4px); opacity: 0; }
        .activation-page .step-transition-overlay.active .transition-beam { animation: actTransitionBeam 0.65s cubic-bezier(0.55,0,0.45,1) forwards; }
        @keyframes actTransitionBeam { 0% { left: -30%; opacity: 0; } 15% { opacity: 1; } 100% { left: 110%; opacity: 0; } }
        .activation-page .step-next-btn {
            display: inline-flex; align-items: center; gap: 14px;
            padding: 16px 48px; border-radius: var(--radius-full);
            background: linear-gradient(180deg, var(--gold-light) 0%, var(--gold-bright) 100%);
            color: #1a1610; font-size: 17px; font-weight: 600; letter-spacing: 3px; cursor: pointer;
            border: 1px solid var(--gold-light); font-family: inherit; transition: all 0.4s ease;
            box-shadow: 0 6px 20px rgba(170,150,113,.3), inset 0 1px 0 rgba(255,255,255,.25);
            opacity: 0; pointer-events: none; position: absolute; bottom: 32px;
            left: 52px; right: 52px; width: fit-content; margin: 0 auto;
            transform: translateY(12px); z-index: 20;
        }
        .activation-page .step-next-btn.visible { opacity: 1; transform: translateY(0); pointer-events: auto; animation: actElemFadeInUp 0.5s ease both; }
        .activation-page .step-next-btn:hover { background: linear-gradient(180deg, #ece2cc 0%, var(--gold-light) 100%); border-color: #ece2cc; box-shadow: 0 10px 30px rgba(200,178,140,.4); transform: translateY(-2px); }
        .activation-page .step-toast {
            position: absolute; bottom: 94px; left: 50%; transform: translateX(-50%) translateY(18px);
            display: flex; align-items: center; gap: 10px; padding: 14px 34px;
            background: rgba(14,11,7,.94); border: 1px solid var(--success-border);
            border-radius: var(--radius-full); opacity: 0; pointer-events: none;
            transition: all .4s ease; z-index: 100; backdrop-filter: blur(12px);
            box-shadow: 0 4px 20px rgba(0,0,0,.3);
        }
        .activation-page .step-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
        .activation-page .toast-check { color: var(--success); font-size: 16px; }
        .activation-page .toast-text { font-size: 16px; letter-spacing: 2px; color: var(--success); }



        /* ====================================================================
           completion screen — 开通完成
           ==================================================================== */
        .activation-page .completion-screen {
            position: absolute; inset: 0; z-index: 200;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            background: rgba(6, 5, 4, 0.94);
            opacity: 0; pointer-events: none;
            transition: opacity 0.8s ease;
        }
        .activation-page .completion-screen.is-visible { opacity: 1; pointer-events: all; }
        .activation-page .completion-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: linear-gradient(135deg, rgba(225,208,173,.15), rgba(200,178,130,.05));
            border: 2px solid rgba(225,208,173,.4);
            display: flex; align-items: center; justify-content: center;
            font-size: 36px; margin-bottom: 24px;
            animation: compIconPulse 2.4s ease-in-out infinite;
        }
        @keyframes compIconPulse {
            0%, 100% { box-shadow: 0 0 20px rgba(225,208,173,.2); }
            50% { box-shadow: 0 0 40px rgba(225,208,173,.4); }
        }
        .activation-page .completion-title {
            font-size: 28px; letter-spacing: 6px; color: var(--gold-light);
            font-weight: 300; margin-bottom: 8px;
        }
        .activation-page .completion-subtitle {
            font-size: 14px; letter-spacing: 3px; color: var(--text-muted);
            margin-bottom: 32px;
        }
        .activation-page .completion-details {
            display: flex; flex-direction: column; gap: 10px;
            padding: 20px 32px;
            background: rgba(28,22,16,.5);
            border: 1px solid rgba(180,160,120,.15);
            border-radius: var(--radius-md);
            min-width: 320px;
        }
        .activation-page .completion-detail {
            display: flex; justify-content: space-between; align-items: center;
            padding: 6px 0;
        }
        .activation-page .completion-detail + .completion-detail {
            border-top: 1px solid rgba(180,160,120,.06);
        }
        .activation-page .completion-detail-label {
            font-size: 13px; letter-spacing: 2px; color: var(--gold);
        }
        .activation-page .completion-detail-value {
            font-size: 14px; letter-spacing: 1px; color: var(--text-white);
            font-family: 'SF Mono', 'Consolas', 'Monaco', monospace;
        }