/* ============================================================
   page-esim-taocan.css — kvmboot 定价/下单
   独立设计语言：「驾驶舱仪表板 + 登机牌票面」
   与开屏舷窗动画形成叙事闭环；与首页两列 grid 明显区分
   ============================================================ */

body { background: var(--bg-gradient); background-attachment: scroll; }

#page-esim-taocan {
    padding-top: 92px;
    padding-bottom: 96px;
    background: transparent;
}

/* ============================================================
   HERO V3 — 居中、衬线主标 + eyebrow
   ============================================================ */
.pricing-hero {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 40px;
    padding: 8px 16px 0;
}
.pricing-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(59,130,246,0.10);
    padding: 6px 14px;
    border-radius: 99px;
    border: 1px solid rgba(59,130,246,0.22);
    margin-bottom: 18px;
}
.pricing-hero__eyebrow::before {
    content: '';
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--primary);
    box-shadow: 0 0 6px rgba(59,130,246,0.7);
}
.pricing-hero h2 {
    font-size: clamp(30px, 4.2vw, 46px);
    font-weight: 700;
    color: var(--text-main);
    line-height: 1.18;
    letter-spacing: -0.025em;
    margin: 0 0 16px;
}
.pricing-hero h2 .hl-blue {
    background: linear-gradient(135deg, var(--primary) 0%, #60a5fa 60%, var(--primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.pricing-lead {
    font-size: 15px;
    color: var(--text-light);
    line-height: 1.7;
    margin: 0 auto;
    max-width: 620px;
}
.pricing-lead + .pricing-lead { margin-top: 10px; }
.pricing-lead--sync {
    font-size: 13px;
    padding: 12px 16px;
    margin-top: 16px;
    background: rgba(255,255,255,0.55);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
    text-align: left;
    color: var(--text-light);
}
.pricing-lead--sync strong { color: var(--text-main); font-weight: 700; }
.pricing-lead a {
    color: var(--primary);
    font-weight: 700;
    text-decoration: none;
    transition: color 0.18s ease;
}
.pricing-lead a:hover { color: var(--primary-hover); }

/* ============================================================
   PRICING SECTION 容器
   ============================================================ */
.pricing-section { padding: 0; max-width: 1180px; margin: 0 auto; }

#page-esim-taocan > section {
    content-visibility: auto;
    contain-intrinsic-size: 1px 620px;
}
#page-esim-taocan > section:first-child {
    content-visibility: visible;
}

/* ============================================================
   驾驶舱 COCKPIT —— 横向 3 列控制台 + 背景图
   核心独有结构：把"周期 / 节点 / 加购"3 个 station 排在同一面板里
   hover 时被悬停列扩展，其余两列收缩
   ============================================================ */
.pricing-cockpit-wrap {
    margin: 0 auto 22px;
    max-width: 1180px;
}

.pricing-cockpit {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.5);
    box-shadow:
        0 16px 48px -12px rgba(15,27,50,0.18),
        inset 0 1px 0 rgba(255,255,255,0.7);
    background: linear-gradient(180deg, #daedf8 0%, #c5dff5 100%);
    transition: grid-template-columns 1.05s cubic-bezier(0.16, 1, 0.3, 1);
}

/* 背景图：用真实 img 标签撑开容器高度，完整等比显示 */
.cockpit__bg-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    user-select: none;
    border-radius: 23px;
    /* 左侧淡出，与内容卡柔和融合；底部也微淡出 */
    -webkit-mask-image: linear-gradient(90deg,
        transparent 0%,
        rgba(0,0,0,0.3) 22%,
        #000 42%,
        #000 80%,
        rgba(0,0,0,0.7) 100%),
        linear-gradient(180deg, #000 70%, transparent 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(90deg,
        transparent 0%,
        rgba(0,0,0,0.3) 22%,
        #000 42%,
        #000 80%,
        rgba(0,0,0,0.7) 100%),
        linear-gradient(180deg, #000 70%, transparent 100%);
            mask-composite: intersect;
}

/* 内容层：绝对定位，三卡叠层，左侧占 40% */
.cockpit__content {
    /* 间距 & 尺寸 tokens */
    --cp: 14px;
    --ct: 44px;
    --cg: 8px;
    --ce: calc(var(--ct) + var(--cg));

    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: min(40%, 420px);
    overflow: hidden;
    background: linear-gradient(90deg,
        rgba(212,228,248,0.62) 0%,
        rgba(212,228,248,0.28) 72%,
        transparent 100%);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

/* ══════════════════════════════════════════
   三卡通用样式
   ══════════════════════════════════════════ */
.cockpit__col {
    position: absolute;
    left: var(--cp);
    right: var(--cp);
    padding: 0;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.52);
    backdrop-filter: blur(20px) saturate(1.5);
    -webkit-backdrop-filter: blur(20px) saturate(1.5);
    box-shadow:
        0 3px 14px rgba(15,27,50,0.08),
        inset 0 1px 0 rgba(255,255,255,0.72);
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;          /* 水平居中 */
    justify-content: center;      /* 垂直居中：折叠时 head 单独居中，展开时所有子项作为一组居中 */
    gap: 12px;
    padding: 14px 18px;
    transition:
        top       1.08s cubic-bezier(0.16, 1, 0.3, 1),
        height    1.08s cubic-bezier(0.16, 1, 0.3, 1),
        bottom    1.08s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.96s cubic-bezier(0.16, 1, 0.3, 1),
        background  0.9s ease,
        box-shadow  0.9s ease,
        opacity     0.9s ease;
}

/* cockpit 装饰插图隐藏 */
.cockpit__art { display: none; }

/* 顶部仪表带发光线 */
.pricing-cockpit::before {
    content: '';
    position: absolute;
    top: 0; left: 6%; right: 6%;
    height: 2px;
    background: linear-gradient(90deg,
        transparent,
        rgba(255,255,255,0.6) 20%,
        rgba(255,255,255,0.95) 50%,
        rgba(255,255,255,0.6) 80%,
        transparent);
    border-radius: 0 0 99px 99px;
    z-index: 2;
}

/* 底部柔和渐变 */
.pricing-cockpit::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        rgba(200,222,255,0.15) 0%,
        rgba(200,222,255,0.06) 38%,
        transparent 55%,
        transparent 100%);
    z-index: 0;
}

/* ══════════════════════════════════════════
   默认：三等分行 + 两道等宽缝（均为 var(--cg)）
   ══════════════════════════════════════════ */
[data-station="cycle"] {
    top: var(--cp);
    height: calc((100% - 2 * var(--cp) - 2 * var(--cg)) / 3);
    bottom: auto;
    z-index: 3;
}
[data-station="dc"] {
    top: calc(var(--cp) + (100% - 2 * var(--cp) - 2 * var(--cg)) / 3 + var(--cg));
    height: calc((100% - 2 * var(--cp) - 2 * var(--cg)) / 3);
    bottom: auto;
    z-index: 2;
}
[data-station="addon"] {
    top: calc(var(--cp) + 2 * ((100% - 2 * var(--cp) - 2 * var(--cg)) / 3) + 2 * var(--cg));
    height: calc((100% - 2 * var(--cp) - 2 * var(--cg)) / 3);
    bottom: auto;
    z-index: 1;
}

/* 折叠时 hint 和控件 opacity 0，但仍参与居中布局会撑大 head；
   故折叠态隐藏控件也设 height 0，让 head 单独居中；
   悬停展开后再恢复。 */
.cockpit__col .cockpit__hint,
.cockpit__col .billing-toggle,
.cockpit__col .dc-chip-group,
.cockpit__col .dc-status,
.cockpit__col .addon-grid {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin: 0;
    flex-shrink: 0;
    width: 100%;
    transition:
        opacity 0.72s ease,
        height  1.02s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ══════════════════════════════════════════
   悬停 card 1：展开 cycle，其余两卡移至底部 tab
   ══════════════════════════════════════════ */
.cockpit__content:has([data-station="cycle"]:hover) [data-station="cycle"] {
    top: var(--cp);
    height: calc(100% - 2*var(--cp) - 2*var(--ce));
    z-index: 10;
    background: rgba(255,255,255,0.38);
    box-shadow:
        0 14px 38px rgba(15,27,50,0.14),
        0 0 0 1.5px rgba(255,255,255,0.82),
        inset 0 1px 0 rgba(255,255,255,0.95);
    transform: scaleX(1.025);
    transform-origin: left center;
}
.cockpit__content:has([data-station="cycle"]:hover) [data-station="dc"] {
    top: calc(100% - var(--cp) - var(--ce) - var(--ct));
    height: var(--ct);
    opacity: 0.68;
    z-index: 2;
    box-shadow: 0 2px 8px rgba(15,27,50,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.cockpit__content:has([data-station="cycle"]:hover) [data-station="addon"] {
    top: calc(100% - var(--cp) - var(--ct));
    height: var(--ct);
    opacity: 0.68;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(15,27,50,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ══════════════════════════════════════════
   悬停 card 2：展开 dc，其余两卡压缩
   ══════════════════════════════════════════ */
.cockpit__content:has([data-station="dc"]:hover) [data-station="cycle"] {
    top: var(--cp);
    height: var(--ct);
    z-index: 3;
    opacity: 0.68;
    box-shadow: 0 2px 8px rgba(15,27,50,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.cockpit__content:has([data-station="dc"]:hover) [data-station="dc"] {
    top: calc(var(--cp) + var(--ce));
    height: calc(100% - 2*var(--cp) - 2*var(--ce));
    z-index: 10;
    background: rgba(255,255,255,0.38);
    box-shadow:
        0 14px 38px rgba(15,27,50,0.14),
        0 0 0 1.5px rgba(255,255,255,0.82),
        inset 0 1px 0 rgba(255,255,255,0.95);
    transform: scaleX(1.025);
    transform-origin: left center;
}
.cockpit__content:has([data-station="dc"]:hover) [data-station="addon"] {
    top: calc(100% - var(--cp) - var(--ct));
    height: var(--ct);
    opacity: 0.68;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(15,27,50,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ══════════════════════════════════════════
   悬停 card 3：展开 addon，其余两卡压缩
   ══════════════════════════════════════════ */
.cockpit__content:has([data-station="addon"]:hover) [data-station="cycle"] {
    top: var(--cp);
    height: var(--ct);
    z-index: 3;
    opacity: 0.68;
    box-shadow: 0 2px 8px rgba(15,27,50,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.cockpit__content:has([data-station="addon"]:hover) [data-station="dc"] {
    top: calc(var(--cp) + var(--ce));
    height: var(--ct);
    z-index: 2;
    opacity: 0.68;
    box-shadow: 0 2px 8px rgba(15,27,50,0.05), inset 0 1px 0 rgba(255,255,255,0.6);
}
.cockpit__content:has([data-station="addon"]:hover) [data-station="addon"] {
    top: calc(var(--cp) + 2 * var(--ce));
    height: calc(100% - 2*var(--cp) - 2*var(--ce));
    z-index: 10;
    background: rgba(255,255,255,0.38);
    box-shadow:
        0 14px 38px rgba(15,27,50,0.14),
        0 0 0 1.5px rgba(255,255,255,0.82),
        inset 0 1px 0 rgba(255,255,255,0.95);
    transform: scaleX(1.025);
    transform-origin: left center;
}

/* 悬停时：活跃卡的子内容恢复高度并渐显 */
.cockpit__content:has(.cockpit__col:hover) .cockpit__col:hover .cockpit__hint,
.cockpit__content:has(.cockpit__col:hover) .cockpit__col:hover .billing-toggle,
.cockpit__content:has(.cockpit__col:hover) .cockpit__col:hover .dc-chip-group,
.cockpit__content:has(.cockpit__col:hover) .cockpit__col:hover .dc-status,
.cockpit__content:has(.cockpit__col:hover) .cockpit__col:hover .addon-grid {
    opacity: 1;
    height: auto;
    overflow: visible;
    transition:
        height  1.02s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.78s ease 0.34s;
}

.cockpit__divider { display: none; }

.cockpit__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    flex-shrink: 0;
    text-align: center;
}
.cockpit__num {
    font-family: "SF Mono","Fira Code","Consolas",monospace;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    background: rgba(59,130,246,0.82);
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    letter-spacing: 0.10em;
    line-height: 1.5;
    flex-shrink: 0;
    box-shadow: 0 3px 10px rgba(59,130,246,0.42);
}
.cockpit__head h3 {
    font-size: 20px;
    font-weight: 700;
    color: #0d2240;
    margin: 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 8px;
    text-shadow: 0 1px 5px rgba(255,255,255,0.70);
}
.optional-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    background: rgba(15,27,50,0.08);
    color: rgba(15,27,50,0.65);
    border: 1px solid rgba(15,27,50,0.12);
    border-radius: 99px;
    letter-spacing: 0.05em;
}
.cockpit__hint {
    font-size: 11.5px;
    color: rgba(26,58,90,0.75);
    line-height: 1.5;
    margin: 0;
    text-align: center;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
}

/* 移动端 + 无精确悬停设备（触控主力）：cockpit 退化为单列堆叠，且必须始终展示控件
   （否则 .cockpit__hint / .billing-toggle 等仍为 height:0+opacity:0，看起来像「三个组件丢了」） */
@media (max-width: 900px), (hover: none) {
    .pricing-cockpit { border-radius: 20px; }
    .cockpit__bg-img {
        max-height: 260px;
        object-position: center 35%;
        -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
                mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
    }
    .cockpit__content {
        position: relative;
        width: 100%;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        padding: 14px 14px 20px;
        overflow: visible;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .cockpit__col {
        position: relative !important;
        top: auto !important;
        height: auto !important;
        left: auto !important;
        right: auto !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 1 !important;
        box-shadow: 0 4px 16px rgba(15,27,50,0.09), inset 0 1px 0 rgba(255,255,255,0.75) !important;
    }
    .cockpit__col .cockpit__hint,
    .cockpit__col .billing-toggle,
    .cockpit__col .dc-chip-group,
    .cockpit__col .dc-status,
    .cockpit__col .addon-grid {
        opacity: 1 !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* ---------- 周期 segmented control ---------- */
.billing-toggle {
    position: relative;
    display: flex;
    gap: 3px;
    background:
        linear-gradient(180deg, rgba(15,27,50,0.07) 0%, rgba(15,27,50,0.035) 100%);
    border-radius: 99px;
    padding: 4px;
    box-shadow:
        inset 0 2px 5px rgba(15,27,50,0.08),
        inset 0 -1px 0 rgba(255,255,255,0.78);
    width: 100%;
    flex-wrap: nowrap;
    overflow: visible;
    --toggle-x: 4px;
    --toggle-w: 0px;
}
.billing-toggle::before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    width: var(--toggle-w);
    height: calc(100% - 8px);
    border-radius: 99px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98) 0%, rgba(248,251,255,0.96) 62%, rgba(237,245,255,0.98) 100%);
    box-shadow:
        0 7px 18px rgba(59,130,246,0.18),
        0 2px 6px rgba(15,27,50,0.08),
        inset 0 0 0 1px rgba(59,130,246,0.12),
        inset 0 1px 0 rgba(255,255,255,0.95);
    transform: translateX(var(--toggle-x)) translateY(-1px);
    transition:
        transform 0.58s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.58s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.22s ease;
    pointer-events: none;
    opacity: 0;
    z-index: 0;
}
.billing-toggle.is-ready::before {
    opacity: 1;
}
.toggle-btn {
    position: relative;
    z-index: 1;
    flex: 1;
    min-width: 0;
    padding: 8px 6px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    border-radius: 99px;
    font-family: inherit;
    text-align: center;
    transition: color 0.24s ease;
    white-space: nowrap;
}
.toggle-btn:hover { color: var(--text-main); }
.toggle-btn.active {
    background: transparent;
    color: var(--primary);
    box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
    .billing-toggle::before { transition: none; }
}

/* ---------- DC chip group ---------- */
.dc-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dc-chip {
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    color: var(--text-main);
    background: rgba(255,255,255,0.78);
    border: 1px solid var(--glass-border);
    border-radius: 99px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 2px rgba(15,27,50,0.04);
    transition: background 0.22s, border-color 0.22s, color 0.22s, transform 0.18s, box-shadow 0.22s;
}
.dc-chip:hover {
    background: #fff;
    border-color: rgba(59,130,246,0.4);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(59,130,246,0.10);
}
.dc-chip.is-active {
    background: linear-gradient(135deg, var(--primary) 0%, #4f8cf5 100%);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(59,130,246,0.42);
}
.dc-status {
    margin: 12px 0 0;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 8px;
}
.dc-status::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #cbd5e1;
    flex-shrink: 0;
    transition: background 0.22s, box-shadow 0.22s;
}
.dc-status.is-ok { color: var(--text-main); font-weight: 600; }
.dc-status.is-ok::before {
    background: #10b981;
    box-shadow: 0 0 8px rgba(16,185,129,0.6);
}

/* ---------- Cockpit 内的 addon chip 紧凑型 ---------- */
.cockpit__col[data-station="addon"] .addon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
}
@media (min-width: 901px) {
    .cockpit__col[data-station="addon"] .addon-grid {
        grid-template-columns: 1fr;
    }
}
.cockpit__col[data-station="addon"] .addon-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.78);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.22s, border-color 0.22s, transform 0.18s, box-shadow 0.22s;
}
.cockpit__col[data-station="addon"] .addon-item.is-muted {
    background: rgba(220,232,244,0.56);
    border-color: rgba(124,143,166,0.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.42);
    opacity: 0.62;
    filter: saturate(0.62);
}
.cockpit__col[data-station="addon"] .addon-item:hover {
    background: #fff;
    border-color: rgba(59,130,246,0.42);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59,130,246,0.10);
}
.cockpit__col[data-station="addon"] .addon-item.is-muted:hover {
    opacity: 0.78;
    background: rgba(232,240,249,0.76);
    border-color: rgba(59,130,246,0.24);
    box-shadow: 0 3px 10px rgba(15,27,50,0.08);
}
.cockpit__col[data-station="addon"] .addon-item.selected {
    border-color: var(--primary);
    background: linear-gradient(155deg, rgba(228,240,255,0.95), rgba(245,250,255,0.95));
    box-shadow: 0 0 0 2px rgba(59,130,246,0.16), 0 4px 12px rgba(59,130,246,0.14);
    opacity: 1;
    filter: none;
}
.cockpit__col[data-station="addon"] .addon-header {
    display: contents;
}
.cockpit__col[data-station="addon"] .addon-item strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    order: 1;
    line-height: 1.2;
}
.cockpit__col[data-station="addon"] .addon-desc {
    display: none;
}
.cockpit__col[data-station="addon"] .addon-price {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-main);
    order: 2;
}
.cockpit__col[data-station="addon"] .addon-currency { font-size: 11px; }
.cockpit__col[data-station="addon"] .addon-period {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-light);
    margin-left: 2px;
}
.cockpit__col[data-station="addon"] .checkbox {
    width: 18px; height: 18px;
    border: 1.5px solid rgba(0,0,0,0.18);
    border-radius: 5px;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, border-color 0.18s, box-shadow 0.18s;
    order: 3;
}
.cockpit__col[data-station="addon"] .addon-item:hover .checkbox { border-color: rgba(59,130,246,0.55); }
.cockpit__col[data-station="addon"] .addon-item.selected .checkbox {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 2px 6px rgba(59,130,246,0.45);
}
.cockpit__col[data-station="addon"] .addon-item.selected .checkbox::after {
    content: '';
    width: 8px; height: 5px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg) translate(1px, -1px);
}

/* 兜底：覆盖 sketch-box 任何残留 */
#page-esim-taocan .sketch-box {
    background: rgba(255,255,255,0.72);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    box-shadow: var(--glass-shadow);
    transform: none;
}

/* ============================================================
   节点详情 PANEL —— 独立卡，紧贴 cockpit 下方
   ============================================================ */
.dc-detail-section {
    max-width: 1180px;
    margin: 0 auto 26px;
}

.dc-detail-panel {
    padding: 0;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(220,235,255,0.32) 0%, rgba(255,255,255,0.72) 60%),
        url('../images/cloud-mac-global-bg.png') center center / cover no-repeat;
    border: 1px solid rgba(255,255,255,0.55);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(15,27,50,0.10), inset 0 1px 0 rgba(255,255,255,0.7);
}
/* 整个面板滑入（选中节点后触发） */
#dc-detail-panel.is-entering {
    animation: dcPanelSlideIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dcPanelSlideIn {
    from { opacity: 0; transform: translateX(-28px); filter: blur(4px); }
    to   { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    #dc-detail-panel.is-entering {
        animation: dcPanelFadeOnly 0.3s ease both;
    }
    @keyframes dcPanelFadeOnly {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}

.dc-detail-empty {
    padding: 32px 28px;
    text-align: center;
    background: rgba(230,242,255,0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.dc-detail-empty-visual {
    max-width: 220px;
    margin: 0 auto 14px;
    color: var(--primary);
    opacity: 0.65;
}
.dc-placeholder-svg { display: block; width: 100%; height: auto; }
.dc-placeholder-svg rect:first-of-type {
    fill: rgba(255,255,255,0.78);
    stroke: rgba(59,130,246,0.42);
    stroke-width: 1.5;
}
.dc-placeholder-svg circle { fill: var(--primary); opacity: 0.35; }
.dc-placeholder-svg path { stroke: var(--primary); stroke-dasharray: 4 5; opacity: 0.42; }
.dc-placeholder-svg text { fill: var(--primary); opacity: 0.85; }
.dc-detail-empty-title {
    font-size: 15px;
    font-weight: 700;
    color: #0d2240;
    margin: 0 0 8px;
}
.dc-detail-empty-text {
    font-size: 13px;
    color: #1a3a5a;
    line-height: 1.65;
    margin: 0 auto 14px;
    max-width: 420px;
}
.dc-detail-empty-text strong { color: #0d2240; font-weight: 700; }
.dc-detail-empty-hints {
    text-align: left;
    max-width: 360px;
    margin: 0 auto;
    padding-left: 1.1em;
    font-size: 12px;
    color: #1a4a7a;
    line-height: 1.7;
}
.dc-detail-empty-hints li::marker { color: var(--primary); }

.dc-detail-filled {
    display: grid;
    grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
    gap: 22px 28px;
    padding: 24px 26px;
    align-items: stretch;
}
@media (max-width: 720px) {
    .dc-detail-filled { grid-template-columns: 1fr; }
}

.dc-detail-visual {
    align-self: stretch;
    display: flex;
}

/* 真实地图容器 */
.dc-map-real {
    position: relative;
    width: 100%;
    min-height: 260px;
    aspect-ratio: 4 / 3;
    border-radius: 18px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(220,235,255,0.5), rgba(255,255,255,0.5));
    border: 1px solid rgba(120,170,220,0.32);
    box-shadow:
        0 6px 20px rgba(15,27,50,0.08),
        inset 0 1px 0 rgba(255,255,255,0.85);
}
.dc-map-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    user-select: none;
    -webkit-user-drag: none;
    transition: transform 0.4s ease;
}
.dc-map-real:hover .dc-map-img {
    transform: scale(1.04);
}

/* 中央 pin 脉冲动画 */
.dc-map-pin-overlay {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: none;
}
.dc-map-pin-pulse {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(59,130,246,0.30);
    box-shadow: 0 0 0 0 rgba(59,130,246,0.45);
    animation: dcMapPulse 2.2s ease-out infinite;
}
.dc-map-pin-dot {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--primary);
    border: 3px solid #fff;
    box-shadow: 0 4px 10px rgba(15,27,50,0.30);
}
@keyframes dcMapPulse {
    0%   { transform: translate(-50%, -50%) scale(0.6); opacity: 0.6; }
    70%  { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
    100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .dc-map-pin-pulse { animation: none; opacity: 0.4; }
}

/* 版权标 */
/* 从左向右滑入动画 */
.dc-detail-filled.is-entering {
    animation: dcFilledSlideIn 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes dcFilledSlideIn {
    from {
        opacity: 0;
        transform: translateX(-28px);
        filter: blur(3px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .dc-detail-filled.is-entering {
        animation: dcFilledSlideInReduced 0.4s ease both;
    }
    @keyframes dcFilledSlideInReduced {
        from { opacity: 0; }
        to   { opacity: 1; }
    }
}
@media (max-width: 600px) {
    .dc-detail-filled { grid-template-columns: 1fr; }
    .dc-detail-visual { max-width: 260px; margin: 0 auto; }
}
.dc-map-svg { display: block; width: 100%; height: auto; border-radius: 12px; }

/* 地理地图 pin 脉冲动画 */
.dc-pin-ring1 {
    animation: dcPinPulse1 2.4s ease-out infinite;
    transform-origin: center;
}
.dc-pin-ring2 {
    animation: dcPinPulse2 2.4s ease-out infinite;
    transform-origin: center;
}
@keyframes dcPinPulse1 {
    0%   { opacity: 0.08; transform: scale(0.6); }
    50%  { opacity: 0.14; transform: scale(1); }
    100% { opacity: 0;    transform: scale(1.4); }
}
@keyframes dcPinPulse2 {
    0%   { opacity: 0.2;  transform: scale(0.7); }
    40%  { opacity: 0.22; transform: scale(1); }
    100% { opacity: 0;    transform: scale(1.3); }
}
@media (prefers-reduced-motion: reduce) {
    .dc-pin-ring1, .dc-pin-ring2 { animation: none !important; opacity: 0.12; }
}

/* 兼容旧的静态 pin（首次渲染前） */
.dc-map-svg rect:first-of-type {
    fill: rgba(182, 206, 226, 0.85);
}
.dc-map-svg text:first-of-type { fill: rgba(60,90,120,0.45); }
.dc-map-arc { stroke: rgba(80,130,175,0.42); stroke-dasharray: 5 4; }
.dc-map-pin circle:first-child {
    fill: var(--primary);
    fill-opacity: 0.18;
    stroke: var(--primary);
    stroke-width: 2;
}
.dc-map-pin circle:nth-child(2) {
    fill: var(--primary);
    stroke: #fff;
    stroke-width: 2;
}
.dc-detail-body { min-width: 0; }
.dc-detail-tags {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 10px;
}
.dc-detail-tag {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    color: #f8fbff;
    background: linear-gradient(135deg, #1d4ed8 0%, #123a86 100%);
    border: 1px solid rgba(147,197,253,0.36);
    border-radius: 99px;
    box-shadow:
        0 6px 14px rgba(29,78,216,0.22),
        inset 0 1px 0 rgba(255,255,255,0.22);
}
.dc-detail-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
    letter-spacing: -0.01em;
}
.dc-detail-desc {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.65;
    margin: 0 0 14px;
}
.dc-detail-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin: 0 0 12px;
    padding: 12px 14px;
    background: rgba(255,255,255,0.62);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-sm);
}
@media (max-width: 480px) { .dc-detail-stats { grid-template-columns: 1fr; } }
.dc-detail-stat dt {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.dc-detail-stat dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
}
.dc-detail-footnote {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* ============================================================
   登机牌 BOARDING SECTION —— 双卡水平对比
   核心独有结构：每张机型卡是一张深色"航空登机牌"
   与开屏舷窗的 Welcome Aboard 卡片视觉呼应
   ============================================================ */
.boarding-section {
    max-width: 1180px;
    margin: 0 auto;
}

.boarding-section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 20px;
    margin: 0 4px 18px;
    flex-wrap: wrap;
}
.boarding-section__head h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    gap: 10px;
}
.boarding-section__head h3::before {
    content: '✈';
    color: var(--primary);
    font-size: 16px;
    transform: rotate(-15deg);
    display: inline-block;
}
.boarding-section__head p {
    font-size: 13px;
    color: var(--text-light);
    margin: 0;
}

.boarding-stack {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 820px) {
    .boarding-stack { grid-template-columns: 1fr; }
}

/* ---------- 单张登机牌 ---------- */
.pricing-card,
.boarding-pass {
    position: relative;
    padding: 24px 22px 20px;
    border-radius: 22px;
    background:
        linear-gradient(180deg,
            rgba(15, 27, 50, 0.92) 0%,
            rgba(20, 33, 58, 0.96) 100%);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 24px 50px -16px rgba(15,27,50,0.45),
        0 8px 20px rgba(15,27,50,0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.10);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: #eef1f7;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
    display: flex;
    flex-direction: column;
}
.pricing-card:hover,
.boarding-pass:hover {
    transform: translateY(-3px);
    box-shadow:
        0 30px 60px -16px rgba(15,27,50,0.55),
        0 10px 24px rgba(15,27,50,0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
    border-color: rgba(173,198,255,0.22);
}

/* 票面右上角"机舱灯"装饰光晕 */
.pricing-card::before,
.boarding-pass::before {
    content: '';
    position: absolute;
    top: -40%; right: -20%;
    width: 70%; height: 80%;
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(173,198,255,0.18) 0%,
        rgba(173,198,255,0.04) 40%,
        transparent 75%);
    pointer-events: none;
    z-index: 0;
}
/* 票面底部右下角"指示灯" */
.pricing-card::after,
.boarding-pass::after {
    content: '';
    position: absolute;
    bottom: 14px;
    right: 14px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #adc6ff;
    box-shadow: 0 0 8px rgba(173,198,255,0.7);
    animation: bpPulse 2s ease-in-out infinite;
    z-index: 0;
}
@keyframes bpPulse {
    0%, 100% { opacity: 0.6; box-shadow: 0 0 4px rgba(173,198,255,0.5); }
    50%       { opacity: 1;   box-shadow: 0 0 12px rgba(173,198,255,0.9); }
}

/* 选中态 */
.pricing-card.pricing-card--selected,
.boarding-pass.is-selected {
    border-color: rgba(173,198,255,0.55);
    box-shadow:
        0 0 0 3px rgba(173,198,255,0.22),
        0 24px 50px -16px rgba(15,27,50,0.55);
}
.pricing-card.pricing-card--selected::before,
.boarding-pass.is-selected::before {
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(173,198,255,0.30) 0%,
        rgba(173,198,255,0.08) 40%,
        transparent 75%);
}

/* 头部：航班 + 版本 chip */
.bp__head,
.pricing-card .p-header {
    position: relative; z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0 0 14px;
    border-bottom: 1px dashed rgba(255,255,255,0.10);
}
.pricing-card .p-header { display: block; }
.bp__title-block { flex: 1; min-width: 0; }
.bp__eyebrow,
.pricing-card .product-subtitle {
    font-family: "SF Mono","Fira Code","Consolas",monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(173,198,255,0.85);
    text-transform: uppercase;
    margin: 0 0 6px;
}
.bp__name,
.pricing-card .plan-name {
    font-family: "Noto Serif", "Source Han Serif SC", serif;
    font-size: 19px;
    font-weight: 500;
    color: #fff;
    line-height: 1.25;
    margin: 0;
    letter-spacing: -0.01em;
}
.bp__chip,
.pricing-card .popular-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 99px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    color: rgba(238,241,247,0.85);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}
.boarding-pass--popular .bp__chip,
.pricing-card.popular .popular-badge {
    background: linear-gradient(135deg, rgba(173,198,255,0.30), rgba(173,198,255,0.18));
    border-color: rgba(173,198,255,0.50);
    color: #fff;
    box-shadow: 0 0 12px rgba(173,198,255,0.4);
}
/* popular-badge 改为 flex 流内元素，对齐至 plan-name 所在行 */
.pricing-card .popular-badge {
    position: static;
    align-self: flex-end;   /* 沉到 bp__head flex 底部，与 plan-name 对齐 */
    z-index: 3;
    transform: none;
    margin: 0;
    width: auto;
    flex-shrink: 0;
}
.pricing-card.popular .p-header { padding-top: 0; }

/* 路线行：YOU ----✈---- DC */
.bp__route {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 14px 14px;
    margin: 0 0 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
}
.bp__route-side { text-align: center; min-width: 56px; }
.bp__route-code {
    display: block;
    font-family: "Noto Serif", serif;
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
}
.bp__route-side small {
    display: block;
    margin-top: 4px;
    font-size: 10px;
    color: rgba(238,241,247,0.55);
    letter-spacing: 0.04em;
}
.bp__route-line {
    position: relative;
    height: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}
.bp__dotline {
    position: relative;
    width: 100%;
    height: 1px;
    background-image: linear-gradient(90deg, rgba(238,241,247,0.34) 50%, transparent 50%);
    background-size: 5px 1px;
    background-repeat: repeat-x;
}
.bp__dotline::before {
    content: '✈';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgb(20, 33, 58);
    padding: 0 6px;
    font-size: 13px;
    color: #fff;
    line-height: 1;
}
.bp__route-line small {
    font-size: 11.5px;
    font-weight: 700;
    color: rgba(238,241,247,0.74);
    letter-spacing: 0.04em;
    line-height: 1;
    text-transform: uppercase;
}

/* 规格表：RAM / SSD / 带宽 / 加购 */
.bp__meta,
.pricing-card .feature-list-compact {
    position: relative; z-index: 2;
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}
.bp__meta > div,
.pricing-card .feature-list-compact li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    margin: 0;
}
.bp__meta dt,
.pricing-card .feature-list-compact li::before {
    font-family: "SF Mono","Fira Code","Consolas",monospace;
    font-size: 9.5px;
    font-weight: 700;
    color: rgba(173,198,255,0.85);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin: 0;
}
.bp__meta dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    line-height: 1.3;
}
/* feature-list 老 li 格式兼容：去掉 svg / i 图标，让其变 spec 卡 */
.pricing-card .feature-list-compact li {
    align-items: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #fff;
}
.pricing-card .feature-list-compact li svg,
.pricing-card .feature-list-compact li i {
    color: rgba(173,198,255,0.95);
    width: 14px; height: 14px;
    margin-right: 6px;
    flex-shrink: 0;
    stroke-width: 2.5;
    margin-top: 1px;
}

/* 总价 + CTA 行 */
/* 已选增值服务摘要：放在基础配置与总价之间 */
.bp__addons {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: -4px 0 16px;
    padding: 9px 11px;
    border-radius: 12px;
    background: rgba(173,198,255,0.06);
    border: 1px solid rgba(173,198,255,0.16);
}

.bp__addons[hidden] {
    display: none;
}

.bp__addons-label {
    flex-shrink: 0;
    font-family: "SF Mono","Fira Code","Consolas",monospace;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(173,198,255,0.86);
    text-transform: uppercase;
}

.bp__addons-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
}

.bp__addon-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.15;
}

.bp__addon-price {
    color: rgba(173,198,255,0.92);
    font-size: 10.5px;
    font-weight: 800;
    white-space: nowrap;
}

.bp__total-row,
.pricing-card .plan-footer {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-top: auto;
    background: linear-gradient(180deg, rgba(173,198,255,0.06) 0%, rgba(173,198,255,0.02) 100%);
    border-radius: 14px;
    border: 1px solid rgba(173,198,255,0.14);
}
.pricing-card .plan-footer { display: grid; }

.bp__total,
.pricing-card .plan-total {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-start;
}
.bp__total-label,
.pricing-card .plan-total-label {
    font-family: "SF Mono","Fira Code","Consolas",monospace;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    color: rgba(173,198,255,0.85);
    text-transform: uppercase;
}
.bp__total-amount-row {
    display: flex;
    align-items: baseline;
    gap: 2px;
}
.pricing-card .plan-total-num {
    font-family: "Noto Serif", serif;
    font-size: 26px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.bp__currency {
    font-size: 17px;
    font-weight: 600;
    color: #fff;
    line-height: 1;
}
.bp__amount {
    font-family: "Noto Serif", serif;
    font-size: 28px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.bp__period {
    font-size: 12px;
    font-weight: 500;
    color: rgba(238,241,247,0.55);
    margin-left: 4px;
}

/* CTA 按钮 */
.bp__cta,
.pricing-card .btn-plan {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    color: rgb(20, 33, 58);
    background: linear-gradient(135deg, #fff 0%, #e6eefc 100%);
    border: none;
    border-radius: 99px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(173,198,255,0.30), inset 0 1px 0 rgba(255,255,255,0.95);
    transition: transform 0.18s ease, box-shadow 0.22s ease, background 0.22s ease;
    white-space: nowrap;
    width: auto;
}
.bp__cta:hover,
.pricing-card .btn-plan:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #fff 0%, #d8e4fa 100%);
    box-shadow: 0 8px 22px rgba(173,198,255,0.45), inset 0 1px 0 rgba(255,255,255,0.95);
}
.bp__cta:active,
.pricing-card .btn-plan:active { transform: translateY(0); }
.bp__cta:disabled,
.pricing-card .btn-plan:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}
.bp__cta::after {
    content: '→';
    font-size: 14px;
    line-height: 1;
    transform: translateY(-1px);
    transition: transform 0.18s ease;
}
.bp__cta:hover::after { transform: translate(3px, -1px); }

/* boarding-pass--popular 微调 */
.boarding-pass--popular,
.pricing-card.popular {
    background:
        linear-gradient(180deg,
            rgba(20, 36, 70, 0.94) 0%,
            rgba(28, 44, 80, 0.96) 100%);
    border-color: rgba(173,198,255,0.30);
}

/* 鏍囧噯鐗堬細娴呰壊绁ㄩ潰锛屼笌楂橀厤娣辫壊鍗＄墖鎷夊紑灞傜骇 */
#page-esim-taocan #card-m4-16.boarding-pass {
    background:
        radial-gradient(70% 90% at 88% 8%, rgba(94, 156, 255, 0.18) 0%, rgba(94, 156, 255, 0.05) 44%, transparent 72%),
        linear-gradient(180deg, rgba(250, 253, 255, 0.98) 0%, rgba(233, 243, 255, 0.96) 100%);
    border-color: rgba(88, 145, 220, 0.26);
    box-shadow:
        0 22px 46px -20px rgba(55, 104, 165, 0.32),
        0 8px 22px rgba(35, 80, 130, 0.10),
        inset 0 1px 0 rgba(255,255,255,0.95);
    color: #18243a;
}

#page-esim-taocan #card-m4-16.boarding-pass:hover {
    border-color: rgba(59, 130, 246, 0.40);
    box-shadow:
        0 28px 56px -22px rgba(55, 104, 165, 0.42),
        0 10px 26px rgba(35, 80, 130, 0.14),
        inset 0 1px 0 rgba(255,255,255,0.98);
}

#page-esim-taocan #card-m4-16.boarding-pass::before {
    background: radial-gradient(50% 50% at 50% 50%,
        rgba(59,130,246,0.22) 0%,
        rgba(59,130,246,0.07) 42%,
        transparent 76%);
}

#page-esim-taocan #card-m4-16.boarding-pass::after {
    background: #3b82f6;
    box-shadow: 0 0 9px rgba(59,130,246,0.64);
}

#page-esim-taocan #card-m4-16.pricing-card--selected,
#page-esim-taocan #card-m4-16.boarding-pass.is-selected {
    border-color: rgba(59,130,246,0.52);
    box-shadow:
        0 0 0 3px rgba(59,130,246,0.16),
        0 26px 52px -22px rgba(55,104,165,0.40),
        inset 0 1px 0 rgba(255,255,255,0.98);
}

#page-esim-taocan #card-m4-16 .bp__head {
    border-bottom-color: rgba(37, 77, 124, 0.18);
}

#page-esim-taocan #card-m4-16 .bp__eyebrow,
#page-esim-taocan #card-m4-16 .bp__total-label {
    color: rgba(37, 99, 235, 0.76);
}

#page-esim-taocan #card-m4-16 .bp__name,
#page-esim-taocan #card-m4-16 .bp__route-code,
#page-esim-taocan #card-m4-16 .plan-total-num,
#page-esim-taocan #card-m4-16 .bp__currency,
#page-esim-taocan #card-m4-16 .bp__amount {
    color: #142033;
}

#page-esim-taocan #card-m4-16 .bp__chip {
    background: rgba(59,130,246,0.10);
    border-color: rgba(59,130,246,0.24);
    color: #2563eb;
}

#page-esim-taocan #card-m4-16 .bp__route {
    background: rgba(255,255,255,0.68);
    border-color: rgba(77, 132, 190, 0.20);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.78);
}

#page-esim-taocan #card-m4-16 .bp__route-side small,
#page-esim-taocan #card-m4-16 .bp__route-line small,
#page-esim-taocan #card-m4-16 .bp__period {
    color: rgba(36, 57, 89, 0.76);
}

#page-esim-taocan #card-m4-16 .bp__dotline {
    background-image: linear-gradient(90deg, rgba(37,99,235,0.34) 50%, transparent 50%);
}

#page-esim-taocan #card-m4-16 .bp__dotline::before {
    background: #f5f9ff;
    color: #2563eb;
}

#page-esim-taocan #card-m4-16 .feature-list-compact li {
    background: rgba(255,255,255,0.66);
    border-color: rgba(77, 132, 190, 0.20);
    color: #1d2a3d;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

#page-esim-taocan #card-m4-16 .feature-list-compact li svg,
#page-esim-taocan #card-m4-16 .feature-list-compact li i {
    color: #2563eb;
}

#page-esim-taocan #card-m4-16 .bp__addons {
    background: rgba(255,255,255,0.62);
    border-color: rgba(77, 132, 190, 0.22);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.72);
}

#page-esim-taocan #card-m4-16 .bp__addons-label {
    color: rgba(37, 99, 235, 0.76);
}

#page-esim-taocan #card-m4-16 .bp__addon-chip {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.20);
    color: #183153;
}

#page-esim-taocan #card-m4-16 .bp__addon-price {
    color: #2563eb;
}

#page-esim-taocan #card-m4-16 .bp__total-row {
    background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(235,245,255,0.72) 100%);
    border-color: rgba(77, 132, 190, 0.22);
}

#page-esim-taocan #card-m4-16 .bp__cta {
    color: #fff;
    background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
    box-shadow: 0 8px 18px rgba(37,99,235,0.26), inset 0 1px 0 rgba(255,255,255,0.28);
}

#page-esim-taocan #card-m4-16 .bp__cta:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%);
    box-shadow: 0 10px 24px rgba(37,99,235,0.34), inset 0 1px 0 rgba(255,255,255,0.30);
}

/* 楂橀厤鐗堬細娣辫壊绯讳富瑙嗚锛屽己鍖栬繘闃剁増鐨勯噸閲忔劅 */
#page-esim-taocan #card-m4-24.boarding-pass--popular {
    background:
        radial-gradient(80% 95% at 86% 0%, rgba(82, 125, 205, 0.28) 0%, rgba(82, 125, 205, 0.08) 44%, transparent 74%),
        linear-gradient(160deg, rgba(23, 39, 70, 0.98) 0%, rgba(12, 22, 40, 0.98) 100%);
    border-color: rgba(173,198,255,0.32);
    box-shadow:
        0 26px 56px -16px rgba(10, 18, 34, 0.58),
        0 10px 24px rgba(10, 18, 34, 0.28),
        inset 0 1px 0 rgba(255,255,255,0.12);
}

#page-esim-taocan #card-m4-24 .bp__route,
#page-esim-taocan #card-m4-24 .feature-list-compact li,
#page-esim-taocan #card-m4-24 .bp__addons,
#page-esim-taocan #card-m4-24 .bp__total-row {
    background: rgba(255,255,255,0.055);
    border-color: rgba(173,198,255,0.16);
}

/* 兼容性：原 .price-display-compact 显示在票面 header 内 */
.pricing-card .price-display {
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin-top: 12px;
}
.pricing-card .price-display .price-currency {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}
.pricing-card .price-display .price-amount {
    font-family: "Noto Serif", serif;
    font-size: 32px;
    font-weight: 500;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.02em;
}
.pricing-card .price-display .price-period {
    font-size: 12px;
    font-weight: 500;
    color: rgba(238,241,247,0.55);
    margin-left: 4px;
}

/* ============================================================
   支付方式弹框 — 玻璃化
   ============================================================ */
body.pay-method-modal-open { overflow: hidden; }

.pay-method-modal {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(20px, env(safe-area-inset-top, 0px))
        max(20px, env(safe-area-inset-right, 0px))
        max(20px, env(safe-area-inset-bottom, 0px))
        max(20px, env(safe-area-inset-left, 0px));
    box-sizing: border-box;
    animation: vpsModalFadeIn 0.22s ease;
}
@keyframes vpsModalFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.pay-method-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 27, 50, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}
.pay-method-modal-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 440px;
    max-height: min(90vh, calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 28px 26px 22px;
    background: rgba(255,255,255,0.92);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-card);
    box-shadow: 0 24px 60px rgba(15,27,50,0.18), inset 0 1px 0 rgba(255,255,255,0.95);
    animation: vpsModalPanelIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes vpsModalPanelIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
}
.pay-method-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-main);
    margin: 0 0 8px;
    text-align: center;
    letter-spacing: -0.01em;
}
.pay-method-modal-lead {
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.55;
    margin: 0 0 20px;
    text-align: center;
}
.pay-method-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 12px;
}
.pay-method-option {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    cursor: pointer;
    font: inherit;
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(250,252,255,0.85);
    border: 1.5px solid rgba(214,232,245,0.85);
    border-radius: var(--radius-md);
    transition: border-color 0.22s, background 0.22s, box-shadow 0.22s, transform 0.18s;
}
.pay-method-option:hover {
    border-color: var(--primary);
    background: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59,130,246,0.12);
}
.pay-method-option-ico {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    background: rgba(59,130,246,0.10);
    color: var(--primary);
}
.pay-method-option-ico img,
.pay-method-option-ico svg {
    display: block;
    max-width: 26px;
    max-height: 26px;
    object-fit: contain;
}
.pay-method-option-textcol {
    flex: 1; min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}
.pay-method-option-main {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}
.pay-method-option-sub {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-light);
}
.pay-method-cancel {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 4px;
    padding: 10px;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-light);
    border-radius: var(--radius-pill);
    transition: background 0.18s, color 0.18s;
}
.pay-method-cancel:hover { background: rgba(0,0,0,0.04); color: var(--text-main); }

@media (max-width: 520px) {
    .billing-toggle { gap: 2px; padding: 3px; }
    .toggle-btn {
        font-size: 11px;
        padding: 7px 4px;
    }
}
@media (max-width: 380px) {
    .toggle-btn {
        font-size: 10px;
        padding: 6px 3px;
    }
}

/* ============================================================
   小屏适配
   ============================================================ */
@media (max-width: 640px) {
    #page-esim-taocan { padding-top: 78px; padding-bottom: 64px; }
    .pricing-hero { margin-bottom: 26px; }
    .pricing-hero h2 { font-size: 26px; }
    .pricing-lead { font-size: 14px; }
    .pricing-cockpit { padding: 18px 16px; }
    .cockpit__col { padding: 16px 0; }
    .bp__route-code { font-size: 19px; }
    .bp__amount,
    .pricing-card .plan-total-num { font-size: 24px; }
    .pricing-card,
    .boarding-pass { padding: 22px 18px 18px; }
}

html.perf-lite .pricing-cockpit,
html.perf-lite .cockpit__content,
html.perf-lite .cockpit__col,
html.perf-lite .dc-detail-empty,
html.perf-lite .pricing-card,
html.perf-lite .boarding-pass,
html.perf-lite .pay-method-modal-backdrop,
html.perf-lite .pay-method-modal-panel {
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

/* ============================================================
   FADE-IN
   ============================================================ */
.fade-in {
    opacity: 0;
    transform: translateY(20px) !important;
    transition: opacity 0.55s ease, transform 0.55s ease !important;
}
.fade-in.visible { opacity: 1; transform: translateY(0) !important; }