:root{
  --flow-bg: var(--ui-bg, #fff);
  --flow-soft: var(--ui-bg-soft, #f8fafc);
  --flow-text: var(--ui-text, #0f172a);
  --flow-muted: var(--ui-muted, #64748b);
  --flow-border: var(--ui-border, #e5e7eb);
  --flow-shadow: 0 12px 28px -12px rgba(2,6,23,.18);
  --flow-accent: var(--accent, #0fa084);
  --flow-accent-ink: var(--accent-ink, #0b735f);
}

.onboarding-flow{

/* max-width: 1200px; */

background-color: #fff3ea;

margin: auto;
}
.onboarding-wrap {
      /* margin: 38px auto; */
      max-width: 1200px;
      padding: 18px 16px;
      border-radius: 16px;
      min-height: 100svh;
      display: grid;
      align-content: center;
      justify-items: stretch;
      row-gap: 12px;
      /* background-color: #ffffff; */
      margin: auto;
}
.flow-heading{ 
  margin: 0 0 12px; 
  color: var(--flow-text); 
  text-align: center;
}
.flow-nav{
  /* margin-top: 10px; */
  /* display: flex; */
  /* gap: 10px; */
  /* flex-wrap: wrap; */
  justify-content: center;
  /* margin-top: 12px; */
  /* background-color: #ffffff; */
  /* padding: 10px; */
  /* border: 1px solid; */
  /* margin-top: 40px; */
  /* padding-top: 8px; */
  /* margin-bottom: 34px; */
  /* background-color: beige; */
  border: 1px solid #b7b7b7;
  border-radius: 99px;
  display: flex;
  align-items: center;
  padding: 3px;
  background-color: #ffffff5e;
}
.flow-tab{
  appearance: none;
  background: transparent;
  border: 0;
  color: #0f172a; /* 未选中：黑色文字，无背景 */
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  position: relative;
}
.flow-tab:hover{ color:#111827; }
.flow-tab.is-active{
  background: #f99c52; /* 选中：黑底白字 */
  color: #000000;
  border-radius: 999px;
  font-weight: 600;
}

.flow-grid{ 
  display:grid; 
  grid-template-columns: 1fr; 
  gap: 12px; 
  width: 100%;
}

/* 风险须知容器（展示在面板顶部） */
.risk-box{
  background: var(--flow-soft);
  border: 1px solid var(--flow-border);
  border-radius: 10px;
  padding: 12px 14px;
  box-shadow: var(--shadow-sm, 0 2px 6px rgba(2,6,23,.06));
}
.risk-head{ display:flex; align-items:center; gap:8px; margin-bottom: 6px; }
.risk-title{ font-weight: 700; color: var(--flow-text); }
.risk-body{ color: var(--flow-muted); font-size: 14px; }
.risk-body p{ margin: 6px 0; }
.risk-body ul{ margin: 6px 0 6px 18px; }

.flow-step{
  position: relative;
  background: #ffffff;
  /* border: 1px solid #b0b0b0; */
  border-radius: 14px;
  padding: 14px 14px 12px 14px;
  /* box-shadow: var(--shadow-sm, 0 2px 6px rgba(2,6,23,.06)); */
  transition: transform .12s ease, box-shadow .18s ease, border-color .12s ease;
  height: auto;
}
.flow-step:hover{ 
  transform: translateY(-2px); 
  box-shadow: var(--flow-shadow);
  border-color: color-mix(in srgb, var(--flow-border) 30%, var(--flow-accent) 70%);
}

.step-top{
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
    margin-bottom: 13px;
    }
.step-index{ 
      width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    /* box-shadow: 0 6px 16px -6px var(--flow-accent); */
    background-color: #000000;
}
.step-icon{ 
      width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border-radius: 10px; */
    /* background: var(--flow-soft); */
    /* border: 1px solid var(--flow-border); */
    /* box-shadow: 0 3px 10px rgba(2,6,23,.06); */
    overflow: hidden;
}
.step-icon img{     width: 25px;
    height: 25px;
    display: block; }
.step-icon svg{ width: 25px; height: 25px; color: var(--flow-accent); }
.step-title{
  margin: 8px 0 4px;
  font-size: 18px;
  font-weight: 600;
  color: var(--flow-text);
}
/* 撤回：标题仍在下一行显示 */
.step-desc{ 
  margin: 0; 
  color: var(--flow-muted); 
  font-size: 13px; line-height: 1.5; 
}
.step-link{ 
  display:inline-block; margin-top: 8px; 
  font-size: 13px; text-decoration: none; 
  color: var(--flow-accent); 
}
.step-link:hover{ text-decoration: underline; }

/* Flow 区域：当步骤描述里包含 <ul><li>…</li></ul> 时，用带 xmlns 的 SVG 勾号替换默认圆点 */
/* 恢复：不干预 flow 区域列表的默认样式（撤回此前误加的勾号） */

@media (min-width: 640px){
  .flow-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  
  .flow-grid{ grid-template-columns: repeat(4, 1fr); gap: 14px; }
  .flow-nav{
    margin-top: 0;
    /* padding-top: 8px; */
    margin-bottom: 34px;
    /* background-color: beige; */
    border: 1px solid #eaeaea;
    border-radius: 99px;
    display: flex;
    align-items: center;
    padding: 10px;
    background-color: #ffffffa1;}
  /* 让面板（标题+步骤）在第一行垂直/水平居中，nav 保持贴底 */
  .flow-panel{
    display: grid;
    align-content: center;
    justify-items: center;
    min-height: 100%;
    row-gap: 12px;
  }
}

/* 小屏：当内容超出视口时，顶部对齐，避免居中造成挤压 */
@media (max-width: 560px){
  .onboarding-flow{ align-content: start; }
  .why .why-title{font-size: 26px;font-weight: 500;}
  .flow-heading{font-size: 26px;font-weight: 400;}
}