/* ═══════════════════════════════════════════
   MEMBERSHIP / PATRON TIER CARDS — shared stylesheet
   从 support-membership.html 内联样式原样抽出，供以下页面共用：
     - support-membership.html（紫电雷霆 / 矩阵律动 / 极客秩序）
     - support.html（创始支持计划：圣洁天使人 / 霓虹枢纽）
   CSS 规则未做任何改写，仅整体搬家。
   ═══════════════════════════════════════════ */

      /* ── Card base ── */
      .tier-card {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        border: 1px solid var(--line);
        border-radius: 16px;
        background: var(--panel-bg);
        overflow: hidden;
        cursor: pointer;
        transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .4s ease;
        text-align: center;
        font-family: var(--sans);
        color: var(--ink);
      }
      .tier-card:hover {
        transform: translateY(-8px);
      }
      .tier-card[data-loading="true"] {
        cursor: wait;
        opacity: .66;
        pointer-events: none;
      }
      .tier-card > * { position: relative; z-index: 1; }

      /* ── Card header (SVG zone) ── */
      .tier-head {
        width: 100%;
        padding: 32px 20px 18px;
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        overflow: hidden;
      }
      .tier-head::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .35;
        pointer-events: none;
        z-index: 0;
      }

      /* ── SVG icon ── */
      .tier-icon {
        width: 90px;
        height: 90px;
        margin-bottom: 14px;
        flex-shrink: 0;
      }
      .tier-icon svg {
        width: 100%;
        height: 100%;
      }

      /* ── Tier badge ── */
      .tier-badge {
        display: inline-block;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 2.5px;
        text-transform: uppercase;
        padding: 3px 10px;
        border-radius: 4px;
        margin-bottom: 12px;
        border: 1px solid;
      }

      /* ── Name & subtitle ── */
      .tier-name {
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 4px;
        letter-spacing: 1px;
      }
      .tier-subtitle {
        font-family: var(--mono);
        font-size: 12px;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 0;
      }

      /* ── Card body ── */
      .tier-body {
        width: 100%;
        padding: 0 24px 24px;
        flex: 1;
        display: flex;
        flex-direction: column;
      }

      /* ── Narrative ── */
      .tier-narrative {
        font-size: 15px;
        line-height: 1.7;
        color: var(--muted);
        margin: 0 0 18px;
        min-height: 40px;
        font-style: italic;
      }

      /* ── Stats row (3-col) ── */
      .tier-stats {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
        margin-bottom: 14px;
      }
      .tier-stat {
        padding: 14px 4px 10px;
        border-radius: 8px;
        text-align: center;
      }
      .tier-stat-val {
        font-family: var(--mono);
        font-size: 22px;
        font-weight: 700;
        line-height: 1.2;
      }
      .tier-stat-label {
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-top: 4px;
      }

      /* ── Privileges list ── */
      .tier-perks {
        list-style: none;
        padding: 0;
        margin: 0 0 18px;
        text-align: left;
      }
      .tier-perks li {
        font-size: 12px;
        line-height: 1.6;
        color: var(--muted);
        padding: 5px 0;
        border-bottom: 1px solid rgba(255,255,255,.04);
        display: flex;
        align-items: flex-start;
        gap: 8px;
      }
      .tier-perks li:last-child { border-bottom: none; }
      .tier-perks .perk-icon {
        flex-shrink: 0;
        font-size: 11px;
        margin-top: 2px;
      }

      /* ── Price & button ── */
      .tier-price {
        font-family: var(--mono);
        font-size: 34px;
        font-weight: 700;
        margin-bottom: 4px;
      }
      .tier-price-note {
        font-family: var(--mono);
        font-size: 12px;
        color: var(--muted);
        letter-spacing: 1px;
        margin-bottom: 14px;
      }
      .tier-pay-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        font-family: var(--mono);
        font-size: 15px;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 13px 20px;
        border: 1px solid;
        border-radius: 8px;
        background: transparent;
        cursor: pointer;
        transition: background .3s ease, color .3s ease, box-shadow .3s ease;
        margin-top: auto;
      }
      .tier-pay-btn:hover {
        color: var(--bg);
      }

      /* ═══════════════════════════════════════════
         EARLY BIRD — TIER I
         ═══════════════════════════════════════════ */
      .tier-card--early {
        --tier: #00fa9a;
        --tier-soft: rgba(0,250,154,.2);
        --tier-bg: rgba(0,250,154,.04);
      }
      .tier-card--early:hover {
        border-color: rgba(0,250,154,.5);
        box-shadow: 0 0 40px rgba(0,250,154,.12), 0 12px 40px rgba(0,0,0,.3);
      }
      .tier-card--early .tier-head::before {
        background: radial-gradient(ellipse at 50% 60%, rgba(0,250,154,.1), transparent 70%);
        opacity: .6;
      }
      .tier-card--early .tier-badge {
        color: var(--tier);
        border-color: rgba(0,250,154,.3);
        background: rgba(0,250,154,.06);
      }
      .tier-card--early .tier-subtitle { color: rgba(0,250,154,.6); }
      .tier-card--early .tier-stat {
        background: rgba(0,250,154,.04);
        border: 1px solid rgba(0,250,154,.1);
      }
      .tier-card--early .tier-stat-val { color: var(--tier); }
      .tier-card--early .tier-stat-label { color: var(--muted); }
      .tier-card--early .tier-price { color: var(--tier); }
      .tier-card--early .tier-pay-btn {
        border-color: var(--tier);
        color: var(--tier);
      }
      .tier-card--early .tier-pay-btn:hover {
        background: var(--tier);
        box-shadow: 0 0 24px var(--tier-soft);
      }
      .tier-card--early .perk-icon { color: var(--tier); }

      /* ═══════════════════════════════════════════
         ANGEL GUARDIAN — TIER II
         ═══════════════════════════════════════════ */
      .tier-card--angel {
        --tier: #ffd166;
        --tier-soft: rgba(255,209,102,.25);
        --tier-bg: rgba(255,209,102,.04);
      }
      .tier-card--angel:hover {
        border-color: rgba(255,209,102,.5);
        box-shadow: 0 0 40px rgba(255,209,102,.12), 0 12px 40px rgba(0,0,0,.3);
      }
      .tier-card--angel .tier-head::before {
        background: radial-gradient(ellipse at 50% 60%, rgba(255,209,102,.1), transparent 70%);
        opacity: .6;
      }
      .tier-card--angel .tier-badge {
        color: var(--tier);
        border-color: rgba(255,209,102,.3);
        background: rgba(255,209,102,.06);
      }
      .tier-card--angel .tier-subtitle { color: rgba(255,209,102,.6); }
      .tier-card--angel .tier-stat {
        background: rgba(255,209,102,.04);
        border: 1px solid rgba(255,209,102,.1);
      }
      .tier-card--angel .tier-stat-val { color: var(--tier); }
      .tier-card--angel .tier-stat-label { color: var(--muted); }
      .tier-card--angel .tier-price { color: var(--tier); }
      .tier-card--angel .tier-pay-btn {
        border-color: var(--tier);
        color: var(--tier);
      }
      .tier-card--angel .tier-pay-btn:hover {
        background: var(--tier);
        box-shadow: 0 0 24px var(--tier-soft);
      }
      .tier-card--angel .perk-icon { color: var(--tier); }
      .tier-card--angel .tier-icon svg {
        filter: drop-shadow(0 0 8px rgba(255,209,102,.35));
      }
      .tier-card--angel:hover .tier-icon svg {
        filter: drop-shadow(0 0 16px rgba(255,209,102,.5));
      }

      /* recommended badge for angel */
      .tier-recommended {
        position: absolute;
        top: 12px;
        right: 12px;
        font-family: var(--mono);
        font-size: 9px;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 3px 8px;
        border-radius: 3px;
        background: rgba(255,209,102,.12);
        color: #ffd166;
        border: 1px solid rgba(255,209,102,.3);
        z-index: 2;
      }

      /* ═══════════════════════════════════════════
         NEON HUB MATRIX — TIER III
         ═══════════════════════════════════════════ */
      .tier-card--neon {
        --tier: #00e5ff;
        --tier-soft: rgba(0,229,255,.25);
        --tier-bg: rgba(0,229,255,.04);
      }
      .tier-card--neon:hover {
        border-color: rgba(0,229,255,.5);
        box-shadow: 0 0 40px rgba(0,229,255,.14), 0 0 80px rgba(167,139,250,.08), 0 12px 40px rgba(0,0,0,.3);
      }
      .tier-card--neon .tier-head::before {
        background: radial-gradient(ellipse at 50% 60%, rgba(0,229,255,.1), transparent 70%);
        opacity: .6;
      }
      .tier-card--neon .tier-badge {
        color: var(--tier);
        border-color: rgba(0,229,255,.3);
        background: rgba(0,229,255,.06);
      }
      .tier-card--neon .tier-subtitle { color: rgba(0,229,255,.6); }
      .tier-card--neon .tier-stat {
        background: rgba(0,229,255,.04);
        border: 1px solid rgba(0,229,255,.1);
      }
      .tier-card--neon .tier-stat-val { color: var(--tier); }
      .tier-card--neon .tier-stat-label { color: var(--muted); }
      .tier-card--neon .tier-price { color: var(--tier); }
      .tier-card--neon .tier-pay-btn {
        border-color: var(--tier);
        color: var(--tier);
      }
      .tier-card--neon .tier-pay-btn:hover {
        background: var(--tier);
        box-shadow: 0 0 24px var(--tier-soft);
      }
      .tier-card--neon .perk-icon { color: var(--tier); }

      /* ═══════════════════════════════════════════
         THUNDER MONTHLY — TIER 0 (紫色雷霆)
         ═══════════════════════════════════════════ */
      .tier-card--thunder {
        --tier: #a855f7;
        --tier-soft: rgba(168,85,247,.25);
        --tier-bg: rgba(168,85,247,.04);
      }
      .tier-card--thunder:hover {
        border-color: rgba(168,85,247,.55);
        box-shadow: 0 0 40px rgba(168,85,247,.14), 0 0 80px rgba(168,85,247,.06), 0 12px 40px rgba(0,0,0,.3);
      }
      .tier-card--thunder .tier-head::before {
        background: radial-gradient(ellipse at 50% 60%, rgba(168,85,247,.12), transparent 70%);
        opacity: .7;
      }
      .tier-card--thunder .tier-badge {
        color: var(--tier);
        border-color: rgba(168,85,247,.35);
        background: rgba(168,85,247,.08);
      }
      .tier-card--thunder .tier-subtitle { color: rgba(168,85,247,.6); }
      .tier-card--thunder .tier-stat {
        background: rgba(168,85,247,.04);
        border: 1px solid rgba(168,85,247,.12);
      }
      .tier-card--thunder .tier-stat-val { color: var(--tier); }
      .tier-card--thunder .tier-stat-label { color: var(--muted); }
      .tier-card--thunder .tier-price { color: var(--tier); }
      .tier-card--thunder .tier-pay-btn {
        border-color: var(--tier);
        color: var(--tier);
      }
      .tier-card--thunder .tier-pay-btn:hover {
        background: var(--tier);
        box-shadow: 0 0 24px var(--tier-soft);
      }
      .tier-card--thunder .perk-icon { color: var(--tier); }
      .tier-card--thunder .tier-icon svg {
        filter: drop-shadow(0 0 8px rgba(168,85,247,.35));
      }
      .tier-card--thunder:hover .tier-icon svg {
        filter: drop-shadow(0 0 18px rgba(168,85,247,.55));
      }
      .tier-card--thunder .tier-monthly {
        color: #a855f7;
        border: 1px solid rgba(168,85,247,.2);
        background: rgba(168,85,247,.04);
      }

      /* ═══════════════════════════════════════════
         DEEP BLUE — TIER III (极客秩序)
         ═══════════════════════════════════════════ */
      .tier-card--deepblue {
        --tier: #3b82f6;
        --tier-soft: rgba(59,130,246,.25);
        --tier-bg: rgba(59,130,246,.04);
      }
      .tier-card--deepblue:hover {
        border-color: rgba(59,130,246,.5);
        box-shadow: 0 0 40px rgba(59,130,246,.12), 0 12px 40px rgba(0,0,0,.3);
      }
      .tier-card--deepblue .tier-head::before {
        background: radial-gradient(ellipse at 50% 60%, rgba(59,130,246,.1), transparent 70%);
        opacity: .6;
      }
      .tier-card--deepblue .tier-badge {
        color: var(--tier); border-color: rgba(59,130,246,.3); background: rgba(59,130,246,.06);
      }
      .tier-card--deepblue .tier-subtitle { color: rgba(59,130,246,.6); }
      .tier-card--deepblue .tier-stat {
        background: rgba(59,130,246,.04); border: 1px solid rgba(59,130,246,.1);
      }
      .tier-card--deepblue .tier-stat-val { color: var(--tier); }
      .tier-card--deepblue .tier-stat-label { color: var(--muted); }
      .tier-card--deepblue .tier-price { color: var(--tier); }
      .tier-card--deepblue .tier-pay-btn { border-color: var(--tier); color: var(--tier); }
      .tier-card--deepblue .tier-pay-btn:hover {
        background: var(--tier); box-shadow: 0 0 24px var(--tier-soft);
      }
      .tier-card--deepblue .perk-icon { color: var(--tier); }
      .tier-card--deepblue .tier-monthly {
        color: #3b82f6; border: 1px solid rgba(59,130,246,.2); background: rgba(59,130,246,.04);
      }
      .tier-card--deepblue .tier-icon svg {
        filter: drop-shadow(0 0 8px rgba(59,130,246,.3));
      }
      .tier-card--deepblue:hover .tier-icon svg {
        filter: drop-shadow(0 0 16px rgba(59,130,246,.5));
      }

      /* ═══════════════════════════════════════════
         SACRED ANGEL — TIER IV (圣洁天使人)
         ═══════════════════════════════════════════ */
      .tier-card--sacred {
        --tier: #ffd166;
        --tier-soft: rgba(255,209,102,.25);
        --tier-bg: rgba(255,209,102,.04);
      }
      .tier-card--sacred:hover {
        border-color: rgba(255,209,102,.55);
        box-shadow: 0 0 40px rgba(255,209,102,.14), 0 0 60px rgba(255,107,107,.06), 0 12px 40px rgba(0,0,0,.3);
      }
      .tier-card--sacred .tier-head::before {
        background: radial-gradient(ellipse at 50% 60%, rgba(255,209,102,.12), transparent 70%);
        opacity: .7;
      }
      .tier-card--sacred .tier-badge {
        color: var(--tier); border-color: rgba(255,209,102,.35); background: rgba(255,209,102,.08);
      }
      .tier-card--sacred .tier-subtitle { color: rgba(255,209,102,.6); }
      .tier-card--sacred .tier-stat {
        background: rgba(255,209,102,.04); border: 1px solid rgba(255,209,102,.12);
      }
      .tier-card--sacred .tier-stat-val { color: var(--tier); }
      .tier-card--sacred .tier-stat-label { color: var(--muted); }
      .tier-card--sacred .tier-price { color: var(--tier); }
      .tier-card--sacred .tier-pay-btn { border-color: var(--tier); color: var(--tier); }
      .tier-card--sacred .tier-pay-btn:hover {
        background: var(--tier); box-shadow: 0 0 24px var(--tier-soft);
      }
      .tier-card--sacred .perk-icon { color: var(--tier); }
      .tier-card--sacred .tier-monthly {
        color: #ffd166; border: 1px solid rgba(255,209,102,.2); background: rgba(255,209,102,.04);
      }
      .tier-card--sacred .tier-icon svg {
        filter: drop-shadow(0 0 10px rgba(255,209,102,.4));
      }
      .tier-card--sacred:hover .tier-icon svg {
        filter: drop-shadow(0 0 20px rgba(255,209,102,.6));
      }

      /* ── Exclusive perk highlight ── */
      .tier-exclusive {
        font-family: var(--mono);
        font-size: 13px;
        line-height: 1.65;
        color: var(--muted);
        text-align: center;
        padding: 10px 12px;
        border: 1px dashed rgba(255,255,255,.08);
        background: rgba(255,255,255,.02);
        margin: 0 0 14px;
      }
      .tier-exclusive strong {
        color: var(--tier);
      }

      /* ── Disabled card (Tier V) ── */
      .tier-card--disabled {
        opacity: .45;
        cursor: not-allowed;
        filter: grayscale(.4) brightness(.85);
      }
      .tier-card--disabled:hover {
        transform: none;
        border-color: var(--line);
        box-shadow: none;
      }
      .tier-pay-btn--disabled {
        opacity: .5;
        cursor: not-allowed;
        pointer-events: none;
        border-style: dashed;
      }
      .tier-pay-btn--disabled:hover {
        background: transparent;
        color: var(--tier);
        box-shadow: none;
      }

      /* ── Price strikethrough for promo ── */
      .tier-price-original {
        font-family: var(--mono);
        font-size: 16px;
        color: var(--faint);
        text-decoration: line-through;
        margin-bottom: 0;
        letter-spacing: 0.5px;
      }
      .tier-price-promo {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 2px;
      }
      .tier-price-promo .tier-price {
        margin-bottom: 0;
      }

      /* ── 顶部早鸟横幅 ── */
      .tier-corner-badge {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        font-family: var(--sans);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 2px;
        padding: 8px 0;
        background: linear-gradient(135deg, #ff4500, #ff1744, #d50000);
        color: #fff;
        z-index: 5;
        text-shadow: 0 1px 3px rgba(0,0,0,.4);
        box-shadow:
          0 2px 18px rgba(255,23,68,.45),
          0 4px 16px rgba(255,69,0,.3),
          inset 0 1px 0 rgba(255,255,255,.2);
        border-radius: 0;
        animation: corner-badge-glow 2.5s ease-in-out infinite;
        text-align: center;
        display: block;
        width: 100%;
      }
      .tier-corner-badge::after {
        display: none;
      }
      @keyframes corner-badge-glow {
        0%, 100% { box-shadow: 0 2px 18px rgba(255,23,68,.45), 0 4px 16px rgba(255,69,0,.3), inset 0 1px 0 rgba(255,255,255,.2); }
        50% { box-shadow: 0 2px 28px rgba(255,23,68,.65), 0 4px 24px rgba(255,69,0,.45), inset 0 1px 0 rgba(255,255,255,.25); }
      }

      /* ── 有顶部横幅的卡片增加头部内边距 ── */
      .tier-card--has-banner .tier-head {
        padding-top: 58px;
      }

      /* ── 限购标签 ── */
      .tier-limited-tag {
        font-family: var(--mono);
        font-size: 11px;
        color: var(--muted);
        text-align: center;
        letter-spacing: .5px;
        margin-bottom: 12px;
      }

      /* ── Limited slots text ── */
      .tier-limited-text {
        font-family: var(--sans);
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        letter-spacing: 0.3px;
        text-align: center;
        line-height: 1.7;
        margin-bottom: 14px;
        padding: 8px 10px;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 6px;
        background: rgba(255,255,255,.02);
      }

      /* ── Surprise price highlight ── */
      .tier-price--surprise {
        background: linear-gradient(135deg, #ff6b35, #ff3366, #ff6b35);
        background-size: 200% 200%;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        animation: price-shimmer 3s ease-in-out infinite;
        filter: drop-shadow(0 0 12px rgba(255,51,102,.3));
      }
      @keyframes price-shimmer {
        0%, 100% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
      }

      /* ── SVG animations ── */
      @keyframes halo-spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }
      @keyframes halo-pulse {
        0%, 100% { opacity: .3; }
        50% { opacity: .8; }
      }
      @keyframes matrix-scan-tier {
        0% { transform: translateY(-10px); opacity: 0; }
        20% { opacity: .6; }
        80% { opacity: .6; }
        100% { transform: translateY(80px); opacity: 0; }
      }
      @keyframes bird-float {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-4px); }
      }
      @keyframes neon-flicker {
        0%, 100% { opacity: .6; }
        8% { opacity: 1; }
        12% { opacity: .4; }
        16% { opacity: .9; }
        50% { opacity: .7; }
        62% { opacity: 1; }
        66% { opacity: .5; }
        70% { opacity: .8; }
      }
      .bird-float { animation: bird-float 3.5s ease-in-out infinite; }
      .halo-ring { animation: halo-spin 12s linear infinite; transform-origin: 45px 45px; }
      .halo-glow { animation: halo-pulse 2.5s ease-in-out infinite; }
      .neon-scan { animation: matrix-scan-tier 2.8s linear infinite; }
      .neon-flicker { animation: neon-flicker 3s step-end infinite; }

      /* ── Section head ── */
      .membership-section-head {
        text-align: center;
        margin-bottom: 40px;
      }
      .membership-section-head .section-label {
        font-family: var(--mono);
        font-size: 11px;
        letter-spacing: 4px;
        text-transform: uppercase;
        color: var(--faint);
        margin-bottom: 8px;
      }
      .membership-section-head h2 {
        font-size: 26px;
        font-weight: 700;
        margin: 0 0 8px;
        background: linear-gradient(90deg, var(--green), var(--cyan));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }
      .membership-section-head p {
        font-size: 14px;
        color: var(--muted);
        margin: 0;
        max-width: 540px;
        margin-inline: auto;
        line-height: 1.7;
      }

      /* ── Payment status ── */
      .membership-payment-status {
        text-align: center;
        margin-top: 28px;
        font-family: var(--mono);
        font-size: 12px;
        color: var(--muted);
        letter-spacing: .5px;
      }

      /* ── Monthly refresh badge ── */
      .tier-monthly {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-family: var(--mono);
        font-size: 10px;
        letter-spacing: 1px;
        padding: 2px 8px;
        border-radius: 3px;
        margin-top: 2px;
      }
      .tier-card--angel .tier-monthly {
        color: #ffd166;
        border: 1px solid rgba(255,209,102,.2);
        background: rgba(255,209,102,.04);
      }
      .tier-card--neon .tier-monthly {
        color: #00e5ff;
        border: 1px solid rgba(0,229,255,.2);
        background: rgba(0,229,255,.04);
      }