.onboarding-page { background:#fafafa; padding-top: calc(var(--header-height) + 80px); }
.ob-hero { background: linear-gradient(135deg,#fff 0%,#f7f7f7 100%); border-bottom:1px solid #eee; }
.ob-hero-wrap { padding:48px 0 28px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.ob-hero-left{ flex:1; min-width:0; }
.ob-hero-right{ flex:0 0 auto; }
.ob-title { font-size:28px; font-weight:700; color:#222; margin:0 0 8px; }
.ob-subtitle { font-size:14px; color:#666; margin:0; }
.ob-actions { margin-top:16px; display:flex; gap:12px; }
.btn-outline { background:#fff; color:#ff6d31; border:1px solid #ff6d31; }
.btn-outline:hover { background:#fff7f2; }
.ob-process-section .container { padding:24px 0; }
.section-title { font-size:20px; font-weight:700; color:#222; margin:12px 0 24px; }
.ob-steps { display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; counter-reset: step; }
.ob-steps .step { background:#fff; border:1px solid #eee; border-radius:12px; padding:20px 16px 16px; display:flex; flex-direction:column; align-items:center; text-align:center; position:relative; }
/* 流程卡片增加编号圆点，区分于下方类型卡片 */
.ob-steps .step::before { content: counter(step); counter-increment: step; position:absolute; top:-12px; left:16px; width:28px; height:28px; border-radius:50%; background:#ff6d31; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; box-shadow:0 4px 10px rgba(255,109,49,.25); }
.step-media{ width:100%; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
.ob-illus{ width:100%; max-width:140px; aspect-ratio:1/1; height:auto; background:transparent; border-radius:12px; object-fit:contain; }
.illus-hint{ text-align:center; color:#999; font-size:12px; margin-top:8px; }
.ob-steps .step h3 { margin:12px 0 6px; font-size:16px; }
.ob-steps .step p { margin:0; color:#666; font-size:14px; }
.ob-apply-section .container { padding:16px 0 48px; }
.ob-card { background:#fff; border:1px solid #eee; border-radius:12px; padding:20px; max-width:720px; }
.ob-form { margin-top:12px; }
.form-row { display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.form-row input, .form-row select { border:1px solid #ddd; border-radius:8px; padding:10px 12px; font-size:14px; }
.ob-tip { color:#666; font-size:13px; margin:0; }

/* 入驻类型介绍区块 */
.ob-types-section{ padding:56px 0; background:transparent; position:relative; border:0; }
.ob-types-section .container{ padding:24px 0; }
.ob-types-section .section-title{ font-size:22px; text-align:center; margin-bottom:32px; }
.ob-types-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:32px; align-items:stretch; }
.ob-type-card{ position:relative; background:#fff; border:1.5px solid #ffd9c7; border-radius:18px; padding:26px 22px 22px; text-align:left; box-shadow:0 14px 36px rgba(255,137,76,.18), 0 6px 16px rgba(0,0,0,.06); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; display:flex; flex-direction:column; align-items:stretch; overflow:hidden; height:100%; }
.ob-type-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:linear-gradient(180deg,#ff9f6b 0%, #ff7a45 100%); }
.ob-type-card:hover{ transform: translateY(-8px); box-shadow:0 18px 48px rgba(255,137,76,.22), 0 10px 24px rgba(0,0,0,.10); border-color:#ffb695; }
.type-tag{ position:absolute; top:12px; right:12px; background:#fff1e6; color:#ff7a45; border:1px solid #ffd6bf; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; }
.tag-brand{ background:#e6f4ff; color:#1677ff; border-color:#b7dcff; }
.tag-designer{ background:#f6ffed; color:#52c41a; border-color:#d9f7be; }
.type-media{ display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#fff6f0 0%, #ffffff 100%); border-radius:12px; height:200px; margin-bottom:14px; }
.type-media img{ max-height:100%; width:auto; object-fit:contain; filter: drop-shadow(0 6px 16px rgba(0,0,0,.10)); }
.ob-type-card h3{ margin:0 0 8px; font-size:18px; }
.features{ margin:0 0 14px; padding-left:18px; color:#444; line-height:1.9; }
.type-content .type-cta{ width:100%; justify-content:center; padding:12px 16px; font-weight:700; box-shadow:0 6px 14px rgba(255,122,69,.25); }

@media (max-width: 1200px){
  .type-media{ height:180px; }
}

@media (max-width: 900px){
  .ob-types-grid{ grid-template-columns: 1fr; }
  .type-media{ height:160px; }
  .ob-types-section{ padding:56px 0; }
}

/* 套餐弹窗 */
.ob-modal-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:1300; }
.ob-modal-overlay[hidden]{ display:none !important; }
.ob-modal{ width:min(920px, 92vw); background:#fff; border-radius:14px; box-shadow:0 20px 40px rgba(0,0,0,.18); overflow:hidden; }
.ob-modal-header{ display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #f0f0f0; }
.ob-modal-header h3{ margin:0; font-size:18px; }
.ob-modal-close{ background:transparent; border:0; font-size:20px; cursor:pointer; line-height:1; padding:4px 8px; }
.ob-modal-body{ padding:18px 20px 22px; }
.login-tip{ display:flex; align-items:center; gap:12px; padding:10px 12px; background:#fff7f2; border:1px solid #ffd6bf; color:#a14a1c; border-radius:8px; margin-bottom:12px; }
.login-tip .btn{ padding:6px 10px; border-radius:6px; height:auto; line-height:1; }
.renewal-message{ padding:10px 12px; border-radius:8px; margin-bottom:12px; font-size:14px; line-height:1.5; }
.renewal-message[hidden]{ display:none !important; }
.renewal-message.renewal-message--success{ background:#f6ffed; border:1px solid #b7eb8f; color:#389e0d; }
.renewal-message.renewal-message--error{ background:#fff2f0; border:1px solid #ffccc7; color:#cf1322; }
.renewal-message.renewal-message--info{ background:#e6f7ff; border:1px solid #91d5ff; color:#0958d9; }
.renewal-message.renewal-message--warning{ background:#fffbe6; border:1px solid #ffe58f; color:#d46b08; }
.pkg-status{ text-align:center; margin:12px 0; }
.pkg-status [hidden]{ display:none !important; }
.pkg-loading{ display:block; padding:10px 12px; color:#555; }
.pkg-error{ display:block; padding:10px 12px; color:#b42318; background:#fee4e2; border:1px solid #fecdca; border-radius:8px; }
.pkg-empty{ display:block; padding:10px 12px; color:#555; background:#f8fafc; border:1px dashed #e5e7eb; border-radius:8px; }
.pkg-period{ display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 10px; }
.period-btn{ appearance:none; -webkit-appearance:none; background:#fff; border:1px solid #ddd; color:#333; padding:8px 12px; border-radius:999px; cursor:pointer; font-size:14px; }
.period-btn.active{ background:#ff6d31; border-color:#ff6d31; color:#fff; }
.pkg-form{ display:grid; gap:12px; margin:12px 0 16px; }
.pkg-form .form-row{ display:flex; flex-direction:column; gap:6px; }
.pkg-form label{ font-size:14px; color:#444; }
.pkg-form input,
.pkg-form select{ display:block; width:100%; box-sizing:border-box; background:#fff; border:1px solid #ddd; border-radius:8px; padding:10px 12px; font-size:14px; color:#222; }
.pkg-form input::placeholder{ color:#999; }
.pkg-form input:focus,
.pkg-form select:focus{ outline:none; border-color:#ff6d31; box-shadow:0 0 0 3px rgba(255,109,49,.12); }
.pkg-grid{ 
    display:grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap:12px; 
    max-width:100%;
    justify-items: start; /* 左对齐 */
}
.pkg-grid.single{ grid-template-columns: 1fr; max-width:300px; margin:0; }
.pkg-grid.single .pkg-card{ 
    padding:20px 24px; 
}
.pkg-grid.single .pkg-card h4{ font-size:20px; }
.pkg-grid.single .pkg-card .price{ font-size:18px; }
.pkg-card{ 
    border:1px solid #eee; 
    border-radius:12px; 
    padding:20px; 
    display:flex; 
    flex-direction:column; 
    min-height:180px;
    width:100%;
    position:relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pkg-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    border-color: #ff6d31;
}
.pkg-card .features{ 
    margin:0 0 12px; 
    padding-left:18px; 
    color:#666; 
    line-height:1.6; 
    font-size:13px;
}
.pkg-card .btn{ 
    margin-top:auto; 
    width:100%; 
    padding:10px 16px;
}
.pkg-card h4{ 
    margin:0 0 10px; 
    font-size:16px; 
    font-weight:600;
    color:#222;
    line-height:1.4;
}
.pkg-card .price{ 
    margin:0 0 12px; 
    color:#111; 
    font-weight:600; 
    font-size:18px;
}
.pkg-card .btn:disabled{ background:#ccc; border-color:#ccc; color:#666; cursor:not-allowed; }
.pkg-card .btn:not(:disabled){ background:#ff6d31; border-color:#ff6d31; color:#fff; }
.pkg-card .btn:not(:disabled):hover{ background:#ff5722; border-color:#ff5722; }

/* 居中提示 */
.center-toast{ position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%) scale(.98); z-index: 1400; background: rgba(0,0,0,.84); color:#fff; padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.4; max-width: 80vw; text-align: center; opacity: 0; transition: opacity .2s ease, transform .2s ease; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.center-toast.show{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
.center-toast--success{ background: rgba(46, 204, 113, .95); }
.center-toast--error{ background: rgba(231, 76, 60, .95); }

/* 已入驻按钮灰态 */
.ob-type-card .type-cta.btn-disabled,
.ob-type-card .type-cta:disabled{
    background: #ccc !important;
    border-color: #ccc !important;
    color: #666 !important;
    cursor: not-allowed;
}

/* ========== 手机端整体布局优化 ========== */
@media (max-width: 768px){
  /* 顶部与整体留白 */
  .onboarding-page{
    padding-top: calc(var(--header-height, 64px) + 56px);
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  .onboarding-page .container{
    max-width: 100%;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
    box-sizing: border-box;
  }

  /* Hero 区块：上下排列，按钮居中、满宽度 */
  .ob-hero-wrap{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 0 18px;
  }

  /* 让 hero 与下方卡片像一张“卡片”，不被手机边缘挡住 */
  .ob-hero{
    border-radius: 16px;
    overflow: hidden;
  }

  .ob-title{
    font-size: 22px;
    line-height: 1.4;
  }

  .ob-subtitle{
    font-size: 13px;
    line-height: 1.6;
  }

  .ob-actions{
    width: 100%;
    margin-top: 12px;
  }

  /* 只缩小商家入驻页 Hero 里的“立即入驻”按钮，不影响电脑端 */
  .onboarding-page .ob-actions .btn{
    width: 100%;
    justify-content: center;
    height: 38px !important;          /* 强制比默认按钮矮一点 */
    padding: 0 18px !important;       /* 减少内边距，按钮更小巧 */
    font-size: 14px !important;       /* 字体略小 */
    border-radius: 999px;
  }

  /* 入驻流程卡片：2 列网格，卡片更紧凑 */
  .ob-process-section .container{
    padding: 16px 0 20px;
  }

  .section-title{
    font-size: 18px;
    margin: 4px 0 18px;
  }

  .ob-steps{
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .ob-steps .step{
    padding: 16px 12px 12px;
    border-radius: 10px;
  }

  .ob-illus{
    max-width: 110px;
  }

  .ob-steps .step h3{
    font-size: 14px;
  }

  .ob-steps .step p{
    font-size: 12px;
  }

  /* 入驻类型卡片：单列，卡片左右撑满屏幕 */
  .ob-types-section{
    padding: 32px 0 40px;
  }

  .ob-types-section .section-title{
    font-size: 20px;
    margin-bottom: 20px;
  }

  .ob-types-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .ob-type-card{
    padding: 18px 16px 16px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(255,137,76,.18), 0 4px 10px rgba(0,0,0,.06);
  }

  .type-media{
    height: 150px;
    margin-bottom: 10px;
  }

  .ob-type-card h3{
    font-size: 16px;
  }

  .features{
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 10px;
  }

  .type-content .type-cta{
    height: 42px;
    font-size: 14px;
    border-radius: 999px;
  }
}

@media (max-width: 900px){
  .pkg-grid{ 
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); 
    gap:12px;
  }
  .pkg-card{
    min-height:160px;
    padding:16px;
  }
  .pkg-card h4{ font-size:15px; }
  .pkg-card .price{ font-size:16px; }
  .pkg-card .features{ font-size:12px; line-height:1.5; }
}

@media (max-width: 960px){
  .ob-types-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .pkg-grid{ 
    grid-template-columns: repeat(2, 1fr); 
    gap:10px;
  }
  .pkg-card{
    min-height:150px;
    padding:14px;
  }
  .pkg-card h4{ font-size:14px; margin:0 0 8px; }
  .pkg-card .price{ font-size:15px; margin:0 0 10px; }
  .pkg-card .features{ font-size:11px; line-height:1.4; margin:0 0 10px; }
  .pkg-card .btn{ padding:8px 12px; font-size:13px; }
  .ob-types-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 768px){
  /* 保留对话框与网格的响应式，步骤栅格在上方已经覆盖 */
}
@media (max-width: 520px){
  .ob-steps{ grid-template-columns:1fr; }
}