/* VIP 会员页 — 对齐 ceo-shop2 香槟金配色与圆角辅助元素 */

/* ==========================================================================
   1. 变量与基础重置
   ========================================================================== */
.ceovip-mempage{
      --ceovip-mp-bg:     #f4f0e9;
      --ceovip-mp-panel:  #fffdf9;
      --ceovip-mp-ink:    #4a433a;
      --ceovip-mp-muted:  #8c8378;
      --ceovip-mp-line:   #e6ddd0;
      --ceovip-mp-line-2: #e0d5c6;
      --ceovip-mp-shadow: 0 20px 55px rgba(118, 96, 67, .09);
      --ceovip-mp-brand:      #b99a68;
      --ceovip-mp-brand-2:    #cbb288;
      --ceovip-mp-brand-soft: rgba(185, 154, 104, .12);
      --ceovip-mp-gold:       #b99a68;
      --ceovip-mp-success:    #6a8f68;
      --ceovip-mp-danger:     #b85c5c;
      --ceovip-mp-radius:12px;
      --ceovip-mp-pad:24px;
      --ceovip-mp-container:1440px;
      --ceovip-mp-mono:"Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
      --ceovip-mp-sans:"Microsoft YaHei", "PingFang SC", "Noto Sans CJK SC", Arial, sans-serif;
      --color-section-bg: #fffdf9;
    }

    .ceovip-mempage,.ceovip-mempage *{box-sizing:border-box}
    .ceovip-mempage{scroll-behavior:smooth}
    .ceovip-mempage{
      font-family:var(--ceovip-mp-sans);
      color:#625b52;
      background:
        radial-gradient(circle at top center, rgba(185, 154, 104, .14), transparent 34%),
        linear-gradient(180deg, #f8f4ec 0%, var(--ceovip-mp-bg) 28%, #eee7dc 100%);
      line-height:1.45;
      margin:0;
    }

    .ceovip-mempage::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(135deg, rgba(118, 96, 67, .03) 0 1px, transparent 1px 14px),
        linear-gradient(0deg, rgba(118, 96, 67, .025) 0 1px, transparent 1px 52px);
      opacity:.45;
      mix-blend-mode:multiply;
    }

    .ceovip-mempage a{text-decoration:none;color:inherit}
    .ceovip-mempage button{font:inherit}

    .ceovip-mp-container{
      max-width:var(--ceovip-mp-container);
      margin:0 auto;
      padding:1px 20px 30px;
      position:relative;
    }

/* ==========================================================================
   2. 通用区块容器（Section）
   ========================================================================== */
    .ceovip-mp-section{
      background: var(--color-section-bg);
      border:1px solid var(--ceovip-mp-line);
      border-radius:18px;
      box-shadow:var(--ceovip-mp-shadow);
      position:relative;
      overflow:hidden;
      margin-top:18px;
    }

    .ceovip-mp-section-header{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:16px;
      padding:18px var(--ceovip-mp-pad) 12px;
      border-bottom:1px solid var(--ceovip-mp-line);
    }

    .ceovip-mp-section-title{
      display:flex;
      align-items:center;
      gap:10px;
      margin:0;
      font-family:var(--ceovip-mp-sans);
      text-transform:none;
      letter-spacing:.02em;
      font-size:18px;
      font-weight:700;
      color:var(--ceovip-mp-ink);
    }

    .ceovip-mp-section-title .ceovip-mp-bar{
      width:10px;
      height:10px;
      background:var(--ceovip-mp-brand);
      border:1px solid #a88957;
      border-radius:2px;
      box-shadow:3px 0 0 #d8c4a2;
    }

    .ceovip-mp-section-hint{
      font-size:12px;
      color:var(--ceovip-mp-muted);
      font-family:var(--ceovip-mp-sans);
      letter-spacing:.04em;
      white-space:nowrap;
    }

/* ==========================================================================
   3. 顶部 Banner（Hero）
   ========================================================================== */
    .ceovip-mp-hero{
      position:relative;
      background:
        radial-gradient(circle at 50% -10%, rgba(255, 249, 236, .55), transparent 36%),
        linear-gradient(135deg, #cbb288 0%, #b99a68 48%, #a88957 100%);
      color:#fffdf8;
      border-color:#d8c4a2;
      padding:0;
    }

    .ceovip-mp-hero::before{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
      width:100%;
      height:100%;
      clip-path:none;
      background:
        radial-gradient(circle at 12% 18%, rgba(255,253,249,.2) 0 2px, transparent 3px 100%),
        radial-gradient(circle at 88% 22%, rgba(255,253,249,.16) 0 2px, transparent 3px 100%),
        linear-gradient(160deg, rgba(255,253,249,.14), transparent 28%),
        linear-gradient(20deg, rgba(255,253,249,.06), transparent 36%);
      opacity:1;
    }

    .ceovip-mp-hero-inner{
      position:relative;
      z-index:1;
      padding:36px 34px 30px;
      text-align:center;
      overflow:hidden;
    }

    .ceovip-mp-hero-badge{
      display:inline-flex;
      align-items:center;
      gap:10px;
      min-height:34px;
      padding:8px 14px;
      font-family:var(--ceovip-mp-mono);
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      backdrop-filter:blur(4px);
    }

    .ceovip-mp-hero-badge .ceovip-mp-dot{
      width:10px;
      height:10px;
      border:1px solid #fff;
      background:#e8d9b8;
    }

    .ceovip-mp-hero h1{
      margin:18px 0 10px;
      font-size:clamp(34px, 4vw, 62px);
      line-height:1.06;
      letter-spacing:.02em;
    }

    /* Hero 标题前段「限时专享」：颜色、字重、字号可单独调整 */
    .ceovip-mp-hero h1 .ceovip-mp-hero-title-lead{
      color:#fff;
      font-weight:600;
      font-size:clamp(36px, 3vw, 62px);
    }

    .ceovip-mp-hero h1 strong{
      color:#fff8e8;
      text-shadow:0 2px 0 rgba(0,0,0,.06);
      font-size:1.18em;
    }

    .ceovip-mp-hero-desc{
      margin:0 auto;
      max-width:960px;
      font-size:16px;
      color:rgba(255,255,255,.92);
    }

    .ceovip-mp-hero-tags{
      display:flex;
      justify-content:center;
      flex-wrap:wrap;
      gap:12px;
      margin-top:24px;
    }

/* ==========================================================================
   4. 开通倒计时（Countdown）
   ========================================================================== */
    .ceovip-mp-countdown-wrap{
      display:inline-flex;
      align-items:center;
      gap:12px;
      margin-top:18px;
      padding:8px 12px;
      border:1px solid rgba(255,255,255,.45);
      border-radius:10px;
      background:rgba(255,255,255,.08);
      backdrop-filter:blur(2px);
      flex-wrap:wrap;
      justify-content:center;
    }

    .ceovip-mp-countdown-label{
      font-size:12px;
      letter-spacing:.06em;
      font-family:var(--ceovip-mp-mono);
      text-transform:uppercase;
      color:rgba(255,245,228,.9);
    }

    .ceovip-mp-timer{
      display:flex;
      align-items:center;
      gap:6px;
    }

    .ceovip-mp-time-block{
      min-width:54px;
      padding:7px 8px 6px;
      border:1px solid rgba(255,255,255,.55);
      border-radius:8px;
      background:rgba(255,253,249,.94);
      color:var(--ceovip-mp-ink);
      text-align:center;
      box-shadow:0 4px 12px rgba(118, 96, 67, .12);
    }

    .ceovip-mp-time-block strong{
      display:block;
      font-family:var(--ceovip-mp-mono);
      font-size:22px;
      line-height:1;
      color:#a88957;
    }

    .ceovip-mp-time-block span{
      display:block;
      margin-top:3px;
      font-size:10px;
      color:var(--ceovip-mp-muted);
      letter-spacing:.08em;
      text-transform:uppercase;
      font-family:var(--ceovip-mp-mono);
    }

    .ceovip-mp-timer-sep{
      font-family:var(--ceovip-mp-mono);
      font-size:18px;
      opacity:.55;
    }

/* ==========================================================================
   5. 会员开通方式（套餐卡片）
   ========================================================================== */
    .ceovip-mp-plans{
      padding:18px var(--ceovip-mp-pad) 26px;
    }

    .ceovip-mp-plans-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:18px;
    }

    .ceovip-mp-plan-card{
      position:relative;
      border:1px solid var(--ceovip-mp-line);
      border-radius:var(--ceovip-mp-radius);
      background: var(--ceovip-mp-panel);
      padding:20px 18px 18px;
      display:flex;
      flex-direction:column;
      min-height:420px;
      transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease;
      overflow:hidden;
      box-shadow:0 8px 24px rgba(118, 96, 67, .05);
    }

    .ceovip-mp-plan-card:hover{
      transform:translateY(-4px);
      border-color:var(--ceovip-mp-brand);
      box-shadow:0 18px 40px rgba(185,154,104,.16);
    }

    .ceovip-mp-plan-card.ceovip-mp-plan-card--highlight{
      border-color:var(--ceovip-mp-brand);
      background:linear-gradient(180deg, rgba(185,154,104,.08), #fffdf9 36%);
    }

    .ceovip-mp-plan-card.ceovip-mp-plan-card--popular::after{
      content:"现时开放";
      position:absolute;
      right:-30px;
      top:13px;
      width:120px;
      height:30px;
      display:grid;
      place-items:center;
      transform:rotate(45deg);
      background:var(--ceovip-mp-gold);
      color:#fffdf8;
      border:1px solid #a88957;
      font-size:12px;
      font-weight:800;
      letter-spacing:.16em;
      font-family:var(--ceovip-mp-mono);
    }

    .ceovip-mp-plan-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:10px;
      margin-bottom:14px;
    }

    .ceovip-mp-plan-name{
      margin:0;
      font-size:24px;
      font-weight: 600;
      color: var(--ceovip-mp-ink);
    }

    .ceovip-mp-plan-note{
      margin-top:6px;
      font-size:12px;
      color:var(--ceovip-mp-muted);
      font-family:var(--ceovip-mp-mono);
      letter-spacing:.06em;
    }

    .ceovip-mp-plan-badge{
      flex:0 0 auto;
      padding:6px 10px;
      border:1px solid #d2bd9a;
      border-radius:6px;
      background:var(--ceovip-mp-brand-soft);
      color:#876a40;
      font-size:12px;
      font-family:var(--ceovip-mp-mono);
      letter-spacing:.08em;
      text-transform:uppercase;
      font-weight:700;
    }

    .ceovip-mp-plan-pricebox{
      padding:16px 14px;
      border:1px solid var(--ceovip-mp-line);
      border-radius:10px;
      background:linear-gradient(180deg, #fffdf9, rgba(185,154,104,.06));
      margin-bottom:14px;
    }

    .ceovip-mp-price-label{
      font-size:12px;
      color:var(--ceovip-mp-muted);
      font-family:var(--ceovip-mp-mono);
      letter-spacing:.08em;
      text-transform:uppercase;
    }

    .ceovip-mp-market-price{
      margin-top:4px;
      color:var(--ceovip-mp-muted);
      font-size:14px;
    }

    .ceovip-mp-market-price del{
      color:#8a9099;
      font-weight:700;
    }

    .ceovip-mp-plan-price{
      display:flex;
      align-items:flex-end;
      gap:6px;
      margin-top:8px;
      line-height:1;
    }

    .ceovip-mp-plan-price strong{
      font-size:42px;
      color:var(--ceovip-mp-brand);
      letter-spacing:-.02em;
    }

    .ceovip-mp-plan-price small{
      font-size:14px;
      color:var(--ceovip-mp-muted);
      padding-bottom:5px;
    }

    .ceovip-mp-plan-save{
      display:inline-flex;
      margin-top:10px;
      padding:6px 8px;
      border:1px solid #d2bd9a;
      border-radius:6px;
      background:#f5edd9;
      color:#876a40;
      font-size:12px;
      font-family:var(--ceovip-mp-mono);
      letter-spacing:.08em;
      width:max-content;
    }

    .ceovip-mp-plan-list{
      display:grid;
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
      flex:1;
    }

    .ceovip-mp-plan-list li{
      position:relative;
      padding-left:24px;
      font-size:14px;
      color:#625b52;
    }

    .ceovip-mp-plan-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:7px;
      width:10px;
      height:10px;
      border:1px solid #a88957;
      border-radius:2px;
      background:var(--ceovip-mp-brand-2);
      box-shadow:3px 0 0 #d8c4a2;
    }

    .ceovip-mp-plan-foot{
      margin-top:16px;
      display:grid;
      gap:10px;
    }

    .ceovip-mp-plan-tip{
      min-height:42px;
      padding:10px 12px;
      border:2px dashed var(--ceovip-mp-line-2);
      color:var(--ceovip-mp-muted);
      font-size:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
    }

    .ceovip-mp-mini-note{
      margin-top:16px;
      font-size:12px;
      color:var(--ceovip-mp-muted);
      text-align:center;
    }

/* ==========================================================================
   6. 通用按钮（Button）
   ========================================================================== */
    .ceovip-mp-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:12px 16px;
      border:1px solid #d2bd9a;
      border-radius:10px;
      background: #fffaf2;
      color:#876a40;
      cursor:pointer;
      font-weight:600;
      letter-spacing:.04em;
      transition:transform .2s ease, background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
      user-select:none;
    }

    .ceovip-mp-btn:hover{transform:translateY(-2px)}
    .ceovip-mp-btn.ceovip-mp-btn--primary{
      background:var(--ceovip-mp-brand);
      color:#fffdf8;
      border-color:transparent;
      box-shadow:0 9px 20px rgba(156, 124, 77, .16);
    }
    .ceovip-mp-btn.ceovip-mp-btn--primary:hover{
      background:#a88957;
      box-shadow:0 12px 24px rgba(156, 124, 77, .22);
    }
    .ceovip-mp-btn.ceovip-mp-btn--secondary{
      background:#fffaf2;
      color:#876a40;
      border-color:#d2bd9a;
    }
    .ceovip-mp-btn.ceovip-mp-btn--secondary:hover{
      background:#f5ead9;
      border-color:#c6ab7e;
      color:#76582f;
    }

/* ==========================================================================
   7. 会员权益对比表（Comparison Table）
   ========================================================================== */
    .ceovip-mp-comparison{
      padding:16px var(--ceovip-mp-pad) 26px;
    }

    .ceovip-mp-table-wrap{
      border:1px solid var(--ceovip-mp-line);
      border-radius:12px;
      overflow:auto;
      background: var(--ceovip-mp-panel);
    }

    .ceovip-mp-table-wrap table{
      width:100%;
      border-collapse:collapse;
      min-width:840px;
    }

    .ceovip-mp-table-wrap thead th{
      position:sticky;
      top:0;
      z-index:2;
      background:#f8f4ec;
      border-bottom:1px solid var(--ceovip-mp-line);
      color:var(--ceovip-mp-ink);
      font-family:var(--ceovip-mp-mono);
      text-transform:none;
      letter-spacing:.04em;
      font-size:13px;
      padding:14px 12px;
      text-align:center;
      white-space:nowrap;
    }
    .ceovip-mp-table-wrap thead th:first-child{
      text-align:left;
    }

    .ceovip-mp-table-wrap tbody td{
      border-top:1px solid var(--ceovip-mp-line);
      padding:14px 12px;
      text-align:center;
      font-size:14px;
      white-space:nowrap;
    }

    .ceovip-mp-table-wrap tbody tr:hover{background:rgba(185,154,104,.05)}
    .ceovip-mp-table-wrap tbody td:first-child{
      text-align:left;
      font-weight:700;
    }

    .ceovip-mp-yes,.ceovip-mp-no,.ceovip-mp-text-accent{font-weight:800}
    .ceovip-mp-yes{color:var(--ceovip-mp-success)}
    .ceovip-mp-no{color:var(--ceovip-mp-danger)}
    .ceovip-mp-text-accent{color:var(--ceovip-mp-brand)}

/* ==========================================================================
   8. 常见问题（FAQ）
   ========================================================================== */
    .ceovip-mp-faq{
      padding:14px var(--ceovip-mp-pad) 28px;
    }

    .ceovip-mp-faq-list{
      display:grid;
      gap:14px;
    }

    details.ceovip-mp-faq-item{
      border:1px solid var(--ceovip-mp-line);
      border-radius:12px;
      background: var(--ceovip-mp-panel);
      transition:border-color .14s ease, box-shadow .14s ease;
    }

    details.ceovip-mp-faq-item[open]{
      border-color:var(--ceovip-mp-brand);
      box-shadow:0 12px 26px rgba(185,154,104,.10);
    }

    .ceovip-mp-faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:18px 56px 18px 18px;
      position:relative;
      font-weight:700;
      font-size:16px;
      color:var(--ceovip-mp-ink);
    }

    .ceovip-mp-faq-item summary::-webkit-details-marker{display:none}

    .ceovip-mp-faq-item summary::before,
    .ceovip-mp-faq-item summary::after{
      content:"";
      position:absolute;
      right:20px;
      top:50%;
      width:18px;
      height:2px;
      background:var(--ceovip-mp-ink);
      transform:translateY(-50%);
    }

    .ceovip-mp-faq-item summary::after{
      transform:translateY(-50%) rotate(90deg);
      transition:transform .14s ease;
    }

    .ceovip-mp-faq-item[open] summary::after{
      transform:translateY(-50%) rotate(0deg);
    }

    .ceovip-mp-faq-content{
      padding:0 18px 18px;
      color:#625b52;
      border-top:1px solid var(--ceovip-mp-line);
      background:linear-gradient(180deg, rgba(185,154,104,.04), rgba(255,253,249,0));
    }

    .ceovip-mp-faq-content p{
      margin:14px 0 0;
    }

/* ==========================================================================
   9. 底部吸附按钮（Sticky Bar）
   ========================================================================== */
    .ceovip-mp-sticky-bar{
      position:sticky;
      bottom:16px;
      z-index:15;
      margin-top:22px;
    }

    .ceovip-mp-sticky-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:14px 16px;
      border:1px solid var(--ceovip-mp-line);
      border-radius:14px;
      background:rgba(255,253,249,.94);
      backdrop-filter:blur(6px);
      box-shadow:var(--ceovip-mp-shadow);
    }

    .ceovip-mp-sticky-copy strong{
      color:var(--ceovip-mp-brand);
      font-size:24px;
      margin:0 4px;
    }

    .ceovip-mp-sticky-copy p{
      margin:0;
      font-size:13px;
      color:var(--ceovip-mp-muted);
    }

/* ==========================================================================
   10. 响应式（Responsive）
   ========================================================================== */
    @media (max-width: 1280px){
      .ceovip-mp-plans-grid{grid-template-columns:repeat(2, minmax(0, 1fr));}
    }

    @media (max-width: 768px){
      .ceovip-mempage{--ceovip-mp-pad:16px}
      .ceovip-mp-container{padding:14px 12px 52px}
      .ceovip-mp-hero-inner{padding:24px 16px 22px}
      .ceovip-mp-hero h1{font-size:34px}
      .ceovip-mp-hero h1 .ceovip-mp-hero-title-lead{font-size:34px}
      .ceovip-mp-hero-desc{font-size:14px}
      .ceovip-mp-countdown-wrap{padding:8px 10px; gap:8px}
      .ceovip-mp-time-block{min-width:48px; padding:6px 7px 5px}
      .ceovip-mp-time-block strong{font-size:20px}
      .ceovip-mp-section-header{align-items:flex-start; flex-direction:column}
      .ceovip-mp-section-hint{white-space:normal}
      .ceovip-mp-plans-grid{grid-template-columns:1fr}
      .ceovip-mp-table-wrap table{min-width:920px}
      .ceovip-mp-sticky-inner{flex-direction:column; align-items:stretch}
      .ceovip-mp-sticky-copy{text-align:center}
      .ceovip-mp-sticky-copy strong{display:inline-block}
      .ceovip-mp-sticky-inner .ceovip-mp-btn{width:100%}
    }