/* ============================================================
           QuickQ 订阅管理页 —— 皇家金 × 宝蓝主题
           页面位置：dingyue.html（网站根目录）
           ============================================================ */

        /* ---------- 基础重置与变量 ---------- */
        * { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --primary: #3f7bff;
            --primary-dark: #1e46c8;
            --accent: #4ee6c0;
            /* 本页专属：皇家金 + 宝蓝 —— 会员中心质感 */
            --royal-a: #f7c948;
            --royal-b: #ffb84d;
            --royal-glow: rgba(247, 201, 72, .4);
            --royal-soft: rgba(247, 201, 72, .12);
            --royal-border: rgba(247, 201, 72, .3);

            --navy-a: #3b82f6;
            --navy-b: #6366f1;
            --navy-glow: rgba(59, 130, 246, .4);
            --navy-soft: rgba(59, 130, 246, .12);
            --navy-border: rgba(59, 130, 246, .3);

            --warn: #f5a623;
            --danger: #ef4444;
            --success: #10b981;

            --bg-base: #060c1a;
            --bg-dark: #0a1122;
            --bg-card: #0f1a30;
            --text: #eaf0ff;
            --text-muted: #a9b8d4;
            --text-dim: #8ea4c9;
            --border: rgba(88, 132, 232, .20);
            --radius: 16px;
            --radius-sm: 10px;
            --radius-full: 9999px;
        }

        html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

        body {
            background: var(--bg-base);
            color: var(--text);
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.7;
            overflow-x: hidden;
        }

        a { color: inherit; text-decoration: none; }
        img { max-width: 100%; display: block; }
        button { background: none; border: none; cursor: pointer; color: inherit; }
        ul, ol, li { list-style: none; }

        ::-webkit-scrollbar { width: 6px; height: 6px; }
        ::-webkit-scrollbar-track { background: var(--bg-base); }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--royal-a), var(--navy-a));
            border-radius: 10px;
        }

        .container {
            width: 96%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .highlight { color: var(--accent) !important; }

        /* ---------- 头部导航（与首页一致） ---------- */
        .header {
            position: sticky; top: 0; z-index: 100;
            padding: .4rem 0;
            background: #03050b;
            backdrop-filter: blur(18px) saturate(1.2);
            -webkit-backdrop-filter: blur(18px) saturate(1.2);
            transition: background .3s;
        }
        .header.scrolled {
            background: rgba(6, 11, 24, .88);
            backdrop-filter: blur(24px) saturate(1.4);
        }
        .header-inner {
            display: flex; align-items: center; justify-content: space-between;
            width: 96%; margin: 0 auto; padding: 1rem;
        }
        .logo img { height: 2rem; width: auto; transition: opacity .2s; }
        .logo:hover img { opacity: .85; }

        .nav-desktop {
            display: none; align-items: center; gap: .5rem;
            flex: 1; margin-left: 2.5rem;
        }
        @media (min-width: 820px) { .nav-desktop { display: flex; } }
        .nav-desktop > a {
            padding: .4rem .9rem;
            border-radius: var(--radius-sm);
            color: var(--text-muted);
            font-size: .9rem; font-weight: 500; white-space: nowrap;
            transition: color .2s, background .2s;
        }
        .nav-desktop > a:hover { color: #fff; background: rgba(255, 255, 255, .06); }

        .nav-cta { display: none; align-items: center; gap: .8rem; }
        @media (min-width: 820px) { .nav-cta { display: flex; } }
        .nav-cta .btn-login {
            display: inline-flex; align-items: center; gap: .4rem;
            padding: .4rem 1.4rem; border-radius: var(--radius-full);
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            box-shadow: 0 4px 16px rgba(79, 124, 255, .25);
            color: #fff; font-size: .85rem; font-weight: 600;
            transition: transform .2s, box-shadow .2s;
        }
        .nav-cta .btn-login:hover {
            transform: scale(1.03);
            box-shadow: 0 8px 28px rgba(79, 124, 255, .4);
        }

        .hamburger {
            display: flex; align-items: center; justify-content: center;
            padding: .35rem .7rem; border-radius: var(--radius-sm);
            border: 1px solid var(--border); background: rgba(255, 255, 255, .04);
            color: #fff; font-size: 1.1rem; transition: background .2s;
        }
        .hamburger:hover { background: rgba(255, 255, 255, .08); }
        @media (min-width: 820px) { .hamburger { display: none; } }

        .nav-mobile {
            display: none; width: 100%; margin: 0 auto;
            padding: .5rem .5rem 1rem;
            border-top: 1px solid var(--border);
            background: rgba(6, 11, 24, .92);
            backdrop-filter: blur(12px);
        }
        .nav-mobile.open { display: block; animation: slideDown .25s ease; }
        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .nav-mobile a {
            display: block; padding: .5rem .8rem;
            border-radius: var(--radius-sm);
            color: var(--text-muted); font-size: .95rem;
            transition: background .15s, color .15s;
        }
        .nav-mobile a:hover { background: rgba(255, 255, 255, .05); color: #fff; }
        .nav-mobile .btn-login-mobile {
            margin-top: .5rem; padding: .6rem;
            border-radius: var(--radius-full);
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff !important; font-weight: 600; text-align: center;
        }

        /* ---------- 订阅 Hero（会员中心质感） ---------- */
        .sub-hero {
            position: relative;
            padding: 3rem 1rem 2.5rem;
            text-align: center;
            background: var(--bg-base);
            overflow: hidden;
        }
        .sub-hero::after {
            content: "";
            position: absolute; inset: 0; pointer-events: none;
            background:
                radial-gradient(ellipse at 25% 30%, rgba(247, 201, 72, .12), transparent 60%),
                radial-gradient(ellipse at 75% 70%, rgba(59, 130, 246, .12), transparent 60%);
        }
        .sub-hero .container { position: relative; z-index: 2; }

        .sub-hero .badge {
            display: inline-flex; align-items: center; gap: .5rem;
            margin-bottom: 1rem; padding: .25rem 1rem;
            border-radius: var(--radius-full);
            border: 1px solid var(--royal-border);
            background: linear-gradient(90deg, var(--royal-soft), var(--navy-soft));
            color: var(--royal-a);
            font-size: .72rem; font-weight: 500;
            letter-spacing: .5px;
        }
        .sub-hero .badge i { font-size: .5rem; }

        .sub-hero h1 {
            max-width: 820px; margin: 0 auto;
            color: #fff;
            font-size: clamp(1.9rem, 4.2vw, 3rem);
            font-weight: 800; line-height: 1.15;
            letter-spacing: -.025em;
        }
        .sub-hero h1 .hl-gold {
            background: linear-gradient(135deg, var(--royal-a), var(--royal-b));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .sub-hero h1 .hl-navy {
            background: linear-gradient(135deg, var(--navy-a), var(--navy-b));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .sub-hero .sub-headline {
            max-width: 720px;
            margin: .9rem auto 0;
            color: var(--text-muted);
            font-size: clamp(.95rem, 1.1vw, 1.1rem);
            line-height: 1.8;
        }

        .sub-hero .quick-jump {
            display: inline-flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            margin-top: 1.5rem;
            padding: .5rem 1rem;
            border-radius: var(--radius-full);
            border: 1px solid var(--border);
            background: rgba(15, 26, 48, .5);
        }
        .sub-hero .quick-jump a {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            padding: .3rem .85rem;
            border-radius: var(--radius-full);
            color: var(--text-muted);
            font-size: .78rem;
            font-weight: 500;
            transition: all .2s;
        }
        .sub-hero .quick-jump a:hover {
            background: rgba(247, 201, 72, .1);
            color: var(--royal-a);
        }
        .sub-hero .quick-jump a i { font-size: .7rem; color: var(--royal-a); }
        .sub-hero .quick-jump .sep {
            width: 1px; height: 14px;
            background: var(--border);
        }

        /* ---------- 当前订阅状态面板 ---------- */
        .status-panel {
            padding: 2rem 1rem 2.5rem;
            background: var(--bg-dark);
        }

        .panel-card {
            position: relative;
            max-width: 1080px;
            margin: 0 auto;
            padding: 2rem 2rem 1.8rem;
            border-radius: var(--radius);
            border: 1px solid var(--royal-border);
            background:
                radial-gradient(ellipse at 20% 0%, rgba(247, 201, 72, .1), transparent 50%),
                radial-gradient(ellipse at 80% 100%, rgba(59, 130, 246, .08), transparent 50%),
                linear-gradient(165deg, rgba(15, 26, 48, .75), rgba(10, 17, 34, .55));
            overflow: hidden;
        }
        .panel-card::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--royal-a), var(--navy-a), transparent);
        }

        .panel-head {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1.8rem;
            padding-bottom: 1.2rem;
            border-bottom: 1px solid var(--border);
        }
        .panel-head .ph-left {
            display: flex;
            align-items: center;
            gap: .9rem;
        }
        .panel-head .ph-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 54px; height: 54px;
            flex-shrink: 0;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--royal-a), var(--royal-b));
            box-shadow: 0 6px 20px var(--royal-glow);
            color: #1a1206;
            font-size: 1.4rem;
        }
        .panel-head .ph-info h2 {
            margin: 0;
            color: #fff;
            font-size: 1.25rem;
            font-weight: 800;
            letter-spacing: -.01em;
        }
        .panel-head .ph-info p {
            margin: .15rem 0 0;
            color: var(--text-dim);
            font-size: .78rem;
        }
        .panel-head .ph-status {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            padding: .35rem 1rem;
            border-radius: var(--radius-full);
            background: rgba(16, 185, 129, .1);
            border: 1px solid rgba(16, 185, 129, .3);
            color: var(--success);
            font-size: .78rem;
            font-weight: 600;
        }
        .panel-head .ph-status i { font-size: .55rem; }

        /* 数据网格 */
        .info-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1rem;
            margin-bottom: 1.8rem;
        }
        @media (max-width: 820px) { .info-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 480px) { .info-grid { grid-template-columns: 1fr; } }

        .info-item {
            padding: 1.1rem 1.1rem .95rem;
            border-radius: var(--radius-sm);
            background: rgba(15, 26, 48, .55);
            border: 1px solid var(--border);
        }
        .info-item .ii-label {
            display: flex;
            align-items: center;
            gap: .35rem;
            margin-bottom: .4rem;
            color: var(--text-dim);
            font-size: .72rem;
            letter-spacing: .3px;
        }
        .info-item .ii-label i { color: var(--royal-a); font-size: .7rem; }
        .info-item .ii-val {
            display: block;
            color: #fff;
            font-size: 1.1rem;
            font-weight: 800;
            letter-spacing: -.01em;
            font-variant-numeric: tabular-nums;
            line-height: 1.2;
        }
        .info-item .ii-val.gold { color: var(--royal-a); }
        .info-item .ii-note {
            display: block;
            margin-top: .2rem;
            color: var(--text-dim);
            font-size: .7rem;
        }

        /* 权益使用进度 */
        .usage-block {
            padding: 1.3rem 1.4rem;
            margin-bottom: 1.5rem;
            border-radius: var(--radius-sm);
            border: 1px solid var(--border);
            background: rgba(15, 26, 48, .4);
        }
        .usage-block .ub-title {
            display: flex;
            align-items: center;
            gap: .5rem;
            margin-bottom: 1rem;
            color: #fff;
            font-size: .9rem;
            font-weight: 700;
        }
        .usage-block .ub-title i { color: var(--royal-a); font-size: .8rem; }
        .usage-block .ub-title .ub-hint {
            margin-left: auto;
            color: var(--text-dim);
            font-size: .7rem;
            font-weight: 400;
        }

        .usage-row {
            display: grid;
            grid-template-columns: 120px 1fr 90px;
            align-items: center;
            gap: 1rem;
            margin-bottom: .9rem;
        }
        .usage-row:last-child { margin-bottom: 0; }
        .usage-row .ur-label {
            color: var(--text-muted);
            font-size: .82rem;
            font-weight: 500;
        }
        .usage-row .ur-bar {
            position: relative;
            height: 8px;
            border-radius: var(--radius-full);
            background: rgba(255, 255, 255, .05);
            overflow: hidden;
        }
        .usage-row .ur-bar .ur-fill {
            position: absolute;
            left: 0; top: 0; bottom: 0;
            border-radius: var(--radius-full);
            background: linear-gradient(90deg, var(--navy-a), var(--royal-a));
            box-shadow: 0 0 12px var(--royal-glow);
            transition: width 1.2s cubic-bezier(.34, 1.2, .64, 1);
        }
        .usage-row .ur-bar .ur-fill.low {
            background: linear-gradient(90deg, var(--success), var(--royal-a));
            box-shadow: 0 0 12px rgba(16, 185, 129, .3);
        }
        .usage-row .ur-value {
            text-align: right;
            color: #fff;
            font-size: .82rem;
            font-weight: 700;
            font-variant-numeric: tabular-nums;
        }

        @media (max-width: 640px) {
            .usage-row { grid-template-columns: 90px 1fr 70px; gap: .6rem; }
            .usage-row .ur-label { font-size: .74rem; }
            .usage-row .ur-value { font-size: .74rem; }
        }

        /* 操作按钮组 */
        .action-row {
            display: flex;
            flex-wrap: wrap;
            gap: .8rem;
            justify-content: center;
            padding-top: 1.2rem;
            border-top: 1px dashed hsla(0, 0%, 100%, .08);
        }
        .action-btn {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .65rem 1.6rem;
            border-radius: var(--radius-full);
            font-size: .88rem;
            font-weight: 600;
            cursor: pointer;
            transition: all .3s ease;
        }
        .action-btn.primary {
            background: linear-gradient(135deg, var(--royal-a), var(--royal-b));
            box-shadow: 0 4px 16px var(--royal-glow);
            color: #1a1206;
        }
        .action-btn.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(247, 201, 72, .5);
        }
        .action-btn.outline {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
        }
        .action-btn.outline:hover {
            background: rgba(59, 130, 246, .08);
            border-color: var(--navy-border);
            color: #fff;
        }
        .action-btn i { font-size: .85rem; }

        /* ---------- 方案选择 ---------- */
        .plans-section {
            padding: 3rem 1rem 4rem;
            background: var(--bg-base);
        }

        .section-header {
            margin-bottom: 2rem;
            text-align: center;
        }
        .section-badge {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            margin-bottom: .5rem;
            padding: .2rem 1rem;
            border-radius: var(--radius-full);
            border: 1px solid var(--royal-border);
            background: var(--royal-soft);
            color: var(--royal-a);
            font-size: .7rem;
            font-weight: 500;
            letter-spacing: .5px;
        }
        .section-badge i { font-size: .7rem; }

        .section-title {
            color: #fff;
            font-size: clamp(1.6rem, 3vw, 2.2rem);
            font-weight: 800;
            line-height: 1.2;
            letter-spacing: -.02em;
        }
        .section-title .highlight {
            background: linear-gradient(135deg, var(--royal-a), var(--navy-a));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .section-sub {
            max-width: 720px;
            margin: .4rem auto 0;
            color: var(--text-muted);
            font-size: 1rem;
            line-height: 1.7;
        }

        .plans-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 1.5rem;
            max-width: 1080px;
            margin: 0 auto;
            padding: 0 1rem;
            align-items: stretch;
        }
        @media (max-width: 820px) { .plans-grid { grid-template-columns: 1fr; } }

        .plan-card {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 2rem 1.6rem 1.8rem;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: rgba(15, 26, 48, .45);
            transition: .35s;
        }
        .plan-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
        }
        .plan-card.featured {
            border-color: var(--royal-border);
            background:
                radial-gradient(ellipse at 50% 0%, rgba(247, 201, 72, .12), transparent 60%),
                linear-gradient(165deg, rgba(15, 26, 48, .7), rgba(10, 17, 34, .5));
            box-shadow: 0 0 40px rgba(247, 201, 72, .1);
        }
        .plan-card.featured:hover {
            border-color: var(--royal-a);
            box-shadow: 0 24px 60px rgba(247, 201, 72, .2);
        }
        .plan-card .plan-ribbon {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            padding: .25rem 1.1rem;
            border-radius: var(--radius-full);
            background: linear-gradient(135deg, var(--royal-a), var(--royal-b));
            box-shadow: 0 6px 18px var(--royal-glow);
            color: #1a1206;
            font-size: .65rem;
            font-weight: 800;
            letter-spacing: .5px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .plan-card .plan-name {
            margin-top: .3rem;
            color: #fff;
            font-size: 1.15rem;
            font-weight: 800;
            letter-spacing: -.01em;
        }
        .plan-card .plan-desc {
            margin-top: .2rem;
            color: var(--text-dim);
            font-size: .78rem;
        }

        .plan-card .plan-price {
            display: flex;
            align-items: baseline;
            gap: .3rem;
            margin: 1.2rem 0 .3rem;
        }
        .plan-card .plan-price .currency {
            color: var(--text-muted);
            font-size: 1.1rem;
            font-weight: 700;
        }
        .plan-card .plan-price .num {
            color: #fff;
            font-size: 2.6rem;
            font-weight: 800;
            letter-spacing: -.03em;
            line-height: 1;
            font-variant-numeric: tabular-nums;
        }
        .plan-card.featured .plan-price .num { color: var(--royal-a); }
        .plan-card .plan-price .period {
            color: var(--text-dim);
            font-size: .85rem;
            font-weight: 500;
        }
        .plan-card .plan-equiv {
            color: var(--text-dim);
            font-size: .72rem;
        }
        .plan-card .plan-equiv strong { color: var(--success); font-weight: 700; }

        .plan-card .plan-features {
            display: grid;
            gap: .55rem;
            margin: 1.3rem 0 1.5rem;
            padding: 1.2rem 0 0;
            border-top: 1px dashed hsla(0, 0%, 100%, .08);
        }
        .plan-card .plan-features li {
            display: flex;
            align-items: flex-start;
            gap: .6rem;
            color: var(--text-muted);
            font-size: .85rem;
            line-height: 1.6;
        }
        .plan-card .plan-features li i {
            flex-shrink: 0;
            margin-top: .35rem;
            color: var(--royal-a);
            font-size: .7rem;
        }
        .plan-card .plan-features li strong { color: #eaf0ff; font-weight: 600; }

        .plan-card .btn-plan {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            width: 100%;
            padding: .75rem 1.5rem;
            margin-top: auto;
            border-radius: var(--radius-full);
            font-size: .9rem;
            font-weight: 700;
            cursor: pointer;
            transition: all .3s ease;
        }
        .plan-card .btn-plan.primary {
            background: linear-gradient(135deg, var(--royal-a), var(--royal-b));
            box-shadow: 0 4px 16px var(--royal-glow);
            color: #1a1206;
        }
        .plan-card .btn-plan.primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(247, 201, 72, .5);
        }
        .plan-card .btn-plan.outline {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
        }
        .plan-card .btn-plan.outline:hover {
            background: rgba(59, 130, 246, .08);
            border-color: var(--navy-border);
            color: #fff;
        }

        .plans-note {
            max-width: 720px;
            margin: 2rem auto 0;
            padding: 0 1rem;
            color: var(--text-dim);
            font-size: .82rem;
            line-height: 1.75;
            text-align: center;
        }
        .plans-note i { color: var(--royal-a); margin-right: .3rem; }
        .plans-note strong { color: var(--text-muted); }

        /* ---------- 续期与自动续费 ---------- */
        .renew-section {
            padding: 3rem 1rem 4rem;
            background: var(--bg-dark);
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
        }

        .renew-grid {
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 1.4rem;
            max-width: 1080px;
            margin: 0 auto;
            padding: 0 1rem;
        }
        @media (max-width: 820px) { .renew-grid { grid-template-columns: 1fr; } }

        .renew-card {
            padding: 1.8rem 1.6rem 1.7rem;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: rgba(15, 26, 48, .45);
            transition: .3s;
        }
        .renew-card:hover {
            border-color: var(--royal-border);
            transform: translateY(-3px);
            box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
        }
        .renew-card .rc-head {
            display: flex;
            align-items: center;
            gap: .7rem;
            margin-bottom: 1rem;
            padding-bottom: .9rem;
            border-bottom: 1px solid var(--border);
        }
        .renew-card .rc-head .rc-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px; height: 42px;
            flex-shrink: 0;
            border-radius: var(--radius-sm);
            background: linear-gradient(135deg, var(--royal-a), var(--royal-b));
            box-shadow: 0 4px 14px var(--royal-glow);
            color: #1a1206;
            font-size: 1.05rem;
        }
        .renew-card .rc-head .rc-title {
            flex: 1;
            min-width: 0;
        }
        .renew-card .rc-head .rc-title h3 {
            margin: 0;
            color: #fff;
            font-size: 1.05rem;
            font-weight: 700;
        }
        .renew-card .rc-head .rc-title p {
            margin: .15rem 0 0;
            color: var(--text-dim);
            font-size: .74rem;
        }

        /* 自动续费开关 */
        .switch-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem 1.1rem;
            border-radius: var(--radius-sm);
            background: rgba(15, 26, 48, .6);
            border: 1px solid var(--border);
            margin-bottom: .8rem;
        }
        .switch-row:last-of-type { margin-bottom: 0; }
        .switch-row .sr-body {
            flex: 1;
            min-width: 0;
        }
        .switch-row .sr-body h4 {
            margin-bottom: .2rem;
            color: #fff;
            font-size: .92rem;
            font-weight: 700;
        }
        .switch-row .sr-body p {
            margin: 0;
            color: var(--text-dim);
            font-size: .76rem;
            line-height: 1.55;
        }
        .switch-row .sr-toggle {
            position: relative;
            flex-shrink: 0;
            width: 48px; height: 26px;
            border-radius: var(--radius-full);
            background: rgba(255, 255, 255, .1);
            cursor: pointer;
            transition: background .3s;
        }
        .switch-row .sr-toggle::after {
            content: "";
            position: absolute;
            top: 3px; left: 3px;
            width: 20px; height: 20px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
            transition: transform .3s cubic-bezier(.34, 1.4, .64, 1);
        }
        .switch-row .sr-toggle.on {
            background: linear-gradient(135deg, var(--royal-a), var(--royal-b));
        }
        .switch-row .sr-toggle.on::after {
            transform: translateX(22px);
        }

        /* 续期提示 */
        .renew-tip {
            padding: 1rem 1.1rem;
            border-radius: var(--radius-sm);
            background: rgba(247, 201, 72, .04);
            border: 1px solid var(--royal-border);
            border-left: 3px solid var(--royal-a);
        }
        .renew-tip .rt-head {
            display: flex;
            align-items: center;
            gap: .4rem;
            margin-bottom: .4rem;
            color: var(--royal-a);
            font-size: .85rem;
            font-weight: 700;
        }
        .renew-tip .rt-head i { font-size: .75rem; }
        .renew-tip p {
            margin: 0;
            color: var(--text-muted);
            font-size: .82rem;
            line-height: 1.7;
        }
        .renew-tip p strong { color: var(--royal-a); font-weight: 700; }

        /* 时间轴（续期提醒） */
        .timeline-list {
            display: grid;
            gap: .8rem;
        }
        .timeline-item {
            position: relative;
            display: flex;
            align-items: flex-start;
            gap: .9rem;
            padding: .9rem 1rem;
            border-radius: var(--radius-sm);
            background: rgba(15, 26, 48, .5);
            border: 1px solid var(--border);
        }
        .timeline-item .tl-dot {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 34px; height: 34px;
            flex-shrink: 0;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--navy-a), var(--navy-b));
            box-shadow: 0 4px 12px var(--navy-glow);
            color: #fff;
            font-size: .75rem;
        }
        .timeline-item.active .tl-dot {
            background: linear-gradient(135deg, var(--royal-a), var(--royal-b));
            box-shadow: 0 4px 12px var(--royal-glow);
            color: #1a1206;
        }
        .timeline-item .tl-body {
            flex: 1;
            min-width: 0;
        }
        .timeline-item .tl-body .tl-date {
            color: var(--royal-a);
            font-size: .72rem;
            font-weight: 700;
            letter-spacing: .3px;
            font-variant-numeric: tabular-nums;
        }
        .timeline-item .tl-body h4 {
            margin: .15rem 0 .2rem;
            color: #fff;
            font-size: .88rem;
            font-weight: 700;
        }
        .timeline-item .tl-body p {
            margin: 0;
            color: var(--text-dim);
            font-size: .78rem;
            line-height: 1.6;
        }

        /* ---------- 订单凭证查询 ---------- */
        .order-section {
            padding: 3rem 1rem 4rem;
            background: var(--bg-base);
        }

        .order-card {
            max-width: 1080px;
            margin: 0 auto;
            padding: 1.8rem 1.8rem 1.7rem;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: rgba(15, 26, 48, .45);
        }

        .order-table {
            width: 100%;
            border-collapse: collapse;
            font-size: .85rem;
            overflow: hidden;
            border-radius: var(--radius-sm);
        }
        .order-table thead th {
            padding: .8rem 1rem;
            text-align: left;
            background: rgba(247, 201, 72, .06);
            color: #fff;
            font-weight: 600;
            font-size: .74rem;
            letter-spacing: .3px;
            white-space: nowrap;
        }
        .order-table tbody td {
            padding: .85rem 1rem;
            border-bottom: 1px solid hsla(0, 0%, 100%, .04);
            color: var(--text-muted);
            line-height: 1.55;
            vertical-align: middle;
        }
        .order-table tbody tr:last-child td { border-bottom: none; }
        .order-table tbody tr:hover td { background: rgba(247, 201, 72, .02); }
        .order-table tbody td:first-child {
            color: #eaf0ff;
            font-weight: 500;
            font-family: "JetBrains Mono", "Fira Code", Menlo, monospace;
            font-size: .78rem;
            white-space: nowrap;
        }
        .order-table .status {
            display: inline-block;
            padding: .12rem .55rem;
            border-radius: var(--radius-full);
            font-size: .68rem;
            font-weight: 600;
            white-space: nowrap;
        }
        .order-table .status.done {
            background: rgba(16, 185, 129, .1);
            border: 1px solid rgba(16, 185, 129, .3);
            color: var(--success);
        }
        .order-table .status.active {
            background: rgba(247, 201, 72, .1);
            border: 1px solid var(--royal-border);
            color: var(--royal-a);
        }
        .order-table .btn-invoice {
            display: inline-flex;
            align-items: center;
            gap: .3rem;
            padding: .2rem .7rem;
            border-radius: var(--radius-full);
            border: 1px solid var(--border);
            background: rgba(255, 255, 255, .03);
            color: var(--text-muted);
            font-size: .72rem;
            font-weight: 500;
            cursor: pointer;
            transition: all .2s;
        }
        .order-table .btn-invoice:hover {
            background: rgba(247, 201, 72, .1);
            border-color: var(--royal-border);
            color: var(--royal-a);
        }
        .order-table .btn-invoice i { font-size: .65rem; }

        @media (max-width: 720px) {
            .order-card { padding: 1.2rem 1rem; }
            .order-table thead th { padding: .55rem .6rem; font-size: .68rem; }
            .order-table tbody td { padding: .6rem .6rem; font-size: .78rem; }
            .order-table tbody td:first-child { font-size: .7rem; }
        }

        /* ---------- 常见问题 ---------- */
        .faq-section {
            padding: 3rem 1rem 4rem;
            background: var(--bg-dark);
            border-top: 1px solid var(--border);
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 1.2rem;
            max-width: 1080px;
            margin: 0 auto;
            padding: 0 1rem;
        }
        @media (max-width: 820px) { .faq-grid { grid-template-columns: 1fr; } }

        .faq-card {
            padding: 1.3rem 1.5rem;
            border-radius: var(--radius);
            border: 1px solid var(--border);
            background: rgba(10, 17, 34, .5);
            backdrop-filter: blur(6px);
            transition: .3s;
        }
        .faq-card:hover {
            border-color: var(--royal-border);
            transform: translateY(-2px);
            box-shadow: 0 8px 32px rgba(0, 0, 0, .4);
        }
        .faq-card .faq-q {
            display: flex;
            align-items: center;
            gap: .6rem;
            margin-bottom: .5rem;
            color: #fff;
            font-size: clamp(.98rem, 1.05vw, 1.06rem);
            font-weight: 700;
            line-height: 1.4;
        }
        .faq-card .faq-q i {
            flex-shrink: 0;
            width: 18px;
            color: var(--royal-a);
            font-size: .88rem;
            text-align: center;
        }
        .faq-card .faq-a {
            padding-left: 1.75rem;
            color: var(--text-muted);
            font-size: .87rem;
            line-height: 1.8;
        }
        .faq-card .faq-a p { margin: 0; }
        .faq-card .faq-a strong { color: #eaf0ff; font-weight: 600; }
        .faq-card .faq-a code {
            display: inline-block;
            padding: .05rem .4rem;
            margin: 0 .15rem;
            border-radius: 4px;
            border: 1px solid hsla(0, 0%, 100%, .08);
            background: hsla(0, 0%, 100%, .05);
            color: var(--royal-a);
            font-family: "JetBrains Mono", "Fira Code", Menlo, monospace;
            font-size: .82em;
        }

        /* ---------- 底部 CTA ---------- */
        .cta-section {
            padding: 3rem 1rem 4rem;
            background: var(--bg-base);
            border-top: 1px solid var(--border);
        }
        .cta-section .cta-box {
            max-width: 680px;
            margin: 0 auto;
            padding: 2.2rem 2rem;
            border-radius: var(--radius);
            border: 1px solid var(--royal-border);
            background:
                radial-gradient(ellipse at 50% 0%, rgba(247, 201, 72, .08), transparent 60%),
                linear-gradient(165deg, rgba(15, 26, 48, .7), rgba(10, 17, 34, .5));
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .cta-section .cta-box::before {
            content: "";
            position: absolute;
            top: 0; left: 0; right: 0;
            height: 3px;
            background: linear-gradient(90deg, transparent, var(--royal-a), var(--navy-a), transparent);
        }
        .cta-section .cta-box h3 {
            margin-bottom: .5rem;
            color: #fff;
            font-size: 1.35rem;
            font-weight: 800;
            letter-spacing: -.01em;
        }
        .cta-section .cta-box p {
            margin-bottom: 1.3rem;
            color: var(--text-muted);
            font-size: .92rem;
            line-height: 1.75;
        }
        .cta-section .cta-buttons {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;
            gap: .8rem;
        }
        .btn-cta {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: .7rem 1.8rem;
            border-radius: var(--radius-full);
            font-size: .92rem;
            font-weight: 700;
            transition: all .3s ease;
        }
        .btn-cta.primary {
            background: linear-gradient(135deg, var(--royal-a), var(--royal-b));
            box-shadow: 0 4px 16px var(--royal-glow);
            color: #1a1206;
        }
        .btn-cta.primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 28px rgba(247, 201, 72, .5);
        }
        .btn-cta.secondary {
            background: transparent;
            border: 1px solid var(--border);
            color: var(--text-muted);
        }
        .btn-cta.secondary:hover {
            transform: translateY(-2px);
            background: rgba(59, 130, 246, .08);
            border-color: var(--navy-border);
            color: #fff;
        }

        /* ---------- 尾部（与首页一致） ---------- */
        .footer {
            padding: 3.5rem 1rem 1.8rem;
            background: var(--bg-base);
            border-top: 1px solid var(--border);
        }
        .footer-inner {
            display: flex; flex-wrap: wrap;
            justify-content: space-between; align-items: flex-start;
            gap: 2.5rem 4rem; margin: 0 auto;
        }
        .footer-brand { flex: 0 0 auto; min-width: 200px; max-width: 320px; }
        .footer-brand .logo-footer img {
            height: 2.6rem; width: auto; opacity: .9; transition: opacity .2s;
        }
        .footer-brand .logo-footer img:hover { opacity: 1; }
        .footer-brand .brand-desc {
            margin-top: .6rem;
            color: var(--text-dim);
            font-size: .82rem;
            line-height: 1.7;
        }
        .footer-brand .brand-desc strong { color: #fff; }

        .footer-links {
            display: grid; grid-template-columns: repeat(3, 1fr);
            gap: 2rem 3rem; flex: 1; max-width: 560px;
        }
        .footer-links ul li:first-child {
            display: inline-block; position: relative;
            margin-bottom: .6rem;
            color: #fff;
            font-size: .9rem;
            font-weight: 700;
            letter-spacing: .4px;
        }
        .footer-links ul li:first-child::after {
            content: "";
            display: block;
            width: 24px; height: 2px;
            margin-top: .3rem;
            border-radius: 2px;
            background: var(--primary);
            opacity: .5;
        }
        .footer-links ul li { margin-bottom: .25rem; }
        .footer-links ul a {
            display: inline-block;
            padding: .1rem 0;
            color: var(--text-dim);
            font-size: .82rem;
            transition: color .2s, padding-left .2s;
        }
        .footer-links ul a:hover { color: #fff; padding-left: .3rem; }

        .footer-bottom {
            max-width: 1200px;
            margin: 2.8rem auto 0;
            padding-top: 1.5rem;
            border-top: 1px solid var(--border);
            color: var(--text-dim);
            font-size: .7rem;
            letter-spacing: .5px;
            text-align: center;
        }
        .footer-bottom .heart {
            display: inline-block;
            color: var(--royal-a);
            animation: heartBeat 2s ease-in-out infinite;
        }
        @keyframes heartBeat {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.15); }
        }

        /* ---------- 悬浮按钮 ---------- */
        .backfab {
            position: fixed; right: 20px; bottom: 20px;
            z-index: 60;
            display: flex; flex-direction: column; gap: 10px;
        }
        .backfab button,
        .backfab a {
            display: flex; align-items: center; justify-content: center;
            width: 46px; height: 46px;
            border-radius: 50%;
            border: 1px solid var(--border);
            background: rgba(15, 26, 48, .7);
            box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
            color: var(--text-muted);
            backdrop-filter: blur(14px);
            -webkit-backdrop-filter: blur(14px);
            transition: transform .2s, background .2s, color .2s, box-shadow .2s;
        }
        .backfab button:hover,
        .backfab a:hover {
            transform: translateY(-2px) scale(1.04);
            border-color: var(--royal-border);
            background: rgba(247, 201, 72, .12);
            box-shadow: 0 12px 32px rgba(247, 201, 72, .2);
            color: #fff;
        }

        /* ---------- 响应式 ---------- */
        @media (max-width: 820px) {
            .container { width: 100%; }
            .logo img { height: 1.4rem; }
            .sub-hero { padding: 2.2rem 1rem 1.8rem; }
            .sub-hero h1 { font-size: clamp(1.5rem, 5vw, 2.1rem); }
            .sub-hero .quick-jump { flex-wrap: wrap; padding: .4rem .6rem; }
            .sub-hero .quick-jump a { padding: .25rem .6rem; font-size: .72rem; }
            .sub-hero .quick-jump .sep { display: none; }

            .panel-card { padding: 1.6rem 1.2rem 1.4rem; }
            .panel-head { margin-bottom: 1.3rem; padding-bottom: 1rem; }
            .panel-head .ph-icon { width: 46px; height: 46px; font-size: 1.15rem; }
            .panel-head .ph-info h2 { font-size: 1.1rem; }
            .info-grid { gap: .7rem; }
            .info-item { padding: .9rem .9rem .8rem; }
            .info-item .ii-val { font-size: .95rem; }
            .usage-block { padding: 1.1rem 1.1rem; }

            .plans-grid { gap: 1.1rem; }
            .plan-card { padding: 1.7rem 1.4rem 1.5rem; }
            .plan-card .plan-price .num { font-size: 2.2rem; }

            .renew-card { padding: 1.5rem 1.2rem 1.4rem; }
            .order-card { padding: 1.4rem 1.2rem; }

            .footer-inner { flex-direction: column; align-items: center; gap: 2rem; text-align: center; }
            .footer-brand { max-width: 100%; text-align: center; }
            .footer-links { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; max-width: 100%; width: 100%; }
            .footer-links ul li:first-child::after { margin-left: auto; margin-right: auto; }
        }

        @media (max-width: 480px) {
            .sub-hero h1 { font-size: 1.5rem; }
            .panel-card { padding: 1.3rem 1rem 1.2rem; }
            .panel-head { flex-direction: column; align-items: flex-start; }
            .panel-head .ph-status { align-self: flex-start; }
            .action-btn { padding: .6rem 1.2rem; font-size: .8rem; }
            .action-row { flex-direction: column; }

            .plan-card { padding: 1.5rem 1.2rem 1.3rem; }
            .plan-card .plan-price .num { font-size: 2rem; }
            .plan-card .plan-features li { font-size: .82rem; }

            .switch-row { flex-wrap: wrap; }
            .switch-row .sr-toggle { margin-left: auto; }

            .faq-card { padding: 1rem 1.1rem; }
            .faq-card .faq-q { font-size: .9rem; }
            .faq-card .faq-a { padding-left: 0; font-size: .82rem; }

            .cta-section .cta-box { padding: 1.5rem 1rem; }
            .cta-section .cta-box h3 { font-size: 1.1rem; }
            .cta-section .cta-buttons { flex-direction: column; }
            .btn-cta { width: 100%; max-width: 260px; justify-content: center; }

            .footer { padding: 2.5rem .5rem 1.2rem; }
            .footer-links { grid-template-columns: 1fr 1fr; gap: 1.2rem; }
            .footer-links ul li:first-child { font-size: .8rem; }
            .footer-links ul a { font-size: .75rem; }
            .footer-brand .logo-footer img { height: 2rem; }
            .footer-bottom { margin-top: 2rem; padding-top: 1rem; font-size: .6rem; }
        }